.mw-tpl-colorbox { box-sizing: border-box; margin: 0.5em 0.5em 1em 0.5em; border-radius: 0.2em; background: var( --background-color-base, #fff ); color: var( --color-base, #202122 ); border: 1px solid var( --border-color-base, #a2a9b1 ); }

.mw-tpl-colorbox-title { background: var( --background-color-interactive, #eaecf0 ); color: var( --color-emphasized, #000000 ); border-radius: 0.2em 0.2em 0 0; display: flex; gap: 0.5rem; line-height: 2.4rem; } .mw-tpl-colorbox-title--linked:hover { background: var( --background-color-progressive-subtle, #eaf3ff ); } .mw-tpl-colorbox-title > *:first-child { padding-left: 1rem; } .mw-tpl-colorbox-title > *:last-child { padding-right: 1rem; } /* Let title-link take up whole heading area for easy target.

* Direct strong or link child is the title, as icon and view-link have their own element.
* we can't add class names to links in wikitext.
*/

.mw-tpl-colorbox-title > strong, .mw-tpl-colorbox-title > a { flex-grow: 1; }

.mw-tpl-colorbox-title-icon { opacity: 0.8; }

.mw-tpl-colorbox-title-corner { float: right; font-size: 0.7em; }

.mw-tpl-colorbox-content { padding: 0.5rem 1rem; }

.mw-tpl-colorbox-content::after { content: ""; display: block; clear: both; }