@font-face {
    font-family: OrgFont;
    font-weight: 400;
    src: url("https://www-tc.pbs.org/pbsfonts/v1.2/PBSSans.woff2") format("woff2"),
        url("https://www-tc.pbs.org/pbsfonts/v1.2/PBSSans.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: OrgFont;
    font-weight: 700;
    src: url("https://www-tc.pbs.org/pbsfonts/v1.2/PBSSans-Bold.woff2") format("woff2"),
        url("https://www-tc.pbs.org/pbsfonts/v1.2/PBSSans-Bold.woff") format("woff");
    font-display: swap;
}

:root {
    --font-style: 'sans-serif';
    --logo-width: 170px;
    --logo-height: 67px;

    /* Core Colors */
    --pbs-blue: #2638c4;
    --medium-blue: #0f1e8c;
    --white: #ffffff;
    --black: #000000;

    /* Brand Neutrals */
    --onyx: #040613;
    --midnight: #000525;
    --slate: #5c6e85;
    --pebble: #94a1b2;
    --fog: #eef0f5;
    --cloud: #f6f6fa;

    /* Hues */
    --teal: #46d4cd;
    --green: #087b45;
    --light-blue: #486cd8;
    --red: #d6383a;
    --dark-red: #ab2c2e;
    --coral: #fe704e;

    --icon-google: url("../img/google_icon_new.png");
    --icon-email: url("../img/email_icon.svg");

    --max-width: 460px;
    --button-form-height: 52px;
    --social-button-form-height: 40px;
    --button-form-width: 373px;
    --button-nav-height: 40px;
    --button-nav-width: 273px;

    --required-text-color: var(--coral);
    --success-check-bkg-color: var(--green);

    --delete-account-button-bkg-color: var(--red);
    --delete-account-button-bkg-hover-color: var(--dark-red);
    --delete-account-button-text-color: var(--white);
    --delete-account-button-border-color: var(--red);
    --delete-account-button-border-hover-color: var(--dark-red);

    --checkmark-color: var(--pbs-blue);
    --button-border-radius: 30px;
    --social-button-border-radius: 22px;
    --show-hide-password-color: var(--medium-blue);
}

* {
    box-sizing: border-box;
}

html {
    height: 100%;
}

/* LIGHT MODE */
body {
    --bkg-color: var(--cloud);
    --container-color: var(--white);
    --wrapper-color: var(--cloud);
    --border-color: var(--fog);
    --header-color: var(--pbs-blue);
    --header-hover-color: var(--medium-blue);
    --text-color: var(--midnight);
    --text-footer-color: var(--onyx);
    --label-color: var(--medium-blue);
    --success-text-color: var(--green);
    --verified-color: var(--green);
    --link-color: var(--pbs-blue);
    --link-hover-color: var(--medium-blue);
    --text-error-color: var(--red);
    --input-error-background: rgb(255 207 0 / 20%);
    --footer-divider-color: transparent;
    --processing-message-color: var(--slate);
    --social-apple-bkg-color: var(--black);
    --social-apple-bkg-color-hover: var(--black);
    --social-apple-text: var(--white);
    --social-apple-padding: 0 14px;
    --social-google-bkg-color: #FFFFFF;
    --social-google-text: #1F1F1F;
    --social-google-border: 1px solid #747775;
    --social-facebook-bkg-color: #0866FF;
    --social-facebook-bkg-color-hover: #0866FF;
    --social-facebook-text: #FFFFFF;

    /* buttons */
    --button-fill-text-color: var(--white);

    --button-fill-bkg-color: var(--pbs-blue);
    --button-fill-bkg-hover-color: var(--medium-blue);
    --button-fill-bkg-active-color: var(--medium-blue);

    --button-fill-border-color: var(--pbs-blue);
    --button-fill-border-hover-color: var(--medium-blue);
    --button-fill-border-active-color: var(--light-blue);

    --button-no-fill-bkg-color: transparent;
    --button-no-fill-bkg-hover-color: var(--medium-blue);
    --button-no-fill-bkg-active-color: var(--medium-blue);

    --button-no-fill-border-color: var(--pbs-blue);
    --button-no-fill-border-hover-color: var(--medium-blue);
    --button-no-fill-border-active-color: var(--light-blue);

    --button-no-fill-text-color: var(--pbs-blue);
    --button-no-fill-text-hover-color: var(--white);
    --button-no-fill-text-active-color: var(--white);

    /* icons */
    --icon-apple: url("../img/apple_logo_white_new.png");
    --icon-external-link: url("../img/external_link_icon.svg");
    --icon-facebook-merge: url("../img/facebook_icon_blue_new.png");
    --icon-facebook: url("../img/facebook_icon_white_new.png");

    --icon-user: url("../img/user_icon.svg");
    --icon-badge: url("../img/badge_icon.svg");
    --icon-lock: url("../img/lock_icon.svg");
    --icon-arrow-right: url("../img/arrow_right.svg");
    --icon-arrow-right-text: url("../img/arrow_right_text.svg");
    --icon-pencil: url("../img/pencil_icon.svg");
    --icon-collapse: url("../img/collapse_icon.svg");
}

/* DARK MODE */
body.dark-theme {
    --bkg-color: var(--midnight);
    --container-color: var(--midnight);
    --wrapper-color: var(--midnight);
    --border-color: var(--slate);
    --header-color: var(--fog);
    --header-hover-color: var(--fog);
    --text-color: var(--fog);
    --text-footer-color: var(--pebble);
    --label-color: var(--fog);
    --success-text-color: var(--teal);
    --verified-color: var(--pebble);
    --link-color: #2b92ff;
    --link-hover-color: #2b92ff;
    --text-error-color: var(--coral);
    --input-error-background: #fff6cf;
    --footer-divider-color: var(--slate);
    --processing-message-color: var(--fog);
    --social-apple-bkg-color: #ffffff;
    --social-apple-bkg-color-hover: #ffffff;
    --social-apple-text: #040613;
    --social-apple-padding: 8px;
    --social-google-bkg-color: #FFFFFF;
    --social-google-text: #1F1F1F;
    --social-google-border: none;
    --social-facebook-bkg-color: #FFFFFF;
    --social-facebook-bkg-color-hover: #FFFFFF;
    --social-facebook-text: #040613;

    /* buttons */
    --button-fill-bkg-color: var(--pbs-blue);
    --button-fill-bkg-hover-color: var(--light-blue);
    --button-fill-bkg-active-color: var(--pbs-blue);

    --button-fill-border-color: var(--pbs-blue);
    --button-fill-border-hover-color: var(--light-blue);
    --button-fill-border-active-color: var(--light-blue);

    --button-fill-text-color: var(--white);

    --button-no-fill-bkg-color: transparent;
    --button-no-fill-bkg-hover-color: var(--fog);
    --button-no-fill-bkg-active-color: var(--fog);

    --button-no-fill-border-color: var(--fog);
    --button-no-fill-border-hover-color: var(--fog);
    --button-no-fill-border-active-color: var(--pbs-blue);

    --button-no-fill-text-color: var(--fog);
    --button-no-fill-text-hover-color: var(--pbs-blue);
    --button-no-fill-text-active-color: var(--pbs-blue);

    /* icons */
    --icon-apple: url("../img/apple_logo_black_new.png");
    --icon-external-link: url("../img/external_link_icon_white.svg");
    --icon-facebook-merge: url("../img/facebook_icon_blue_new.png");
    --icon-facebook: url("../img/facebook_icon_blue_new.png");
    --icon-user: url("../img/user_icon_white.svg");
    --icon-badge: url("../img/badge_icon_white.svg");
    --icon-lock: url("../img/lock_icon_white.svg");
    --icon-arrow-right: url("../img/arrow_right_white.svg");
    --icon-arrow-right-text: url("../img/arrow_right_text_dark.svg");
    --icon-pencil: url("../img/pencil_icon_white.svg");
    --icon-collapse: url("../img/collapse_icon_white.svg");
}

/* stylelint-disable no-duplicate-selectors */
body {
    font-family: OrgFont, var(--font-style);
    font-weight: 400;
    background-color: var(--bkg-color);
    width: 100vw;
    height: 100vh;
}

#main-container {
    display: none;
    background-color: var(--wrapper-color) !important;
    max-width: var(--max-width);
    margin: auto;
    height: 100%;
    align-items: flex-start;
    padding-top: 13px;
}

.fade-in #main-container {
    display: block;
    animation: fadeIn ease 700ms;
}

/* stylelint-disable keyframes-name-pattern */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#content-wrapper {
    box-shadow: none;
    background-color: var(--container-color);
    max-width: 434px;
}

.screen {
    min-width: 10px;
}

/* Global container padding */
.screen > .content-wrapper {
    padding: 0 30px;
}

#header-container {
    border-bottom: none;
}

form {
    max-width: 500px;
    min-width: 250px;
}

input,
button,
textarea {
    font-family: OrgFont, var(--font-style);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
form,
span {
    font-family: OrgFont, var(--font-style);
    color: var(--text-color);
    font-size: 14px;
    word-wrap: break-word;
}

form label {
    color: var(--label-color);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    margin-bottom: 0;
}

form input,
#secondFactorCodeChangeEmailInput,
#secondFactorCodeLoginInput,
#secondFactorCodeRegistrationInput,
#changeEmailInput {
    background-color: var(--fog);
    color: var(--midnight);
    border-radius: 8px;
    border: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    height: 40px;
    width: 100%;
    padding: 7px;
    margin-bottom: 12px;
}

/* Padding before the actual user-inserted text. */
form input[type="text"],
form input[type="password"] {
    box-sizing: border-box;

    /* padding-left: 10px; */
}

a:hover {
    color: var(--link-color);
    text-decoration: underline;
}

a:focus {
    outline: 2px solid var(--link-hover-color);
}

button {
    /* Transition effect on hover of all buttons */
    transition: background-color 0.3s ease-in, color 0.3s ease-in;
    border-radius: var(--button-border-radius);
}

input::placeholder {
    padding-left: 5px;
}

#logo {
    width: var(--logo-width);
    height: var(--logo-height);
}

/* Retrieving user data loading message */
.capture_retrieving {
    color: var(--text-color);
}

.screen-heading {
    color: var(--label-color);
    font-weight: 700;
    font-size: 22px;
    line-height: 30px;
    text-align: center;
}

.screen-description {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0;
    text-align: left;
}

button.social-provider {
    width: 100%;
    height: var(--social-button-form-height);
    text-align: center;
    border: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 16px 0;
    border-radius: var(--social-button-border-radius)
}

button.social-provider.googleplus {
    background: var(--social-google-bkg-color);
    border: var(--social-google-border);
    padding: 12px 14px;
}

button.social-provider.googleplus > span > span.provider-name {
    color: var(--social-google-text);
}

button.social-provider.facebook {
    background: var(--social-facebook-bkg-color);
}

button.social-provider.googleplus:focus,
button.social-provider.facebook:focus,
button.social-provider.apple:focus {
    outline: 3px solid var(--button-fill-border-active-color);
}

button.social-provider.facebook:hover,
button.social-provider.facebook:focus {
    background: var(--social-facebook-bkg-color-hover);
}

button.social-provider.facebook > span > span.provider-name {
    color: var(--social-facebook-text);
}

button.social-provider.apple {
    background: var(--social-apple-bkg-color);
    padding: var(--social-apple-padding);
}

button.social-provider.apple:hover,
button.social-provider.apple:focus {
    background: var(--social-apple-bkg-color-hover);
}

button.social-provider.apple > span > span.provider-name {
    color: var(--social-apple-text);
    margin-left: 8px;
}

.social-provider-icon {
    background: var(--white) no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
    border-radius: 0;
    margin: 0;
}

.social-login-buttons .provider-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: var(--white);
    margin-left: 10px;
    min-width: fit-content;
}

.region-global .social-provider-icon.googleplus {
    background: var(--icon-google) 0 0 / 100% 100% no-repeat;
    border-radius: 8px;
    background-size: 20px 20px;
}

.region-global .social-provider-icon.facebook {
    background: var(--icon-facebook) 50% / cover no-repeat;
}

.region-global .social-provider-icon.apple {
    background: var(--icon-apple) 50% / cover no-repeat;
    background-size: 20px;
}

/* Merge Accounts */
#mergeAccounts > div.auth-screen.content-wrapper {
    display: flex;
    flex-direction: column;
}

#mergeAccounts > div.auth-screen.content-wrapper > h1.screen-heading {
    order: 1;
}

#mergeAccounts > div.auth-screen.content-wrapper > div:nth-child(5) {
    order: 2;
    display: flex;
    justify-content: center;
    margin: 15px 0 0;
}

#mergeAccounts > div.auth-screen.content-wrapper > p.screen-description {
    order: 3;
    line-height: 24px;
    margin: 20px 15px;
}

#capture_socialRegistration_socialRegistrationForm > div.form-action-buttons {
    order: 5;
    margin-top: 10px;
}

#mergeAccounts > div.auth-screen.content-wrapper > div.form-action-buttons {
    order: 4;

    /* We need to override a -10px margin that Akamai sometimes will apply to form-action-buttons, causing them to spill out of alignment with text above it. */
    margin: 0;
}

#mergeAccounts > div.auth-screen.content-wrapper > a.cancel-link {
    order: 5;
}

#capture_traditionalAuthenticateMerge_form_item_currentPassword {
    position: relative;
    margin-bottom: 20px !important;
}

/* Merge Account - Complete Registration */

/* Hide display name and extraneous disclaimer */
#capture_socialRegistration_form_item_displayName,
#capture_socialRegistration_socialRegistrationForm > p.registration-acceptance {
    display: none;
}

/* Re-order fields that are already there  */
#capture_socialRegistration_socialRegistrationForm {
    display: flex;
    flex-direction: column;
}

#capture_socialRegistration_form_item_firstName {
    order: 1;
}

#capture_socialRegistration_form_item_lastName {
    order: 2;
}

#capture_socialRegistration_form_item_emailAddress {
    order: 3;
}

#capture_socialRegistration_form_item_legalAcceptance {
    order: 4;
}

/* Social Provider icons */
#mergeAccounts
    > div.auth-screen.content-wrapper
    > div.provider-identity-box
    > .social-provider-icon.google,
.janrain-provider-icon-googleplus {
    background-color: var(--fog);
    background-image: var(--icon-google) !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 35px 35px !important;
    border-radius: 12px;
    width: 78px;
    height: 72px;
}

#mergeAccounts
    > div.auth-screen.content-wrapper
    > div.provider-identity-box
    > .social-provider-icon.apple {
    background-color: var(--fog) !important;
    background-image: var(--icon-apple) !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 33px 40px !important;
    border-radius: 12px;
    width: 78px;
    height: 72px;
}

.janrain-provider-icon-apple {
    background-color: var(--social-apple-bkg-color) !important;
    background-image: var(--icon-apple) !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 25px 30px !important;
    border-radius: 12px;
    width: 78px;
    height: 72px;
}

#mergeAccounts
    > div.auth-screen.content-wrapper
    > div.provider-identity-box
    > .social-provider-icon.facebook {
    background-color: var(--fog);
    background-image: var(--icon-facebook-merge);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 35px 35px !important;
    border-radius: 12px;
    width: 78px;
    height: 72px;
}

/* Account Security screen existing providers */
.janrain-capture-ui .capture_provider_linked [class^="janrain-provider-icon"] {
    /* background-size: contain !important; */
}

#mergeAccounts
    > div.auth-screen.content-wrapper
    > div.provider-identity-box
    > div.profile-account-photo {
    background: var(--fog) var(--icon-email) no-repeat center;
    background-size: 42px 32px;
    border-radius: 12px;
    width: 78px;
    height: 72px;
    margin-left: 25px;
}

/* !! not needed if flex ordering not set */
/* Hide the first row of provider icons */
#mergeAccounts > div.auth-screen.content-wrapper > div:nth-child(3) {
    display: none;
}

/* Hide the child node img */
#mergeAccounts > div.auth-screen.content-wrapper > div.provider-identity-box > div > img {
    display: none;
}

/* Icons */
.card-icon.profile-security,
.card-heading > .card-icon.profile-preferences,
#manageProfile_security
    > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-security
    > div
    > div.card-heading.aic-control
    > h1
    > span.profile-preferences.card-icon {
    background: var(--icon-badge) transparent center / contain no-repeat !important;
    width: 25px;
    height: 25px;
}

.card-icon.profile-privacy {
    background: var(--icon-lock) transparent center / contain no-repeat !important;
    width: 25px;
    height: 25px;
}

.card-icon.profile-data {
    background: var(--icon-user) transparent center / contain no-repeat !important;
    width: 25px;
    height: 25px;
}

.social-login-buttons .content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    height: unset;
    min-width: fit-content;
}

#signIn > div.auth-screen.content-wrapper > p.screen-description {
    margin-top: 0;
}

#register-screen-or-spacer,
#signin-screen-or-spacer {
    display: block;
    text-align: center;
    margin-top: 21px;
    margin-bottom: 21px;
    color: var(--label-color);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

.form-action-buttons {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.alternate-credentials {
    display: block;
    margin-bottom: 12px;
}

.forgot-password-link {
    margin: 0 10px 15px;
    position: relative;
    color: var(--link-color);
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    width: fit-content;
    text-decoration: none;
}

.forgot-password-link:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

.forgot-password-link:focus {
    outline: 2px solid var(--link-color);
}

.additional-actions-container {
    background-color: var(--bkg-color);
    text-align: left;
    padding: 0 30px;
    display: none;

    /* We want to hide it since we are moving everything to footer-container. We keep some properties active because there may be a short amount of time where it is visible (but empty). */
}

.capture_screen_container > .footer-container > .content-wrapper {
    border-top: 1px solid var(--footer-divider-color);
    padding-top: 15px;
}

.help-text,
.help-link {
    display: block;
    font-size: 14px;
    line-height: 17px;
    color: var(--text-footer-color);

    /* padding: 15px 25px; */
}

.help-text > a,
.help-link > a {
    text-decoration: none;
    color: var(--link-color);
    font-weight: 700;
    margin-left: 5px;
}

.help-text > a:hover,
.help-link > a:hover {
    text-decoration: underline;
    color: var(--link-hover-color);
}

.help-text > a:focus,
.help-link > a:focus {
    outline: 2px solid var(--link-hover-color);
}

.content-wrapper .help-text .aic-control,
.footer-container .content-wrapper .help-text .aic-control {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-decoration: none;
    color: var(--link-color);
    margin-left: 7px;
}

.link-arrow-right-text {
    background: transparent var(--icon-arrow-right-text) no-repeat center;
    display: inline-flex;
    height: 11px;
    width: 12px;
    margin-left: 4px !important;
}

.combined-footer span {
    color: var(--text-footer-color);
}

.content-wrapper .help-text,
.footer-container .help-text,
.footer-container .help-text a span {
    color: var(--label-color);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

.content-wrapper .help-text a:hover,
.footer-container .help-text a:hover {
    text-decoration: underline !important;
    color: var(--link-hover-color) !important;
}

.footer-container .help-text a span {
    font-weight: 700;
    margin-left: 7px;
}

.footer-container .help-text a img {
    margin-left: 4px;
}

.footer-container {
    background-color: var(--wrapper-color);
    border-top: 0;
    padding: 0 30px;
    text-align: left;
}

hr {
    display: none;
}

.combined-footer {
    margin-top: 10px;
    display: block;
    padding: 5px 0 8px;
    text-align: left;
    max-width: 374px;
}

.pbs-small-logo {
    height: 24px;
    width: 60px;
}

.npr-small-logo {
    margin-left: 18px;
    margin-bottom: 2px;
}

.combined-text {
    display: inline-block;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
}

.combined-learn-more-container {
    position: relative;
    display: inline-block;
    font-size: 14px;
    text-decoration: none;
    color: var(--link-color);
    font-weight: 700;
}

.combined-learn-more-container:hover {
    text-decoration: underline;
    color: var(--link-hover-color);
    cursor: pointer;
}

.combined-learn-more-container .combined-learn-more-tooltip {
    clip-path: polygon(
        0% 0%,
        100% 0%,
        100% calc(100% - 15px),
        calc(50% + 15px) calc(100% - 15px),
        50% 100%,
        calc(50% - 15px) calc(100% - 15px),
        0% calc(100% - 15px)
    );
    font-weight: 500;
    visibility: hidden;
    background-color: var(--pebble);
    width: 270px;
    height: 110px;
    border-radius: 8px;
    bottom: 100%;
    left: 50%;
    text-align: left;
    margin-left: -150px;
    color: var(--white);
    padding: 17px 15px 18px;
    position: absolute;
    z-index: 1;
}

@media screen and (max-width: 400px) {
    .combined-learn-more-container .combined-learn-more-tooltip {
        width: 200px;
        height: 155px;
        margin-left: -150px;
    }
}

.combined-learn-more-container:hover .combined-learn-more-tooltip {
    visibility: visible;
}

.combined-need-help {
    display: inline;
    text-align: left;
    padding-left: 41px;
    padding-top: 18px;
}

#capture_signIn_linkHelp,
#capture_traditionalRegistration_linkHelp {
    display: inline;
    text-decoration: none;
    color: var(--link-color);
    font-weight: 700;
    margin-left: 3px;
}

.policy-footer,
.footer-extra-text {
    display: block;
    margin: 10px 0;
    max-width: 374px;
    text-align: left;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    color: var(--text-footer-color);
}

.policy-footer a {
    text-decoration: none;
    color: var(--link-color);
    font-weight: 700;
}

#capture_socialRegistration_linkTermsOfService:hover,
#capture_socialRegistration_linkPrivacyPolicy:hover,
#capture_traditionalRegistration_linkPrivacyPolicy:hover,
#capture_traditionalRegistration_linkTermsOfService:hover,
#capture_signIn_linkHelp:hover,
#capture_traditionalRegistration_linkHelp:hover,
.policy-footer a:hover {
    text-decoration: underline;
    color: var(--link-hover-color);
}

#capture_socialRegistration_linkTermsOfService:focus,
#capture_socialRegistration_linkPrivacyPolicy:focus,
#capture_traditionalRegistration_linkPrivacyPolicy:focus,
#capture_traditionalRegistration_linkTermsOfService:focus,
#capture_signIn_linkHelp:focus,
#capture_traditionalRegistration_linkHelp:focus,
.policy-footer a:focus {
    outline: 2px solid var(--link-hover-color);
}

.redirect-message {
    text-align: center;
}

.redirect-message a {
    text-decoration: none;
    text-align: center;
    color: var(--link-color);
    font-weight: 700;
}

.redirect-message a:hover {
    text-decoration: underline;
    color: var(--link-hover-color);
}

#capture_manageProfile_security_newPassword,
#capture_traditionalAuthenticateMerge_currentPassword {
    position: relative;
    display: inline-block;
    margin-bottom: 0;
}

#existingPassword {
    font-size: 18px;
}

/* Password input fields */
#capture_signIn_currentPassword,
#capture_manageProfile_security_newPassword,
#capture_resetPassword_newPassword,
#capture_resetPassword_newPasswordConfirm,
#capture_traditionalRegistration_newPassword,
#capture_manageProfile_security_newPasswordConfirm,
#capture_traditionalAuthenticateMerge_currentPassword {
    /* 130px because that is the width we need for the 'Show Password'
    text link hovering within the input */
    padding: 7px 130px 7px 7px;
}

/* Remove the password reveal icon built into the HTML password input on MS Edge */
#capture_signIn_currentPassword::-ms-reveal,
#capture_resetPassword_newPassword::-ms-reveal,
#capture_resetPassword_newPasswordConfirm::-ms-reveal,
#capture_traditionalRegistration_newPassword::-ms-reveal,
#capture_manageProfile_security_newPassword::-ms-reveal,
#capture_manageProfile_security_newPasswordConfirm::-ms-reveal,
#capture_manageProfile_security_currentPassword::-ms-reveal,
#capture_traditionalAuthenticateMerge_currentPassword::-ms-reveal {
    display: none;
}

/* Account Security - Password Update Form */
#capture_manageProfile_security_form_item_newPassword,
#capture_manageProfile_security_form_item_newPasswordConfirm,
#capture_resetPassword_form_item_newPassword,
#capture_resetPassword_form_item_newPasswordConfirm {
    position: relative;
}

#capture_manageProfile_security_changePasswordForm > div.form-action-buttons {
    margin-top: 20px;
}

#capture_manageProfile_privacy_form_item_inner_marketingConsent > label {
    user-select: none;
    padding: 10px;
    margin-bottom: 15px;
    color: var(--label-color);
}

#capture_signIn_form_item_currentPassword,
#capture_traditionalRegistration_form_item_newPassword {
    position: relative;
}

/* Show / Hide Password link that hovers on password fields */
#signin-show-hide-password,
#signin-show-hide-password:hover,
#signin-show-hide-password:active,
#register-show-hide-password,
#register-show-hide-password:hover,
#register-show-hide-password:active,
#merge-accounts-authenticate-password,
#merge-accounts-authenticate-password:hover,
#merge-accounts-authenticate-password:active,
#reset-password-show-hide-new-password,
#reset-password-show-hide-new-password:hover,
#reset-password-show-hide-new-password:active,
#reset-password-show-hide-confirm-new-password,
#reset-password-show-hide-confirm-new-password:hover,
#reset-password-show-hide-confirm-new-password:active {
    background: transparent;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    appearance: none;
    top: 35px;
    right: 15px;
    position: absolute;
    font-size: 14px;
    font-weight: 700;
    color: var(--label-color);
}

#signin-show-hide-password,
#signin-show-hide-password:hover,
#signin-show-hide-password:active,
#register-show-hide-password,
#register-show-hide-password:hover,
#register-show-hide-password:active,
#reset-password-show-hide-new-password,
#reset-password-show-hide-new-password:hover,
#reset-password-show-hide-new-password:active,
#reset-password-show-hide-confirm-new-password,
#reset-password-show-hide-confirm-new-password:hover,
#reset-password-show-hide-confirm-new-password:active {
    color: var(--show-hide-password-color);
}

#capture_signIn_signInForm_errorMessages {
    max-width: 370px;
}

/* Button styles - global */
.sign-in-button:hover,
.register-button:hover,
div.return-to-app-container > button:hover {
    background-color: var(--button-fill-bkg-hover-color) !important;

    /* border: 3px solid var(--button-fill-blue-border-hover-color); */
}

.sign-in-button:focus,
.register-button:focus,
div.return-to-app-container > button:focus {
    background-color: var(--button-fill-bkg-hover-color) !important;
    border: 3px solid var(--button-fill-border-active-color);
}

.register-button:active,
div.return-to-app-container > button:active {
    background-color: var(--button-fill-bkg-active-color);
    border: 3px solid var(--button-fill-border-active-color);
}

.form-action-buttons > button,
#submitRequestChangeEmailButton,
#submitChangeEmailCodeButton,
#manageProfile_privacy > div.manage-screen.content-wrapper > button,
#returnToPbsButton,
.sign-in-button,
.register-button,
div.return-to-app-container > button {
    background-color: var(--button-fill-bkg-color);
    color: var(--button-fill-text-color);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

#manageProfile_privacy > div.manage-screen.content-wrapper > button,
.form-action-buttons > button,
#submitRequestChangeEmailButton,
#submitChangeEmailCodeButton,
#returnToPbsButton {
    margin: 0;
    height: var(--button-form-height);
    width: 100%;
}

.sign-in-button,
.register-button,
div.return-to-app-container > button {
    position: relative;
    border: 3px solid var(--button-fill-border-color);
    text-align: center;
    width: var(--button-form-width);
}

.form-action-buttons > button:focus,
#submitRequestChangeEmailButton:focus,
#submitChangeEmailCodeButton:focus,
#returnToPbsButton:focus {
    background-color: var(--button-fill-bkg-hover-color) !important;
    outline: 3px solid var(--button-fill-border-active-color);
}

.form-action-buttons > button:hover,
#submitRequestChangeEmailButton:hover,
#submitChangeEmailCodeButton:hover,
#returnToPbsButton:hover {
    background-color: var(--button-fill-bkg-hover-color) !important;

    /* border: 3px solid var(--button-fill-blue-border-hover-color); */
}

.form-action-buttons > button:active,
#submitRequestChangeEmailButton:active,
#submitChangeEmailCodeButton:active,
#requestData:active,
#returnToPbsButton:active {
    background-color: var(--button-fill-bkg-active-color);
    outline: 3px solid var(--button-fill-border-active-color);
}

#returnToPbsButton {
    line-height: normal;
}

.logout-container > button,
#capture_manageProfile_data_manageProfile_dataForm
    > div.form-action-buttons
    > button.secondary.aic-control,
#capture_manageProfile_privacy_manageProfile_privacyForm
    > div.form-action-buttons
    > button.secondary.aic-control,
#manageProfile_privacy > div.manage-screen.content-wrapper > button,
#manageProfile_security_form_buttons > button {
    background-color: var(--button-no-fill-bkg-color);
    border: 3px solid var(--button-no-fill-border-color);
    color: var(--button-no-fill-text-color);
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
    padding: 5px;
    width: var(--button-nav-width);
}

.logout-container > button:hover,
#requestData:hover {
    background-color: var(--button-no-fill-bkg-hover-color);
    border: 3px solid var(--button-no-fill-border-hover-color);
    color: var(--button-no-fill-text-hover-color);
}

#manageProfile_data > div.manage-screen.content-wrapper > div.profile-header-actions > div.return-to-app-container > button:focus-visible,
#manageProfile_data > div.manage-screen.content-wrapper > div.profile-header-actions > div.return-to-app-container > button:active,
.logout-container > button:active,
#requestData:active {
    background-color: var(--button-no-fill-bkg-active-color);
    border: 3px solid var(--button-no-fill-border-active-color);
    color: var(--button-no-fill-text-active-color);
}

.logout-container > button:focus,
#requestData:focus {
    outline: 3px solid var(--button-no-fill-border-active-color);
}

#manageProfile_security_form_buttons > button:focus,
#capture_manageProfile_data_manageProfile_dataForm > div.form-action-buttons >
    button.secondary.aic-control.aic-control-ready:focus,
#manageProfile_privacy > div.manage-screen.content-wrapper > button:focus {
    outline: 2px solid var(--link-hover-color);
}

/* Input placeholder text - global */
::placeholder {
    color: var(--slate);
    font-size: 16px;
    line-height: 20px;
}

.capture_error,
.capture_tip_error,
.capture_form_error {
    line-height: 20px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 0 !important;
    color: var(--text-error-color) !important;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: auto 0;
}

/* HTML text input validation failure and required error states */
input#changeEmailInput:invalid {
    background: var(--input-error-background) !important;
    border: 3px solid var(--text-error-color) !important;
}

#capture_resetPasswordRequest_resetPasswordRequestForm_errorMessages .capture_form_error {
    margin: 0 0 20px;
}

.aic-error.change-sent-error {
    color: var(--text-error-color);
}

.required-text {
    color: var(--required-text-color);
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    text-transform: capitalize;
}

#resetPasswordRequestSuccess > div.auth-screen.content-wrapper > p.screen-description,
#resetPasswordSuccess > div.auth-screen.content-wrapper > p.screen-description {
    text-align: center;
    line-height: 22px;
}

#resetPasswordResendText {
    display: inline-block;
    text-align: center;
}

#password-format-suggestion {
    display: block;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    margin-top: -10px;
    margin-bottom: 20px;
    width: var(--button-form-width);
}

.cancel-link {
    margin: 20px auto;
    display: block;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-decoration: none;
    color: var(--header-color);
    width: fit-content;
}

.cancel-link:hover {
    color: var(--header-hover-color);
    text-decoration: underline;
}

/* Reset Password */
#resetPasswordResendLink {
    margin-left: 4px;
    text-decoration: none;
    color: var(--link-color);
    font-weight: 700;
}

a#resetPasswordResendLink:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

#resetPassword > .auth-screen.content-wrapper > form > .form-action-buttons {
    margin-top: 20px;
}

/* Success screens */

/* Checkmark background circle */
.success-check {
    display: block;
    background-color: var(--success-check-bkg-color) !important;
    border: none;
    width: 40px;
    height: 40px;
    min-width: 40px;
    margin: 0 auto;
}

/* Checkmark icon */
.success-check::before {
    content: " ";
    display: block;
    position: relative;
    top: 20%;
    left: 38%;
    width: 8px;
    height: 16px;
    border: solid white;
    border-width: 0 3px 3px 0;
    margin-top: -0.2em;
    transform: rotate(42deg);
    border-radius: 0.5px;
}

.auth-success-screen.content-wrapper {
    max-width: 315px; /* Override the default in base.css */
}

.auth-success-screen.content-wrapper > .screen-heading {
    display: block;
    max-width: unset;
    margin: 15px 0;
}

/* Manage Profile */

#manageProfile > .manage-screen.content-wrapper,
#manageProfile_data > .manage-screen.content-wrapper,
#manageProfile_privacy > .manage-screen.content-wrapper,
#manageProfile_security > .manage-screen.content-wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

#manageProfile > .manage-screen.content-wrapper > .profile-header,
#manageProfile_data > .manage-screen.content-wrapper > .profile-header,
#manageProfile_privacy > .manage-screen.content-wrapper > .profile-header,
#manageProfile_security > .manage-screen.content-wrapper > .profile-header {
    order: 1;
    align-items: center;
}

#manageProfile > .manage-screen.content-wrapper > .profile-header-actions,
#manageProfile_data > .manage-screen.content-wrapper > .profile-header-actions,
#manageProfile_privacy > .manage-screen.content-wrapper > .profile-header-actions,
#manageProfile_security > .manage-screen.content-wrapper > .profile-header-actions {
    order: 2;
}

#manageProfile > .manage-screen.content-wrapper > .screen-heading,
#manageProfile_data > .manage-screen.content-wrapper > .screen-heading,
#manageProfile_privacy > .manage-screen.content-wrapper > .screen-heading,
#manageProfile_security > .manage-screen.content-wrapper > .screen-heading {
    order: 3;
}

#manageProfile > .manage-screen.content-wrapper > .profile-management-container,
#manageProfile_data > .manage-screen.content-wrapper > .profile-management-container,
#manageProfile_privacy > .manage-screen.content-wrapper > .profile-management-container,
#manageProfile_security > .manage-screen.content-wrapper > .profile-management-container {
    order: 4;
}

#capture_manageProfile_data_manageProfile_dataForm > .form-action-buttons,
#authRule_secondFactorRegistrationCode > div.auth-screen.content-wrapper > div.form-action-buttons,
#authRule_secondFactorLoginCode > div.auth-screen.content-wrapper > div.form-action-buttons {
    flex-direction: column;
}

#authRule_secondFactorRegistrationCode > div.auth-screen.content-wrapper > div.form-action-buttons {
    margin: 0;
}

#authRule_secondFactorRegistrationCode
    > div.auth-screen.content-wrapper
    > div.form-action-buttons
    > p.action-description {
    margin: 10px 0 0 !important;
    padding-left: 2px;
}

.profile-header {
    display: flex;
    flex-flow: column;
    text-align: center;
    align-items: center;
}

/* User avatar */
.profile-header-image > .profile-image {
    margin-right: 0;
    max-height: 67px;
    max-width: 67px;
}

/* User display name – e.g., Fred Rogers */
.profile-header > .profile-header-text > h1 {
    color: var(--label-color);
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    margin: 10px 0;
}

/* Profile For: header text */
.profile-header > .profile-header-profile-for > p {
    color: var(--label-color);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    line-height: 21px;
    letter-spacing: 0;
    text-align: center;
    margin: 10px 0;
}

/* User email */
.profile-header > .profile-header-text > h3 {
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    margin: 10px 0 15px;
}

/* Manage Profile - Personal / Account / Privacy options screen */
#manageProfile
    > div.manage-screen.content-wrapper
    > div.profile-management-container
    > div
    > div.card-heading
    > h1 {
    display: flex;
    align-items: center;
    color: var(--header-color);
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: -5px;
    padding-left: 20px;
}

#manageProfile
    > div.manage-screen.content-wrapper
    > div.profile-management-container
    > div
    > div.card-heading
    > h1:hover {
    color: var(--header-hover-color);
    text-decoration: underline;
}

/* Return to PBS button */
#manageProfile
    > div.manage-screen.content-wrapper
    > div.profile-header-actions
    > div.return-to-app-container
    > button,
#manageProfile_data
    > div.manage-screen.content-wrapper
    > div.profile-header-actions
    > div.return-to-app-container
    > button,
#manageProfile_security
    > div.manage-screen.content-wrapper
    > div.profile-header-actions
    > div.return-to-app-container
    > button,
#manageProfile_privacy
    > div.manage-screen.content-wrapper
    > div.profile-header-actions
    > div.return-to-app-container
    > button {
    width: var(--button-nav-width);
    height: var(--button-nav-height);
    margin-bottom: 8px;
    padding: 6px 25px;
}

div.return-to-app-container {
    display: flex;
    justify-content: center;
}

/* Personal Data - Profile saved message */
#capture_manageProfile_data_manageProfile_dataForm
    > div.form-action-buttons
    > div.capture_save_success.capture_profileSavedMessage_container {
    color: var(--success-text-color);
    font-weight: bold;
    text-align: center;
    margin: 20px 0;
}

/* Check Your PBS Passport Status */

.passport-status-link {
    margin: 20px 0 20px 10px;
}

.passport-status-link > a {
    color: var(--link-color);
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    text-decoration: none;
    padding: 1px;
}

.passport-status-link > a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

.passport-status-link > a:focus,
.passport-status-link > a:focus-visible,
.passport-status-link > a:focus-within {
    outline: 2px solid var(--link-hover-color);
}

.passport-status-icon {
    display: inline-flex;
    background: no-repeat center var(--icon-external-link);
    border: none;
    width: 16px;
    height: 14px;
    position: relative;
    top: 2px;
    margin-left: 4px;
}

.card-heading {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 15px;
    margin-left: -15px;
    display: flex;
    align-items: center;
}

.card-heading:focus {
    outline: 2px solid var(--button-no-fill-border-active-color);
}

#manageProfile
    > div.manage-screen.content-wrapper
    > div.profile-management-container
    > div
    > div.card-heading {
    border: none;
}

#manageProfile
    > div.manage-screen.content-wrapper
    > div.profile-management-container
    > div
    > div.card-heading
    > h1
    > span.profile-security.card-icon,
#manageProfile
    > div.manage-screen.content-wrapper
    > div.profile-management-container
    > div
    > div.card-heading
    > h1
    > span.profile-data.card-icon,
#manageProfile
    > div.manage-screen.content-wrapper
    > div.profile-management-container
    > div
    > div.card-heading
    > h1
    > span.profile-privacy.card-icon {
    top: unset;
    margin: 0 8px 0 0;
}

#manageProfile
    > div.manage-screen.content-wrapper
    > div.profile-management-container
    > div
    > div.card-body
    > p {
    max-width: 286px;
    font-size: 16px;
    line-height: 20px;
}

#manageProfile > div.manage-screen.content-wrapper > div.profile-management-container > div,
#manageProfile_privacy
    > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-privacy
    > div
    > div.card-body
    > div
    > div:nth-child(1),
#manageProfile_privacy
    > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-privacy
    > div
    > div.card-body
    > div
    > div:nth-child(2) {
    border: 1px solid #d5d9df;
}

/* Privacy Settings - Remove extra headers */
#manageProfile_privacy
    > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-privacy
    > div
    > div.card-body
    > h2:nth-child(1),
#manageProfile_privacy
    > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-privacy
    > div
    > div.card-body
    > h2:nth-child(4) {
    display: none;
}

/* Privacy Settings - Marketing Consent slider */

/* UNCHECKED ------ */

#capture_manageProfile_privacy_form_item_inner_marketingConsent > label > input + .slider {
    height: 29px;
    width: 70px;
}

#capture_manageProfile_privacy_form_item_inner_marketingConsent > label > input + .slider::before {
    bottom: 2px;
    left: 2px;
    height: 25px;
    width: 25px;
}

/* CHECKED ------ */
#capture_manageProfile_privacy_form_item_inner_marketingConsent > label > input:checked + .slider {
    background-color: var(--link-color);
}

#capture_manageProfile_privacy_form_item_inner_marketingConsent > label > input:checked + .slider::before {
    transform: translateX(41px);
}

#capture_manageProfile_privacy_form_item_inner_marketingConsent > label > input:checked + .slider::after {
    content: "On";
    margin-left: -50px;
    font-size: 16px;
    font-weight: 700;
    color: var(--white);
    position: absolute;
    top: 2px;
    left: -5px;
}

#capture_socialRegistration_form_item_legalAcceptance,
#capture_traditionalRegistration_form_item_legalAcceptance,
#capture_manageProfile_privacy_form_item_marketingConsent {
    margin-bottom: 20px;
}


#capture_socialRegistration_form_item_legalAcceptance > div.capture_tip,
#capture_traditionalRegistration_form_item_legalAcceptance > div.capture_tip,
#capture_manageProfile_privacy_form_item_marketingConsent > div.capture_tip {
    margin-left: 80px;
}

#capture_manageProfile_privacy_manageProfile_privacyForm {
    display: none;
}

#capture_manageProfile_privacy_manageProfile_privacyForm > div.form-action-buttons {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Privacy Settings - Remove extra description */
#manageProfile_privacy
    > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-privacy
    > div
    > div.card-body
    > p {
    display: none;
}

#manageProfile_security
    > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-security
    > div
    > div.card-heading.aic-control
    > h1,
#manageProfile_privacy
    > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-privacy
    > div
    > div.card-heading.aic-control
    > h1,
#manageProfile_data
    > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-data
    > div
    > div.card-heading.aic-control
    > h1 {
    color: var(--header-color);
}

/* Profile Management - Account Security */
#profileEmail,
#profilePassword {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Email Address, Password, and Integrations headers */
#profileEmail > .profile-show > h2,
#profilePassword > .profile-show > h2,
#manageProfile_security
    > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-security
    > div
    > div.card-body
    > section.integrations
    > article
    > div
    > div.flex-quad-header
    > h2 {
    color: var(--header-color);
    margin-bottom: 5px;
    font-size: 16px;
}

#containerChangeEmailConfirm > h2 {
    color: var(--header-color);
    font-size: 16px;
    line-height: 24px;
    margin-top: 0;
}

#containerChangeEmailConfirm > p {
    font-size: 14px;
    line-height: 17px;
    margin-bottom: 0;
}

#containerChangeEmailSuccess > p.aic-success {
    color: var(--success-text-color);
    font-weight: bold;
    text-align: left;
}

/* Code invalid message */
#resendCodeSecondFactorLoginInvalid > p > a,
#resendCodeSecondFactorRegistrationInvalid > p > a,
#resendCodeSecondFactorChangeEmailInvalid > p > a {
    text-decoration: none;
    color: var(--link-color);
    font-weight: 700;
}

#resendCodeSecondFactorLoginInvalid > p > a:hover,
#resendCodeSecondFactorRegistrationInvalid > p > a:hover,
#resendCodeSecondFactorChangeEmailInvalid > p > a:hover {
    text-decoration: underline;
    color: var(--link-hover-color);
}

#resendCodeSecondFactorLoginInvalid > p.aic-error,
#resendCodeSecondFactorRegistrationInvalid > p.aic-error,
#resendCodeSecondFactorChangeEmailInvalid > p.aic-error {
    margin-top: 0;
    margin-bottom: 0;
}

#profileEmail > .profile-show > p,
#profilePassword > .profile-show > p,
#manageProfile_security
    > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-security
    > div
    > div.card-body
    > section.integrations
    > article
    > div
    > div.flex-quad-header
    > p {
    margin-top: 5px;
    font-size: 16px;
}

/* Profile Management - Pencil icon dropdown button  */
#profileEmail > div.profile-actions > div > button,
#profilePassword > div.profile-actions > aside > button {
    background: no-repeat center var(--icon-pencil);
    border: none !important;
}

/* Existing Linked Accounts List */
/* ID-369 - show the existing integrations panel */
.janrain-capture-ui .capture_provider_linked {
    border: 1px solid var(--border-color);
    border-radius: 5px;
}

/* disconnect link */
.capture_remove.capture_remove_linkedaccount::before {
    color: var(--link-color) !important;
    font-weight: bold;
}

.capture_remove.capture_remove_linkedaccount {
    bottom: 3px !important;
}

.capture_remove.capture_remove_linkedaccount:hover {
    text-decoration: underline;
    color: var(--link-hover-color);
}

.janrain-capture-ui .capture_provider_linked .linked-profile-image {
    border-radius: 2px;
    width: 39px;
    height: 39px;
}

.capture_provider_linked > span[class*="janrain-provider-text"] {
    border-left: 1px solid var(--border-color) !important;
}

#capture_manageProfile_security_linkedAccounts_linkedproviderlist {
    padding-left: 0;
}

/* Profile Management - Account Security - Change Email/Password */
#profileEmailAction,
#profilePasswordAction {
    background-color: transparent;
    border: 1px solid var(--border-color);
    padding: 10px 15px;
    margin: 0 -6px 0 -13px; /* negative values to allow border of expanded card section to spill over */
    border-radius: 5px;
}

#profileEmailAction > aside.profile-action-icons > button,
#profilePasswordAction > aside.profile-action-icons > button {
    background: var(--icon-collapse) no-repeat center;
    border: none !important;
    position: relative;
    float: right;
}

#profileEmailAction > #containerChangeEmailForm > h2,
#profilePasswordAction > div.add.edit > h2 {
    color: var(--header-color);

    /* We need to set the padding-top to be less than the other items
    because it needs to line up with the collapse icon floating to the right */
    margin-top: 2px;
    margin-bottom: 5px;
    font-size: 16px;
    line-height: 24px;
}

#profileEmailAction > #containerChangeEmailForm > label {
    color: var(--label-color);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    margin-top: 7px;
}

#containerChangeEmailForm > p:nth-child(4) {
    /* the change email input box */
    margin-top: 5px;
}

#profileEmailAction > #containerChangeEmailForm > p.action-description {
    margin-top: 0;
}

#containerChangeEmailForm > label {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 5px;
}

#link-account-aicError {
    color: var(--text-error-color);
}

/* Account Security > Password changed successfully message */
#manageProfile_security
    > div.manage-screen
    > div.profile-management-container
    > div.profile-management-card
    > div.card-body
    > section.profile
    > div.capture_save_success {
    color: var(--success-text-color);
    font-weight: bold;
    margin: 0 0 20px;
}

#manageProfile > div.manage-screen.content-wrapper > h1.screen-heading,
#manageProfile_data > div.manage-screen.content-wrapper > h1.screen-heading,
#manageProfile_privacy > div.manage-screen.content-wrapper > h1.screen-heading,
#manageProfile_security > div.manage-screen.content-wrapper > h1.screen-heading {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    text-align: left;
    color: var(--text-color);
    margin-top: 30px;
    padding-left: 18px;
    padding-right: 18px;
}

.profile-header-actions > .logout-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logout {
    position: unset;
    top: unset;
    right: unset;
}

.chevron::before {
    background: var(--icon-arrow-right) no-repeat center;
    border: none;
    height: 20px;
    width: 11px;
    display: inline-flex;
    content: "";
    top: -2px;
}

.chevron.right::before {
    transform: none;
}

.chevron.left::before {
    transform: rotate(-180deg);
}

.card-heading .chevron.right {
    top: 30px;
}

/* General profile management card cleanup */
.profile-management-card {
    background-color: var(--container-color);
    color: var(--text-color);
    padding: 12px 15px;
    margin: 15px 0;
    box-shadow: none;
    min-width: unset;
    max-width: unset;
    margin-top: unset;
    overflow: unset;
    border-radius: 5px;
}

.profile-management-card:focus {
    outline: 2px solid var(--button-no-fill-border-active-color);
}

.profile-management-card.large {
    padding: 0;
    margin: 0 15px 15px;
}

.profile-management-card.large .card-body,
.card-body {
    padding: 0;
}

#manageProfile_security
    > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-security
    > div
    > div.card-heading.aic-control
    > h1
    > span.chevron.left,
#manageProfile_privacy
    > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-privacy
    > div
    > div.card-heading.aic-control
    > h1
    > span.chevron.left,
#manageProfile_data
    > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-data
    > div
    > div.card-heading.aic-control
    > h1
    > span.chevron.left {
    position: relative;
    width: 11px;
    height: 100%;
    display: inline-flex;
    top: 7px;
    margin: 0 10px 0 0;
}

#manageProfile_data
    > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-data
    > div
    > div.card-heading.aic-control
    > h1,
#manageProfile_security
    > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-security
    > div
    > div.card-heading.aic-control
    > h1,
#manageProfile_privacy
    > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-privacy
    > div
    > div.card-heading.aic-control
    > h1 {
    margin: 10px 0 15px;
    font-size: 16px;
}

#manageProfile_data
    > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-data
    > div
    > div.card-heading.aic-control
    > h1:hover,
#manageProfile_security
    > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-security
    > div
    > div.card-heading.aic-control
    > h1:hover,
#manageProfile_privacy
    > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-privacy
    > div
    > div.card-heading.aic-control
    > h1:hover {
    text-decoration: underline;
    color: var(--header-hover-color);
}

/* Profile Management - Button - Back To User Profile  */
#capture_manageProfile_data_manageProfile_dataForm
    > div.form-action-buttons
    > button.secondary.aic-control.aic-control-ready,
#manageProfile_privacy > div.manage-screen.content-wrapper > button,
#manageProfile_security_form_buttons > button {
    outline: 0;
    background-color: transparent !important;
    border: none !important;
    width: var(--button-form-width);
    height: var(--button-form-height);
    margin: 10px 0;
}

#manageProfile_privacy > div.manage-screen.content-wrapper > button {
    width: 100%;
}

#capture_manageProfile_data_manageProfile_dataForm
    > div.form-action-buttons
    > button.secondary.aic-control.aic-control-ready:hover,
#manageProfile_security_form_buttons > button:hover,
#manageProfile_privacy > div.manage-screen.content-wrapper > button:hover,
#manageProfile_security_form_buttons > button:hover {
    outline: 0;
    text-decoration: underline;
    background-color: transparent !important;
    border: none;
    color: var(--header-hover-color);
}

.profile-management-card.large .card-heading .card-icon {
    margin: 0 8px 0 3px !important;
    top: 6px;
    display: inline-flex;
}

.verified-identifier {
    font-family: OrgFont, var(--font-style);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0;
    text-align: left;
    color: var(--verified-color);
}

#manageProfile_privacy
    > .manage-screen.content-wrapper
    > .profile-management-container
    > .profile-management-card
    > .card-body
    > .flex-row {
    flex-direction: column;
}

/* Back to User Profile button */
.privacy-back-to-user-profile {
    order: 5;
    border: none;
    margin-bottom: 25px;
    width: 100%;
}

#requestData {
    border-radius: var(--button-border-radius);
    background-color: var(--bkg-color);
    border: 3px solid var(--border-color);
    color: var(--text-color);
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
    display: block;
    margin: 0 auto;
    width: 80%;
    padding: 7px;
}

#deleteAccount {
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
    display: block;
    width: 80%;
    padding: 7px;
    background-color: var(--delete-account-button-bkg-color);
    color: var(--delete-account-button-text-color);
    border: 3px solid var(--delete-account-button-border-color);
    margin: 0 auto 15px;
    height: var(--button-nav-height);
}

#deleteAccount:hover,
#deleteAccount:active,
#deleteAccount:focus {
    background-color: var(--delete-account-button-bkg-hover-color);
    border: 3px solid var(--delete-account-button-border-hover-color) !important;
}

#manageProfile_privacy > div.manage-screen.content-wrapper >
    div.profile-management-container.profile-privacy > div > div.card-body > div >
    div:nth-child(2) {
    padding: 10px 15px !important;
}

#manageProfile_privacy >
    div.manage-screen.content-wrapper >
    div.profile-management-container.profile-privacy >
    div > div.card-body > div > div:nth-child(2) > h3 {
    margin-bottom: 0;
}

#manageProfile_privacy > div.manage-screen.content-wrapper >
    div.profile-management-container.profile-privacy > div > div.card-body >
    div > div:nth-child(2) > p {
    margin-top: 0;
    margin-bottom: 20px;
}

/* Cards - Request My Data & Delete My Account */
#manageProfile_privacy
    > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-privacy
    > div
    > div.card-body
    > div
    > div.action-card {
    background-color: transparent;
    padding: 10px 25px;
    margin: 2% -5.6% 4% -4%;
}

#manageProfile_privacy
    > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-privacy
    > div
    > div.card-body
    > div
    > div.action-card
    > p {
    font-size: 16px;
    line-height: 20px;
}

#manageProfile_privacy
    > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-privacy
    > div
    > div.card-body
    > div.flex-row
    > div.action-card
    > h3 {
    color: var(--header-color);
    font-size: 16px;
    line-height: 20px;
}

#manageProfile_privacy
    > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-privacy
    > div
    > div.card-body
    > div
    > div:nth-child(1) {
    display: none;
}


/* Verification Code - Registration or Second Factor Login */

#containerChangeEmailConfirm > p:nth-child(3) > label,
#authRule_secondFactorRegistrationCode
    > div.auth-screen.content-wrapper
    > div.form-action-buttons
    > p.action-description,
#authRule_secondFactorLoginCode
    > div.auth-screen.content-wrapper
    > div.form-action-buttons
    > p.action-description {
    font-weight: 700;
    color: var(--label-color);
    font-size: 16px;
    line-height: 24px;
    margin: 15px 0 0;
}

#submitChangeEmailCodeButton {
    width: 100%;
}

#resendCodeSecondFactorChangeEmail > p,
#resendCodeSecondFactorRegistration > p,
#resendCodeSecondFactorLogin > p {
    font-weight: 700;
    color: var(--link-color);
    font-size: 14px;
    line-height: 17px;
}

#resendCodeSecondFactorChangeEmail > p > a,
#resendCodeSecondFactorRegistration > p > a,
#resendCodeSecondFactorLogin > p > a {
    text-decoration: none;
    color: var(--link-color);
}

#resendCodeSecondFactorChangeEmail > p > a:hover,
#resendCodeSecondFactorRegistration > p > a:hover,
#resendCodeSecondFactorLogin > p > a:hover {
    text-decoration: underline;
    color: var(--link-hover-color);
}

#secondFactorCodeChangeEmailInput,
#secondFactorCodeLoginInput,
#secondFactorCodeRegistrationInput {
    width: 30%; /* Only 30% because we need room for the Resend Code link */
    margin-right: 8px;
    padding-left: 10px;
}

/* Delete Account Success */

#deleteAccountSuccess > .auth-success-screen.content-wrapper {
    max-width: unset;
}

/* Thank You message screen */
#visitingMessage > .auth-success-screen > .screen-description {
    text-align: center;
}

/* Only #visitingMessage screen has "header" instead of the "heading". */
#visitingMessage > .auth-success-screen > .screen-header {
    color: var(--label-color);
    font-weight: 700;
    font-size: 22px;
    line-height: 30px;
    text-align: center;
}

/* Updated Terms of Service screen links */
#capture_socialRegistration_linkTermsOfService,
#capture_socialRegistration_linkPrivacyPolicy,
#capture_traditionalRegistration_linkPrivacyPolicy,
#capture_traditionalRegistration_linkTermsOfService,
#capture_authRule_acceptLegal_linkTermsOfService,
#capture_authRule_acceptLegal_linkPrivacyPolicy {
    color: var(--link-color);
    font-weight: 700;
    text-decoration: none;
}

#capture_authRule_acceptLegal_authRuleLegalAcceptanceForm {
    margin-top: 30px;
}

/* Default Akamai loading message  */
.janrain-capture-ui .capture_processing {
    color: var(--processing-message-color);
    text-align: center;
    font-style: italic;
    font-size: 16px !important;
    line-height: 24px;
}

/* Checkbox container label */
.checkboxLabel {
    order: 5;
    text-indent: 15px !important;
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px !important;
    font-weight: 400 !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: var(--text-color);
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 3px;
    left: 0;
    height: 16px;
    width: 16px;
    border: 1px solid var(--pebble);
    background-color: var(--fog);
    border-radius: 2px;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark::after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkboxLabel input:checked ~ .checkmark::after {
    display: block;
}

/* Style the checkmark/indicator */
.checkboxLabel .checkmark::after {
    left: 2px;
    top: -1px;
    width: 14px;
    height: 7px;
    border-left: 2px solid var(--checkmark-color);
    border-bottom: 2px solid var(--checkmark-color);
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#capture_socialRegistration_legalAcceptance,
#capture_traditionalRegistration_legalAcceptance {
    display: inline;
    position: relative;
    height: 0;
    width: 0;
    opacity: 0;
    z-index: 0;
}

.janrain-capture-ui .switch .capture_checkbox label {
    margin-bottom: -10px;
}

/* Delete Account success screen */
#deleteAccountSuccess > div.auth-success-screen.content-wrapper {
    max-width: 440px;
}

/* Making pages fit smaller screens */
.card-body {
    width: 93%;
}

#capture_manageProfile_data_manageProfile_dataForm
    > div.form-action-buttons
    > button.secondary.aic-control.aic-control-ready,
#manageProfile_security_form_buttons > button {
    width: 100%;
}

.profile-management-card {
    width: 100%;
}

#manageProfile_data > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-data > div
    > div.card-heading.aic-control.aic-control-ready,
#manageProfile_security > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-security
    > div > div.card-heading.aic-control.aic-control-ready,
#manageProfile_privacy > div.manage-screen.content-wrapper
    > div.profile-management-container.profile-privacy > div
    > div.card-heading.aic-control.aic-control-ready {
    width: 100%;
}

#password-format-suggestion {
    width: 100%;
}

#captureRetrievingUserDataBuiltIn > div {
    padding-left: 20px;
}

#manageProfile_privacy >
    div.manage-screen.content-wrapper >
    div.profile-management-container.profile-privacy >
    div > div.card-body > div {
    margin: 0 10px 0 1px;
}

#manageProfile
    > div.manage-screen.content-wrapper
    > div.profile-management-container
    > div > div.card-body > p {
    width: 85%;
}

#capture_socialRegistration_socialRegistrationForm > #password-format-suggestion {
    display: none;
}

.policy-footer {
    padding-bottom: 6em;
}

#manageProfile_privacy > div.manage-screen.content-wrapper > button {
    order: 5;
    margin: 10px 0 15px;
}

#manageProfile_privacy > div.manage-screen.content-wrapper > div.profile-management-container.profile-privacy {
    height: 300px;
}

/* prevents email from overflowing on the verification code page and different sections of the profile screen - start */
#existingEmail {
    width: 310px;
    word-wrap: break-word;
}

#manageProfile_privacy > div.manage-screen.content-wrapper > div.profile-header > div.profile-header-text > h3,
#manageProfile_data > div.manage-screen.content-wrapper > div.profile-header > div.profile-header-text > h3,
#manageProfile > div.manage-screen.content-wrapper > div.profile-header > div.profile-header-text > h3,
#manageProfile_security > div.manage-screen.content-wrapper > div.profile-header > div.profile-header-text > h3 {
    width: 360px;
    word-wrap: break-word;
}

@media screen and (max-width: 430px) {
    #existingEmail {
        width: 280px;
    }

    #manageProfile_privacy > div.manage-screen.content-wrapper > div.profile-header > div.profile-header-text > h3,
    #manageProfile_data > div.manage-screen.content-wrapper > div.profile-header > div.profile-header-text > h3,
    #manageProfile > div.manage-screen.content-wrapper > div.profile-header > div.profile-header-text > h3,
    #manageProfile_security > div.manage-screen.content-wrapper > div.profile-header > div.profile-header-text > h3 {
        width: 320px;
    }
}

@media screen and (max-width: 390px) {
    #existingEmail {
        width: 250px;
    }
}

@media screen and (max-width: 360px) {
    #existingEmail {
        width: 230px;
    }

    #manageProfile_privacy > div.manage-screen.content-wrapper > div.profile-header > div.profile-header-text > h3,
    #manageProfile_data > div.manage-screen.content-wrapper > div.profile-header > div.profile-header-text > h3,
    #manageProfile > div.manage-screen.content-wrapper > div.profile-header > div.profile-header-text > h3,
    #manageProfile_security > div.manage-screen.content-wrapper > div.profile-header > div.profile-header-text > h3 {
        width: 280px;
    }
}

@media screen and (max-width: 340px) {
    #existingEmail {
        width: 160px;
    }

    #manageProfile_privacy > div.manage-screen.content-wrapper > div.profile-header > div.profile-header-text > h3,
    #manageProfile_data > div.manage-screen.content-wrapper > div.profile-header > div.profile-header-text > h3,
    #manageProfile > div.manage-screen.content-wrapper > div.profile-header > div.profile-header-text > h3,
    #manageProfile_security > div.manage-screen.content-wrapper > div.profile-header > div.profile-header-text > h3 {
        width: 240px;
    }
}

/* prevents email from overflowing on the verification code page and different sections of the profile screen - end */

/* prevents delete account button from overlapping with Back to Profile button - start */
@media screen and (max-width: 372px) {
    #manageProfile_privacy > div.manage-screen.content-wrapper > button {
        margin-top: 40px;
    }
}

@media screen and (max-width: 338px) {
    #manageProfile_privacy > div.manage-screen.content-wrapper > button {
        margin-top: 50px;
    }
}

@media screen and (max-width: 306px) {
    #manageProfile_privacy > div.manage-screen.content-wrapper > button {
        margin-top: 70px;
    }
}

/* prevents delete account button from overlapping with Back to Profile button - end */