# CSS Classes

## idpc\_autocomplete[​](#idpc_autocomplete "Direct link to idpc_autocomplete")

This class is applied to a div element that encapsulates the Address Lookup functionality. It is used to style the container that includes the text input and the list of suggestions.

![Address Lookup idpc\_autocomplete image](data:image/png;base64,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)

Example CSS:

```
.idpc_autocomplete {

  width: 100%;

  max-width: 400px;

  background-color: #B3E5FC;

  border: 1px solid #81D4FA;

}
```

***

## idpc\_ul[​](#idpc_ul "Direct link to idpc_ul")

Applied to the unordered list (ul) containing suggestions, styled to improve readability and interaction.

![Address Lookup idpc\_ul image](/assets/images/idpc_ul-8f39a26f760982e33dd282d4e865344e.png)

Example CSS:

```
.idpc_ul {

  list-style: none;

  padding: 0;

  margin: 0;

  background-color: #FFCCBC;

  border: 1px solid #FFAB91;

  box-shadow: 0 2px 4px rgba(0,0,0,0.2);

}
```

***

## idpc\_error[​](#idpc_error "Direct link to idpc_error")

Div that contains the error message.

![Address Lookup idpc\_error image](/assets/images/idpc_error-7c41039ffeb322e54ee2e72ab1d1a440.png)

Example CSS:

```
.idpc_error {

  color: #ffffff;

  background-color: #f44336;

  padding: 8px;

  border-bottom: 1px solid #d32f2f;

}
```

***

## idpc\_toolbar[​](#idpc_toolbar "Direct link to idpc_toolbar")

This class is applied to the div element that encapsulates the country selection functionality. It is used to style the container.

![Address Lookup idpc\_toolbar image](/assets/images/idpc_toolbar-8bc97d7d3d70161ac7e44046de29cc43.png)

Example CSS:

```
.idpc_toolbar {

  background-color: #64B5F6;

  color: #FFF176;

  padding: 10px 15px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  border-bottom: 2px solid #42A5F5;

}
```

***

## idpc\_country[​](#idpc_country "Direct link to idpc_country")

This class is applied to the div element that encapsulates the country selection functionality. It is used to style the container.

![Address Lookup idpc\_toolbar image](data:image/png;base64,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)

Example CSS:

```
.idpc_country {

  background-color: #FFB74D;

  color: #6A1B9A;

  padding: 5px 10px;

  display: inline-block;

  margin: 5px 0;

  border-radius: 4px;

  font-weight: bold;

}
```

***

## Demo[​](#demo "Direct link to Demo")

You can use the Sandbox below to try it out:

Loading...

```
<form>
<label for="line_1">Address First Line</label>
<input type="text" id="line_1" />
<label for="line_2">Address Second Line</label>
<input type="text" id="line_2" />
<label for="city">City</label>
<input type="text" id="city" />
<label for="state">State</label>
<input type="text" id="state" />
<label for="zipcode">Zip Code</label>
<input type="text" id="zipcode" />
</form>
```

```

import { AddressLookup } from "@addresszen/address-lookup";

AddressLookup.setup({
  apiKey: "ak_test",
  outputFields: {
    line_1: "#line_1",
    line_2: "#line_2",
    city: "#city",
    state: "#state",
    zip_plus_4_code: "#zipcode",
  },
});
```

```
.idpc_autocomplete {
width: 100%;
max-width: 400px;
background-color: #B3E5FC;
border: 1px solid #81D4FA;
}

.idpc_ul {
list-style: none;
padding: 0;
margin: 0;
background-color: #FFCCBC;
border: 1px solid #FFAB91;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.idpc_error {
color: #ffffff;
background-color: #f44336;
padding: 8px;
border-bottom: 1px solid #d32f2f;
}

.idpc_toolbar {
background-color: #64B5F6;
color: #FFF176;
padding: 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #42A5F5;
}

.idpc_country {
background-color: #FFB74D;
color: #6A1B9A;
padding: 5px 10px;
display: inline-block;
margin: 5px 0;
border-radius: 4px;
font-weight: bold;
}
```