---
updatedAt: 2026-04-20T20:20:17.000Z
---

# 2FA Required screen (v2) CSS

![](https://techdocs.akamai.com/identity-cloud/img/oidc/hosted-login-v2/v2-screens/v2-screens-css/h2-authrule-secondfactor-thumbnail.png)

This screen appears after:

1. A user has been authenticated.

2. Two-factor authentication is in force.

3. The user has both a verified email address and a verified mobile number.

If all of the preceding conditions are true, the authRule\_secondFactor appears and the user can choose whether their two-factor access code is sent to them via email or via text messaging.

See [Add custom CSS stylesheets](https://techdocs.akamai.com/identity-cloud/docs/add-custom-css-stylesheets) here for information on overriding the default CSS settings.

<br>

# Login page HTML

To help you put the CSS classes in context, the following snippet shows the HTML markup used to define the screen, with the CSS classes highlighted using red text. To view the latest HTML for a screen, right-click a blank spot on your Hosted Login login page, click **View Page Source**, then search for the screen name.

[block:code]
{
  "codes": [
    {
      "code": "  <div style=\"display:none;\" id=\"authRule\\_secondFactor\" class=\"screen\">\n  <div class=\"auth-screen content-wrapper\">\n    <h1 class=\"screen-heading\">{* textAuthRuleSecondFactorHeading *}</h1>\n    <p class=\"screen-description\">{* textAuthRuleSecondFactorValue *}</p>\n      <div class=\"form-action-buttons\">\n        <p class=\"action-description\">{* textAuthRuleSecondFactorActionTitle *}</p>\n            <div id=\"requestSecondFactorEmailCodeContainer\">\n                <p class=\"action-description\" id=\"requestSecondFactorEmailCodeTitle\">{* textAuthRuleSecondFactorEmailCodeTitle *}</p>\n                <button type=\"submit\" id=\"requestSecondFactorEmailCodeButton\" class=\"aic-control\" data-action=\"requestSecondFactorEmailCode\">g*****p@hotmail.com</button>\n                <p class=\"aic-error\" id=\"requestSecondFactorCodeEmailError\"></p>\n            </div>\n        <p style=\"display:none;\" class=\"aic-error\" id=\"requestSecondFactorCodeError\">{* textAuthRuleSecondFactorActionError *}</p>\n      </div>\n  </div>\n  <div class=\"additional-actions-container\">\n    <div class=\"content-wrapper\">\n      <span class=\"help-text\"><a href=\"\"view-source%3Ahttps%3A//v1.api.us.janrain.com/e0a70b4f-1eef-4856-bcdb-f050fee66aae/auth-ui/v2/login?\\_\\_aic\\_csrf=fo3YXieocsFVRsd\\_&client\\_id=64430515-01ea-4f5d-82e4-c36161af0093&code\\_challenge=qsPq1vY\\_27mtHgxHIiIdBg6LTMGOz1OipZM2Ynn9ETA&code\\_challenge\\_method=S256&prompt=login&redirect\\_uri=https%3A%2F%2Foidc-playground.akamai.com%2Fredirect\\_uri&response\\_type=code&scope=openid&state=XGW3\\_EvXQQ5RqYgGqXYpMMrbFJYpXpPapBX7dvQ0ywo\">#\" class=\"aic-control cancel-link\" data-action=\"cancel\">{* textCancelRequest *}</a></span>\n    </div>\n  </div>\n  <div class=\"footer-container\">\n    <div class=\"content-wrapper\">\n        <span class=\"help-link\">{* textNeedHelp *}{* linkHelp *}</span>\n        <div class=\"footer-text\">\n        {* textFooter *}\n        </div>\n        <div class=\"footer-extra-text\">\n        {* textFooterExtra *}\n        </div>\n    </div>\n</div>\n</div>",
      "language": "html"
    }
  ]
}
[/block]

<br>

# CSS classes used on this screen

The following table lists all the CSS classes used on this screen; the table also includes the default CSS specified for each class (note that some classes, such as **footer-text**, are not spelled out in the base.css file).

| Class                                                            | **Default CSS**                                                                                                           |
| :--------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------ |
| action-description                                               |                                                                                                                           |
| [additional-actions-container](https://techdocs.akamai.com/identity-cloud/docs/additional-actions-container) | .additional-actions-container {  <br/>    padding: 25px;  <br/>    text-align:center  <br/>}                              |
|                                                                  | .aic-control {<br />    cursor:pointer<br />}<br /><br />.cancel-link {<br />display: block;margin - bottom: 10 px<br />} |
| aic-control                                                      | .aic-control {<br/>    cursor:pointer<br/>}                                                                               |
| aic-error                                                        | .aic-error {<br />   color:# fa5151<br />}                                                                                |
| [auth-screen content-wrapper](https://techdocs.akamai.com/identity-cloud/docs/auth-screen-content-wrapper)   | .auth-screen.content-wrapper {  <br/>   max-width:500px  <br/>}                                                           |
| [content-wrapper](https://techdocs.akamai.com/identity-cloud/docs/content-wrapper)                           | content-wrapper {  <br/>   background-color: #fff;  <br/>   box-shadow:1px 1px 5px 2px rgba(0, 0, 0, .1)  <br/>}          |
| [footer-container](https://techdocs.akamai.com/identity-cloud/docs/footer-container-1)                       | footer-container {<br/>    padding: 25 px;<br/>    border - top: 1 px solid #f2f2f2;<br/>    text - align: center<br/>}   |
| [footer-extra-text](https://techdocs.akamai.com/identity-cloud/docs/footer-extra-text)                       |                                                                                                                           |
| [footer-text](https://techdocs.akamai.com/identity-cloud/docs/footer-text)                                   |                                                                                                                           |
| [form-action-buttons](https://techdocs.akamai.com/identity-cloud/docs/form-action-buttons-1)                 | .form-action-buttons {  <br/>   margin:0 -10px  <br/>}                                                                    |
| [help-link](https://techdocs.akamai.com/identity-cloud/docs/help-link)                                       |                                                                                                                           |
| [help-text](https://techdocs.akamai.com/identity-cloud/docs/help-text)                                       |                                                                                                                           |
| [screen-description](https://techdocs.akamai.com/identity-cloud/docs/screen-description)                     |                                                                                                                           |
| [screen-heading](https://techdocs.akamai.com/identity-cloud/docs/screen-heading-1)                           | .screen-heading {  <br/>   margin-top:0  <br/>}                                                                           |

<br>

# CSS classes mapped to  UI elements

The following graphic maps CSS classes to the more-visible UI elements used in the screen:

![](https://techdocs.akamai.com/identity-cloud/img/oidc/hosted-login-v2/v2-screens/v2-screens-css/h2-authrule-secondfactor-css.png)

<br>

# See also

* [2FA Required screen (v2) overview](https://techdocs.akamai.com/identity-cloud/docs/the-v2-2fa-required-screen-authrule_secondfactor-overview)
* [2FA Required screen (v2) text reference](https://techdocs.akamai.com/identity-cloud/docs/the-v2-2fa-required-screen-authrule_secondfactor-text-reference)

# Sibling pages

* [Account Created screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-account-created-screen-registrationsuccess-css.md)
* [Account Marked for Deletion screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-account-marked-for-deletion-screen-deleteaccountsuccess-css.md)
* [Additional Information Required screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-additional-information-required-screen-authrule_reqattrs-css.md)
* [Complete Social Registration screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-complete-social-registration-screen-socialregistration-css.md)
* [Create Account screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-create-account-screen-traditionalregistration-css.md)
* [Email Has Been Verified screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-email-has-been-verified-screen-verifyemailsuccess-css.md)
* [Email Verification Code Not Valid screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-email-verification-code-not-valid-screen-verifyemail-css.md)
* [Email Verification Required screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-email-verification-required-screen-resendverificationsuccess-css.md)
* [Forgot Password screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-forgot-password-screen-resetpasswordrequest-css.md)
* [Login Access Code Required screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-login-access-code-required-screen-authrule_secondfactorlogincode-css.md)
* [Logout Success screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-logout-success-screen-logoutsuccess-css.md)
* [Manage Account Security screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-manage-account-security-screen-manageprofile_security-css.md)
* [Manage Privacy Setting Screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-manage-privacy-setting-screen-manageprofile_privacy-css.md)
* [Manage User Profile screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-manage-profile-screen-manageprofile-css.md)
* [Manage Personal Data Screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-manage-user-data-screen-manageprofile_data-css.md)
* [Merge Social Account screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-merge-social-account-screen-mergeaccounts-css.md)
* [Merge Traditional Account screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-merge-traditional-account-screen-traditionalauthenticatemerge-css.md)
* [Password Has Been Changed screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-v2-password-has-been-changed-screen-resetpasswordsuccess-css.md)
* [Password Reset Instructions screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-password-reset-instructions-screen-resetpasswordrequestsuccess-css.md)
* [Password Reset Link is Invalid screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-password-reset-link-is-invalid-screen-resetpasswordcodeexchange-css.md)
* [Registration Access Code Required screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-registration-access-code-required-screen-authrule_secondfactorregistrationcode-css.md)
* [Request Personal Data screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-request-personal-data-screen-requestdatasuccess-css.md)
* [Reset Password screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-reset-password-screen-resetpassword-css.md)
* [Sign-In screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-sign-in-screen-signin-css.md)
* [Sign-In Success screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-sign-in-success-screen-loginsuccess-css.md)
* [Terms of Service screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-terms-of-service-screen-authrule_acceptlegal-css.md)
* [Thank You for Visiting screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-thank-you-for-visiting-screen-visitingmessage-css.md)
* [User Consent Required screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/the-v2-user-consent-required-screen-authrule_consents-css.md)
* [Verification Email Sent screen (v2) CSS](https://techdocs.akamai.com/identity-cloud/docs/verification-email-sent-screen-v2-css.md)