---
updatedAt: 2026-04-20T20:18:05.000Z
---

# Sign-In screen (v1) CSS

[block:callout]
{
  "type": "info",
  "body": "Looking for the Hosted Login v2 version of this screen? Then see [Sign-In screen v2](https://techdocs.akamai.com/identity-cloud/docs/the-v2-sign-in-screen-signin-css)."
}
[/block]

<br>

![](https://techdocs.akamai.com/identity-cloud/img/oidc/user-experience/configuration/v1-screens-css/signin-menu.png)

This screen is the starting point for user logins and registrations. By default, this is the first screen that appears when a user clicks a link for logging on to or registering with a site.

<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. 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 id=\"signIn\" class=\"screen\">  \n <div class=\"auth-screen content-wrapper\">  \n   <h1 class=\"screen-heading\">{* textSignInScreenHeading *}</h1>  \n   <p class=\"screen-description\">{* textSignInScreenSubHeading *}</p>  \n   <div class=\"social-signin\">  \n     <div class=\"social-login-buttons\"></div>  \n   </div>  \n   <hr>  \n   <span class=\"alternate-credentials\">{* textSignInAlternativeCredentials *}</span>  \n   <div class=\"traditional-signin\">  \n     {* #signInForm *}  \n       {* signInEmailAddress *}  \n       {* currentPassword *}  \n       <div class=\"form-action-buttons\">  \n         <button type=\"submit\" class=\"sign-in-button\">{* textSignIn *}</button>  \n         <a href=\"#\" class=\"forgot-password-link aic-control\" data-render-screen=\"resetPasswordRequest\">{* textForgotPassword *}</a>  \n         </div>  \n     {* /signInForm *}  \n   </div>  \n </div>  \n <div class=\"additional-actions-container\">  \n   <div class=\"content-wrapper\">  \n     <span class=\"help-text\">{* textNeedAnAccount *}<a href=\"#\" class=\"aic-control\" data-render-screen=\"traditionalRegistration\">{* textSignUp *}</a></span>  \n     <span class=\"help-text\"><a href=\"#\" 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**, aren't defined in the base.css file.

| CSS Class                                              | Default CSS                                                                                                                                                   |
| :----------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| additional-actions-container                           | .additional-actions-container {  <br/>    padding: 25px;  <br/>    text-align:center  <br/>}                                                                  |
| aic-control cancel-link                                | .aic-control {  <br/>   cursor:pointer  <br/>}<br /><br />.cancel-link {  <br/>   display: block;  <br/>   margin-bottom:10px  <br/>}                         |
| aic-control                                            | .aic-control {  <br/>   cursor:pointer  <br/>}                                                                                                                |
| alternate-credentials                                  | .alternative-credentials {  <br/>    display: block;  <br/>    font-weight: bold;  <br/>    margin-bottom:15px  <br/>}                                        |
| auth-screen content-wrappe                             | .auth-screen.content-wrapper {  <br/>   max-width:500px  <br/>}                                                                                               |
| content-wrapper                                        | content-wrapper {  <br/>   background-color: #fff;  <br/>   box-shadow:1px 1px 5px 2px rgba(0, 0, 0, .1)  <br/>}                                              |
| footer-container                                       | .footer-container {  <br/>   padding: 25px;  <br/>   border-top: 1px solid #f2f2f2;  <br/>   text-align:center  <br/>}                                        |
| footer-extra-tex                                       |                                                                                                                                                               |
| footer-text                                            |                                                                                                                                                               |
| forgot-password-link-aic-control word-link aic-control | .aic-control {  <br/>   cursor:pointer  <br/>}<br /><br />.forgot-password-link {  <br/>   position: absolute;  <br/>   right: 8px;  <br/>   bottom:0  <br/>} |
| form-action-buttons                                    | .form-action-buttons {  <br/>   margin:0 -10px  <br/>}                                                                                                        |
| help-link                                              |                                                                                                                                                               |
| help-text                                              |                                                                                                                                                               |
| screen                                                 | .screen {  <br/>   min-width:460px  <br/>}                                                                                                                    |
| screen-description                                     |                                                                                                                                                               |
| screen-heading                                         | .screen-heading {  <br/>   margin-top:0  <br/>}                                                                                                               |
| sign-in-button                                         |                                                                                                                                                               |
| social-login-buttons                                   |                                                                                                                                                               |
| social-signin                                          |                                                                                                                                                               |
| traditional-signin                                     | .traditional-signin {  <br/>   position:relative  <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/user-experience/configuration/v1-screens-css/signin-css.png)

<br>

# See also

* [Sign-in screen (v1) overview](https://techdocs.akamai.com/identity-cloud/docs/the-v1-sign-in-screen-signin-overview)
* [Sign-In screen (v1) text reference](https://techdocs.akamai.com/identity-cloud/docs/the-v1-sign-in-screen-signin-text-reference)

# Sibling pages

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