# CSS file examples

In this file, you can find some examples of CSS files used for several OpenIAM pages. Updating the file and applying the styles and themes as described in [branding customization overview](/branding.md) and [creating a custom CSS](/branding/creating-and-adding-a-custom-css-file-to-openiam.md) file allows the user to customize branding on the page as needed.

## CSS file structure for a login page

{% code overflow="wrap" expandable="true" %}

```css
body {
	margin:0;
	padding:0;
	font-family:Arial;
	font-size:12px;
	background:#333;
}

.error {
	width:210px;
}

.authError {
	float: left;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 20%;
    text-align: center;
}


#llogo{
	float:left;
	width:100%;
	text-align:center;
}

#credentials{
    float: left;
    margin-bottom: 25px;
    margin-top: 20px;
    text-align: center;
    width: 100%;
}

#login-form, #unlock-form, #forgot-principal-form {
	float:left;
	width:300px;
	margin:0 auto;
	padding:0 40px;
}

.lrow{
    text-align: right;
	width:100%;
	margin-top:20px;
}

.lrow a{
	width:50%;
	line-height:50px;
}

#login .lrow a {
	line-height: 30px;
}

.lrow .login-options {
	float: left;
}

.lrow input{
	text-align:right;
}

#lbuttons{
	float:left;
	width:300px;
	padding:20px 40px;
	margin-top:25px;
}

#lbuttons li {
	list-style: none;
	margin-right: 17px;
	float: left;
	width: 132px;
}

#credentials {
	background-color: #E4F4FA;
    border: 1px solid #BBDBE0;
    border-radius: 5px 5px 5px 5px;
    color: #54A3C7;
    float: left;
    font-style: italic;
    margin-bottom: 20px;
    margin-left: 40px;
    margin-right: 40px;
    padding-bottom: 8px;
    padding-top: 8px;
    text-align: center;
    width: 80%;
}

/* the below two fields are !important b/c the general css can override these values using input[type='*'] */
.loginField, .emailField {
	/*float:left !important;*/
	width:260px !important;
	background:url(../../images/common/loginid.png) no-repeat !important;
	height:29px !important;
	padding:5px 20px !important;
	border:0 !important;
	margin-bottom:10px !important;
	padding-left:35px !important;
}

.passwordField {
	/*float:left !important;*/
	width:260px !important;
	background:url(../../images/common/input-pw.png) no-repeat !important;
	height:29px !important;
	padding:5px 20px !important;
	border:0 !important;
	margin-bottom:20px !important;
	padding-left:35px !important;
}

#login, #password{
	margin:0 auto;
	width:380px;
	min-height:538px;
	background:url(../../images/common/loginbg.png) no-repeat;
	padding:20px 26px;
	padding-bottom:0;
}

.infoLink {
	float: left;
    margin-bottom: 10px;
    margin-left: 40px;
}

.infoLink a {
	color: #54A3C7;
    font-weight: bold;
}

#password .skipThis a {
	color: #54A3C7;
    font-weight: bold;
}

#password .skipThis a:hover {
	text-decoration: underline;
}

.loginBtn {
	padding: 15px 40px;
}

.placeholderOn {
	color: grey;
}

.qrCode {
	text-align: center;
}

#lang-header {
	margin-right: 28px;
    padding-top: 20px;
}
```

{% endcode %}

## CSS file structure for a change password screen

{% code overflow="wrap" expandable="true" %}

```css
div[data-role='password-rule'].error {
    background: #ffc8c6!important;
    padding: 4px 4px 4px 8px;
    line-height: 12px;
}

div[data-role='password-rule'].success {
    background: #dff0bb!important;
    padding: 4px 4px 4px 8px;
    line-height: 12px;
}

#passwordRules div[data-role='password-rule'],
#passwordRulesMobile div[data-role='password-rule'],
.tooltipster-base div[data-role='password-rule'] {
    margin: 2px 0;
    width: 223px;
}

.tooltipster-base div[data-role='password-rule'].successCls i{
    color: #fff;
}
```

{% endcode %}

## CSS file structure for SelfService creating a request page

{% code overflow="wrap" expandable="true" %}

```css
.resource-selector.active, .summary-resource-selector.active {
    background-color: #FF8400;
}

.resource-selector, .summary-resource-selector {
    font-size: 14px;
}

#resourceSelector, #summary-resource-selector {
    margin-top: 25px;
}

#summary-questionnaire-div input {
    background-color: white;
}

.permissions-wrapper {
    max-height: 400px;
    overflow-y: auto;
}

.disable-access-row {
    background-color: #ccc;
    font-style: italic
}

td[field="description"] > div {
    word-break: break-all !important;
    word-wrap: break-word !important;
    white-space: normal !important;
}

.near-exp-access-row {
    background-color: #ffca7a;
    font-style: italic
}
```

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-beta.openiam.com/branding/css-file-examples.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.