# CSS reference

This page lists Rebilly Instruments CSS classes. Use these CSS classes for advanced style customization.

## Base. Typography

### Parent wrappers


```css
.rebilly-instruments-content {
}
/* Is possible to use .is-summary, .is-methods, .is-confirmation, .is-results
to target specific views for example .rebilly-instruments-content.is-summary {} */
```

### Link


```css
.rebilly-instruments-link {
}
.rebilly-instruments-link:hover {
}
.rebilly-instruments-link .rebilly-instruments-icon {
}
.rebilly-instruments-link.has-icon-left .rebilly-instruments-icon {
}
.rebilly-instruments-link.has-icon-right .rebilly-instruments-icon {
}
```

### Headings


```css
.rebilly-instruments-h1 {
}
.rebilly-instruments-h2 {
}
```

## Components

### Form


```css
.rebilly-instruments-form {
}
```

#### Field (Form element control)


```css
.rebilly-instruments-form-field {
}
```

#### Field group (multiple form elements control group)


```css
.rebilly-instruments-form-field-group {
}
```

### Input


```css
.rebilly-instruments-form-field-input {
  /* Shared with select */
}
.rebilly-instruments-form-field-input:hover {
  /* Shared with input */
}
.rebilly-instruments-form-field-input:focus {
  /* Shared with select */
}
.rebilly-instruments-form-field-input::placeholder {
}
.rebilly-instruments-form-field-input::selection {
}
.rebilly-instruments-form-field-input:disabled {
}
```

### Select


```css
.rebilly-instruments-form-field-select {
  /* Shared with input */
}
.rebilly-instruments-form-field-select:hover {
  /* Shared with input */
}
.rebilly-instruments-form-field-select:focus {
  /* Shared with input */
}
.rebilly-instruments-form-field-select::selection {
}
.rebilly-instruments-form-field-select:disabled {
}
.rebilly-instruments-form-field-select + .rebilly-instruments-form-field-label {
}
.rebilly-instruments-form-field-select::-ms-expand {
}
.rebilly-instruments-form-field-select-arrow {
}
```

### Label


```css
.rebilly-instruments-form-field-label {
}

/* Floating labels */
.is-floating .rebilly-instruments-form-field-label {
}
.is-floating .rebilly-instruments-form-field-input:focus + .rebilly-instruments-form-field-label,
.is-floating .rebilly-instruments-form-field-select:focus + .rebilly-instruments-form-field-label,
.is-floating .rebilly-instruments-form-field-label.is-active {
  /* Focus field label */
}
```

### Checkbox


```css
.rebilly-instruments-form-field-checkbox {
}
.rebilly-instruments-form-field-checkbox input[type='checkbox'] {
}
.rebilly-instruments-form-field-checkbox span {
  /* Box */
}
.rebilly-instruments-form-field-checkbox span:after {
  /* Checkmark */
}
.rebilly-instruments-form-field-checkbox input[type='checkbox']:checked ~ span {
}
.rebilly-instruments-form-field-checkbox input[type='checkbox']:checked ~ span:after {
}
.rebilly-instruments-form-field-checkbox input[type='checkbox']:focus ~ span {
}
.rebilly-instruments-form-field-checkbox input[type='checkbox']:disabled ~ span {
}
```

### Validation


```css
.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input,
.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-select {
}
.rebilly-instruments-form-field-error-wrapper {
}
.rebilly-instruments-form-field-error-wrapper > li {
}

.rebilly-instruments-button-group {
}
.rebilly-instruments-button-group .rebilly-instruments-button {
}
.rebilly-instruments-button-group .rebilly-instruments-button:first-of-type {
}
.rebilly-instruments-button-group .rebilly-instruments-button:last-of-type {
}
```

### Buttons


```css
.rebilly-instruments-button {
}
.rebilly-instruments-button:not([disabled]):hover {
}
.rebilly-instruments-button:not([disabled]):active {
}

.rebilly-instruments-button.rebilly-instruments-button-secondary {
}
.rebilly-instruments-button.rebilly-instruments-button-secondary:not([disabled]):hover,
.rebilly-instruments-button.rebilly-instruments-button-secondary:not([disabled]):active {
}

.rebilly-instruments-button:focus {
}
.rebilly-instruments-button:disabled {
}
.rebilly-instruments-button::first-letter {
}
```

### Express methods


```css
.rebilly-instruments-express-methods {
}
.rebilly-instruments-express-methods.is-compact {
}
.rebilly-instruments-express-methods .rebilly-instruments-express-methods-label {
}
.rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-label {
}
@keyframes rebillyExpressShine {
  /* background-position-x */
}
```

### Methods tabs


```css
.rebilly-instruments-methods-tabs {
}
.rebilly-instruments-method-tab {
}
.rebilly-instruments-method-tab.is-active {
}
.rebilly-instruments-method-tab-logo {
}
.rebilly-instruments-method-tab-name {
}
.rebilly-instruments-method-tab:hover .rebilly-instruments-method-tab-name {
}
.rebilly-instruments-method-tab.is-active .rebilly-instruments-method-tab-name {
}
```

### Divider


```css
.rebilly-instruments-divider {
}
.rebilly-instruments-divider::before {
}
.rebilly-instruments-divider .rebilly-instruments-divider-label {
}
```

### Address


```css
.rebilly-instruments-address {
}
```

### Icons


```css
.rebilly-instruments-icon {
}
```

### Loader


```css
.rebilly-instruments-loader {
  /* Loader container */
}
.rebilly-instruments-loader.is-active {
}
.rebilly-instruments-loader-spinner {
}
@keyframes spin {
  /* transform: rotate */
}
```

### Overlay


```css
.rebilly-instruments-overlay {
}
```

### Payment instrument (Instrument summary)


```css
.rebilly-instruments-payment-instrument {
}
.rebilly-instruments-payment-instrument-logo {
}
.rebilly-instruments-payment-instrument-logo img {
}
.rebilly-instruments-payment-instrument-brand {
}
.rebilly-instruments-payment-instrument-last4 {
}
.rebilly-instruments-payment-instrument-exp {
}
```

### Payment instrument list


```css
.rebilly-instruments-payment-instrument-list {
}
.rebilly-instruments-payment-instrument-list li {
}
.rebilly-instruments-payment-instrument-list li:first-child {
}
.rebilly-instruments-payment-instrument-list li:last-child {
}
.rebilly-instruments-payment-instrument-list li + li {
}
.rebilly-instruments-payment-instrument-list.is-relaxed li {
}
.rebilly-instruments-payment-instrument-list .rebilly-instruments-form-field {
}
.rebilly-instruments-payment-instrument-list li .rebilly-instruments-payment-instrument-list-container {
}
```

### Addons


```css
.rebilly-instruments-addons {
}

.rebilly-instruments-addons-line-item {
}

.rebilly-instruments-addons-line-item-figure {
}
.rebilly-instruments-addons-line-item-figure img {
}

.rebilly-instruments-addons-line-item-synopsis {
}
.rebilly-instruments-addons-line-item-synopsis-title {
}
.rebilly-instruments-addons-line-item-synopsis-description {
}

.rebilly-instruments-addons-line-item-price-breakdown {
}
.rebilly-instruments-addons-line-item-price-breakdown .rebilly-instruments-icon {
}
.rebilly-instruments-addons-line-item-price-breakdown-unit-price {
}
```

### Bump offer


```css
.rebilly-instruments-bump-offers {
}

.rebilly-instruments-bump-offer {
}

.rebilly-instruments-bump-offer-label {
}

.rebilly-instruments-bump-offer-line-item {
}

.rebilly-instruments-bump-offer-line-item-figure {
}
.rebilly-instruments-bump-offer-line-item-figure img {
}

.rebilly-instruments-bump-offer-line-item-synopsis {
}
.rebilly-instruments-bump-offer-line-item-synopsis-title {
}
.rebilly-instruments-bump-offer-line-item-synopsis-description {
}

.rebilly-instruments-bump-offer-line-item-price-breakdown {
}
.rebilly-instruments-bump-offer-line-item-price-breakdown .rebilly-instruments-icon {
}
.rebilly-instruments-bump-offer-line-item-price-breakdown-unit-price {
}
```

## Views

### Summary


```css
.rebilly-instruments-summary-line-item {
}

.rebilly-instruments-summary-line-item-figure {
}
.rebilly-instruments-summary-line-item-figure img {
}

.rebilly-instruments-summary-line-item-synopsis {
}
.rebilly-instruments-summary-line-item-synopsis-title {
}
.rebilly-instruments-summary-line-item-synopsis-description {
}

.rebilly-instruments-summary-line-item-price-breakdown {
}
.rebilly-instruments-summary-line-item-price-breakdown .rebilly-instruments-icon {
}
.rebilly-instruments-summary-line-item-price-breakdown-unit-price {
}

.rebilly-instruments-summary-breakdown table {
}

.rebilly-instruments-summary-breakdown-total {
}
.rebilly-instruments-summary-breakdown-total p {
}
.rebilly-instruments-summary-breakdown-total-amount {
}
.rebilly-instruments-summary-breakdown-total-amount-currency {
}
```

### Confirmation


```css
.rebilly-instruments-confirmation-go-back {
}
.rebilly-instruments-confirmation-address-title {
}
```

### Result


```css
.rebilly-instruments-results-icon {
}
.rebilly-instruments-results-icon g {
}
.rebilly-instruments-results-icon.is-error g {
}
.rebilly-instruments-results-icon path {
}
.rebilly-instruments-results-icon path.circle {
}
.rebilly-instruments-results-icon path.mark {
}
@keyframes rebillyDashResultIcon {
  /* stroke-dashoffset */
}
```

## FramePay


```css
.rebilly-instruments-framepay .rebilly-framepay {
}
.rebilly-instruments-framepay .rebilly-framepay.rebilly-framepay-focus {
}
.rebilly-instruments-framepay .rebilly-framepay.rebilly-framepay-invalid {
}
.rebilly-instruments-framepay .rebilly-framepay.rebilly-framepay-google-pay {
}
```