# A Bejegyzés cím, törzs, kivonat, címkék, valamint az E-mail, Weboldal, Szám és HTML mező CSS-e az Orbital témában

> A Bejegyzés címe, törzse, kivonata és címkéi, az E-mail, a Weboldal, a Szám és a HTML mező CSS-választói és változói az Orbital témában.

Ezek a választók csak az Orbital témájú űrlapokra érvényesek. A 2.5-ös témához a [CSS-választók az árazási, bejegyzés- és captcha-mezőkhöz](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-css-valasztok-ar-es-bejegyzes-mezok/) és a [régi témás mezőválasztók](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-css-valasztok-mezok-regi-tema/) fejezet tartozik. A CSS API-változók áttekintése a [CSS-útmutató](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-css-attekintes/) fejezetben van.

A példákban a `112` az űrlap azonosítója, a `4` a mező azonosítója: ezeket cseréld a sajátodra. Minden mező azonosítója `field_{űrlapazonosító}_{mezőazonosító}` alakú, például `field_5_3`.

Közös minta: a mezőtípus osztályát a `.gform-theme--framework` után írod; egy adott űrlapra a `.gform-theme--framework#gform_wrapper_112` szűkít; egyetlen mezőre az `#field_112_4`.

## Bejegyzés címe

A **Bejegyzés címe** mező egy egysoros szövegbevitel (`input[type="text"]`), amelynek szélességét a mezőméret (kicsi, közepes, nagy) szabja meg. Osztályai: `.gfield`, `.gfield--type-post_title`, `.ginput_container_post_title`.

```css
/* beviteli mező: minden Orbital űrlap */
.gform-theme--framework .gfield--type-post_title {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-bg-color-hover: #f5f5f5;
	--gf-ctrl-bg-color-focus: #ffffff;
	--gf-ctrl-border-color: #d2d5db;
	--gf-ctrl-border-color-hover: #b8bcc4;
	--gf-ctrl-font-size: 16px;
}

/* a szélességhez nincs változó, közvetlen tulajdonság kell */
.gform-theme--framework .gfield--type-post_title input {
	max-width: 300px;
}

/* címke */
.gform-theme--framework .gfield--type-post_title {
	--gf-ctrl-label-color-primary: #1a365d;
	--gf-ctrl-label-font-size-primary: 16px;
}

/* leírás */
.gform-theme--framework .gfield--type-post_title {
	--gf-ctrl-desc-color: #6b7280;
	--gf-ctrl-desc-font-size: 14px;
}

/* kiemelő keret */
.gform-theme--framework .gfield--type-post_title {
	--gf-ctrl-border-color: #204ce5;
	--gf-ctrl-border-color-hover: #044ad3;
	--gf-ctrl-radius: 6px;
}

/* egyetlen mező: a 112-es űrlap 4-es mezője */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
	--gf-ctrl-bg-color: #f8fafc;
	--gf-ctrl-label-color-primary: #0f172a;
	--gf-ctrl-desc-color: #64748b;
}
```

Egy adott űrlapra ugyanezt a `.gform-theme--framework#gform_wrapper_112 .gfield--type-post_title` választóval állíthatod be.

## Bejegyzés törzse

A **Bejegyzés törzse** mező többsoros szövegdoboz, vagy ha be van kapcsolva, Rich Text Editor (TinyMCE). A doboz magasságát a mezőméret adja. Ha van karakterkorlát, a bevitel alatt számláló jelenik meg. Osztályai: `.gfield`, `.gfield--type-post_content`, `.ginput_container_textarea`.

A szövegdoboz változói:

| Változó | Mit szabályoz |
|---|---|
| `--gf-ctrl-textarea-height` | a doboz magassága |
| `--gf-ctrl-textarea-radius` | a sarkok lekerekítése |
| `--gf-ctrl-textarea-line-height` | a sormagasság |
| `--gf-ctrl-textarea-padding-y` | a függőleges belső margó |
| `--gf-ctrl-textarea-resize` | az átméretezhetőség |

A lekerekítéshez a `--gf-ctrl-textarea-radius` változót használd, ne az általános lekerekítési változókat. Hogy a magasság változóval is működjön, adj meg `min-block-size` értéket.

Ha a Rich Text Editor be van kapcsolva, a stílus a `.wp-editor-container` elemre vonatkozik. Maga a szerkesztő egy iframe-ben van, ezért közvetlenül nem stílusozható.

```css
/* szövegdoboz: minden Orbital űrlap */
.gform-theme--framework .gfield--type-post_content {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-bg-color-hover: #f5f5f5;
	--gf-ctrl-bg-color-focus: #ffffff;
	--gf-ctrl-border-color: #d2d5db;
	--gf-ctrl-border-color-hover: #b8bcc4;
	--gf-ctrl-textarea-height: 150px;
	--gf-ctrl-textarea-radius: 6px;
	--gf-ctrl-font-size: 16px;
}

/* hogy a magasság felülírja a sorok számát */
.gform-theme--framework .gfield--type-post_content .ginput_container_textarea textarea {
	min-block-size: 120px;
}
```

### Karakterszámláló

A korlát beállításakor a számláló a `.charleft` és a `.ginput_counter` osztályt kapja. Figyelmeztető állapota a `.warningTextareaInfo`, hibaállapota (csak TinyMCE-nél) a `.ginput_counter_error`.

```css
.gform-theme--framework .gfield--type-post_content .charleft,
.gform-theme--framework .gfield--type-post_content .ginput_counter {
	--gf-ctrl-desc-color: #6b7280;
	--gf-ctrl-desc-font-size: 14px;
	margin-top: 8px;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gfield--type-post_content .charleft {
	--gf-ctrl-desc-color: #4b5563;
	--gf-ctrl-desc-font-size: 13px;
}
```

### Címke, leírás, példák

```css
/* címke */
.gform-theme--framework .gfield--type-post_content {
	--gf-ctrl-label-color-primary: #1a365d;
	--gf-ctrl-label-font-size-primary: 16px;
}

/* leírás */
.gform-theme--framework .gfield--type-post_content {
	--gf-ctrl-desc-color: #6b7280;
	--gf-ctrl-desc-font-size: 14px;
}

/* kiemelő keret */
.gform-theme--framework .gfield--type-post_content {
	--gf-ctrl-border-color: #204ce5;
	--gf-ctrl-border-color-hover: #044ad3;
	--gf-ctrl-textarea-radius: 6px;
}

/* magasabb szövegdoboz hosszú tartalomhoz */
.gform-theme--framework .gfield--type-post_content {
	--gf-ctrl-textarea-height: 250px;
	--gf-ctrl-textarea-resize: vertical;
}

.gform-theme--framework .gfield--type-post_content .ginput_container_textarea textarea {
	min-block-size: 120px;
}

/* egyetlen mező */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
	--gf-ctrl-bg-color: #f8fafc;
	--gf-ctrl-label-color-primary: #0f172a;
	--gf-ctrl-desc-color: #64748b;
	--gf-ctrl-textarea-height: 200px;
}
```

## Bejegyzés kivonata

A **Bejegyzés kivonata** mező többsoros szövegdoboz, amelynek magasságát a mezőméret adja. Osztályai: `.gfield`, `.gfield--type-post_excerpt`, `.ginput_container_post_excerpt`. A szövegdoboz változói és a `min-block-size` szabálya ugyanaz, mint a Bejegyzés törzsénél, a lekerekítéshez itt is a `--gf-ctrl-textarea-radius` kell.

```css
/* szövegdoboz: minden Orbital űrlap */
.gform-theme--framework .gfield--type-post_excerpt {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-bg-color-hover: #f5f5f5;
	--gf-ctrl-bg-color-focus: #ffffff;
	--gf-ctrl-border-color: #d2d5db;
	--gf-ctrl-border-color-hover: #b8bcc4;
	--gf-ctrl-textarea-height: 150px;
	--gf-ctrl-textarea-radius: 6px;
	--gf-ctrl-font-size: 16px;
}

/* hogy a magasság felülírja a sorok számát */
.gform-theme--framework .gfield--type-post_excerpt .ginput_container_post_excerpt textarea {
	min-block-size: 120px;
}

/* címke */
.gform-theme--framework .gfield--type-post_excerpt {
	--gf-ctrl-label-color-primary: #1a365d;
	--gf-ctrl-label-font-size-primary: 16px;
}

/* leírás */
.gform-theme--framework .gfield--type-post_excerpt {
	--gf-ctrl-desc-color: #6b7280;
	--gf-ctrl-desc-font-size: 14px;
}

/* kiemelő keret */
.gform-theme--framework .gfield--type-post_excerpt {
	--gf-ctrl-border-color: #204ce5;
	--gf-ctrl-border-color-hover: #044ad3;
	--gf-ctrl-textarea-radius: 6px;
}

/* magasabb szövegdoboz */
.gform-theme--framework .gfield--type-post_excerpt {
	--gf-ctrl-textarea-height: 250px;
	--gf-ctrl-textarea-resize: vertical;
}

/* egyetlen mező: a 112-es űrlap 4-es mezője */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
	--gf-ctrl-bg-color: #f8fafc;
	--gf-ctrl-label-color-primary: #0f172a;
	--gf-ctrl-desc-color: #64748b;
	--gf-ctrl-textarea-height: 200px;
}
```

## Bejegyzés címkéi

A **Bejegyzés címkéi** mezőben a felhasználó a bejegyzés címkéit adja meg. Egy szövegbevitelt (`input[type="text"]`) és egy tippet jelenít meg („Separate tags with commas”, vagyis a címkéket vesszővel válaszd el). Osztályai: `.gfield`, `.gfield--type-post_tags`, `.ginput_container_post_tags`. A tipp helye a `.gfield_post_tags_hint`.

```css
/* beviteli mező */
.gform-theme--framework .gfield--type-post_tags {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-bg-color-hover: #f5f5f5;
	--gf-ctrl-bg-color-focus: #ffffff;
	--gf-ctrl-border-color: #d2d5db;
	--gf-ctrl-border-color-hover: #b8bcc4;
	--gf-ctrl-font-size: 16px;
}

.gform-theme--framework .gfield--type-post_tags input[type="text"] {
	max-width: 100%;
}

/* a vesszős tipp */
.gform-theme--framework .gfield--type-post_tags .gfield_post_tags_hint {
	--gf-ctrl-desc-color: #6b7280;
	--gf-ctrl-desc-font-size: 13px;
}

/* címke */
.gform-theme--framework .gfield--type-post_tags {
	--gf-ctrl-label-color-primary: #1a365d;
	--gf-ctrl-label-font-size-primary: 16px;
}

/* leírás */
.gform-theme--framework .gfield--type-post_tags {
	--gf-ctrl-desc-color: #6b7280;
	--gf-ctrl-desc-font-size: 14px;
}

/* kiemelő keret */
.gform-theme--framework .gfield--type-post_tags {
	--gf-ctrl-border-color: #204ce5;
	--gf-ctrl-radius: 6px;
}

/* egyetlen mező */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
	--gf-ctrl-label-color-primary: #0f172a;
	--gf-ctrl-desc-color: #64748b;
	--gf-ctrl-border-color: #e2e8f0;
	padding: 16px;
}
```

A 112-es űrlapra szűkítve a `.gform-theme--framework#gform_wrapper_112 .gfield--type-post_tags` (és a tippnél a `… .gfield_post_tags_hint`) választót használd.

## E-mail mező

Az **E-mail** mező egy `input[type="email"]` elemet jelenít meg. Alapesetben egy beviteli mező van. Ha be van kapcsolva az e-mail-megerősítés, két mező kerül egymás mellé: az e-mail-cím megadása és a megerősítése. Ilyenkor a mező `fieldset` burkolót kap `div` helyett.

Osztályai:

- `.gfield` és `.gfield--type-email` (vagy `.gfield--input-type-email`),
- `.ginput_container_email`,
- megerősítésnél a tároló `.ginput_complex.ginput_container.ginput_container_email`, a két mező `.ginput_left` és `.ginput_right` oszlopban, a rácsosztályokkal (`gform-grid-row`, `gform-grid-col`, `gform-grid-col--size-auto`).

```css
/* tároló */
.gform-theme--framework .gfield--type-email {
	--gf-ctrl-bg-color: #f9f9f9;
	--gf-ctrl-border-color: #e5e7eb;
	padding: 8px 0;
}

/* beviteli mező: egyszerű és megerősítős módban is ugyanígy hat */
.gform-theme--framework .gfield--type-email {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-bg-color-hover: #f5f5f5;
	--gf-ctrl-bg-color-focus: #ffffff;
	--gf-ctrl-border-color: #d2d5db;
	--gf-ctrl-border-color-hover: #b8bcc4;
	--gf-ctrl-font-size: 16px;
}

.gform-theme--framework .gfield--type-email input {
	max-width: 300px;
}
```

### Megerősítés elrendezése és almezőcímkék

A két mező közti vízszintes távolságot a `--gf-field-gap-x`, a törés esetén a függőleges távolságot a `--gf-field-gap-y` szabja meg. Az almezők címkéi a `.gform-field-label--type-sub` osztályt kapják, és a harmadlagos címkeváltozókat használják.

```css
.gform-theme--framework .gfield--type-email .ginput_complex.ginput_container_email {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-border-color: #e5e7eb;
	--gf-field-gap-x: 24px;
	--gf-field-gap-y: 16px;
}

.gform-theme--framework .gfield--type-email .gform-field-label--type-sub {
	--gf-ctrl-label-color-tertiary: #1a365d;
	--gf-ctrl-label-font-size-tertiary: 16px;
}
```

### Címke, leírás, hibaüzenet

A fő címke a `.gform-field-label`, amelyet a `--gf-ctrl-label-color-primary` és a `--gf-ctrl-label-font-size-primary` változó állít. A leírás a form leírás-elhelyezési beállítása szerint a mező fölött vagy alatt jelenik meg (`--gf-ctrl-desc-color`, `--gf-ctrl-desc-font-size`).

A hibaüzenet akkor jelenik meg, ha érvénytelen az e-mail-cím, vagy a két cím nem egyezik. Osztályai: `gfield_description`, `validation_message`, `gfield_validation_message`; változói: `--gf-ctrl-desc-color-error`, `--gf-ctrl-desc-font-size-error`.

```css
.gform-theme--framework .gfield--type-email {
	--gf-ctrl-label-color-primary: #1a365d;
	--gf-ctrl-label-font-size-primary: 16px;
	--gf-ctrl-desc-color: #6b7280;
	--gf-ctrl-desc-font-size: 14px;
}

.gform-theme--framework .gfield--type-email .gfield_validation_message {
	--gf-ctrl-desc-color-error: #c02b0a;
	--gf-ctrl-desc-font-size-error: 14px;
}
```

### Példák

```css
/* kiemelő keret */
.gform-theme--framework .gfield--type-email {
	--gf-ctrl-border-color: #204ce5;
	--gf-ctrl-border-color-hover: #044ad3;
	--gf-ctrl-radius: 6px;
}

/* egyetlen mező */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
	--gf-ctrl-bg-color: #f8fafc;
	--gf-ctrl-label-color-primary: #0f172a;
	--gf-ctrl-desc-color: #64748b;
}

/* megerősítős elrendezés nagyobb réssel */
.gform-theme--framework .gfield--type-email .ginput_complex.ginput_container_email {
	--gf-field-gap-x: 32px;
}

.gform-theme--framework .gfield--type-email {
	--gf-ctrl-label-color-secondary: #374151;
	--gf-ctrl-label-font-size-secondary: 15px;
}
```

## Weboldal mező

A **Weboldal** mező egyetlen `input[type="url"]` elemet jelenít meg. A böngésző natív ellenőrzést és URL-specifikus automatikus kitöltést adhat hozzá. A mezőméret (kicsi, közepes, nagy) a bevitel szélességét befolyásolja. Osztályai: `.gfield`, `.gfield--type-website`, `.ginput_container_website`.

```css
/* tároló */
.gform-theme--framework .gfield--type-website {
	--gf-ctrl-bg-color: #f9f9f9;
	--gf-ctrl-border-color: #e5e7eb;
	padding: 8px 0;
}

/* beviteli mező */
.gform-theme--framework .gfield--type-website {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-bg-color-hover: #f5f5f5;
	--gf-ctrl-bg-color-focus: #ffffff;
	--gf-ctrl-border-color: #d2d5db;
	--gf-ctrl-border-color-hover: #b8bcc4;
	--gf-ctrl-font-size: 16px;
}

.gform-theme--framework .gfield--type-website input[type="url"] {
	max-width: 400px;
}

/* címke és leírás */
.gform-theme--framework .gfield--type-website {
	--gf-ctrl-label-color-primary: #1a365d;
	--gf-ctrl-label-font-size-primary: 16px;
	--gf-ctrl-desc-color: #6b7280;
	--gf-ctrl-desc-font-size: 14px;
}

/* hibaüzenet: hibás URL vagy hiányzó protokoll esetén */
.gform-theme--framework .gfield--type-website .gfield_validation_message {
	--gf-ctrl-desc-color-error: #c02b0a;
	--gf-ctrl-desc-font-size-error: 14px;
}

/* kiemelő keret */
.gform-theme--framework .gfield--type-website {
	--gf-ctrl-border-color: #204ce5;
	--gf-ctrl-border-color-hover: #044ad3;
	--gf-ctrl-radius: 6px;
}

/* egyetlen mező */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
	--gf-ctrl-bg-color: #f8fafc;
	--gf-ctrl-label-color-primary: #0f172a;
	--gf-ctrl-desc-color: #64748b;
}
```

## Szám mező

A **Szám** mező egyetlen beviteli mező számértékhez. A bevitel a számformátumtól függően `type="number"` vagy `type="text"` lehet: a pénznem és a tizedesvessző formátum a kompatibilitás miatt `type="text"`. A két típus ugyanazt a stílust kapja.

Ha van megadva legkisebb és legnagyobb érték, a bevitel alatt megjelenik a megengedett tartomány szövege (például „Please enter a number from 1 to 100.”). A számítással rendelkező Szám mező csak olvasható, és a `.gform-text-input-reset` osztályt kapja.

A mező osztálya `.gfield--type-number`, a bevitel tárolója `.ginput_container_number`. A változókat a `.gfield--type-number` elemen írd felül, onnan öröklődnek a bevitelre.

```css
/* tároló */
.gform-theme--framework .gfield--type-number {
	--gf-ctrl-radius: 6px;
}

/* beviteli mező */
.gform-theme--framework .gfield--type-number {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-bg-color-hover: #f5f5f5;
	--gf-ctrl-bg-color-focus: #ffffff;
	--gf-ctrl-border-color: #d2d5db;
	--gf-ctrl-border-color-hover: #b8bcc4;
	--gf-ctrl-font-size: 16px;
}

/* a szélességhez nincs változó */
.gform-theme--framework .gfield--type-number .ginput_container_number input {
	max-width: 200px;
}
```

A `type="number"` bevitel böngészőfüggő léptetőgombjait (spinner) a CSS csak korlátozottan alakítja.

### Tartományszöveg

A tartományszöveg a `.instruction` osztályt kapja, ehhez nem kell `.ginput_container_*`.

```css
.gform-theme--framework .gfield--type-number .instruction {
	--gf-ctrl-desc-color: #6b7280;
	--gf-ctrl-desc-font-size: 14px;
	margin-top: 8px;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gfield--type-number .instruction {
	--gf-ctrl-desc-color: #4b5563;
	--gf-ctrl-desc-font-size: 13px;
}
```

### Címke, számítás, példák

```css
/* címke */
.gform-theme--framework .gfield--type-number {
	--gf-ctrl-label-color-primary: #1a365d;
	--gf-ctrl-label-font-size-primary: 16px;
}

/* számítással rendelkező mező: a betűvastagsághoz nincs változó */
.gform-theme--framework .gfield--type-number input.gform-text-input-reset {
	font-weight: 600;
}

/* kiemelő keret */
.gform-theme--framework .gfield--type-number {
	--gf-ctrl-border-color: #204ce5;
	--gf-ctrl-border-color-hover: #eff6ff;
	--gf-ctrl-radius: 6px;
}

/* egyetlen mező */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
	--gf-ctrl-bg-color: #f8fafc;
	--gf-ctrl-label-color-primary: #0f172a;
	--gf-ctrl-desc-color: #64748b;
}
```

A keret és a háttér a számítással rendelkező mezőn a keretrendszer alaphelyzet-visszaállítása miatt kevésbé „beviteli mező” jellegű.

## HTML mező

A **HTML** mezővel szabad HTML-blokkot szúrsz az űrlapba. Működnek benne az összefűző címkék, a shortcode-ok és a szokásos HTML-elemek (bekezdés, lista, címsor, kép). A felületen a mező nem ír ki címkét, leírást és beviteli elemet, csak a megadott HTML-t.

Az Orbital keretrendszer a `.gfield--type-html *` elemeket kizárja az alaphelyzet-visszaállításból, ezért a blokkon belüli elemek (`p`, `ul`, `ol`, `h1` és `h6` között) a böngésző alapstílusát vagy a saját stílusodat kapják.

Osztályai: `.gfield`, `.gfield--type-html`, `.gfield_html`. Ha a **Alapértelmezett margók kikapcsolása** ki van kapcsolva, a `.gfield_html_formatted` osztály is rákerül. A mezőnek nincs leírás-eleme, ezért a `--gf-ctrl-desc-*` változók nem hatnak rá; használható a `--gf-color-primary` és a `--gf-radius`. A tartalom tipográfiájához nincs keretrendszer-változó, a szokásos CSS-tulajdonságokat használd.

```css
/* a blokk távolsága */
.gform-theme--framework .gfield--type-html {
	margin-top: 24px;
	margin-bottom: 24px;
}

/* formázott margós blokk igazítása a többi mezőhöz */
.gform-theme--framework .gfield_html_formatted {
	padding-inline-start: 0;
	padding-inline-end: 0;
}

.gform-theme--framework#gform_wrapper_112 .gfield_html_formatted {
	max-width: 100%;
}
```

### A blokk tartalma

A tartalom körül nincs `.ginput_container`, ezért a mező leszármazottait célozd.

```css
/* hivatkozások */
.gform-theme--framework .gfield--type-html a {
	color: #f09;
	text-decoration: underline;
}

.gform-theme--framework .gfield--type-html a:hover {
	color: #c00;
}

/* szöveg */
.gform-theme--framework .gfield--type-html {
	font-size: 16px;
	color: #112337;
	line-height: 1.6;
}

/* címsorok */
.gform-theme--framework .gfield--type-html h2,
.gform-theme--framework .gfield--type-html h3 {
	color: #112337;
	font-weight: 600;
	margin-top: 24px;
	margin-bottom: 12px;
}

/* listák */
.gform-theme--framework#gform_wrapper_112 .gfield--type-html ul,
.gform-theme--framework#gform_wrapper_112 .gfield--type-html ol {
	padding-inline-start: 24px;
	margin-bottom: 16px;
}
```

A hivatkozások színét a mező hatókörében a `--gf-color-primary` és a `--gf-color-primary-darker` változóval is módosíthatod.

### Egy adott HTML-mező és kiemelt blokk

```css
/* a 112-es űrlap 3-as mezője */
.gform-theme--framework#gform_wrapper_112 #field_112_3 {
	--gf-radius: 8px;
	--gf-color-primary: #1d4ed8;
	background-color: #f8fafc;
	padding: 16px;
	border: 1px solid #e2e8f0;
}

/* kiemelő doboz */
.gform-theme--framework .gfield--type-html.gfield_html_formatted {
	--gf-color-primary: #204ce5;
	background-color: #eff6ff;
	border-inline-start: 4px solid #654887;
	padding: 16px 20px;
	border-radius: 6px;
}
```