/* LAST UPDATED: 9-28-2021 */
/* importing in Google Lato font - used in for most text on pages, progress meter, etc. */
@import url('https://fonts.googleapis.com/css?family=Lato');
/* Open Sans being used for AW ecommerce screens - e.g., footer text */
 @import url('https://fonts.googleapis.com/css?family=Open+Sans');
/* Reset styles to make apa.org look good with Bootstrap 3 */  
.container, .breadcrumbs .container, .header .container{margin:0 auto;width:100%;max-width:1232px;}/* the width was set to 1232px for some reason, and this set up the Standard Footer to make the pages have a horizontal scrollbar, so "fix" that .container style on all CSS files if you see it, change it to width:100%; */
.breadcrumbs{font-size:1.7em;} /* was 1.4em but that looked too small to read */
nav.topnav{line-height:2.2em;}
/* global3.css overrides - being used in MyAPA screens */
header .APAcontainer{max-width:1200px;margin:0 auto;}
.breadcrumbs .APAcontainer {max-width:1200px;margin:0 auto;}
.btn {background: #fff; color: inherit; font-size: inherit; font-weight: normal;}
h4{padding-top:22px;padding-bottom:10px;}
h5{padding-bottom:12px;}
/* **************** BOOTSTRAP OVERRIDES ************** */
.btn-group{padding-left:24px;margin-top:8px;margin-bottom:8px;} /* to indent the button group radio button sections */
.nav-tabs > li > a{font-weight:bold;} /* bolding the tabs so they are more visible */
/* custom codes for formatting - BS overrides */
.form-control{border:2px solid #ccc;outline:none;color:#666;line-height:14px;font-size:14px;height:40px;}/* to match newer PN and convention login screen styles */
.form-control:focus{box-shadow: 0 0 5px rgba(0, 151, 214, 0.8); border: 2px solid rgba(0, 151, 214, 0.8);}
label{font-weight:normal;padding-top:12px;font-size:16px;color:#333;}/* overriding the font-weight of 700 for label, which is being used for the labeling control for the Quantity input field on the cart page, also used on top of all input fields; Also, took out text-transform:capitalize; since it was making jQuery validation labels, including mini-note validation, look strange */
/* styles for standardFooter to be sticky at bottom of screen */
body{display:flex;min-height: 100vh;flex-direction: column;color:#333;}/* flex styles to make footer be sticky at bottom */
footer{bottom:0;margin-bottom:0;font-size:1.6em;flex-shrink:0;}/* flex styles to make footer be sticky at bottom */
#mainBodyContainer{flex: 1 0 auto;}/* flex styles to make footer be sticky at bottom */
/* custom styles */
#mainBodyContainer{font-family: Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size: 16px;line-height: 1.42857143;height: 100%;}
.thinDivider{border-top: 1px solid #d1d1d1;}
/* getting fontawesome next and previous icons inside form input "buttons", then use https://fortawesome.github.io/Font-Awesome/cheatsheet/ for unicode inside input value -- commenting this out since not using icons in any of the submit button on new design pages, revisit this later */
/* input[type="submit"]{font-family: FontAwesome, Arial, Helvetica, Sans-serif;} */
input[type="submit"]{font-family: Fontawesome, "ProximaNova","Helvetica Neue",Helvetica,Arial,sans-serif;}
/* giving the modals some bottom margin so on mobile the bottom buttons are reachable */
.modal-dialog{margin-bottom:40px;}
/* BS form hacks */
@media(max-width:768px){
    label{
        padding-bottom:6px;
}}
/* ********** BOOTSTRAP EXTENSIONS ************* */
/* custom small hack for col-xs-* with BS grid, being used for Cart Card display - see https://stackoverflow.com/questions/38374580/bootstrap-3-different-grid-for-a-screen-resolution-of-480px-or-less */
@media (max-width: 480px) {
  .col-xs-6 {
    width: 100% !important;
}}
/* *********Extending BS3 grid system with xxs breakpoint (320px) - see https://stackoverflow.com/questions/19592968/bootstrap-3-breakpoints-and-media-queries ********** */
.col-xxs-12, .col-xxs-11, .col-xxs-10, .col-xxs-9, .col-xxs-8, .col-xxs-7, .col-xxs-6, .col-xxs-5, .col-xxs-4, .col-xxs-3, .col-xxs-2, .col-xxs-1 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
  }
.visible-xxs {
  display:none !important;
}
@media only screen and (min-width:320px) and (max-width:479px) {
  .visible-xxs {
    display: block !important;
  }
  .visible-xs {
    display:none !important;
  }
  .hidden-xs {
    display:block !important;
  }
  .hidden-xxs {
    display:none !important;
  }
  .col-xxs-12 {
    width: 100%;
  }
  .col-xxs-11 {
    width: 91.66666667%;
  }
  .col-xxs-10 {
    width: 83.33333333%;
  }
  .col-xxs-9 {
    width: 75%;
  }
  .col-xxs-8 {
    width: 66.66666667%;
  }
  .col-xxs-7 {
    width: 58.33333333%;
  }
  .col-xxs-6 {
    width: 50%;
  }
  .col-xxs-5 {
    width: 41.66666667%;
  }
  .col-xxs-4 {
    width: 33.33333333%;
  }
  .col-xxs-3 {
    width: 25%;
  }
  .col-xxs-2 {
    width: 16.66666667%;
  }
  .col-xxs-1 {
    width: 8.33333333%;
  }
  .col-xxs-pull-12 {
    right: 100%;
  }
  .col-xxs-pull-11 {
    right: 91.66666667%;
  }
  .col-xxs-pull-10 {
    right: 83.33333333%;
  }
  .col-xxs-pull-9 {
    right: 75%;
  }
  .col-xxs-pull-8 {
    right: 66.66666667%;
  }
  .col-xxs-pull-7 {
    right: 58.33333333%;
  }
  .col-xxs-pull-6 {
    right: 50%;
  }
  .col-xxs-pull-5 {
    right: 41.66666667%;
  }
  .col-xxs-pull-4 {
    right: 33.33333333%;
  }
  .col-xxs-pull-3 {
    right: 25%;
  }
  .col-xxs-pull-2 {
    right: 16.66666667%;
  }
  .col-xxs-pull-1 {
    right: 8.33333333%;
  }
  .col-xxs-pull-0 {
    right: auto;
  }
  .col-xxs-push-12 {
    left: 100%;
  }
  .col-xxs-push-11 {
    left: 91.66666667%;
  }
  .col-xxs-push-10 {
    left: 83.33333333%;
  }
  .col-xxs-push-9 {
    left: 75%;
  }
  .col-xxs-push-8 {
    left: 66.66666667%;
  }
  .col-xxs-push-7 {
    left: 58.33333333%;
  }
  .col-xxs-push-6 {
    left: 50%;
  }
  .col-xxs-push-5 {
    left: 41.66666667%;
  }
  .col-xxs-push-4 {
    left: 33.33333333%;
  }
  .col-xxs-push-3 {
    left: 25%;
  }
  .col-xxs-push-2 {
    left: 16.66666667%;
  }
  .col-xxs-push-1 {
    left: 8.33333333%;
  }
  .col-xxs-push-0 {
    left: auto;
  }
  .col-xxs-offset-12 {
    margin-left: 100%;
  }
  .col-xxs-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-xxs-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-xxs-offset-9 {
    margin-left: 75%;
  }
  .col-xxs-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-xxs-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-xxs-offset-6 {
    margin-left: 50%;
  }
  .col-xxs-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-xxs-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-xxs-offset-3 {
    margin-left: 25%;
  }
  .col-xxs-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-xxs-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-xxs-offset-0 {
    margin-left: 0%;
  }
}
/************* ADDITONAL STYLES - NOT SURE IF USED SPECIFICALLY IN ECOMMERCE SCREENS *************** */
/* adapted from current researchAlert.css */
.dividerWithMargins {border-bottom: 1px solid #adadad; margin-bottom: 12px; margin-top: 12px; width: 100%;}
.dividerWithMarginsBig {border-bottom: 1px solid #adadad; margin-bottom: 20px; margin-top: 20px; width: 100%;}
.dividerBetweenTables {border-bottom: 3px solid #ebf4fb; margin-bottom: 36px; margin-top: 20px; width: 100%;}
/* styling span link like an anchor */
.spanLink{color:#005499;cursor:pointer;text-decoration:underline;transition:color 0.1s linear 0s;}
.spanLink:hover{text-decoration:none;}
/* CUSTOM STYLES UNIQUE TO ECOMMERCE SCREEN REDESIGN */
.helpText{color: #737373;font-size:14px;line-height:16px;margin:0 0 10px 0;padding: 0 8px 0 1px;}
.paymentImg{height:20px;padding:0 10px 0 0;}
/* putting space between radio button groups */
.btn-group .btn-primary{margin:6px 10px 6px 0;}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary{background-color:#2853b4;}
.tab-content{background-color: #fefefe;padding: 20px;}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover{background-color: #fefefe;}
/* global3.css overrides - NOT currently being used in MyAPA screens */
.horizontalGallery .APAcontainer{position:relative; margin:0 auto; width:100%; overflow:hidden;padding:15px 0 0;}
.horizontalGallery .APAcontainer .shortDescription {padding-bottom: 25px; margin-top: -7px;}
.featureRichItem .slider .APAcontainer {position:relative;padding:0;margin:0;background-color:#F1F1F1;width:100%; height:235px; overflow:hidden;}
.carousel .APAcontainer{position:relative;padding:0;margin:0;width:100%;overflow:hidden;border:1px solid #999;-moz-box-sizing:border-box; box-sizing:border-box;}
/* rwd.css overrides - being used in MyAPA screens */
@media screen and (max-width: 995px){
footer, .rwd-footer, .mega-footer .APAcontainer {width:100%;}
} 
/* rwd.css overrides - NOT currently being used in MyAPA screens */
@media screen and (max-width: 767px){
.featureRichItem .slider .APAcontainer{height:430px; background-color:#E4E4E4;min-width:300px;}
}
@media screen and (max-width: 480px){
.featureRichItem .slider .APAcontainer{background-color:#F1F1F1;}
}
@media screen and (max-width: 405px){
	.featureRichItem .slider .APAcontainer{height:390px;}
}
/* making top nav fit in all screen widths by reducing font size incrementally */
@media screen and (max-width: 1330px){
    nav.topnav menu{font-size:12.4px;}
}
@media screen and (max-width: 1260px){
    nav.topnav menu{font-size:11.4px;}
}
@media screen and (max-width: 1200px){
    nav.topnav menu{font-size:10.8px;}
}
/* changing search box width at 1040px and below so it doesn't break layout */
@media screen and (max-width: 1040px){
    header .search form .inputsearch{width:330px;}
}
/* changing search box width at 368px and below so it's usable */
@media screen and (max-width: 368px){
    header .search form .inputsearch{width:280px;}
}
@media screen and (max-width: 340px){
    header .search form .inputsearch{width:240px;}
}
#mainBodyContainer ul{padding-left: 20px; list-style:disc !important;} /* no longer using .apaBullets styles, also scoping this out to main container so footer not affected */
#mainBodyContainer ul li {padding: 6px 0;font-size:14px;}/* Note: default was 16px for the list items, but changed to 14px per Addresses specs, note that this font-size also affects the links in the boxes, such as "Return Policy", etc. */
.alertLinks{padding-left:20px;}
.toggleAnchor{color: #005499;text-decoration: none; cursor: pointer;}
.toggleAnchor:hover{color: #428bca;text-decoration: none; cursor: pointer;}
.anchorListItem{padding-top: 10px; padding-bottom: 10px; padding-left: 10px;} /* was padding-left: 25px; */
/* defining help-blockRegular since help-block being used by validation messages */
.help-blockRegular{color:#737373; display:block; margin-bottom:10px; margin-top:5px;}
.requiredAsterisk {color: #f00; font-size: 10px; opacity: 0.6; padding-left: 4px;}
/* **************** PROGRESS WIZARD **************** */
.flexer,.progress-indicator{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;}
.no-flexer,.progress-indicator.stacked{display:block;}
.no-flexer-element{-ms-flex:0;-webkit-flex:0;-moz-flex:0;flex:0;}
.flexer-element,.progress-indicator>li{-ms-flex:1;-webkit-flex:1;-moz-flex:1;flex:1;}
.progress-indicator{margin:0 0 1em;padding:0;font-size:80%;text-transform:uppercase;}
.progress-indicator>li{list-style:none;text-align:center;width:auto;padding:0 !important;margin:0;position:relative;text-overflow:ellipsis;color:#676767;display:block;} /* Note: The padding: 0 !important is there to override the padding:6px 0; used for the #mainBodyContainer ul li style (for bullets padding) */
.progress-indicator>li.completed,.progress-indicator>li.completed .bubble{color:#11551b;}
.progress-indicator>li .bubble{border-radius:1000px;width:40px;height:40px;background-color:#ddd;display:block;margin:0 auto .5em;}
.progress-indicator>li .bubble:after,.progress-indicator>li .bubble:before{display:block;position:absolute;top:9px;width:100%;height:3px;content:'';background-color:#ddd;}
.progress-indicator>li.completed .bubble,.progress-indicator>li.completed .bubble:after,.progress-indicator>li.completed .bubble:before{background-color:#d4edda;border-color:#d4edda;}
.progress-indicator>li .bubble:before{left:0;}.progress-indicator>li .bubble:after{right:0;}
.progress-indicator>li:first-child .bubble:after,.progress-indicator>li:first-child .bubble:before{width:50%;margin-left:50%;}
.progress-indicator>li:last-child .bubble:after,.progress-indicator>li:last-child .bubble:before{width:50%;margin-right:50%;}
.progress-indicator>li.active,.progress-indicator>li.active .bubble{color:#003a70;}/* background-color was #337ab7 but changing to match main APA brand colors */
.progress-indicator>li.active .bubble,.progress-indicator>li.active .bubble:after,.progress-indicator>li.active .bubble:before{background-color:#003a70;border-color:#122a3f;}/* background-color was #337ab7 but changing to match main APA brand colors */
.progress-indicator>li a:hover .bubble,.progress-indicator>li a:hover .bubble:after,.progress-indicator>li a:hover .bubble:before{background-color:#5671d0;border-color:#1f306e}
.progress-indicator>li a:hover .bubble{color:#5671d0}.progress-indicator>li.danger .bubble,.progress-indicator>li.danger .bubble:after,.progress-indicator>li.danger .bubble:before{background-color:#d3140f;border-color:#440605;}
.progress-indicator>li.danger .bubble{color:#d3140f;}
.progress-indicator>li.warning .bubble,.progress-indicator>li.warning .bubble:after,.progress-indicator>li.warning .bubble:before{background-color:#edb10a;border-color:#5a4304;}
.progress-indicator>li.warning .bubble{color:#edb10a;}
.progress-indicator>li.info .bubble,.progress-indicator>li.info .bubble:after,.progress-indicator>li.info .bubble:before{background-color:#5b32d6;border-color:#25135d;}
.progress-indicator>li.info .bubble{color:#5b32d6;}
.progress-indicator.stacked>li{text-indent:-10px;text-align:center;display:block;}
.progress-indicator.stacked>li .bubble:after,.progress-indicator.stacked>li .bubble:before{left:50%;margin-left:-1.5px;width:3px;height:100%;}
.progress-indicator.stacked .stacked-text{position:relative;z-index:10;top:0;margin-left:60%!important;width:45%!important;display:inline-block;text-align:left;line-height:1.2em;}.progress-indicator.stacked>li a{border:none;}
.progress-indicator.stacked.nocenter>li .bubble{margin-left:0;margin-right:0;}
.progress-indicator.stacked.nocenter>li .bubble:after,.progress-indicator.stacked.nocenter>li .bubble:before{left:10px;}
.progress-indicator.stacked.nocenter .stacked-text{width:auto!important;display:block;margin-left:40px!important;}
@media handheld,screen and (max-width:400px)
    {.progress-indicator{font-size:60%;}
}
/* custom style overrides for progress indicator */
/* since progress meter is done with <ul>, not giving this any padding-left like other <il>'s */
ul.progress-indicator{padding-left:0 !important;}
/* putting numbers inside circles */
.bubble{color:#000;font-size:20px;font-weight:400;z-index:9999;padding-top:6px;}/* z-index is for responsiveness with line, padding-top for centering # */
.whiteOverride{color:#fff !important;}/* used for white numbers in active bubbles */
/* making line in-between circles thicker, and placing in middle of bubbles with margin-top */
.progress-indicator > li .bubble::after, .progress-indicator > li .bubble::before {height:5px;margin-top:10px;z-index:-1;}
.progress-indicator{margin-top:20px; margin-bottom:20px;font-size:1.3em;}
/* hiding progress indicator labels at 760px and below */
@media only screen and (max-width: 760px) { 
    .progressLabel{display:none;}
}
/* ************ CUSTOM BUTTONS ************ */
/* .btn-primary-custom = DARK BLUE PRIMARY BUTTON - styles may need to be tweaked to match pattern library (e.g., border colors, hover colors, etc.) */
.btn-primary-custom{font-family: "ProximaNova","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 600; font-size: 14px; text-align: center; letter-spacing: 0.05em; text-transform: uppercase; background-color: #003a70;color: #fff; border-radius: 3px;padding-top:9px; min-height: 38px; transition: background 0.5s ease 0s; -webkit-transition: background 0.5s ease 0s; -moz-transition: background 0.5s ease 0s; -ms-transition: background 0.5s ease 0s;}
button.btn-primary-custom{padding-top:6px;}
.btn-primary-custom:hover, .btn-primary-custom:focus, .btn-primary-custom:active, .btn-primary-custom.active, .open .dropdown-toggle.btn-primary-custom{background-color: #15354f;color:#fff;}
.btn-primary-custom:active, .open .dropdown-toggle.btn-primary-custom{background-image: none;}
/* .btn-secondary-custom = GHOST BLUE WRITING SECONDARY BUTTON - styles may need to be tweaked to match pattern library (e.g., border/hover colors, etc.) */
.btn-secondary-custom{font-family: "ProximaNova","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 400; font-size: 14px; text-align: center; letter-spacing: 0.05em; text-transform: uppercase; background-color: #fff;color: #003a70; border: 1px solid #003a70; border-radius: 3px;padding-top:9px; min-height: 38px; transition: background 0.5s ease 0s; -webkit-transition: background 0.5s ease 0s; -moz-transition: background 0.5s ease 0s; -ms-transition: background 0.5s ease 0s;}
.btn-secondary-custom:hover, .btn-secondary-custom fa:hover, .btn-secondary-custom:focus, .btn-secondary-custom:active, .btn-secondary-custom.active, .open .dropdown-toggle.btn-secondary-custom{color: #fff;background-color: #003a70;}
.btn-secondary-custom:active, open .dropdown-toggle.btn-secondary-custom{background-image: none;}
/* .btn-success-custom = GREEN SUCCESS BUTTON, used for "Selected Address" radio button checked state on Addresses screen - styles may need to be tweaked to match pattern library (e.g., border/hover colors, etc.) */
.btn-success-custom{font-family: "ProximaNova","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 600; font-size: 14px; text-align: center; letter-spacing: 0.05em; text-transform: uppercase; background-color: #00866d;color: #fff; border-radius: 3px;padding-top:9px; min-height: 38px; transition: background 0.5s ease 0s; -webkit-transition: background 0.5s ease 0s; -moz-transition: background 0.5s ease 0s; -ms-transition: background 0.5s ease 0s;}
.btn-success-custom:hover, .btn-success-custom:focus, .btn-success-custom:active, .btn-success-custom.active, .open .dropdown-toggle.btn-success-custom{background-color: #036d59;color:#fff;}
.btn-success-custom:active, .open .dropdown-toggle.btn-success-custom{background-image: none;}
/* .btn-cta-ecommerce = YELLOW CTA BUTTON - styles may need to be tweaked to match pattern library (e.g., border colors, hover colors, etc.) */
.btn-cta-ecommerce{font-family: "ProximaNova","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 700; font-size: 16px; text-align: center; letter-spacing: 0.05em; text-transform: uppercase; background-color: #ffcd06;color: #333; border-radius: 3px;padding-top:14px; min-height: 50px; transition: background 0.5s ease 0s; -webkit-transition: background 0.5s ease 0s; -moz-transition: background 0.5s ease 0s; -ms-transition: background 0.5s ease 0s;}
input.btn-cta-ecommerce[type="submit"]{padding-top:6px;}/* for Addresses form, using an "input" instead of button anchor, which requires different padding-top for some reason */
.btn-cta-ecommerce:hover, .btn-cta-ecommerce:focus, .btn-cta-ecommerce:active, .btn-cta-ecommerce.active, .open .dropdown-toggle.btn-cta-ecommerce{background-color: #e7ba09;}
.btn-cta-ecommerce:active, .open .dropdown-toggle.btn-cta-ecommerce{background-image: none;}
/* .btn-textbutton = TEXT BUTTON - to be reviewed by UX Team - added with Edit Address screen */
.btn-textbutton{font-family: "ProximaNova","Helvetica Neue",Helvetica,Arial,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;transition: background 0.5s ease 0s; -webkit-transition: background 0.5s ease 0s; -moz-transition: background 0.5s ease 0s; -ms-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;}
/* .btn-dismiss = DISMISS BUTTON (e.g., for "Cancel" buttons on modals) - styles may need to be tweaked to match pattern library (e.g., border colors, hover colors, etc.) */
.btn-dismiss{font-family: "ProximaNova","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 700; font-size: 14px; text-align: center; letter-spacing: 0.05em; text-transform: uppercase; background-color: #ffffff;color: #333; border: 1px solid #cccccc; border-radius: 3px;padding-top:9px; min-height: 38px; transition: background 0.5s ease 0s; -webkit-transition: background 0.5s ease 0s; -moz-transition: background 0.5s ease 0s; -ms-transition: background 0.5s ease 0s;}
.btn-dismiss:hover, .btn-dismiss:focus, .btn-dismiss:active, .btn-dismiss.active, .open .dropdown-toggle.btn-dismiss{background-color: #f1f1f1;border: 1px solid #333333;}
.btn-dismiss:active, .open .dropdown-toggle.btn-dismiss{background-image: none;}
/* ************ CUSTOM STYLES ************* */
/* to otherwise force underlines and hover no underline, such as jQuery validation Privacy Statement link in Create an Account screen validation */
a.validationAnchor{text-decoration:underline !important;}
a.validationAnchor:hover{text-decoration:none !important;color:#333 !important;}
i.darkGrayIcon{color:#a8a8a8;}/* used for "shopping cart is empty" icon color */
.dividerLine{border:1px solid #d1d1d1;margin:15px 0;}
/* CSS to do expand/collapse icon switch on BS toggle https://medium.com/@disjfa/animate-a-open-and-closing-element-using-bootstraps-collapse-79540f641a8e */
.toggledSection .fa {transition: .3s transform ease-in-out;cursor:pointer;color:#005499;}
.toggledSection span[aria-expanded="true"] .fa {transform: rotate(180deg);}
/* 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 */
/* CUSTOM HEADINGS */
/* customHeading 1 = used for Promotional Code */
.customHeading1{font-size:1.2em;line-height:1.2em;margin:-20px 10px -18px 15px;}
/* .customHeading2 = used for labels such as Free Shipping statement in cart */
.customHeading2{font-size:18px;font-weight:400;}
/* .customHeading3 = used for custom login screen short blurb */
.customHeading3{font-size:16px;font-weight:400;}
.customHeading3 p{margin-bottom:10px;}
/* .boldHeading1 = used for cart Order Subtotal, etc. */
.boldHeading1{font-size:22px;font-weight:700;}
/* .boldHeading2 = used for "$8 = 1 BOOK", etc. */
.boldHeading2{font-size:17px;font-weight:700;}
/* .boldHeading3 = used for mini-cart Subtotal line, etc. */
.boldHeading3{font-size:15px;font-weight:700;}
/* .capitalHeading used for "SHIPPING ADDRESS" and "BILLING ADDRESS" labels, etc. */
.capitalHeading{font-size:16px;letter-spacing:1.5px;color:#707070;margin-bottom:4px;text-transform:uppercase;}
/* .cartCardHeading used for Cart page cart headings, similar to .capitalHeading */
.cartCardHeading{font-size:16px;letter-spacing:1.5px;color:#707070;text-transform:uppercase;margin:15px 35px;}
/********* Custom Checkboxes and Radio Buttons code - https://www.w3schools.com/howto/howto_css_custom_checkbox.asp ****************/
/* ****** custom checkboxes ****** */
/*
<label class="checkboxContainer">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>
*/
 /* 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);
}
/* ***** radio buttons ***** */
/*
<label class="radioContainer">One
  <input type="radio" checked="checked" name="radio">
  <span class="customRadio"></span>
</label>
*/
 /* customize the label (the container) */
.radioContainer {
  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;
}
 /* for better positioning of the lable.radioContainer text - with the chekboxes, they are all in alerts making their alignment different */
.radioContainer span {
  top: 11px;
}
/* hide the browser's default radio button */
.radioContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
/* create a custom radio button */
.customRadio {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  background-color: #fff;/* was #eee */
  border: 1px solid #333;/* added */
}
/* on mouse-over, add a grey background color */
.radioContainer:hover input ~ .customRadio {
  background-color: #d1d1d1;/* was #ccc */
}
/* when the radio button is checked, add a blue background */
.radioContainer input:checked ~ .customRadio {
  background-color: #2196F3;
}
/* create the indicator (the dot/circle - hidden when not checked) */
.customRadio:after {
  content: "";
  position: absolute;
  display: none;
}
/* show the indicator (dot/circle) when checked */
.radioContainer input:checked ~ .customRadio:after {
  display: block;
}
/* style the indicator (dot/circle) */
.radioContainer .customRadio:after {
  top: 7px;
  left: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
}
/* ****************** ALERT STYLES ******************* */
/* general alert box styles */
.alertBox{margin: 20px 0;padding: 20px;font-size: 18px;min-height: 20px;border-radius: 5px;box-shadow: inset 0 1px 1px rgba(0,0,0,.05);}
.smallAlert{padding: 10px !important; font-size: 14px !important;}
.alertBox a{text-decoration:underline; transition: background 0.5s ease 0s; -webkit-transition: background 0.5s ease 0s; -moz-transition: background 0.5s ease 0s; -ms-transition: background 0.5s ease 0s;}
.alertBox a:hover{text-decoration:none;}
/* danger alert styles - red alert */
.dangerAlert{color: #721c24;background-color: #f8d7da;border: 1px solid #f5c6cb;}
.dangerAlert i{color: #721c24;}
/* warning alert styles - yellow alert */
.warningAlert{color: #856404;background-color: #fff3cd;border: 1px solid #ffeeba;}
.warningAlert i{color: #856404;}
/* info alert styles - blue alert */
.infoAlert{color: #004085;background-color: #f6fdff;border: 1px solid #bbd0f2;}
.infoAlert i{color: #004085;}
/* info "light" alert styles - light alert */
.infoLightAlert{color: #565656;background-color: #f4f4f4;border: 1px solid #ccc;}
.infoLightAlert i{color: #565656;}
/* success alert styles - green alert */
.successAlert{color: #155724;background-color: #d4edda;border: 1px solid #c3e6cb;}
.successAlert i{color: #155724;}
/* ************** NOTE STYLES - adapted from myAPAcustomCSS.css - used for "warning" alerts ****************** */
.note{font-family: Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;border-left: 3px solid #e5e5e5;border-radius: 0 !important;margin: 0 0 20px;padding: 0 30px 22px;}
.littleNote{padding: 0 30px 22px !important;}
/* .miniValidationAlert used for mini alert for Billing Address fields opened up and order status note on Thanks page */
.miniValidationNote{margin-top:10px;padding: 8px 20px 22px !important;}
.miniValidationNote h4{padding: .8em 0 0.1em;font-size: 16px;line-height: 22px;}
.note h1, .note h2, .note h3, .note h4{margin-top: 0;}
.note p:last-child{margin-bottom: 0;}
.note-alert{font-size: 16px;font-weight: 500;background-color: #fcf8e3;border-left-color: #8a6d3b;}
.note-alert .box-heading{font-family: Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;color: #8a6d3b;}
.note-alert .centeredHeading{font-size: 26px;padding-top: 14px;text-align: center;}
.note-alert p, .note-alert li{font-size: 16px;color: #8a6d3b;}
.note-alert ul li{font-size:16px !important;}/* needing to override the #mainBodyContainer li font-size so .note-alert li's look consistent */
/* ************ PORTLET ("CARD") STYLES ************* */
.portlet{border: 1px solid #d1d1d1;clear: both;margin-bottom: 25px;margin-top: 0;padding: 0;border-radius: 5px !important; -webkit-border-radius: 5px !important; -moz-border-radius: 5px !important;}
.portlet.portletBox > .portlet-header{margin-bottom: 0;padding: 20px 15px;background-color: inherit;}
.portlet > .portlet-header{margin-bottom: 15px;background: #fcfcfc;border-bottom: 1px solid #e5e5e5;}
.portlet > .portlet-header:before{content: "";display: table;line-height: 0;}
.portlet > .portlet-header:after{ content: "";display: table;line-height: 0;clear: both;}
.portlet > .portlet-header .caption{float: left;display: inline-block;font-size: 18px;line-height: 18px;padding: 0;font-weight:normal;}
.portlet > .portlet-header .caption i{float: left;margin-top: 4px;display: inline-block !important;font-size: 13px;margin-right: 5px;color: #999999;}
.portlet .portlet-body{background: #fff;padding: 15px;clear: both;background-color: inherit;border-radius: 5px !important; -webkit-border-radius: 5px !important; -moz-border-radius: 5px !important;}
/* blue portlet styles and styles for the portlet toggle used in Book Donation design on Cart/Thank You page */
.portlet.portletBox > .portlet-header.bluePortletHeader, .portlet .portlet-body.bluePortletBody{background-color: #f6fdff;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;}
.portlet.portletBox > .portlet-header.bluePortletHeader{border-bottom: 1px solid #bbd0f2;border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-left-radius: 0;border-bottom-right-radius: 0;}
.portlet-body h2{font-family: Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1.8em;margin-bottom:12px;}/* added with redesigned Link Accounts screens */
.portlet-body p{margin-bottom:12px;}/* added with redesigned Link Accounts screens */
.portlet.bluePortlet{border: 1px solid #bbd0f2;}
.thinDivider.blueThinDivider{border-top: 1px solid #bbd0f2;}
/* portlet card styles specific to the bottom card toggle design */
.portlet-body.noBottomPadding{padding-bottom: 0 !important;}
.fullCardToggleAnchor{display: block;padding: 10px 0;}
.fullCardToggleAnchor:hover{background-color:#f1f1f1;cursor:pointer;}
/* ********* BOOTSTRAP 3 MODAL STYLES ********** */
.modal .close{font-size:40px;}
.modal-title{font-size:35px;padding:0;}
.modal-body{font-family: Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:18px;line-height:28px;}
.modal-body a{text-decoration: underline;}
.modal-body a:hover{text-decoration: none;}
/* ************ ECOMMERCE SCREEN SPECIFIC STYLES ************ */
/* theme colors */
.darkerBlueTheme{color:#005499;}/* used for heading numbers, progress meter active bubble, icons in .infoAlert, edit pencil icon, etc. */
.lightGreenTheme{color:#96d8ac;}/* used for light green completed bubble, etc. */
.greenFreeShipping{color:#0e6d2e;}/* used for free shipping statements on cart and in Ordering & Shipping Info card */
.redText{color:#b00606;}/* used for database expiration message and other cart alert texts */
/* h1 styles but blue, being used for leading numbers before h1's on ecommerce screens */
.headingNumber{font-family: "QuatroSlab", Georgia, Times, "Times New Roman", serif;font-weight: 400;font-size: 2.5em;line-height: 1.1em;color: #005499;border: none;padding: 0 0 0.1em;margin: 0;margin-top: 0px;clear: both;outline: 0;vertical-align: baseline;background: transparent;font-weight:bold;}
.row.extra-bottom-margin{margin-bottom:24px;}
/* hack to fix stacking of Shipping Address and Billing Addresses on Payment & Review and Thank You screens, also used on Look Up Account Email/Username field stack */
@media(max-width:991px){
    .fixOnStack991{
        margin-bottom:24px;
}}
.optionalText{font-size:12px;text-transform:lowercase;}
/* ************************* CART SCREEN ***************************/
/* top "Start Checkout" button */
@media screen and (max-width: 400px){
    .fullWidthButton400CartStack, .fullWidthButton400CartButton{width:100%;}
    .fullWidthButton400CartStack{margin-top:20px;}
}
/* bottom "Continue Shopping" and "Start Checkout" buttons */
.alignLeftThen100Width{float: left;}
.alignRightThen100Width{float: right;}
@media screen and (max-width: 760px){
    .fullWidthButton760{width:100%;}
    .alignLeftThen100Width, .alignRightThen100Width{float:none;}
    .bottomCheckoutButtonStack{margin-top:30px;}
}
.cartCardCell{margin:20px;}
.cartBottomGraySection{margin-top: 8px;padding-top: 24px;padding-bottom: 14px;background-color: #f1f1f1;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;}
/* manipulating space between cart item image and cart description to pull things closer at and in-between breakpoints */
.cartItemDescription{margin-left:-10px;}
@media only screen and (max-width: 1160px) and (min-width: 992px) {
    .cartItemDescription{
            margin-left: 20px;
}}
@media only screen and (max-width: 991px) and (min-width: 760px) {
    .cartItemDescription{
            margin-left: -100px;
}}
@media only screen and (max-width: 759px) and (min-width: 480px) {
    .cartItemDescription{
            margin-left: -20px;
}}
@media screen and (max-width: 479px){
    .cartItemDescription{
            margin-left:20px;
}}
.cartItemDescriptionMiniCart{margin-left:60px;}/* so the image and description don't run into each other in mini-cart */
.productTitle{font-size:20px;}/* used for cart product titles, which are actually anchors */
.productTitleSmall{font-size:15px;font-weight:700;}/* used for mini-cart product titles, such as on Addresses screen */
.productTitleBold{font-size:20px;font-weight:700;}/* used for book donation titles */
.cartText{font-size:16px;}/* used for Cart item bylines and description text */
.cartTextSmall{font-size:14px;}/* used for mini-cart bylines and description text */
.sponsorLogo{margin:10px 30px;max-width:90px;height:auto;}
/* manipulating sponsor logo on book donation section for realignment with 991px breakpoint */
@media screen and (max-width: 991px){
    .sponsorLogo{margin: 20px 0 0 0;}
}
/* CART RESPONSIVE STYLES */
/* custom breakpoint for double-coding of sales tax text on Payment & Review screen */
.screen-only991{display:block;}
.mobile-only991{display:none;}
@media screen and (max-width: 991px){
    .screen-only991{display:none;}
    .mobile-only991{display:block;}
}
/* custom breakpoint for "Update Quantity" > "Update" text link change for Cart Card */
.screen-only760{display:block;}
.mobile-only760{display:none;}
@media screen and (max-width: 760px){
    .screen-only760{display:none;}
    .mobile-only760{display:block;}
}
/* hiding cart card header on 760px and below */
@media screen and (max-width: 991px){
    .cardHeadingRow{display:none;}
}
/* 480px responsive stack styling for cart elements */
@media screen and (max-width: 480px){
    .cartItemDescription{
        margin-left: 20px;
        margin-top: -15px;
        width: 100%;}
}
/* book donation card responsive styling */
@media screen and (max-width: 991px){
    .bookDonationCard .portlet-body{text-align:center;}
    .fullWidthButton991{width:100%;}
    .margintop20at991{margin-top:20px;}/* added with Edit Address screen */
    .sponsorLogo{margin-left:10px;}
    .sponsorDescription{margin-left:20px;margin-right:20px;text-align:center;}
}
@media screen and (max-width: 650px){
    .sponsorDescription{text-align:left;}/* for readability */
}
/* manipulating space between book donation cover and Sponsor Description to pull closer when needed - Main Cart Page */
.sponsorDescription{margin-top:14px;margin-left:-58px;}
@media only screen and (max-width: 1190px) and (min-width: 992px) {
    .sponsorDescription{
            margin-left: -30px;
}}
@media screen and (max-width: 991px){
    .sponsorDescription{
        margin-left:20px;
        margin-right:20px;
}}
/* manipulating space between book donation cover and Sponsor Description to pull closer when needed - Thank You Page*/
.sponsorDescriptionThankYou{margin-top:14px;margin-left:-20px;}
@media only screen and (max-width: 1160px) and (min-width: 992px) {
    .sponsorDescriptionThankYou{
            margin-left: 20px;
}}
@media only screen and (max-width: 991px){
    .sponsorDescriptionThankYou{
        margin-left:20px;margin-right:20px;text-align:center;
}}
@media screen and (max-width: 650px){
    .sponsorDescriptionThankYou{text-align:left;}/* for readability */
}
/* ************ TAX LINE CHANGES (e.g., cart screen) *********** */
/* using this for the Order Subtotal heading, so it doesn't break in really small devices < 350px */
@media screen and (max-width: 350px){
    .twentyPxAt350{
        font-size: 20px !important;
}}
/* changing font sizes to smaller for the minicart */
#minicart .boldHeading1{font-size: 16px;}
#minicart .customHeading2{font-size: 16px;}
/* adding this since background colors on body were showing up on margin-top:10px */
#headerContentSlim{background-color:#fff;}
/* ************************* ADDRESSES SCREEN ***************************/
#minicart{min-width:330px;}/* so formatting of minicart in very small devices isn't cluttered, horizontal scroll bar shows up <330px */
.confirmOrderButtonText{text-align:left;clear:both;width:350px;padding-top:14px;font-size:14px;}
@media screen and (max-width: 760px){
    .confirmOrderButtonText{width:100%;}
}
/* specific styles for APA PsycNET Combo Package upsell card on Cart page */
.cardButtonAlignment{text-align:right;}
@media screen and (max-width: 991px){
    .cardButtonAlignment{
        text-align:center;
    }
    .mobileCartMarginTopAdjust{
        margin-top:-30px;
}}
.centerContentsHorizontallyAndVertically{
    display: flex;
    justify-content: center;
    align-items: center;
}
/* radio button card design used for "select shipping address" on Addresses screen */
label.fullWidth {
  width: 100%;
  font-size: 1rem;
}
/* making spans inside labels display as blocks since no divs allowed inside labels for HTML validation, just use span class="block" */
label.fullWidth span.block{display:block;}
.card-input-element+.card, .has-error + .card, .has-success + .card{
  /*height: calc(36px + 2*1rem);*/
  color: #005499;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 4px;
  border: 2px solid #ccc;
}
.card-input-element+.card:hover, .has-error + .card:hover, .has-success + .card:hover{
  cursor: pointer;
  background-color:#eee;
  border: 2px solid #005499;
}
.card-input-element:checked + .card, .selected .card{
  border: 2px solid #c3e6cb;
  background-color:#d4edda;
  -webkit-transition: border .3s;
  -o-transition: border .3s;
  transition: border .3s;
  content: '\f00c';
  color: #0e6d2e;
  font-family: 'FontAwesome';
  font-size: 24px;
  -webkit-animation-name: fadeInCheckbox;
  animation-name: fadeInCheckbox;
  -webkit-animation-duration: .7s;
  animation-duration: .7s;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.card-input-element:checked+.card::after, .selected .card::after {
  content: '\f00c';
  color: #0e6d2e;
  font-family: 'FontAwesome';
  font-size: 24px;
  -webkit-animation-name: fadeInCheckbox;
  animation-name: fadeInCheckbox;
  -webkit-animation-duration: .7s;
  animation-duration: .7s;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  top: 0;
  right: 5px;
}
@-webkit-keyframes fadeInCheckbox {
  from {
    opacity: 0;
    -webkit-transform: rotateZ(-5deg);/* this was -20deg here and below, but that was a lot of slant in the animation */
  }
  to {
    opacity: 1;
    -webkit-transform: rotateZ(0deg);
  }
}
@keyframes fadeInCheckbox {
  from {
    opacity: 0;
    transform: rotateZ(-5deg);
  }
  to {
    opacity: 1;
    transform: rotateZ(0deg);
  }
}
.addressField{font-family: Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:18px;margin-bottom:5px;}
.radioCard{font-family: Lato,"Helvetica Neue",Helvetica,Arial,sans-serif !important;padding: 20px;margin: 6px 0;position:relative;}/* added the font family since Addresses screen using pseudo checkmark was making lavel and placeholder text be FontAwesome when card green-selected */
.radioCard:hover{background-color:#eee;cursor:pointer;}/* note: the position relative goes with the position absolute on the ::after to get the checkmark in the top-right of the div */
.radioCard .help-block{font-size:16px;}
/* hiding actual radio button away from screen */
input[type="checkbox"].hideOffScreen,input[type="radio"].hideOffScreen{position: absolute;left: -9999px;}/* Note: Don't set a top: -9999 since it will cause a "jump" when clicking on the radio sections in Chrome/Safari */
/* to swap the .deliverButton and .selectedAddressButton with radio button card checked state */
label .selectedAddressButton, label.selected .deliverButton{display: none;}
label.selected .selectedAddressButton, label .deliverButton{display: inherit;}
/* styling the .deliverButton */
.deliverButton{margin:10px 0 5px;}
@media screen and (max-width: 991px){
    .deliverButton, .selectedAddressButton{margin-bottom:15px;
}}
/* ************************* LOGIN SCREEN ***************************/
input.btn-primary-custom[type="submit"]{padding-top:7px;}/* for Login forms, using an "input" instead of button anchor, which requires different padding-top for some reason */
.smallAnchor{font-size:13px;}/* used for "forgot password" link on Guest Checkout login form */
.openIDText{font-size:12px;}/* used for Google OpenID instructions */
/* light gray background color, used in login and create an account screens openIDSection, as well as accordion background color, etc. */
.lightGray{background-color:#f1f1f1;}
/* background colors - for the regular login screen, made possible via a body class - overrides and specificity for custom login screens within those sections below */
body.regularLoginScreen, body.accountScreen{background-color:#cad7e2;}/* regular MyAPA login screen - we can always separate these later if wanted */
body.blueBackground{background-color:#cad7e2;}/* for use on "log in or create an account" screen, not using .regularLoginScreen or .accountScreen due to formatting issues with login form */
/* main heading above centered container - e.g., login page main heading */
h1.mainHeading{margin-top:20px;margin-bottom:-20px;line-height:40px;}
h1.mainHeading span {font-size:14px;}
h1.mainHeading span a{font-weight:700;}
/* for centered "create an account" button on login screen and "login" button on create an account screen */
.containerFooter{margin: 25px auto 50px;text-align: center;}
/* special styling for OpenID button on login screens - without this, styles for .login-button work on Guest Checkout screen mini login form display*/
body.loginScreen .login-button{font-size:18px;}
@media screen and (max-width: 380px){
    body.loginScreen .login-button{
        font-size: 15px;
        padding: 14px 3px 9px;
}}
/* ************************* CUSTOMIZED LOGIN SCREENS ***************************/
/* h2 inside custom row */
.customRow h2{font-size:1.7em;margin-bottom:10px;font-family: "QuatroSlab", Georgia, Times, "Times New Roman", serif;}
/* .rightSideCustom image styling */
.rightSideCustom img{width:400px;height:auto;margin-top:-40px;margin-bottom:-30px;}
/* ************ GENERIC CUSTOM LOGIN SCREEN STYLES - body class of "customLoginScreen" controlling these styles ************* */
/* hiding elements from the regular login screen on the custom login screens */
body.customLoginScreen footer{display:none;}/* hide the standard footer */
/* hide the footer#simple-app-footer from all screens, then show this footer for all custom login screens only */
footer#simple-app-footer{display:none;}
body.customLoginScreen footer#simple-app-footer{display:block;}
body.customLoginScreen .containerFooter{display:none;}/* hide the "Create an Account" button below the login form box by default, this can be turned on via individual customized login screen overrides if needed per screen/scenario */
/* .createAccountText is the text above the "Create an Account" button on the customized login screens, hidden by default but activated per each applicable customized login screen, and customized per each applicable customized login screen */
.createAccountText{display:none;}
body.customLoginScreen h1.mainHeading{display:none;}/* hide the top "Log In or Create an Account" heading/link for custom login pages, and if it's needed for any specific pages, then display block it there */
body.customLoginScreen .headLogo{float:none;text-align:center;}/* centering the "large" APA logo for the custom login screens */
/* hiding the custom login screen bottom text on the regular login screen, then showing it on the custom login screens via a body class */
.customLoginBottomText{display:none;color:#fff;font-size:18px;text-align:center;margin:0 90px 50px;}/* also giving a bottom margin since most bottom element on page */
.customLoginBottomText a{color:#fff;text-decoration:underline;}
.customLoginBottomText a:hover{text-decoration:none;}
/* showing the .customLoginBottomText on body.customLoginScreen */
body.customLoginScreen .customLoginBottomText{display:block;}
/* left aligning the .customLoginBottomText at 991px and below for readability */
@media screen and (max-width: 991px){
    .customLoginBottomText{
        text-align:left;
        margin: 0 10px 30px;/* also giving a bottom margin since most bottom element on page */
}}
.customRow{margin-top:-15px;padding:15px;}/* to close up the space and have the custom row background color meet the top of the portlet box */
/* hiding the right side (image) at 991px and below */
@media screen and (max-width: 991px){
    .rightSideCustom{
        display:none;
}}
/* ********* CUSTOM JOURNAL ORDER LOGIN SCREEN ********** */
/* main body background color for this specific screen */
body.customLoginScreenJournalOrdering{background-color:#0b2f4d;}/* customized login screen - journal order/subscription screens */
/* hide all other "custom rows" since you only need the one applicable to this screen, made possible via a body class */
body.customLoginScreenJournalOrdering .customJoinDivisionsRow, body.customLoginScreenJournalOrdering .customLocatorRow, body.customLoginScreenJournalOrdering .customGradStudyRow, body.customLoginScreenJournalOrdering .customMembershipDirectoryRow, body.customLoginScreenJournalOrdering .customSupplementalMaterialsRow, body.customLoginScreenJournalOrdering .customOPLStudentRow, body.customLoginScreenJournalOrdering .customOPLEducatorRow, body.customLoginScreenJournalOrdering .customFDARow {display:none !important;}
/* background color for this specific screen */
.customJournalOrderRow{background-color:#deeffd;}
/* separator line color for this specific screen */
/* hiding the custom top section on the regular login screen, then showing it on this custom login screen via a body class */
.customJournalOrderRow{display:none;}
body.customLoginScreen .customJournalOrderRow{display:block;}
/* displaying the "Create an Account" button for this specific screen */
body.customLoginScreenJournalOrdering .containerFooter{display:block;}
/* displaying text above the "Create an Account" button for this specific screen */
body.customLoginScreenJournalOrdering .createAccountText{display:block;color:#fff;font-size:22px;font-weight:700;margin-bottom:20px;padding-top:30px;border-top:3px solid #fff;}
/* hiding all other .createAccountText blocks on this specific screen */
body.customLoginScreenJournalOrdering .createAccountText.createAccountTextJoinDivisions{display:none;}
body.customLoginScreenJournalOrdering .createAccountText.createAccountTextSupplementalMaterials{display:none;}
/* displaying the Log In or Create an Account header and link for this specific screen, and styling both for the darker background */
body.customLoginScreenJournalOrdering h1.mainHeading{display:block;color:#fff;}
body.customLoginScreenJournalOrdering h1.mainHeading a{color:#fff;text-decoration:underline;}
body.customLoginScreenJournalOrdering h1.mainHeading a:hover{text-decoration:none;}
/* ********* CUSTOM JOIN DIVISION LOGIN SCREEN ********** */
/* main body background color for this specific screen */
body.customLoginScreenJoinDivisions{background-color:#0b2f4d;}/* customized login screen - join divisions */
/* hide all other "custom rows" since you only need the one applicable to this screen, made possible via a body class */
body.customLoginScreenJoinDivisions .customJournalOrderRow, body.customLoginScreenJoinDivisions .customLocatorRow, body.customLoginScreenJoinDivisions .customGradStudyRow, body.customLoginScreenJoinDivisions .customMembershipDirectoryRow, body.customLoginScreenJoinDivisions .customSupplementalMaterialsRow, body.customLoginScreenJoinDivisions .customOPLStudentRow, body.customLoginScreenJoinDivisions .customOPLEducatorRow, body.customLoginScreenJoinDivisions .customFDARow {display:none !important;}
/* background color for this specific screen */
.customJoinDivisionsRow{background-color:#deeffd;}
/* separator line color for this specific screen */
/* hiding the custom top section on the regular login screen, then showing it on this custom login screen via a body class */
.customJoinDivisionsRow{display:none;}
body.customLoginScreen .customJoinDivisionsRow{display:block;}
/* displaying the "Create an Account" button for this specific screen */
body.customLoginScreenJoinDivisions .containerFooter{display:block;}
/* displaying text above the "Create an Account" button for this specific screen */
body.customLoginScreenJoinDivisions .createAccountText{display:block;color:#fff;font-size:22px;font-weight:700;margin-bottom:20px;padding-top:30px;border-top:3px solid #deeffd;}
/* hiding all other .createAccountText blocks on this specific screen */
body.customLoginScreenJoinDivisions .createAccountText.createAccountTextJournalOrder{display:none;}
body.customLoginScreenJoinDivisions .createAccountText.createAccountTextSupplementalMaterials{display:none;}
/* displaying the Log In or Create an Account header and link for this specific screen, and styling both for the darker background */
body.customLoginScreenJoinDivisions h1.mainHeading{display:block;color:#fff;}
body.customLoginScreenJoinDivisions h1.mainHeading a{color:#fff;text-decoration:underline;}
body.customLoginScreenJoinDivisions h1.mainHeading a:hover{text-decoration:none;}
/* ********* CUSTOM LOCATOR LOGIN SCREEN ********** */
/* main body background color for this specific screen */
body.customLoginScreenLocator{background-color:#0b2f4d;}/* customized login screen - Locator */
/* hide all other "custom rows" since you only need the one applicable to this screen, made possible via a body class */
body.customLoginScreenLocator .customJournalOrderRow, body.customLoginScreenLocator .customJoinDivisionsRow, body.customLoginScreenLocator .customGradStudyRow, body.customLoginScreenLocator .customMembershipDirectoryRow, body.customLoginScreenLocator .customSupplementalMaterialsRow, body.customLoginScreenLocator .customOPLStudentRow, body.customLoginScreenLocator .customOPLEducatorRow, body.customLoginScreenLocator .customFDARow {display:none !important;}
/* background color for this specific screen */
.customLocatorRow{background-color:#deeffd;}
/* separator line color for this specific screen */
/* hiding the custom top section on the regular login screen, then showing it on this custom login screen via a body class */
.customLocatorRow{display:none;}
body.customLoginScreen .customLocatorRow{display:block;}
/* ********* CUSTOM OPL-STUDENT LOGIN SCREEN ********** */
/* main body background color for this specific screen */
body.customLoginScreenOPLStudent{background-color:#0b2f4d;}/* customized login screen - OPL-Student */
/* hide all other "custom rows" since you only need the one applicable to this screen, made possible via a body class */
body.customLoginScreenOPLStudent .customJournalOrderRow, body.customLoginScreenOPLStudent .customJoinDivisionsRow, body.customLoginScreenOPLStudent .customGradStudyRow, body.customLoginScreenOPLStudent .customMembershipDirectoryRow, body.customLoginScreenOPLStudent .customSupplementalMaterialsRow, body.customLoginScreenOPLStudent .customLocatorRow, body.customLoginScreenOPLStudent .customOPLEducatorRow, body.customLoginScreenOPLStudent .customFDARow {display:none !important;}
/* background color for this specific screen */
.customOPLStudentRow{background-color:#deeffd;}
/* separator line color for this specific screen */
/* hiding the custom top section on the regular login screen, then showing it on this custom login screen via a body class */
.customOPLStudentRow{display:none;}
body.customLoginScreen .customOPLStudentRow{display:block;}
/* ********* CUSTOM OPL-EDUCATOR LOGIN SCREEN ********** */
/* main body background color for this specific screen */
body.customLoginScreenOPLEducator{background-color:#0b2f4d;}/* customized login screen - OPL-Educator */
/* hide all other "custom rows" since you only need the one applicable to this screen, made possible via a body class */
body.customLoginScreenOPLEducator .customJournalOrderRow, body.customLoginScreenOPLEducator .customJoinDivisionsRow, body.customLoginScreenOPLEducator .customGradStudyRow, body.customLoginScreenOPLEducator .customMembershipDirectoryRow, body.customLoginScreenOPLEducator .customSupplementalMaterialsRow, body.customLoginScreenOPLEducator .customLocatorRow, body.customLoginScreenOPLEducator .customOPLStudentRow, body.customLoginScreenOPLEducator .customFDARow {display:none !important;}
/* background color for this specific screen */
.customOPLEducatorRow{background-color:#deeffd;}
/* separator line color for this specific screen */
/* hiding the custom top section on the regular login screen, then showing it on this custom login screen via a body class */
.customOPLEducatorRow{display:none;}
body.customLoginScreen .customOPLEducatorRow{display:block;}
/* ********* CUSTOM MEMBERSHIP DIRECTORY LOGIN SCREEN ********** */
/* main body background color for this specific screen */
body.customLoginScreenMembershipDirectory{background-color:#0b2f4d;}/* customized login screen - Membership Directory */
/* hide all other "custom rows" since you only need the one applicable to this screen, made possible via a body class */
body.customLoginScreenMembershipDirectory .customJournalOrderRow, body.customLoginScreenMembershipDirectory .customJoinDivisionsRow, body.customLoginScreenMembershipDirectory .customGradStudyRow, body.customLoginScreenMembershipDirectory .customLocatorRow, body.customLoginScreenMembershipDirectory .customSupplementalMaterialsRow, body.customLoginScreenMembershipDirectory .customOPLStudentRow, body.customLoginScreenMembershipDirectory .customOPLEducatorRow, body.customLoginScreenMembershipDirectory .customFDARow {display:none !important;}
/* background color for this specific screen */
.customMembershipDirectoryRow{background-color:#deeffd;}
/* separator line color for this specific screen */
/* hiding the custom top section on the regular login screen, then showing it on this custom login screen via a body class */
.customMembershipDirectoryRow{display:none;}
body.customLoginScreen .customMembershipDirectoryRow{display:block;}
/* ********* CUSTOM FDA LOGIN SCREEN ********** */
/* main body background color for this specific screen */
body.customLoginScreenFDA{background-color:#0b2f4d;}/* customized login screen - FDA */
/* hide all other "custom rows" since you only need the one applicable to this screen, made possible via a body class */
body.customLoginScreenFDA .customJournalOrderRow, body.customLoginScreenFDA .customJoinDivisionsRow, body.customLoginScreenFDA .customGradStudyRow, body.customLoginScreenFDA .customLocatorRow, body.customLoginScreenFDA .customSupplementalMaterialsRow, body.customLoginScreenFDA .customOPLStudentRow, body.customLoginScreenFDA .customOPLEducatorRow, body.customLoginScreenFDA .customMembershipDirectoryRow {display:none !important;}
/* background color for this specific screen */
.customFDARow{background-color:#deeffd;}
/* separator line color for this specific screen */
/* hiding the custom top section on the regular login screen, then showing it on this custom login screen via a body class */
.customFDARow{display:none;}
body.customLoginScreen .customFDARow{display:block;}
/* ********* CUSTOM SUPPLEMENTAL MATERIALS LOGIN SCREEN ********** */
/* main body background color for this specific screen */
body.customLoginScreenSupplementalMaterials{background-color:#0b2f4d;}/* customized login screen - journal order/subscription screens */
/* hide all other "custom rows" since you only need the one applicable to this screen, made possible via a body class */
body.customLoginScreenSupplementalMaterials .customJoinDivisionsRow, body.customLoginScreenSupplementalMaterials .customLocatorRow, body.customLoginScreenSupplementalMaterials .customGradStudyRow, body.customLoginScreenSupplementalMaterials .customMembershipDirectoryRow, body.customLoginScreenSupplementalMaterials .customJournalOrderRow, body.customLoginScreenSupplementalMaterials .customOPLStudentRow, body.customLoginScreenSupplementalMaterials .customOPLEducatorRow, body.customLoginScreenSupplementalMaterials .customFDARow {display:none !important;}
/* background color for this specific screen */
.customSupplementalMaterialsRow{background-color:#deeffd;}
/* separator line color for this specific screen */
/* hiding the custom top section on the regular login screen, then showing it on this custom login screen via a body class */
.customSupplementalMaterialsRow{display:none;}
body.customLoginScreen .customSupplementalMaterialsRow{display:block;}
/* displaying the "Create an Account" button for this specific screen */
body.customLoginScreenSupplementalMaterials .containerFooter{display:block;}
/* displaying text above the "Create an Account" button for this specific screen */
body.customLoginScreenSupplementalMaterials .createAccountText{display:block;color:#fff;font-size:22px;font-weight:700;margin-bottom:20px;padding-top:30px;border-top:3px solid #fff;}
/* hiding all other .createAccountText blocks on this specific screen */
body.customLoginScreenSupplementalMaterials .createAccountText.createAccountTextJoinDivisions{display:none;}
body.customLoginScreenSupplementalMaterials .createAccountText.createAccountTextJournalOrder{display:none;}
/* displaying the Log In or Create an Account header and link for this specific screen, and styling both for the darker background */
body.customLoginScreenSupplementalMaterials h1.mainHeading{display:block;color:#fff;}
body.customLoginScreenSupplementalMaterials h1.mainHeading a{color:#fff;text-decoration:underline;}
body.customLoginScreenSupplementalMaterials h1.mainHeading a:hover{text-decoration:none;}
/* hiding the membership contact info for this screen - TBD if we need "different" contact info in its place */
body.customLoginScreenSupplementalMaterials .customLoginBottomText {display: none;}
/* hiding the white border just for this screen - TBD if we add this back in (if there's contact info added) */
body.customLoginScreenSupplementalMaterials .createAccountText {border-top: none;}
/* ************** Bigger Customizations, just for this screen ************** */
/* hiding the LogIn - Create an Account link .mainHeading, just for this screen */
body.customLoginScreenSupplementalMaterials h1.mainHeading {display: none;}
/* making the .standardLoginText match that of .boldHeading2 instead of .boldHeading1, just for this screen */
body.customLoginScreenSupplementalMaterials .standardLoginText {font-size: 17px; font-weight: 700;}
/* hiding the .containerFooter for this specific screen */
body.customLoginScreenSupplementalMaterials .containerFooter {display: none;}
body.customLoginScreenSupplementalMaterials .openIDSection {height: 360px;}
body.customLoginScreenSupplementalMaterials .openIDSection .login-button {display: none;}
.vertically-centering-div {
  position: absolute;
  min-width: 260px;
  padding: 0 20px;
  top: 50%;
  left: 50%;
  -moz-transform: translateX (-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
@media only screen and (max-width: 991px) {
  body.customLoginScreenSupplementalMaterials .sectionSpacerVertical span {
      margin-top: -6.9em !important;
  }
  body.customLoginScreenSupplementalMaterials .openIDSection {
      height: 200px !important;
  }
  body.customLoginScreenSupplementalMaterials .vertically-centering-div {
      min-width: 90%;
  }
}
/* ********* CUSTOM GRADSTUDY LOGIN SCREEN ********** */
/* main body background color for this specific screen */
body.customLoginScreenGradStudy{background-color:#0b2f4d;}/* customized login screen - GradStudy */
/* hide all other "custom rows" since you only need the one applicable to this screen, made possible via a body class */
body.customLoginScreenGradStudy .customJournalOrderRow, body.customLoginScreenGradStudy .customJoinDivisionsRow, body.customLoginScreenGradStudy .customLocatorRow, body.customLoginScreenGradStudy .customMembershipDirectoryRow, body.customLoginScreenGradStudy .customSupplementalMaterialsRow, body.customLoginScreenGradStudy .customOPLStudentRow, body.customLoginScreenGradStudy .customOPLEducatorRow, body.customLoginScreenGradStudy .customFDARow {display:none !important;}
/* background color for this specific screen */
.customGradStudyRow{background-color:#deeffd;}
/* separator line color for this specific screen */
/* hiding the custom top section on the regular login screen, then showing it on this custom login screen via a body class */
.customGradStudyRow{display:none;}
body.customLoginScreen .customGradStudyRow{display:block;}
/* ********* CREATE AN ACCOUNT SCREEN ********** */
body.createAccountScreen{background-color:#cad7e2;}/* same as regular MyAPA login screen */
body.createAccountScreen .openIDSection{height:890px;}/* try to make this and the login screen .openIDSection fluid with background color if possible */
/* ************************* GUEST CHECKOUT SCREEN ***************************/
/* full width row background color - used on Guest Checkout page top section */
.fullWidthContainerDark{width: 100vw;position: relative;margin-left: -50vw;left: 50%;background-color:#666; padding-bottom: 40px;}
.fullWidthContainerDark h1{color:#fff;}
.innerContentFullWidth{max-width: 1170px;margin: 0 auto;overflow: hidden;}/* width of 1200 minus 15px on each side of what would be a "row" */
.openIDSection{background-color:#f1f1f1;height:332px;padding:10px 35px;}
.sectionSpacerVertical span{background: none repeat scroll 0 0 #666;color: #fff;display: block;font-weight: 400;margin-left: -1.2em;margin-top: -2em;padding: 0;position: absolute;text-align: center;top: 50%;width: 40px;height: 40px;line-height: 40px;border-radius: 50%;z-index: 1;opacity: 0.9;}
/* .svg button styles for Google Open ID button */
.login-button{width: 100%;font-size: 14px;border-radius: 8px;color: #333;border: 1px solid #777; transition: all 0.2s ease 0s;background-color: #fff;display: flex;margin: 70px 0 20px 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 #333;}
.login-button svg{width: 25px;height: 25px;margin: 0 1rem 0 0;}
/* 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 */
/* *********** LOOK UP ACCOUNT SCREEN *********** */
body.lookUpAccountScreen{background-color:#cad7e2;}/* same as regular MyAPA login screen */
/* bootstrap accordions */
.panel-group .panel{border-radius:0px;}
.panel-group .panel+.panel{margin-top:0px;}
.panel-default>.panel-heading{border-color:#d1d1d1;}
h4.panel-title {font-family:Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:18px;}
.panel{margin:10px 0;border:1px solid #d1d1d1;}
.panel .panel-body{border-top:0 none;padding:20px 15px 25px;}
.panel .panel-heading{color:#333;font-size:15px;font-weight:bold;border-radius:0;transition: background 1s ease 0s;}
/* putting rounded borders on the top and bottom panel for the accordion - also, need to make sure no other use of .panel, otherwise scope out with #accordion .panel */
.panel:first-child{border-top-left-radius: 5px; border-top-right-radius: 5px;}
.panel:last-child{border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
.panel:first-child a div.active{border-top-left-radius: 5px; border-top-right-radius: 5px;}
.panel .panel-heading a{text-decoration:none;}
.panel .panel-heading i{float:right;}
.panel .panel-heading:hover{background:#d1d1d1 none repeat scroll 0 0;border-radius:0;}
.panel .panel-heading.active{background:#f1f1f1 none repeat scroll 0 0;border-radius:0;}
#accordion h4{padding-top:15px;padding-bottom:15px;}
#accordion label{padding-top:0;}
#accordion .helpText{margin:0;}
/* hiding underlines on accordion panels - from user test results */
#accordion a[role=button]{text-decoration:none;}
.leftFullWidthButton, .rightFullWidthButton{margin-left:12px;}
/* double-button style for heading, 991px stack */
@media screen and (max-width: 991px){
    .leftFullWidthButton{
        margin-top:20px;
        margin-left:0;
    }
    .rightFullWidthButton{
        margin:20px 0;
}}
/* ********* ACADEMIC WRITER - GENERAL ********** */
/* this class, applied to elements on any of the ecommerce screens, will hide the elements, also being used as class with spans around content */
.hideForAW{display:none;}
/* CSS switch to show only .showForAW elements on screens with body class of "academicwriter" */
.showForAW{display:none;}
body.academicwriter .showForAW{display:block;}
/* hiding all of the Book Donation card sections on AW ecommerce screens */
body.academicwriter .bookDonationCard{display:none;}
/* swapping Lato for Open Sans to match AW styles */
body.academicwriter #mainBodyContainer{font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size: 16px;line-height: 1.42857143;height: 100%;}
body.academicwriter .note{font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;border-left: 3px solid #8a6d3b;border-radius: 0 !important;margin: 0 0 20px;padding: 0 30px 22px;}
body.academicwriter .note-alert .box-heading{font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;color: #8a6d3b;}
body.academicwriter .addressField{font-family: Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:18px;margin-bottom:5px;}
body.academicwriter .radioCard{font-family: Lato,"Helvetica Neue",Helvetica,Arial,sans-serif !important;padding: 20px;margin: 6px 0;position:relative;}/* added the font family since Addresses screen using pseudo checkmark was making label and placeholder text be FontAwesome when card green-selected */
body.academicwriter h4.panel-title{font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:18px;}
/* AW header coded into ecommerce screens */
body.academicwriter .apaStyleHeader{height:auto;margin-left:35px;padding-bottom:14px;}
.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 */
.apaStyleHeader img{padding-top:7px;margin:0 35px;}
@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;}
}
.green-bar{display:none;}
body.academicwriter .green-bar{display:block;flex:none;background-color:#198731;height:10px;}
/* AW footer coded into MyAPA ecommerce screens */
body.academicwriter footer{font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1.3em;background-color:#198731;width: 100%;flex-shrink: 0;padding:30px 50px;border-top:none;}
body.academicwriter footer img:hover{opacity:0.6;filter: alpha(opacity=60);}
body.academicwriter footer a, body.academicwriter footer a:hover{color:#fff;text-decoration:underline;}
body.academicwriter footer a:hover{color:#fff;opacity:0.6;filter: alpha(opacity=60);}
body.academicwriter .footer-rightdesktop div{margin-bottom:20px;}
body.academicwriter .footer-rightdesktop{text-align:right;}
@media only screen and (max-width: 991px){
    body.academicwriter .footer-rightdesktop{text-align:center;}
}
@media only screen and (max-width: 768px){
    body.academicwriter .footer-leftdesktop, body.academicwriter .footer-middledesktop, body.academicwriter .footer-rightdesktop{margin-bottom:12px;}
    body.academicwriter .footer-leftdesktop img, body.academicwriter .footer-middledesktop img{margin:0 auto;}
}
/* ***************** RESPONSIVE STYLES FOR LOGIN SCREEN, CREATE AN ACCOUNT SCREEN, & GUEST CHECKOUT SCREEN ************************* */
@media screen and (max-width: 1250px){
    .fullWidthContainerDark{
        padding: 0 15px;
}}
@media only screen and (min-width:992px) and (max-width:1100px) {
    .login-button, body.createAccountScreen .login-button{
        font-size: 13px;
        padding: 14px 3px 9px;
    }
    .openIDSection, body.createAccountScreen .openIDSection{
        padding: 10px 4px 10px 20px;
    }
    .openIDText, body.createAccountScreen .openIDText{
        margin: 14px;
}}
/* main stacking breakpoint */
@media screen and (max-width: 991px){
    .login-button, body.createAccountScreen .login-button{
        font-size: 18px;
        margin-top: 30px;
    }
    .openIDSection, body.createAccountScreen .openIDSection{
        margin: 40px 0 20px;
        padding: 10px 30px 20px;
        height: auto;
    }
    .sectionSpacerVertical span, body.createAccountScreen .sectionSpacerVertical span{
        margin-left: 46%;
        margin-top: -5.1em;
}}
@media screen and (max-width: 822px){
    .sectionSpacerVertical span, body.createAccountScreen .sectionSpacerVertical span{
        margin-left: 45%;
        margin-top: -5.5em;
}}
@media screen and (max-width: 720px){
    .sectionSpacerVertical span, body.createAccountScreen .sectionSpacerVertical span{
        margin-left: 44%;
}}
@media screen and (max-width: 600px){
    .sectionSpacerVertical span, body.createAccountScreen .sectionSpacerVertical span{
        margin-left: 42%;
}}
@media screen and (max-width: 504px){
    .sectionSpacerVertical span, body.createAccountScreen .sectionSpacerVertical span{
        margin-left: 40%;
        margin-top: -6.1em;
}}
@media screen and (max-width: 391px){
    .sectionSpacerVertical span, body.createAccountScreen .sectionSpacerVertical span{
        margin-left: 38%;
        margin-top: -6.7em;
}}
@media screen and (max-width: 360px){
    .login-button, body.createAccountScreen .login-button{
        font-size: 13px;
        padding: 14px 3px 9px;
}}
@media screen and (max-width: 330px){
    .sectionSpacerVertical span, body.createAccountScreen .sectionSpacerVertical span{
        margin-left: 38%;
        margin-top: -7.2em;
}}
/* added for jQuery validation inside Bootstrap modal - used for Edit Address Modal */
.modal-body .help-block{font-size:14px;}
/* added for redesigned Link Accounts screens */
hr.rounded-gray{border: 2px solid #ccc;border-radius:5px;margin:20px 0 10px;}
a.underline-default{text-decoration:underline;}
a.underline-default:hover{text-decoration:none;}