/* Two helpers used to sit here and were removed on 2026-08-05: a block of five
   numbered colour aliases, and a YIQ contrast picker declared as a Sass function.
   Zendesk does not compile this file as Sass. It substitutes manifest setting
   names as plain text and evaluates only darken()/lighten() on them; variable
   assignments and custom functions passed through verbatim, so all 38
   declarations that used the two helpers reached the browser as invalid values
   and were discarded silently. Every one of those declarations now names a
   manifest setting directly, and each background/text contrast pair is set by
   hand in the Customize panel. Do not reintroduce either helper, and do not add
   a custom function or variable of your own -- see CLAUDE.md for the model. */

/* Self-hosted Geist (SIL OFL) — variable woff2 served from theme assets. */
@font-face {
  font-family: 'Geist';
  src: url(/hc/theming_assets/01KY36S1TJ3AN3KQ2J4RGT02PV) format('woff2');
  font-weight: 100 900;   /* variable range — covers 200..700 used here */
  font-style: normal;
  font-display: swap;      /* show fallback immediately, swap when Geist loads */
}

@charset "UTF-8";
/***** Normalize.css *****/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  background-color: white;
}

body {
  margin: 0;
	background-color: white;
}

/* The overall content surface for EVERY page, not just the home page -- <main>
   wraps the whole body of the template, so this one value is what "the page
   background" means to a reader. It was pure `white` and is now a settings-
   backed off-white.

   The !important is inherited from the original rule and kept deliberately:
   something in Zendesk's own cascade was overriding a plain declaration here.

   Two values are tied to this one and must keep their distance from it:
   rgba(255, 250, 164, 1) (the row 1 card fill sits directly on this surface) and
   rgba(255, 253, 224, 1). Take this much past a whisper of grey and the cards stop
   reading as raised surfaces -- they were designed against white. */
main {
  display: block;
  background-color: rgba(250, 250, 248, 1) !important;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

a:link {
  color: inherit;
  text-decoration: none;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/***** Base *****/
* {
  box-sizing: border-box;
}

body {
  background-color: rgba(255, 246, 95, 1);
  color: rgba(40, 38, 35, 1);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  margin-top: 0;
}

h1 {
  font-size: 32px;
  font-weight: 200
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 18px;
  font-weight: 600;
}

h4 {
  font-size: 16px;
}

a {
  color: inherit;
  text-decoration: none;
}
a:visited {
  color: inherit;
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}

input,
textarea {
  color: #000;
  font-size: 14px;
}

input {
  max-width: 100%;
  box-sizing: border-box;
  transition: border 0.12s ease-in-out;
}
input:not([type=checkbox]) {
  outline: none;
}
input:not([type=checkbox]):focus {
  border: 1px solid rgba(0, 0, 0, 1);
}

input[disabled] {
  background-color: #ddd;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") no-repeat #fff;
  background-position: right 10px center;
  border: 1px solid #87929D;
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: #555;
  width: 100%;
}
select:focus {
  border: 1px solid rgba(0, 0, 0, 1);
}
select::-ms-expand {
  display: none;
}

textarea {
  border: 1px solid #87929D;
  border-radius: 2px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}
textarea:focus {
  border: 1px solid rgba(0, 0, 0, 1);
}

.wrapper-white {
  width: 100%;
  height: auto;
  min-height: calc(100vh - 173px);
  background-color: #fff;
  padding: 24px 0;
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  background-color: white;
}
@media (min-width: 1160px) {
  .container {
    padding: 0;
    width: 90%;
  }
}

.container-divider {
  padding-top: 10px;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 498;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.error-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}
@media (min-width: 1160px) {
  .error-page {
    padding: 0;
    width: 90%;
  }
}

.visibility-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

/***** Buttons *****/
/* .community-follow button is in these lists because Zendesk's subscribe helper
   now emits a plain <button> with no role attribute, so [role="button"] no
   longer reaches it and the button falls back to the browser default chrome. */
.button, [role="button"], .community-follow button {
  border: 1px solid rgba(0, 0, 0, 1);
  border-radius: 4px;
  color: rgba(0, 0, 0, 1);
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  line-height: 2.34;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  -webkit-transition: background-color .12s ease-in-out, border-color .12s ease-in-out, color .15s ease-in-out;
  transition: background-color .12s ease-in-out, border-color .12s ease-in-out, color .15s ease-in-out;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  -webkit-touch-callout: none;
}

@media (min-width: 768px) {
  .button, [role="button"], .community-follow button {
    width: auto;
  }
}

.button::after, [role="button"]::after {
  color: rgba(255, 255, 255, 1);
}

.button:hover, .button:active, .button:focus, .button[aria-selected="true"], [role="button"]:hover, [role="button"]:active, [role="button"]:focus, [role="button"][aria-selected="true"], .community-follow button:hover, .community-follow button:focus, .community-follow button[aria-pressed="true"] {
  background-color: rgba(0, 0, 0, 1);
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
}

.button[aria-selected="true"]:hover, .button[aria-selected="true"]:focus, .button[aria-selected="true"]:active, [role="button"][aria-selected="true"]:hover, [role="button"][aria-selected="true"]:focus, [role="button"][aria-selected="true"]:active {
  /* lighten, not darken: brand_color is black, so darken() returned #000 --
     the value [aria-selected="true"] already sets above, leaving this rule
     with no effect. Same 20% magnitude, opposite direction. */
  background-color: #333;
  border-color: #333;
}

.button[data-disabled], [role="button"][data-disabled] {
  cursor: default;
}

/* The shared block above is only ever applied to anchors, which are already
   transparent, so it never had to clear a background. A real <button> defaults
   to the browser's grey buttonface and needs it clearing explicitly. */
.community-follow button {
  background-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.button-large, input[type="submit"] {
  background-color: rgba(0, 0, 0, 1);
  border: 0;
  border-radius: 4px;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-weight: 400;
  line-height: 2.72;
  min-width: 190px;
  padding: 0 1.9286em;
  width: 100%;
}

@media (min-width: 768px) {
  .button-large, input[type="submit"] {
    width: auto;
  }
}

.button-large:hover, .button-large:active, .button-large:focus, input[type="submit"]:hover, input[type="submit"]:active, input[type="submit"]:focus {
  /* lighten, not darken: the base rule fills these with brand_color, which is
     black, so darken() returned the same #000 and this was the ONLY hover
     declaration -- every submit button in the Help Centre had no hover
     feedback at all. Same 20% magnitude, opposite direction. */
  background-color: #333;
}

.button-large[disabled], input[type="submit"][disabled] {
  background-color: #ddd;
}

.button-secondary {
  color: #5e5a53;
  border: 1px solid #ddd;
  background-color: transparent;
}

.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: rgba(40, 38, 35, 1);
  border: 1px solid #ddd;
  background-color: #fff550;
}
/***** Split button *****/
.split-button {
  display: flex;
}

.split-button button {
  background-color: rgba(0, 0, 0, 1);
  border: 0;
  color: rgba(255, 255, 255, 1);
  height: 32px;
  line-height: 16px;
  outline-color: rgba(0, 0, 0, 1);
}

[dir=rtl] .split-button button:not(:only-child):first-child {
  border-left: 1px solid rgba(255, 255, 255, 1);
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):first-child {
  border-right: 1px solid rgba(255, 255, 255, 1);
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}
.split-button button:not(:only-child):last-child {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  min-width: 26px;
  max-width: 26px;
  padding: 0;
}
[dir=rtl] .split-button button:not(:only-child):last-child {
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):last-child {
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}

/***** Tables *****/
.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
@media (min-width: 768px) {
  .table {
    table-layout: auto;
  }
}
.table th a {
  color: #5e5a53;
  font-size: 13px;
  text-align: left;
}
[dir=rtl] .table th,
[dir=rtl] .table th a {
  text-align: right;
}
.table tr {
  border-bottom: 1px solid #ddd;
  display: block;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .table tr {
    display: table-row;
  }
}
.table td {
  display: block;
}
@media (min-width: 768px) {
  .table td {
    display: table-cell;
  }
}
@media (min-width: 1024px) {
  .table td, .table th {
    padding: 20px 30px;
  }
}
@media (min-width: 768px) {
  .table td, .table th {
    padding: 10px 20px;
    height: 60px;
  }
}

/***** Forms *****/
.form {
  max-width: 650px;
}

.form-field ~ .form-field {
  margin-top: 25px;
}

.form-field label {
  display: block;
  font-size: 13px;
  margin-bottom: 5px;
}

.form-field input {
  border: 1px solid #87929D;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}
.form-field input:focus {
  border: 1px solid rgba(0, 0, 0, 1);
}

.form-field input[type=text] {
  border: 1px solid #87929D;
  border-radius: 4px;
}
.form-field input[type=text]:focus {
  border: 1px solid rgba(0, 0, 0, 1);
}

.form-field input[type=checkbox] {
  width: auto;
}

.form-field .nesty-input {
  border-radius: 4px;
  border: 1px solid #87929D;
  height: 40px;
  line-height: 40px;
  outline: none;
  vertical-align: middle;
}
.form-field .nesty-input:focus {
  border: 1px solid rgba(0, 0, 0, 1);
  text-decoration: none;
}

.form-field .hc-multiselect-toggle {
  border: 1px solid #87929D;
}

.form-field .hc-multiselect-toggle:focus {
  outline: none;
  border: 1px solid rgba(0, 0, 0, 1);
  text-decoration: none;
}

.form-field textarea {
  vertical-align: middle;
}

.form-field input[type=checkbox] + label {
  margin: 0 0 0 10px;
}

.form-field .optional {
  color: #5e5a53;
  margin-left: 4px;
}

.form-field p {
  color: #5e5a53;
  font-size: 12px;
  margin: 5px 0;
}

.form footer {
  margin-top: 40px;
  padding-top: 30px;
}

.form footer a {
  color: #5e5a53;
  cursor: pointer;
  margin-right: 15px;
}

.form .suggestion-list {
  font-size: 13px;
  margin-top: 30px;
}
.form .suggestion-list label {
  border-bottom: 1px solid #ddd;
  display: block;
  padding-bottom: 5px;
}
.form .suggestion-list li {
  padding: 10px 0;
}
.form .suggestion-list li a:visited {
  color: rgba(22, 49, 22, 1);
}

/***** Header *****/
.header {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  position: relative;
  align-items: center;
  display: flex;
  height: 71px;
  justify-content: space-between;
}
@media (min-width: 1160px) {
  .header {
    padding: 0;
    width: 90%;
  }
}

.logo img {
  max-height: 37px;
  vertical-align: middle;
}

.logo span {
  margin: 0 10px;
  color: rgba(0, 0, 0, 1);
}

.logo a {
  display: inline-block;
}

.logo a:hover, .logo a:focus, .logo a:active {
  text-decoration: none;
}

.user-nav a {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

@media (min-width: 768px) {
  .user-nav {
    position: relative;
  }
}

.user-nav[aria-expanded="true"] {
  background-color: #fff;
  /* Zero-blur offset plate straight down plus a soft layer beneath it. The
     panel hangs over the saturated page background, where a low-alpha blurred
     shadow is invisible — same reasoning as style.css:1357, but offset
     downward rather than diagonally because this is a dropdown, not a card.
     Neutral black-alpha so it stays legible whatever the palette is set to. */
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28), 0 6px 12px rgba(0, 0, 0, 0.18);
  border: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 70px;
  z-index: 1;
}

.user-nav[aria-expanded="true"] > a {
  display: block;
  color: rgba(0, 0, 0, 1);
  margin: 20px;
}
.user-nav[aria-expanded=true] > .user-nav-list li {
  display: block;
}
.user-nav[aria-expanded=true] > .user-nav-list a {
  display: block;
  margin: 20px;
}

.user-nav-list {
  display: block;
  list-style: none;
}
.user-nav-list > li {
  display: inline-block;
}

@media (max-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: inline-block;
  }
}
.nav-wrapper-desktop a {
  border: 0;
  color: rgba(40, 38, 35, 1);
  display: none;
  font-size: 14px;
  padding: 0 20px 0 0;
  width: auto;
}
@media (min-width: 768px) {
  .nav-wrapper-desktop a {
    display: inline-block;
  }
}
[dir=rtl] .nav-wrapper-desktop a {
  padding: 0 0 0 20px;
}
.nav-wrapper-desktop a:hover, .nav-wrapper-desktop a:focus, .nav-wrapper-desktop a:active {
  background-color: transparent;
  color: rgba(40, 38, 35, 1);
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .nav-wrapper-mobile {
    display: none;
  }
}
.nav-wrapper-mobile .menu-button-mobile {
  background: none;
  border: 0;
  width: auto;
  min-width: 71px;
  cursor: pointer;
  color: rgba(40, 38, 35, 1);
}
.nav-wrapper-mobile .menu-button-mobile .icon-menu {
  padding: 7px;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
  background: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile {
  position: absolute;
  background-color: #fff;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 2;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
  display: block;
}
.nav-wrapper-mobile .menu-list-mobile-items .item {
  margin: 4px 0;
}
.nav-wrapper-mobile .menu-list-mobile-items li:empty:not(.nav-divider) {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  border-bottom: 0.1px solid #ddd;
  padding: 0;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider:last-child {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items button {
  background: none;
  border: none;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: rgba(40, 38, 35, 1);
  cursor: pointer;
  text-align: start;
}
.nav-wrapper-mobile .menu-list-mobile-items button:active, .nav-wrapper-mobile .menu-list-mobile-items button:focus, .nav-wrapper-mobile .menu-list-mobile-items button:hover {
  background-color: #f3f3f3;
  text-decoration: underline;
}
.nav-wrapper-mobile .menu-list-mobile-items a {
  display: block;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: rgba(40, 38, 35, 1);
}
.nav-wrapper-mobile .menu-list-mobile-items a:active, .nav-wrapper-mobile .menu-list-mobile-items a:focus, .nav-wrapper-mobile .menu-list-mobile-items a:hover {
  background-color: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile {
  display: flex;
  line-height: 1.5;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile .my-profile-tooltip {
  font-size: 12px;
  color: #68737D;
}
.nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  margin-top: 1px;
}
[dir=rtl] .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  margin-right: 0;
  margin-left: 8px;
}

.skip-navigation {
  align-items: center;
  background-color: black;
  color: white;
  display: flex;
  font-size: 14px;
  justify-content: center;
  left: -999px;
  margin: 20px;
  padding: 20px;
  overflow: hidden;
  position: absolute;
  top: auto;
  z-index: -999;
}
[dir=rtl] .skip-navigation {
  left: initial;
  right: -999px;
}
.skip-navigation:focus, .skip-navigation:active {
  left: auto;
  overflow: auto;
  text-align: center;
  text-decoration: none;
  top: auto;
  z-index: 999;
}
[dir=rtl] .skip-navigation:focus, [dir=rtl] .skip-navigation:active {
  left: initial;
  right: auto;
}
.skip-navigation #zd-modal-container ~ .skip-navigation {
  display: none;
}

/***** User info in header *****/
.user-info {
  display: inline-block;
}
.user-info .dropdown-toggle::after {
  display: none;
}
@media (min-width: 768px) {
  .user-info .dropdown-toggle::after {
    display: inline-block;
  }
}
.user-info > button {
  border: 0;
  color: rgba(40, 38, 35, 1);
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: rgba(40, 38, 35, 1);
  background-color: transparent;
}
.user-info > button::after {
  color: rgba(40, 38, 35, 1);
  padding-right: 15px;
}
[dir=rtl] .user-info > button::after {
  padding-left: 15px;
  padding-right: 0;
}

#user #user-name {
  display: none;
  font-size: 14px;
}
@media (min-width: 768px) {
  #user #user-name {
    display: inline-block;
  }
}
#user #user-name:hover {
  text-decoration: underline;
}

/***** User avatar *****/
.user-avatar {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}

.avatar {
  display: inline-block;
  position: relative;
}
.avatar img {
  height: 40px;
  width: 40px;
}
.avatar .icon-agent {
  color: rgba(0, 0, 0, 1);
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: rgba(255, 255, 255, 1);
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 17px;
}

/***** Footer *****/
.footer {
    text-align: center;
    color: rgba(40, 38, 35, 1) !important;
    text-decoration: blink;
    background-color: rgba(191, 185, 170, 1);
    /* position: absolute; */
    justify-content: space-around;
    position: fixed;
    width: 100%;
    /* height: 60px; */
    /* background-color: grey; */
    bottom: 0px;
    display: inline-block
}

.footer a {
  color: rgba(40, 38, 35, 1);
}
.footer-inner {
  text-align: center;
  max-width: 73%;
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
  justify-content: center;
  align-items: center; /* Optional: vertically align content */
}
@media (min-width: 768px) {
  .footer {
    padding: 0.7% 0;
  }
  
  .footer-inner {
    padding: 0;
    width: 90%;
    margin-bottom: 0;
  }
}

.footer-language-selector {
  color: #5e5a53;
  display: inline-block;
  font-weight: 300;
}

/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
  display: flex;
  color: black;
}
@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}
.breadcrumbs li {
  color: black;
  font-size: 13px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.breadcrumbs li + li::before {
  content: ">";
  margin: 0 4px;
}
.breadcrumbs li a:visited {
  color: black;
}

/***** Search field *****/
.search-container {
  position: relative;
}

.search {
  border-color: #87929D;
  border-radius: 30px;
  border-style: solid;
  border-width: 1px;
  display: flex;
  position: relative;
  transition: border 0.12s ease-in-out;
  margin-top: 5%;
}
.search:focus-within {
  border-color: rgba(0, 0, 0, 1);
}
.search input[type=search],
.search .clear-button {
  background-color: #fff;
  border-radius: 30px;
  border: none;
}
.search-full input[type=search], .search-full .clear-button {
  border-color: #fff;
}
.search input[type=search] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  color: #666;
  flex: 1 1 auto;
  height: 40px;
  width: 100%;
}
.search input[type=search]:focus {
  color: #555;
}
.search input[type=search]::-webkit-search-decoration, .search input[type=search]::-webkit-search-cancel-button, .search input[type=search]::-webkit-search-results-button, .search input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
.search input[type=search]:-webkit-autofill, .search input[type=search]:-webkit-autofill:hover, .search input[type=search]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
.search .clear-button {
  align-items: center;
  box-sizing: border-box;
  color: #777;
  cursor: pointer;
  display: none;
  flex: none;
  justify-content: center;
  padding: 0 15px;
}
.search .clear-button:hover {
  background-color: rgba(0, 0, 0, 1);
  color: #fff;
}
.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 1);
}
.search-has-value .clear-button {
  display: flex;
}

[dir=ltr] .search input[type=search] {
  padding-left: 40px;
  padding-right: 20px;
}
[dir=ltr] .search-has-value input[type=search] {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}
[dir=ltr] .search-has-value input[type=search]:focus {
  border-right-color: rgba(0, 0, 0, 1);
}
[dir=ltr] .search .clear-button {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}
[dir=ltr] .search .clear-button:focus {
  border-left-color: rgba(0, 0, 0, 1);
}

[dir=rtl] .search input[type=search] {
  padding-left: 20px;
  padding-right: 40px;
}
[dir=rtl] .search-has-value input[type=search] {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}
[dir=rtl] .search-has-value input[type=search]:focus {
  border-left-color: rgba(0, 0, 0, 1);
}
[dir=rtl] .search .clear-button {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}
[dir=rtl] .search .clear-button:focus {
  border-right-color: rgba(0, 0, 0, 1);
}

.search-icon {
  position: relative;
  top: 50%;
  position: absolute;
  left: 15px;
  z-index: 1;
  width: 18px;
  height: 18px;
  color: #777;
  pointer-events: none;
}
[dir=rtl] .search-icon {
  left: auto;
  right: 15px;
}

/***** Hero component *****/
.hero {
  background-image: url(/hc/theming_assets/01KY2EV7SBD81QZH2RB0XPEHMR);
  /* Load-bearing, not decoration. The hero artwork's TOP ROW OF PIXELS is
     semi-transparent (alpha 64/255 across the pale field areas — measured off
     the served asset on a real render, 2026-08-12), and the <main> behind it is
     painted `background-color: white !important` up in the normalize block. The
     white showed through that one translucent row as a 1px white line directly
     under the header. Painting the page colour behind the image makes the blend
     land on exactly the artwork's own field colour, so the seam disappears
     without re-exporting the PNG — and any future artwork with soft edges is
     covered too. */
  background-color: rgba(255, 246, 95, 1);
  background-position: top;
  background-size: auto;
  height: 400px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}
.hero-inner {
  position: relative;
  top: 50%; 
  transform: translateY(-50%);
  max-width: 610px;
  margin: 0 auto;
}



.hero-message {
  font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
  color: rgba(40, 38, 35, 1);
  font-size: 42px;
  font-weight: 400;
  line-height: 52px;
  text-align: center;
  /* Now an <h1> (was a <div>): zero the UA bottom margin so the hero spacing
     is unchanged. The global heading rule already sets margin-top: 0. */
  margin: 0;
}
.hero-message span {
  border-bottom: 3px dashed rgba(0, 0, 0, 1);
}

.hero-sub-message {
  color: rgba(40, 38, 35, 1);
  font-size: 16px;
  font-weight: 300;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

/* Full-bleed, and it has to be. This was `max-width: 90%`, which with the
   global `* { box-sizing: border-box }` made the header 90% of the page wide
   and left a 5% strip of page background down each side. That was invisible
   for as long as the header colour and the page colour were the same value --
   and it stopped being invisible the moment the header took the footer's
   colour. The 5% padding is kept, so the logo and nav sit where they did
   (roughly in line with .container's own 5% inset); only the painted
   background now reaches the window edges. */
.header {
  max-width: 100%;
  background-color: rgba(255, 250, 164, 1);
  padding: 0 5%;
  position: relative;
  align-items: center;
  display: flex;
  height: 75px;
  justify-content: space-between;
}

@media (min-width: 1160px) {
  .header {
    padding: 0 10%;
    width: 100%;
  }
}
.page-header {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: -30px 0 0;
}

@media (min-width: 768px) {
  .page-header {
    align-items: baseline;
    margin: -30px 0 15px;
  }
}
.page-header h1 {
  flex-grow: 1;
  margin-bottom: 10px;
}
.page-header-description {
  font-size: 16px;
  font-style: normal;
  font-weight: 200;
  margin: 20px 0 30px 0;
  word-break: break-word;
}
@media (min-width: 1024px) {
  .page-header-description {
    flex-basis: 100%;
  }
}
.page-header .icon-lock {
  height: 20px;
  width: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

.sub-nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 30px;
  min-height: 50px;
  padding-bottom: 15px;
}
@media (min-width: 768px) {
  .sub-nav {
    align-items: baseline;
    flex-direction: row;
  }
}
.sub-nav .breadcrumbs {
  margin: 0;
}
.sub-nav .search-container {
  max-width: 300px;
  width: 100%;
}
@media (min-width: 768px) {
  .sub-nav .search-container {
    flex: 0 1 300px;
  }
}
.sub-nav input[type=search]::after {
  font-size: 15px;
}

/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
}
@media (min-width: 768px) {
  .blocks-list {
    margin: 0 -15px;
  }
}
.blocks-item {
  border: 1px solid rgba(0, 0, 0, 1);
  border-radius: 4px;
  box-sizing: border-box;
  color: rgba(0, 0, 0, 1);
  display: flex;
  flex: 1 0 340px;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
  /* Zero-blur offset plate toward bottom-right + a soft layer under it, so it
     reads as depth rather than a sticker. Offset and alpha are pitched to stay
     crisp against the hard 1px border on a saturated background; a low-alpha
     centred shadow disappears there. Neutral black-alpha, not brand-tinted, so
     it stays legible whatever rgba(0, 0, 0, 1) is set to. */
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.34), 5px 6px 9px rgba(0, 0, 0, 0.18);
  -webkit-transition: box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
  transition: box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
@media (min-width: 768px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}
/* Colour only. The plate deliberately does NOT grow: it used to widen from 4px
   to 6px alongside a lift, and with the lift gone a plate widening while the
   button stays still reads as the plate sliding out from under it. The growth
   only ever made sense as a consequence of the lift.

   Forced-colors note: this hover has no affordance there, because the fill is
   the only thing it changes and forced-colors overrides background-color. That
   is unchanged by this edit -- the plate being removed was a box-shadow, which
   forced-colors already dropped. Checked, left as found, out of scope here.

   :focus is kept in this list as it was found. It is very likely inert --
   .blocks-item is an <li> and the focusable element is the .blocks-item-link
   anchor inside it -- but proving and removing it is separate work. */
.blocks-item:hover, .blocks-item:focus {
  background-color: rgba(0, 0, 0, 1);
}

/* Presses 2px into the 4px plate, leaving 2px of shadow behind. Travel plus
   remaining shadow must always equal the plate depth or the button appears to
   sink further than the gap allows -- which is why this cannot reuse the
   picker's `1px 1px 0`, a value that pairs with a 3px press.

   The fill is restated because :active fires WITHOUT :hover on keyboard
   activation. Descendant text colour is already handled by the
   `.blocks-item:hover *, :focus *, :active *` rule directly below. */
.blocks-item:active {
  background-color: rgba(0, 0, 0, 1);
  -webkit-transform: translate(2px, 2px);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.34);
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
}
.blocks-item-internal {
  background-color: transparent;
  border: 1px solid #ddd;
}
.blocks-item-internal .icon-lock {
  height: 15px;
  width: 15px;
  bottom: 5px;
  position: relative;
}
.blocks-item-internal a {
  color: rgba(40, 38, 35, 1);
}
.blocks-item-link {
  color: rgba(0, 0, 0, 1);
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  border-radius: inherit;
}
/* :focus kills the global a:focus underline after a mouse click -- see
   .product-card__link further down this file for the mechanism. Sets no
   outline, so it is not part of the PR #55 focus ordering. */
.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active, .blocks-item-link:focus {
  color: inherit;
  text-decoration: none;
}
/* :focus-visible, not :focus -- a mouse click satisfies :focus, which left the
   ring painted on the category card after the click. Same fix and same reason
   as the home page cards near the end of this file; these are the row-3
   equivalent of those, so they had the identical bug. */
.blocks-item-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 1);
  text-decoration: none;
}

/* Forced-colors fallback -- the same shape and the same reason as
   .product-card__link:focus further down this file. Under `forced-colors: active`
   the user agent drops box-shadow entirely, so the ring above -- the only focus
   indicator these tiles had -- vanishes and a keyboard user gets nothing at all.
   An outline survives, because its colour is forced to a system colour rather
   than removed. This was the last of the five clickable families still missing
   the fallback; the other four got it in PRs #54 and #55.

   THE ORDER IS LOAD-BEARING: this must stay BELOW :focus-visible. That rule sets
   outline: 0 and both selectors are (0,2,0), so an outline written above it is
   cancelled for keyboard focus -- exactly the case this exists to cover. On a
   normal display the ring spans 0-3px from the edge and this outline spans 2-4px
   in the same colour, so the two read as one slightly wider band, not as two
   rings.

   Reaches the community topic list as well as the home-page category grid; both
   use .blocks-item-link. */
.blocks-item-link:focus {
  outline: 2px solid rgba(0, 0, 0, 1);
  outline-offset: 2px;
}

/* Modern engines only: mouse focus loses the fallback outline, which is the
   behaviour :focus-visible exists to give. Engines without :focus-visible cannot
   match this selector at all, so they keep the outline above. */
.blocks-item-link:focus:not(:focus-visible) {
  outline: 0;
}
.blocks-item-title {
  margin-bottom: 0;
  font-size: 16px;
}
.blocks-item-description {
  margin: 0;
}
.blocks-item-description:not(:empty) {
  margin-top: 10px;
}

/***** Homepage *****/
.section {
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .section {
    margin-bottom: 60px;
  }
}

.home-section h2 {
  margin-bottom: 10px;
  text-align: center;
}

/***** Promoted articles *****/
.promoted-articles {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
@media (min-width: 1024px) {
  .promoted-articles {
    flex-direction: row;
  }
}
.promoted-articles-item {
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .promoted-articles-item {
    align-self: flex-end;
    flex: 0 0 auto;
    padding-right: 30px;
    width: 33%; /* Three columns on desktop */
  }
  [dir=rtl] .promoted-articles-item {
    padding: 0 0 0 30px;
  }
}
.promoted-articles-item:nth-child(3n) {
  padding-right: 0;
}
.promoted-articles-item a {
  display: block;
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
}
.promoted-articles-item .icon-lock {
  vertical-align: baseline;
}
.promoted-articles-item:last-child a {
  border: 0;
}
@media (min-width: 1024px) {
  .promoted-articles-item:last-child a {
    border-bottom: 1px solid #ddd;
  }
}

/***** Community section in homepage *****/
.community {
  text-align: center;
}
.community-image {
  min-height: 300px;
  margin-top: 32px;
  background-image: url(/hc/theming_assets/01KY2EV7SBD81QZH2RB0XPEHMR);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}
.community a {
  color: rgba(0, 0, 0, 1);
  text-decoration: underline;
}
.community a:visited {
  color: rgba(22, 49, 22, 1);
}
.community a:hover, .community a:active, .community a:focus {
  color: rgba(119, 115, 103, 1);
}

.community,
.activity {
  border-top: 1px solid #ddd;
  padding: 30px 0;
}

/***** Recent activity *****/
.recent-activity-header {
  border-bottom: 1px solid rgba(0, 0, 0, 1);
/*   max-width: 325px; */
  padding-bottom: 10px;
  margin-bottom: 15px;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 2px;
  text-align: center;
}

.recent-activity-list {
  padding: 0;
}

.recent-activity-item {
/*   border-bottom: 1px solid rgba(0, 0, 0, 1); */
  font-weight: 300;
  overflow: auto;
  padding: 15px;
}

.recent-activity-item:hover {
  box-shadow: 0 0 10px 1px rgba(0,0,0,0.15);
  margin-left: 2px;
}

.recent-activity-item-parent {
  font-size: 16px;
}

.recent-activity-item-parent, .recent-activity-item-link {
  margin: 6px 0;
  color: black !important;
  display: inline-block;
  width: 100%;
}

@media (min-width: 768px) {
  .recent-activity-item-parent, .recent-activity-item-link {
    width: 70%;
    margin: 0;
  }
}

.recent-activity-item-link {
  font-size: 13px;
  font-weight: 300;
  color: black;
}

.recent-activity-item-meta {
  margin: 15px 0 0 0;
  float: none;
}

@media (min-width: 768px) {
  .recent-activity-item-meta {
    margin: 0;
    float: right;
  }
  [dir="rtl"] .recent-activity-item-meta {
    float: left;
  }
}

.recent-activity-item-time, .recent-activity-item-comment {
  color: #5e5a53;
  display: inline-block;
  font-size: 12px;
  font-weight: 300;
}

.recent-activity-item-comment {
  padding-left: 5px;
}

[dir="rtl"] .recent-activity-item-comment {
  padding: 0 5px 0 0;
}

.recent-activity-item-comment::before {
  display: inline-block;
}

.recent-activity-item-comment span::before {
  color: rgba(0, 0, 0, 1);
  content: "\1F4AC";
  display: inline-block;
  font-size: 15px;
  padding-right: 3px;
  vertical-align: middle;
}

[dir="rtl"] .recent-activity-item-comment span::before {
  padding-left: 3px;
}

.recent-activity-controls {
  padding: 15px;
}


/***** Category pages *****/
.category-container {
  display: flex;
  justify-content: space-between;
}
.cat-container{
  width: 100%;
  margin-bottom: 8%;
  padding: 8px;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
  border-radius: 9px;
}

.category-content {
  flex: 1;
}
@media (min-width: 860px) {
  .category-content {
    flex: 0 0 80%;
    margin: 0 0 0px 30px;
  }
}

.section-tree {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
.section-empty {
  margin-left: 100px;
}

@media (min-width: 768px) {
  .section-tree {
    flex-direction: row;
  }
}

.section-tree .section {
  flex: initial;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .section-tree .section {
    flex: 0 0 45%;
    /* Two columns for tablet and desktop. Leaving 5% separation between columns */
  }
}

.section-tree .icon-lock::before {
  vertical-align: baseline;
}
.section-tree-title {
  margin: 3px 0 0;
  padding: 0 15px 5px;
  font-size: 20px;
  font-weight: 400;
  border-bottom: 2px solid rgba(0, 0, 0, 1);
  background: transparent;
  background-repeat: no-repeat;
  background-position: 10px;
  background-size: 35px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  margin: 0.2em 0;
}
.section-tree-title a {
  color: rgba(40, 38, 35, 1);
}
/* Section-page header: title left, Follow button right, description on its own
   row. The Follow control here is Zendesk's own {{subscribe}} helper, which this
   theme uses in seven templates. What was withdrawn on 2026-08-18 is the
   category page's bespoke API-driven control -- so {{subscribe}} is now the only
   Follow MECHANISM in the theme, not the only Follow button.
   .section-tree-title is also used on its own for plain headings that carry no
   Follow control. */
.section-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
}
.section-page-header h1 {
  flex-grow: 1;
}
.section-page-header .page-header-description {
  flex-basis: 100%;
}
.section-page-header .community-follow {
  flex-shrink: 0;
}
.section-tree .see-all-articles {
  display: block;
  padding: 10px 22px;
  margin: 0 auto;
}
.article-list{
  width: auto;
  margin: 15px 0;
  padding: 5px;
  column-count: 2;
  column-width: 400px;
  display: block;
  list-style-position: outside;
  list-style-type: none;
  border-radius: 0 0 3px 3px;
}
.see-all-articles {
  width: 200px;
}

.article-list-item {
	width: 100%;
  font-size: 16px;
  padding: 15px 20px;
  margin: 0;
  -webkit-column-break-inside: avoid;
}
.article-list-item a {
  color: rgba(40, 38, 35, 1);
}

/* Inline row icons (replaces FontAwesome <i> glyphs) */
.row-icon {
  width: 15px;
  height: 15px;
  margin-right: 8px;
  vertical-align: -2px;
  flex-shrink: 0;
}

.icon-star {
  color: rgba(0, 0, 0, 1);
  font-size: 18px;
}

/***** Section pages *****/
.section-container {
  display: flex;
  justify-content: flex-end;
}
.section-content {
  flex: 1;
}
@media (min-width: 768px) {
  .article-list {
    column-width: unset;
  }
  .article-list-item {
    flex: 1 0 50%;
  }
}
.section-list{
  width: auto;
  margin: 15px 0;
  padding: 5px;
  column-count: 2;
  column-width: 400px;
  display: block;
  list-style-position: outside;
  list-style-type: none;
  border-radius: 0 0 3px 3px;
}

.section-list-item{
	width: 100%;
  font-size: 16px;
  padding: 15px 20px;
  margin: 0;
  -webkit-column-break-inside: avoid;  
}
.section-list-item:first-child {
}
.section-list-item a {
  align-items: center;
  color: rgba(40, 38, 35, 1);
  display: flex;
  justify-content: space-between;
}

.see-all-sections-trigger {
  cursor: pointer;
  display: block;
  padding: 15px;
  text-align: center;
}
.see-all-sections-trigger[aria-hidden=true] {
  display: none;
}
#nav-list {
	max-height: 80vh;
}


/***** Article *****/
.article {
  /*
  * The article grid is defined this way to optimize readability:
  * Sidebar | Content | Free space
  * 17%     | 66%     | 17%
  */
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .article {
    flex: 1 0 66%;
    max-width: 66%;
    min-width: 640px;
    padding: 0 30px;
  }
}
.article-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .article-container {
    flex-direction: row;
  }
}
.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  /* #REMOVAL */
  /*margin-bottom: 40px;*/
  /* #ADDITION */
  margin-bottom: -20px;
  margin-top: 20px;
}

@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}
.article-avatar {
  margin-right: 10px;
}
.article-author {
  margin-bottom: 0px;
  opacity: 100;
}
@media (min-width: 768px) {
  .article-title {
    flex-basis: 100%; /* Take entire row */
  }
}
.article-title .icon-lock {
  position: relative;
  left: -5px;
  vertical-align: baseline;
}
.article [role=button] {
  flex-shrink: 0; /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
  width: 100%;
}
@media (min-width: 768px) {
  .article [role=button] {
    width: auto;
  }
}
.article-info {
  max-width: 100%;
}
.article-meta {
  display: inline-block;
  vertical-align: middle;
}
.article-body {
  display: flow-root;
}
.article-body a {
  color: rgba(0, 0, 0, 1);
  text-decoration: underline;
}
.article-body a:visited {
  color: rgba(22, 49, 22, 1);
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: rgba(119, 115, 103, 1);
  /* font-weight: 600; */
  transition:color 0.25s ease-in-out;

}
.article-body img {
  height: auto;
  max-width: 100%;
	border: 1px solid rgba(0, 0, 0, 1);
}
.article-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figure.image {
  display: table;
  margin: 0 auto;
}
.article-body figure.image > img {
  display: block;
  width: 100%;
}
.article-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #fff546;
}
.article-body ul,
.article-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .article-body ul,
[dir=rtl] .article-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.article-body ul > ul,
.article-body ol > ol,
.article-body ol > ul,
.article-body ul > ol,
.article-body li > ul,
.article-body li > ol {
  margin: 0;
}
.article-body ul {
  list-style-type: disc;
}
.article-body :not(pre) > code {
  background: rgba(0,0,0,0.1);
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: rgba(0,0,0,0.1);
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.article-body blockquote {
  border-left: 1px solid #ddd;
  color: #5e5a53;
  font-style: italic;
  padding: 0 15px;
}
.article-body > p:last-child {
  margin-bottom: 0;
}
.article-content {
  line-height: 1.6;
  margin: 30px 0;
  word-wrap: break-word;
}
.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.article-comment-count {
  color: #5e5a53;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: rgba(0, 0, 0, 1);
  width: 18px;
  height: 18px;
}

#article-navbar.article-sidebar {
  display: none;
}

@media (min-width: 1024px) {
  #article-navbar.article-sidebar {
    display: block;
  }
}

.article-sidebar {
  flex: 1 0 auto;
  margin: 0 0 20px;
	padding: 5px 0;
}

.article-sidebar-cat {
  margin-top: 8px;
  margin-bottom: 20px;
  padding: 0;
  display: none;
	}

/* ADDITION */
@media (min-width: 860px) {
  .article-sidebar-cat {
  margin-bottom: 20px;
  padding: 0;
  display: none;
	}
}

@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    flex: 0 0 17%;
    height: auto;
  }
}
#article-headings {
  display: none;
  max-width: 196.6px;
  position: -webkit-sticky;  /*required for Safari*/
  position: sticky;
  top: 10vh;
} 

#nav-list {
	max-height: 80vh;
}
.article-relatives {
  border-top: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  color: black;
}
@media (min-width: 768px) {
  .article-relatives {
    flex-direction: row;
  }
}
.article-relatives > * {
  flex: 1 0 auto;
  margin-right: 0;
}
.article-relatives > *:last-child {
  padding: 0;
}
@media (min-width: 768px) {
  .article-relatives > * {
    padding-right: 20px;
  }
}
.article-votes {
  border-top: 1px solid #ddd;
  padding: 30px 0;
  text-align: center;
}
.article-vote {
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}
.article-return-to-top {
  border-top: 1px solid #87929D;
}
@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}
.article-return-to-top a {
  color: rgba(40, 38, 35, 1);
  display: block;
  padding: 20px 0;
}
.article-return-to-top a:hover, .article-return-to-top a:focus {
  text-decoration: none;
}
.article-return-to-top-icon {
  transform: rotate(0.5turn);
}
.article td > p:first-child,
.article th > p:first-child {
  margin-top: 0;
}
.article td > p:last-child,
.article th > p:last-child {
  margin-bottom: 0;
}

.related-articles-title {
  color: rgba(0, 0, 0, 1);
  font-weight: bold;
}

.sidenav-title {
  margin: 5px 0 10px;
  padding: 4px 5px 7px;
  border-bottom: 2px solid rgba(0, 0, 0, 1);
  font-size: 18px;
  font-weight: 400;
  position: relative;
}
.sidenav-item, .curnav, .llnav {
  border-radius: 2px;
  color: black !important;
  display: block;
  font-weight: 400;
  margin-bottom: 6px;
  padding: 8px 10px;
  -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.sidenav-item.lge {
  margin-bottom: 2px;
}
.sidenav-item.sml {
  margin-bottom: 4px;
}
.curnav:hover {
  color: #fff !important;
  background-color: #41BFED;
  text-decoration: none;
}
.sidenav-item.current-article, .sidenav-item:hover, .sidenav-item-lge:hover, .sidenav-item-sml:hover {
  background-color: #000;
  color: rgba(255, 255, 255, 1) !important;
  font-weight: 400;
  text-decoration: none;
}
.sidenav.visited{
  color:black;
}

.recent-articles li,
.related-articles li {
  margin-bottom: 15px;
  color: black !important;
}

/***** Attachments *****/
/* Styles attachments inside posts, articles and comments */
.attachments .attachment-item {
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}
.attachments .attachment-item:last-child {
  margin-bottom: 0;
}
.attachments .attachment-item .attachment-icon {
  color: rgba(40, 38, 35, 1);
  left: 0;
  position: absolute;
  top: 5px;
}
[dir=rtl] .attachments .attachment-item {
  padding-left: 0;
  padding-right: 20px;
}
[dir=rtl] .attachments .attachment-item .attachment-icon {
  left: auto;
  right: 0;
}

.upload-dropzone span {
  color: #5e5a53;
}

/***** Social share links *****/
.share {
  padding: 0;
  white-space: nowrap;
}

.share li, .share a {
  display: inline-block;
}

.share li {
  height: 25px;
  width: 25px;
}

.share a {
  color: #5e5a53;
}
.share a:hover {
  text-decoration: none;
  color: rgba(0, 0, 0, 1);
}
.share a svg {
  height: 18px;
  width: 18px;
  display: block;
}

/***** Comments *****/
/* Styles comments inside articles, posts and requests */
.comment {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}
.comment-heading, .recent-articles-title,
.related-articles-title {
  margin-bottom: 5px;
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
  color: rgba(0, 0, 0, 1);
}
.comment-overview {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 20px 0;
}
.comment-overview p {
  margin-top: 0;
}
.comment-callout {
  color: #5e5a53;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}
.comment-callout a {
  color: rgba(0, 0, 0, 1);
  text-decoration: underline;
}
.comment-callout a:visited {
  color: rgba(22, 49, 22, 1);
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: rgba(119, 115, 103, 1);
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: #5e5a53;
  font-size: 13px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid rgba(0, 0, 0, 1);
  padding: 40px 20px 20px;
}
@media (min-width: 768px) {
  .comment-wrapper.comment-official {
    padding-top: 20px;
  }
}
.comment-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .comment-info {
  padding-right: 0;
  padding-left: 20px;
}
.comment-author {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .comment-author {
    justify-content: space-between;
  }
}
.comment-avatar {
  margin-right: 10px;
}
[dir=rtl] .comment-avatar {
  margin-left: 10px;
  margin-right: 0;
}
.comment-meta {
  flex: 1 1 auto;
}
.comment-labels {
  flex-basis: 100%;
}
@media (min-width: 768px) {
  .comment-labels {
    flex-basis: auto;
  }
}
.comment .status-label:not(.status-label-official) {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .comment .status-label:not(.status-label-official) {
    margin-top: 0;
  }
}
.comment-form {
  display: flex;
  padding-top: 30px;
  word-wrap: break-word;
}
.comment-container {
  width: 100%;
}
.comment-form-controls {
  display: none;
  margin-top: 10px;
  text-align: left;
}
@media (min-width: 768px) {
  [dir=ltr] .comment-form-controls {
    text-align: right;
  }
}
.comment-form-controls input[type=submit] {
  margin-top: 15px;
}
@media (min-width: 1024px) {
  .comment-form-controls input[type=submit] {
    margin-left: 15px;
  }
  [dir=rtl] .comment-form-controls input[type=submit] {
    margin-left: 0;
    margin-right: 15px;
  }
}
.comment-form-controls input[type=checkbox] {
  margin-right: 5px;
}
.comment-form-controls input[type=checkbox] [dir=rtl] {
  margin-left: 5px;
}
.comment-ccs {
  display: none;
}
.comment-ccs + textarea {
  margin-top: 10px;
}
.comment-attachments {
  margin-top: 10px;
}
.comment-attachments a {
  color: rgba(0, 0, 0, 1);
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  color: rgba(0, 0, 0, 1);
  text-decoration: underline;
}
.comment-body a:visited {
  color: rgba(22, 49, 22, 1);
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: rgba(119, 115, 103, 1);
}
.comment-body img {
  height: auto;
  max-width: 100%;
}
.comment-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figure.image {
  display: table;
  margin: 0 auto;
}
.comment-body figure.image > img {
  display: block;
  width: 100%;
}
.comment-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #fff546;
}
.comment-body ul,
.comment-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .comment-body ul,
[dir=rtl] .comment-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.comment-body ul > ul,
.comment-body ol > ol,
.comment-body ol > ul,
.comment-body ul > ol,
.comment-body li > ul,
.comment-body li > ol {
  margin: 0;
}
.comment-body ul {
  list-style-type: disc;
}
.comment-body :not(pre) > code {
  background: rgba(0,0,0,0.1);
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.comment-body pre {
  background: #fff550;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.comment-body blockquote {
  border-left: 1px solid #ddd;
  color: #5e5a53;
  font-style: italic;
  padding: 0 15px;
}
.comment-mark-as-solved {
  display: inline-block;
}

/***** Vote *****/
/* Used in article comments, post comments and post */
.vote {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.vote a:active, .vote a:hover, .vote a:focus {
  text-decoration: none;
}

.vote-sum {
  color: #5e5a53;
  display: block;
  margin: 3px 0;
}
[dir=rtl] .vote-sum {
  direction: ltr;
  unicode-bidi: bidi-override;
}

.vote-up svg {
  transform: scale(1, -1);
}

.vote-up:hover,
.vote-down:hover {
  color: rgba(0, 0, 0, 1);
}

.vote-up, .vote-down {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  color: #5e5a53;
  cursor: pointer;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vote-voted {
  color: rgba(0, 0, 0, 1);
}

.vote-voted:hover {
  color: #000;
}

/***** Actions *****/
/* Styles admin and en user actions(edit, delete, change status) in comments and posts */
.actions {
  text-align: center;
  flex-shrink: 0; /*Avoid collapsing elements in Safari*/
}
.actions button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/***** Community *****/
.community-hero {
  background-image: url(/hc/theming_assets/01KY2EV7SBD81QZH2RB0XPEHMR);
  margin-bottom: 10px;
}
.community-footer {
  padding-top: 0px;
  text-align: center;
}
.community-footer-title {
  font-size: 16px;
  margin-bottom: 20px;
}
.community-featured-posts .title {
  font-size: 18px;
  font-weight: 600;
}
.community-featured-posts, .community-activity {
  padding-top: 40px;
  width: 100%;
}
.community-header {
  margin-bottom: 30px;
}
.community-header .title {
  margin-bottom: 0;
  font-size: 16px;
}

.post-to-community {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .post-to-community {
    margin: 0;
  }
}

/* Community topics grid */
.topics {
  max-width: none;
  width: 100%;
}
.topics-item .meta-group {
  justify-content: center;
  margin-top: 20px;
}

/* Community topic page */
.topic-header {
  border-bottom: 1px solid #ddd;
  font-size: 13px;
}
@media (min-width: 768px) {
  .topic-header {
    padding-bottom: 10px;
  }
}
.topic-header .dropdown {
  display: block;
  border-top: 1px solid #ddd;
  padding: 10px 0;
}
@media (min-width: 768px) {
  .topic-header .dropdown {
    border-top: 0;
    display: inline-block;
    margin-right: 20px;
    padding: 0;
  }
}

.no-posts-with-filter {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Topic, post and user follow button */
.community-follow {
  margin-bottom: 10px;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow {
    margin-bottom: 0;
    width: auto;
  }
}
/* Soft-academy treatment, chosen 2026-08-20 from a specimen sheet of seven.

   It reuses ROW 2's palette exactly -- home_accent_bg at rest, the
   home_cta pair on hover -- rather than introducing settings of its own, so
   Follow moves with the row 2 buttons from one control in the editor. The point
   of the choice was that Follow reads as an ACTION, not as navigation chrome:
   the plate languages on this site belong to things that take you somewhere.

   The shared `.button, [role="button"], .community-follow button` block near the
   top of this file supplies a 1px brand_color border and a 4px radius, both
   written for anchors. Both are overridden here -- this is a filled button, not
   an outlined one. That block's `background-color: transparent` companion (also
   near the top) is now redundant but kept as a guard: if this fill is ever
   removed, it still stops the browser's grey buttonface showing through.

   Selector discipline: everything about this control is styled through the
   wrapper the theme owns plus `button` as a descendant, `[data-selected]` and
   ::after. The helper's own id is randomised per render and its inner span
   carries a build-hash class -- neither is ever safe to select. */
.community-follow button {
  line-height: 30px;
  padding: 0 10px 0 15px;
  position: relative;
  width: 100%;
  border: 0;
  border-radius: 6px;
  background-color: rgba(239, 199, 16, 1);
  color: rgba(40, 38, 35, 1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  /* The shared block's transition covers background-color, border-color and
     colour only. The press below moves and drops a shadow, so transform and
     box-shadow are added here. */
  -webkit-transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
@media (min-width: 768px) {
  .community-follow button {
    width: auto;
  }
}
.community-follow button:hover {
  background-color: rgba(71, 68, 59, 1);
  color: rgba(255, 255, 255, 1);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
  /* Hover feedback that survives forced-colors, which overrides
     background-color and drops box-shadow -- so without this the button would
     show no hover state there at all. A transparent outline is forced to a
     system colour in that mode and stays invisible everywhere else; the
     negative offset keeps it inside the button so it cannot shift the layout.
     Same idiom as .quick-link:hover and .product-card:hover. */
  outline: 2px solid transparent;
  outline-offset: -2px;
}

/* Slides right, matching row 2 and the row 1 cards -- every soft-shadow button
   in the theme moves the same way, and there is no shadow plate here to press
   into. The fill is restated because on keyboard activation :active fires
   WITHOUT :hover and would otherwise flash the resting gold mid-press. */
.community-follow button:active {
  background-color: rgba(71, 68, 59, 1);
  color: rgba(255, 255, 255, 1);
  -webkit-transform: translateX(4px);
  transform: translateX(4px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.14);
}

/* The shared block at the top of this file lists `.community-follow
   button:focus` alongside :hover, so a mouse click used to leave the hover fill
   painted on after the pointer left -- the stuck-state bug PR #54 fixed on the
   cards. This restores the resting look for a mouse-originated focus.

   Scoped to [data-selected="false"] on purpose. A plain :not(:focus-visible)
   reset would be (0,3,1) and would beat the [data-selected=true] rule below at
   (0,2,1), so clicking Follow would snap the button back to looking unfollowed.
   The attribute is always present on the helper's output, so selecting the false
   case positively is safe and keeps the followed state untouched.

   The :not(:hover) matters as much as the rest. Without it this reset is (0,4,1)
   and outranks :hover at (0,2,1), so clicking the button and leaving the pointer
   on it would snap it back to the resting gold while still hovered. With it,
   the reset applies only once the pointer has actually left -- which is the
   whole point of it.

   Keyboard focus deliberately keeps the hover treatment, and the browser's own
   :focus-visible ring still applies -- nothing in this theme sets `outline` on
   this button, unlike the five families that trade it for a box-shadow ring. */
.community-follow button[data-selected="false"]:focus:not(:focus-visible):not(:hover) {
  background-color: rgba(239, 199, 16, 1);
  color: rgba(40, 38, 35, 1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.community-follow button[data-selected="false"]:focus:not(:focus-visible):not(:hover)::after {
  border-color: rgba(40, 38, 35, 1);
  color: rgba(40, 38, 35, 1);
}
.community-follow button:hover::after, .community-follow button:focus::after, .community-follow button:active::after {
  border-color: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, 1);
}
/* Followed rests on the hover fill, so the control reads as already-engaged
   without needing a second colour of its own. */
.community-follow button[data-selected=true] {
  background-color: rgba(71, 68, 59, 1);
  color: rgba(255, 255, 255, 1);
}
.community-follow button[data-selected=true]::after {
  border-left: 1px solid rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, 1);
}
/* Followed + hover has to differ from followed at rest, or hovering an
   already-followed button does nothing. Both states now sit on home_cta_bg, so
   this lightens it. lighten() on a mid-tone olive moves visibly -- unlike the
   old lighten(brand_color) here, which was working around brand_color being
   black. border-color is gone: the border is now 0. */
.community-follow button[data-selected=true]:hover {
  background-color: #686457;
}
/* The follower count. `content: attr()` on a MISSING attribute yields an empty
   string rather than nothing, which would leave this divider painted with no
   number beside it -- Zendesk's helper always sets the attribute, but any
   JS-built variant must suppress ::after when it does not. */
.community-follow button::after {
  border-left: 1px solid rgba(40, 38, 35, 1);
  content: attr(data-follower-count);
  color: rgba(40, 38, 35, 1);
  display: inline-block;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}
@media (min-width: 768px) {
  .community-follow button::after {
    position: static;
  }
}
[dir=rtl] .community-follow button::after {
  border-left: 0;
  border-right: 1px solid rgba(40, 38, 35, 1);
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
}

/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  padding: 0;
}
.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}
.striped-list-info {
  flex: 2;
}
.striped-list-title {
  color: rgba(0, 0, 0, 1);
  margin-bottom: 10px;
  margin-right: 5px;
}
.striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active {
  text-decoration: underline;
}
.striped-list-title:visited {
  color: rgba(22, 49, 22, 1);
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #5e5a53;
  font-size: 13px;
  justify-content: flex-start;
  text-transform: capitalize;
}
@media (min-width: 768px) {
  .striped-list-count {
    display: flex;
    flex: 1;
    justify-content: space-around;
  }
}
.striped-list-count-item::after {
  content: "·";
  display: inline-block;
  padding: 0 5px;
}
@media (min-width: 768px) {
  .striped-list-count-item::after {
    display: none;
  }
}
.striped-list-count-item:last-child::after {
  display: none;
}
.striped-list-number {
  text-align: center;
}
@media (min-width: 768px) {
  .striped-list-number {
    color: rgba(40, 38, 35, 1);
    display: block;
  }
}

/***** Status labels *****/
/* Styles labels used in posts, articles and requests */
.status-label {
  background-color: #038153;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  margin-right: 2px;
  padding: 3px 10px;
  vertical-align: middle;
  white-space: nowrap;
  display: inline-block;
}
.status-label:hover, .status-label:active, .status-label:focus {
  text-decoration: none;
}
.status-label-pinned, .status-label-featured, .status-label-official {
  background-color: rgba(0, 0, 0, 1);
}
.status-label-official {
  border-radius: 0;
  margin-right: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .status-label-official {
    border-radius: 0 0 4px 4px;
    right: 30px;
    width: auto;
  }
}
[dir=rtl] .status-label-official {
  left: 30px;
  right: auto;
}
.status-label-not-planned, .status-label-closed {
  background-color: #e9ebed;
  color: #5e5a53;
}
.status-label-pending, .status-label-pending-moderation {
  background-color: #1f73b7;
  text-align: center;
}
.status-label-open {
  background-color: #c72a1c;
}
.status-label-solved {
  background-color: #68737d;
}
.status-label-new {
  background-color: #ffb648;
  color: #703b15;
}
.status-label-hold {
  background-color: #000;
}
.status-label-request {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .status-label-request {
    max-width: 150px;
  }
}

/***** Post *****/
/*
* The post grid is defined this way:
* Content | Sidebar
* 70%     | 30%
*/
.post {
  flex: 1;
  margin-bottom: 10px;
}
@media (min-width: 1024px) {
  .post {
    flex: 1 0 70%;
    max-width: 70%;
  }
}
.post-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .post-container {
    flex-direction: row;
  }
}
.post-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .post-header {
    align-items: baseline;
    flex-direction: row;
  }
}
.post-header .status-label {
  vertical-align: super;
}
.post-title {
  margin-bottom: 20px;
  width: 100%;
}
@media (min-width: 768px) {
  .post-title {
    margin-bottom: 0;
    padding-right: 10px;
  }
}
.post-title h1 {
  display: inline;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .post-title h1 {
    margin-right: 5px;
  }
}
.post-author {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}
.post-avatar {
  margin-bottom: 30px;
}
.post-content {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  word-break: break-word;
}
.post-info-container {
  display: flex;
  margin-bottom: 40px;
}
.post-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .post-info {
  padding-right: 0;
  padding-left: 20px;
}
.post-meta {
  display: inline-block;
  flex: 1;
  margin-left: 10px;
  vertical-align: middle;
}
[dir=rtl] .post-meta {
  margin-left: 0;
  margin-right: 10px;
}
.post-body {
  display: flow-root;
}
.post-body a {
  color: rgba(0, 0, 0, 1);
  text-decoration: underline;
}
.post-body a:visited {
  color: rgba(22, 49, 22, 1);
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: rgba(119, 115, 103, 1);
}
.post-body img {
  height: auto;
  max-width: 100%;
}
.post-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.post-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.post-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.post-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.post-body figure.image {
  display: table;
  margin: 0 auto;
}
.post-body figure.image > img {
  display: block;
  width: 100%;
}
.post-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.post-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.post-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.post-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.post-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #fff546;
}
.post-body ul,
.post-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .post-body ul,
[dir=rtl] .post-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.post-body ul > ul,
.post-body ol > ol,
.post-body ol > ul,
.post-body ul > ol,
.post-body li > ul,
.post-body li > ol {
  margin: 0;
}
.post-body ul {
  list-style-type: disc;
}
.post-body :not(pre) > code {
  background: rgba(0,0,0,0.1);
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.post-body pre {
  background: #fff550;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.post-body blockquote {
  border-left: 1px solid #ddd;
  color: #5e5a53;
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: #5e5a53;
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: rgba(0, 0, 0, 1);
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 5px;
  vertical-align: middle;
}
.post-sidebar {
  border-top: 1px solid #ddd;
  flex: 1;
  padding: 30px 0;
  text-align: center;
}
@media (min-width: 1024px) {
  .post-sidebar {
    border: 0;
    flex: 1 0 30%;
    padding: 0 0 0 50px;
    text-align: initial;
  }
  [dir=rtl] .post-sidebar {
    padding: 0 50px 0 0;
  }
}
.post-sidebar-title {
  font-size: 18px;
  font-weight: 600;
}
.post-comments {
  margin-bottom: 20px;
}
@media (min-width: 1024px) {
  .post-comments {
    margin-bottom: 0;
  }
}

/***** Community Badges *****/
/* Styles labels used next to the authors of article comments, community posts, and community comments */
.community-badge-title {
  background-color: #04444d;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 0px 8px;
  vertical-align: top;
  white-space: nowrap;
  display: inline-block;
  line-height: 18px;
  vertical-align: middle;
}

.community-badge-titles {
  display: inline;
}

.community-badge-achievement {
  display: block;
  height: 16px;
  white-space: nowrap;
  width: 16px;
}
.community-badge-achievement img {
  width: 100%;
  height: 100%;
}

.community-badge-achievements {
  display: flex;
}

.community-badge-achievements-rest {
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  vertical-align: top;
}

.community-badge {
  margin: 2px;
}

.profile-info .community-badge-title {
  padding: 2px 8px;
  line-height: 20px;
}
.profile-info .community-badge-achievement {
  height: 40px;
  width: 40px;
}
.profile-info .community-badge-achievements-rest {
  line-height: 40px;
  font-size: 20px;
}

/* Navigation element that collapses on mobile */
.collapsible-nav {
  flex-direction: column;
  font-size: 14px;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav {
    flex-direction: row;
  }
}

.collapsible-nav-border {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
}
@media (min-width: 768px) {
  .collapsible-nav-border {
    border-top: 0;
  }
}

.collapsible-nav-toggle {
  top: 22.5px;
  transform: translateY(-50%);
  position: absolute;
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 768px) {
  .collapsible-nav-toggle {
    display: none;
  }
}
[dir=rtl] .collapsible-nav-toggle {
  left: 0;
  right: auto;
}
.collapsible-nav-toggle-icon {
  display: none;
}
.collapsible-nav-toggle[aria-expanded=false] .chevron-icon {
  display: inline-block;
}
.collapsible-nav-toggle[aria-expanded=true] .x-icon {
  display: inline-block;
}
.collapsible-nav-toggle:focus {
  outline: none;
  border: 1px solid rgba(0, 0, 0, 1);
}

.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}
.collapsible-nav-list li {
  color: rgba(40, 38, 35, 1);
  line-height: 45px;
  order: 1;
}
@media (min-width: 768px) {
  .collapsible-nav-list li {
    line-height: normal;
    margin-right: 30px;
  }
  [dir=rtl] .collapsible-nav-list li {
    margin-left: 30px;
    margin-right: 0;
  }
  .collapsible-nav-list li a {
    text-decoration: none;
    padding: 15px 0;
  }
}
.collapsible-nav-list li a {
  color: rgba(40, 38, 35, 1);
  display: block;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:hover {
    border-bottom: 4px solid #ddd;
  }
  .collapsible-nav-list li:hover a:not([aria-current=page]) {
    padding: 15px 0 11px 0;
    text-decoration: none;
  }
}
.collapsible-nav-list li:not([aria-selected=true]),
.collapsible-nav-list li:not(.current) {
  display: none;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:not([aria-selected=true]),
  .collapsible-nav-list li:not(.current) {
    display: block;
  }
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true] {
    padding: 15px 0 11px 0;
  }
}
.collapsible-nav-list li[aria-selected=true],
.collapsible-nav-list li.current {
  order: 0;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true],
  .collapsible-nav-list li.current {
    border-bottom: 4px solid rgba(0, 0, 0, 1);
    order: 1;
  }
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
  color: rgba(40, 38, 35, 1);
}

.collapsible-nav[aria-expanded=true] li:not([aria-selected=true]),
.collapsible-nav[aria-expanded=true] li:not(.current) {
  display: block;
}

/* Sidebar navigation that collapses on mobile */
.collapsible-sidebar {
  flex: 1;
  max-height: 45px;
  overflow: hidden;
  padding: 5px 0;
  position: relative;
}

@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 0;
  }
}

.collapsible-sidebar[aria-expanded="true"] {
  max-height: none;
}

.collapsible-sidebar[aria-expanded="true"] .collapsible-sidebar-title::after {
  content: "\2715";
}

@media (min-width: 1024px) {
  .collapsible-sidebar[aria-expanded="true"] .collapsible-sidebar-title::after {
    display: none;
  }
}

.collapsible-sidebar-title {
  margin-top: 0;
}

.collapsible-sidebar-title::after {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  content: "\25BE";
  position: absolute;
  right: 10px;
}

@media (min-width: 1024px) {
  .collapsible-sidebar-title::after {
    display: none;
  }
}

[dir="rtl"] .collapsible-sidebar-title::after {
  left: 10px;
  right: auto;
}


/***** My activities *****/
.my-activities-nav {
  background-color: #fff546;
  margin-bottom: 20px;
}
.my-activities-sub-nav {
  margin-bottom: 30px;
}
.my-activities-table .striped-list-title { /* My activities tables */
  display: block;
  margin-bottom: 10px;
  max-width: 350px;
  white-space: normal;
}
@media (min-width: 1024px) {
  .my-activities-table .striped-list-title {
    margin-bottom: 0;
    max-width: 500px;
    min-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.my-activities-table thead {
  display: none;
}
@media (min-width: 768px) {
  .my-activities-table thead {
    display: table-header-group;
  }
}
.my-activities-table th:first-child,
.my-activities-table td:first-child {
  padding-left: 0;
}
@media (min-width: 1024px) {
  .my-activities-table th:first-child,
  .my-activities-table td:first-child {
    width: 500px;
  }
}
.my-activities-table th:last-child,
.my-activities-table td:last-child {
  padding-right: 0;
}
.my-activities-table td:not(:first-child) {
  display: none;
}
@media (min-width: 768px) {
  .my-activities-table td:not(:first-child) {
    display: table-cell;
  }
}

/* Requests table */
.requests-search {
  width: 100%;
}
.requests-table-toolbar {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .requests-table-toolbar {
    flex-direction: row;
  }
}
.requests-table-toolbar .search {
  flex: 1;
  width: 100%;
}
.requests-table-toolbar .request-table-filter {
  width: 100%;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-table-filter {
    width: auto;
  }
}
.requests-table-toolbar .request-filter {
  display: block;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-filter {
    margin: 0 0 0 30px;
  }
  [dir=rtl] .requests-table-toolbar .request-filter {
    margin: 0 30px 0 0;
  }
}
.requests-table-toolbar .request-filter-label {
  font-size: 13px;
  margin-top: 30px;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-filter-label {
    margin-top: 0;
  }
}
.requests-table-toolbar select {
  max-height: 40px;
  margin-bottom: 30px;
  width: 100%;
}
@media (min-width: 768px) {
  .requests-table-toolbar select {
    margin-bottom: 0;
    max-width: 300px;
    width: auto;
  }
}
@media (min-width: 768px) {
  .requests-table-toolbar .organization-subscribe {
    margin-left: 10px;
  }
  [dir=rtl] .requests-table-toolbar .organization-subscribe {
    margin: 0 10px 0 0;
  }
}
.requests-table-toolbar .organization-subscribe button {
  line-height: 40px;
  max-height: 40px;
  padding: 0 20px;
}
.requests-table-toolbar + .requests-search-info {
  margin-top: 15px;
}
.requests-table-toolbar + .requests-search-info.meta-data::after {
  content: "";
  margin: 0;
}
.requests-table-toolbar + .requests-search-info + .requests {
  margin-top: 20px;
}
.requests-table-toolbar + .requests {
  margin-top: 40px;
}
.requests .requests-table-meta {
  display: block;
}
@media (min-width: 768px) {
  .requests .requests-table-meta {
    display: none;
  }
}
.requests .requests-table thead {
  display: none;
}
@media (min-width: 768px) {
  .requests .requests-table thead {
    display: table-header-group;
  }
}
.requests .requests-table-info {
  display: block;
}
@media (min-width: 768px) {
  .requests .requests-table-info {
    display: table-cell;
    vertical-align: middle;
    width: auto;
  }
}
.requests .requests-table .requests-link {
  position: relative;
}
.requests .requests-table .requests-sort-symbol {
  position: absolute;
  left: calc(100% + 3px);
  bottom: 0;
  font-size: 10px;
}

/* Following table */
@media (min-width: 768px) {
  .subscriptions-subscribe button {
    width: auto;
  }
}
.subscriptions-table td:last-child {
  display: block;
}
@media (min-width: 768px) {
  .subscriptions-table td:last-child {
    display: table-cell;
  }
}
.subscriptions-table td:first-child {
  display: flex;
  align-items: center;
}
.subscriptions-table .user-avatar {
  margin-right: 10px;
}
.subscriptions .striped-list-title {
  display: inline-block;
  vertical-align: middle;
}

/* Contributions table */
.contributions-table td:last-child {
  color: #5e5a53;
  font-size: 13px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: #5e5a53;
}

/***** Request *****/
.request-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .request-container {
    align-items: flex-start;
    flex-direction: row;
  }
}
.request-container .comment-container {
  min-width: 0;
}
.request-breadcrumbs {
  margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .request-breadcrumbs {
    margin-bottom: 60px;
  }
}
.request-main {
  flex: 1 0 auto;
  order: 1;
}
.request-main .comment-fields, .request-main .request-submit-comment {
  display: none;
}
.request-main .comment-fields.shown {
  display: block;
}
.request-main .request-submit-comment.shown {
  display: inline;
}
@media (min-width: 1024px) {
  .request-main {
    flex: 0 0 66%;
    order: 0;
    min-width: 0;
  }
}
.request-main .comment-form-controls {
  display: block;
}
.request-main .comment-ccs {
  display: block;
}
.request-main .comment-show-container {
  border-radius: 2px;
  border: 1px solid #ddd;
  color: #5e5a53;
  text-align: inherit;
  padding: 8px 25px;
  width: 100%;
}
.request-main .comment-show-container.hidden {
  display: none;
}
.request-main .form-field.comment-ccs > ul {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.request-main .form-field.comment-ccs > ul[data-hc-focus=true] {
  border: 1px solid rgba(0, 0, 0, 1);
}
.request-main .form-field.comment-ccs > input[type=text] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.request-main .comment-ccs + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}
.request-main .comment-ccs + textarea:focus {
  border-top: 1px solid rgba(0, 0, 0, 1);
}
.request-main input#mark_as_solved {
  display: none;
}
.request-title {
  width: 100%;
}
@media (min-width: 1024px) {
  .request-title {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    max-width: 66%;
    padding-bottom: 20px;
  }
}
.request-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  order: 0;
}
@media (min-width: 1024px) {
  .request-sidebar {
    background-color: #fff550;
    border: 0;
    font-size: 13px;
    flex: 0 0 auto;
    padding: 0 20px;
    width: 30%;
  }
}
.request-sidebar h2 {
  font-size: 15px;
  font-weight: 600;
  position: relative;
}
@media (min-width: 1024px) {
  .request-sidebar h2 {
    display: none;
  }
}
.request-details {
  border-bottom: 1px solid #ddd;
  font-size: 0;
  margin: 0;
  padding-bottom: 20px;
}
.request-details:last-child {
  border: 0;
}
.request-details dt, .request-details dd {
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  margin: 20px 0 0 0;
}
.request-details dd {
  padding: 0 10px;
  width: 60%;
}
.request-details dd::after {
  content: "\a";
  white-space: pre;
}
.request-details dt {
  color: #5e5a53;
  width: 40%;
}
.request-details .request-collaborators {
  display: inline-block;
}
.request-attachments dt, .request-attachments dd {
  width: 100%;
}
.request-attachments dd {
  margin: 10px 0 0 0;
}
.request-form textarea {
  min-height: 120px;
}
.request-follow-up {
  padding-top: 20px;
}

/***** Pagination *****/
.pagination {
  margin: 20px 0;
  text-align: center;
}
.pagination-next, .pagination-prev, .pagination-first, .pagination-last {
  display: inline-block;
}
.pagination-first-link, .pagination-last-link {
  padding: 0 10px;
}
.pagination-first-text, .pagination-last-text {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.pagination-next-link {
  padding-right: 10px;
}
.pagination-next-text {
  margin-right: 10px;
}
[dir=rtl] .pagination-next-link {
  padding-left: 10px;
}
[dir=rtl] .pagination-next-text {
  margin-left: 10px;
}
.pagination-prev-link {
  padding-left: 10px;
}
.pagination-prev-text {
  margin-left: 10px;
}
[dir=rtl] .pagination-prev-link {
  padding-right: 10px;
}
[dir=rtl] .pagination-prev-text {
  margin-right: 10px;
}

/***** Metadata *****/
.meta-group {
  display: block;
}

.meta-group-opposite {
  float: right;
}

[dir=rtl] .meta-group-opposite {
  float: left;
}

.meta-group * {
  display: inline;
}

.meta-data {
  color: #5e5a53;
  font-size: 13px;
  font-style: italic;
}

.meta-data-title {
  color: #5e5a53;
  font-size: 13px;
}
.meta-data:not(:last-child)::after {
  content: "·";
  margin: 0 5px;
}

/* User Profiles */
.profile-header {
  padding: 30px 0;
  background-color: #fff550;
}

.profile-header .container {
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .profile-header .container {
    flex-wrap: nowrap;
  }
}

.profile-header .profile-info {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}

.profile-avatar {
  position: relative;
  line-height: 0;
  align-self: center;
  margin-right: 10px;
}
[dir=rtl] .profile-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.profile-avatar .user-avatar {
  width: 80px;
  height: 80px;
}

.profile-avatar .icon-agent {
  bottom: 0;
  right: 0;
}

.profile-header .basic-info {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}
.profile-header .basic-info .name {
  margin: 0;
  line-height: 25px;
  vertical-align: middle;
  display: inline;
}

.profile-header .options {
  display: flex;
  flex-basis: 100%;
  margin-top: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .profile-header .options {
    flex-wrap: nowrap;
    flex-basis: auto;
    margin-top: 0;
    margin-left: 10px;
  }
  [dir=rtl] .profile-header .options {
    margin-left: 0;
    margin-right: 10px;
  }
  .profile-header .options > :not(:last-child) {
    margin-bottom: 0;
    margin-right: 10px;
  }
  [dir=rtl] .profile-header .options > :not(:last-child) {
    margin-left: 10px;
    margin-right: 0;
  }
}

.user-profile-actions {
  width: 100%;
  margin-bottom: 15px;
}

.profile-header .description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  margin: 15px 0;
  flex-basis: 100%;
}

.profile-stats {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.profile-stats .stat {
  display: flex;
  margin-bottom: 10px;
}

.profile-stats .stat-label {
  color: #5e5a53;
  flex: 0 0 100px;
  margin-right: 10px;
}
[dir=rtl] .profile-stats .stat-label {
  margin-left: 10px;
  margin-right: 0;
}

.profile-stats-activity {
  border-top: solid 1px #ddd;
  margin-top: 15px;
}
@media (min-width: 768px) {
  .profile-stats-activity {
    border-top: 0;
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat {
    flex-direction: column;
  }
}

.profile-stats-activity .stat:first-child {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .profile-stats-activity .stat:first-child {
    margin-top: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat:not(:last-child) {
    margin-right: 40px;
  }
  [dir=rtl] .profile-stats-activity .stat:not(:last-child) {
    margin-left: 40px;
    margin-right: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat-label {
    flex: 0 1 auto;
  }
}

.profile-stats-counters {
  border-bottom: solid 1px #ddd;
}
@media (min-width: 768px) {
  .profile-stats-counters {
    flex: 0 0 200px;
    border-bottom: 0;
    margin-left: 40px;
  }
  [dir=rtl] .profile-stats-counters {
    margin-left: 0;
    margin-right: 40px;
  }
}
@media (min-width: 1024px) {
  .profile-stats-counters {
    flex: 0 0 270px;
    margin-left: 60px;
  }
  [dir=rtl] .profile-stats-counters {
    margin-right: 60px;
    margin-left: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat {
    flex-direction: column;
  }
}
@media (min-width: 1024px) {
  .profile-stats-counters .stat {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat:not(:last-child) {
    margin-bottom: 15px;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat-label {
    flex: 0 1 auto;
  }
}
@media (min-width: 1024px) {
  .profile-stats-counters .stat-label {
    flex: 0 0 100px;
  }
}

.profile-private-badge {
  flex-basis: 100%;
  border: solid 1px rgba(0, 0, 0, 1);
  border-radius: 4px;
  color: rgba(0, 0, 0, 1);
  padding: 5px 20px;
  font-size: 12px;
  text-align: center;
}
.profile-private-badge .profile-private-icon {
  margin-left: 5px;
  line-height: 15px;
}
@media (min-width: 768px) {
  .profile-private-badge {
    flex-basis: auto;
  }
}

.profile-nav {
  background-color: #fff546;
  margin-bottom: 37px;
}

.profile-section {
  width: 100%;
}
@media (min-width: 1024px) {
  .profile-section {
    width: calc(100% - 330px);
  }
}

.profile-section-header {
  display: flex;
  flex-wrap: wrap;
}

.profile-section-title {
  flex-basis: 100%;
  margin-bottom: 0;
}

.profile-section-description {
  flex-basis: 100%;
  padding: 10px 0;
  color: #5e5a53;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .profile-section-description {
    flex: 1 0 50%;
    padding-bottom: 0;
  }
}

.profile-section-sorter {
  flex-basis: 100%;
  border-top: solid 1px #eee;
  font-size: 13px;
}
.profile-section-sorter .dropdown-toggle {
  padding: 10px 0;
  width: 100%;
}
.profile-section-sorter .dropdown-toggle::after {
  position: absolute;
  right: 0;
}
[dir=rtl] .profile-section-sorter .dropdown-toggle::after {
  left: 0;
  right: initial;
}
@media (min-width: 768px) {
  .profile-section-sorter .dropdown-toggle::after {
    position: relative;
  }
}
@media (min-width: 768px) {
  .profile-section-sorter {
    flex: 0 1 auto;
    padding-top: 0;
    border-top: 0;
    margin-left: 20px;
  }
  [dir=rtl] .profile-section-sorter {
    margin-left: 0;
    margin-right: 20px;
  }
}

.profile-badges-items {
  margin-top: 25px;
}
.profile-badges-item {
  border-top: 1px solid #ddd;
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: flex-start;
  padding: 27px 12px;
}
.profile-badges-item > div {
  padding-right: 12px;
  padding-left: 12px;
}
.profile-badges-item-image {
  height: 40px;
  width: 40px;
  margin-right: 12px;
}
.profile-badges-item-image img {
  max-height: 40px;
}
[dir=rtl] .profile-badges-item-image {
  margin-left: 12px;
  margin-right: 0;
}
.profile-badges-item-title, .profile-badges-item-metadata-title {
  font-size: 15px;
  margin-bottom: 10px;
}
.profile-badges-item-title {
  font-weight: 600;
}
.profile-badges-item-description, .profile-badges-item-metadata-description {
  color: #5e5a53;
  font-size: 13px;
  margin: 0;
}
.profile-badges-item-metadata {
  margin-left: auto;
  text-align: right;
}
[dir=rtl] .profile-badges-item-metadata {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.profile-contribution {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  padding: 20px 0;
  position: relative;
}

.profile-contribution-header {
  margin-bottom: 5px;
}

.profile-contribution-title {
  margin: 0 0 5px 0;
  display: inline;
  line-height: 21px;
  font-size: 15px;
  vertical-align: middle;
}

.profile-contribution-body {
  margin: 10px 0;
}

.profile-contribution-list > .profile-contribution {
  border-top: 1px solid #eee;
}
@media (min-width: 768px) {
  .profile-contribution-list > .profile-contribution {
    padding-left: 30px;
  }
  [dir=rtl] .profile-contribution-list > .profile-contribution {
    padding-right: 30px;
    padding-left: 0;
  }
}

.profile-contribution-list > .profile-contribution:last-child {
  border-bottom: 1px solid #eee;
}

.profile-contribution-icon {
  left: 0;
  position: absolute;
  color: #ccc;
  line-height: 25px;
}
[dir=rtl] .profile-contribution-icon {
  right: 0;
}
.profile-contribution-icon svg {
  vertical-align: middle;
}

.profile-contribution-list .profile-contribution-header {
  margin-left: 30px;
}
[dir=rtl] .profile-contribution-list .profile-contribution-header {
  padding-right: 30px;
  padding-left: 0;
}
@media (min-width: 768px) {
  .profile-contribution-list .profile-contribution-header {
    margin-left: 0;
  }
  [dir=rtl] .profile-contribution-list .profile-contribution-header {
    padding-right: 0;
  }
}

.profile-comments .profile-contribution-breadcrumbs {
  margin-left: 30px;
}
[dir=rtl] .profile-comments .profile-contribution-breadcrumbs {
  padding-right: 30px;
  padding-left: 0;
}
@media (min-width: 768px) {
  .profile-comments .profile-contribution-breadcrumbs {
    margin-left: 0;
  }
  [dir=rtl] .profile-comments .profile-contribution-breadcrumbs {
    padding-right: 0;
  }
}

.profile-section .no-activity,
.profile-section .private-activity {
  display: block;
  margin-top: 40px;
  color: #999;
}

.private-activity-icon {
  margin-right: 10px;
}
[dir=rtl] .private-activity-icon {
  margin-right: 0;
  margin-left: 10px;
}

.profile-activity-list {
  margin-top: 25px;
}

.profile-activity {
  position: relative;
  padding-bottom: 30px;
}
@media (min-width: 768px) {
  .profile-activity {
    padding-left: 20px;
  }
  [dir=rtl] .profile-activity {
    padding-right: 20px;
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .profile-activity:not(:last-child) {
    border-left: 1px solid #ddd;
  }
  [dir=rtl] .profile-activity:not(:last-child) {
    border-left: 0;
    border-right: 1px solid #ddd;
  }
}

.profile-activity-header {
  display: flex;
  align-items: center;
  margin-left: 35px;
}
[dir=rtl] .profile-activity-header {
  margin-left: 0;
  margin-right: 35px;
}
@media (min-width: 768px) {
  .profile-activity-header {
    margin-left: 0;
  }
  [dir=rtl] .profile-activity-header {
    margin-right: 0;
  }
}

.profile-activity-header .user-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  min-width: 40px;
  align-self: flex-start;
}
[dir=rtl] .profile-activity-header .user-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.profile-activity-description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  margin: 0;
  min-width: 0;
  width: 100%;
}

.profile-activity-description span:first-child {
  font-weight: 600;
  display: inline;
}

.profile-activity-contribution {
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background-color: #fff550;
}
@media (min-width: 768px) {
  .profile-activity-contribution {
    margin-top: 0;
    margin-left: 50px;
  }
  [dir=rtl] .profile-activity-contribution {
    margin-left: 0;
    margin-right: 50px;
  }
}

.profile-activity-icon {
  position: absolute;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-color: rgba(255, 246, 95, 1);
  background-position: 50% 50%;
  text-align: center;
  color: #ccc;
}
[dir=rtl] .profile-activity-icon {
  right: 0;
}
@media (min-width: 768px) {
  .profile-activity-icon {
    left: -14px;
  }
  [dir=rtl] .profile-activity-icon {
    right: -14px;
  }
}

.profile-activity-icon svg {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  margin: auto;
}

/***** Search results *****/
.search-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .search-results {
    flex-direction: row;
  }
}
.search-results-column {
  flex: 1;
}
@media (min-width: 1024px) {
  .search-results-column {
    flex: 0 0 75%;
  }
}
.search-results-sidebar {
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .search-results-sidebar {
    border: 0;
    flex: 0 0 20%;
    height: auto;
  }
}
.search-results-sidebar .sidenav-item {
  border-radius: 4px;
  padding: 10px 36px;
  margin-bottom: 4px;
  color: rgba(40, 38, 35, 1);
}
.search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current {
  text-decoration: none;
}
.search-results-sidebar .sidenav-subitem {
  unicode-bidi: embed;
}
.search-results-sidebar .sidenav-tag {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-grow: 0;
}
.search-results-sidebar .sidenav-tag .content-tag {
  background: #E9EBED;
  border-radius: 4px;
  padding: 4px 12px;
  text-decoration: none;
}
.search-results-sidebar .sidenav-tag .content-tag .label {
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  letter-spacing: -0.000427656px;
  color: #49545C;
  flex-grow: 0;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .sidenav-tag .content-tag .close-icon {
  color: #555555;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .collapsible-sidebar {
  margin-bottom: 30px;
}
.search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
  display: none;
}
@media (min-width: 1024px) {
  .search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
    display: block;
  }
}
.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n+6) {
  display: none;
}
.search-results-sidebar .multibrand-filter-list .doc-count {
  color: #666;
}
 
.doc-count: hover{
  color: white;
}

.search-results-sidebar .see-all-filters {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  padding: 10px;
  color: rgba(0, 0, 0, 1);
}
.search-results-sidebar .see-all-filters[aria-hidden=true] {
  display: none;
}
.search-results-sidebar .see-all-filters:hover {
  text-decoration: underline;
}
.search-results-sidebar .see-all-filters::after {
  content: " ⌄";
  font-weight: bold;
}
.search-results-subheading {
  font-size: 18px;
  font-weight: 600;
}
.search-results-list {
  margin-bottom: 25px;
}

search-results-list: hover{
  background-color: red;
}

.search-results-list > li {
  padding: 20px 0;
}
.search-results-list > li:first-child {
  border-top: 1px solid #ddd;
}
.search-results .no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rem;
}
.search-results .no-results .headline {
  color: #2F3941;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.45px;
  /* Now the page <h1> (was a <div>) so the no-results page has a non-empty
     heading; zero the UA bottom margin to keep the block spacing unchanged. */
  margin: 0;
}
.search-results .no-results .action-prompt {
  color: #68737D;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.154px;
}
.search-results .no-results .action-prompt a {
  color: rgba(0, 0, 0, 1);
}
.search-results .no-results .action-prompt a:visited {
  color: rgba(0, 0, 0, 1);
}

.search-result-title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-result-title {
  font-size: 16px;
  margin-bottom: 0;
}
.search-result-votes, .search-result-meta-count {
  color: #5e5a53;
  font-size: 13px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: rgba(0, 0, 0, 1);
  vertical-align: middle;
  width: 13px;
  height: 13px;
}
[dir=ltr] .search-result-votes, [dir=ltr] .search-result-meta-count {
  margin-left: 20px;
}
[dir=rtl] .search-result-votes, [dir=rtl] .search-result-meta-count {
  margin-right: 20px;
}
.search-result-meta-container {
  color: #666;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .search-result-meta-container {
    flex-direction: row;
    align-items: center;
  }
}
@media (min-width: 1024px) {
  .search-result-meta-container nav {
    flex: 1;
  }
}
@media (min-width: 1024px) {
  [dir=ltr] .search-result-meta-container .meta-data {
    margin-left: 20px;
  }
}
@media (min-width: 1024px) {
  [dir=rtl] .search-result-meta-container .meta-data {
    margin-right: 20px;
  }
}
.search-result-meta-container .meta-data::after {
  content: none;
}
.search-result-breadcrumbs {
  margin: 0;
}
.search-result-description {
  margin-top: 10px;
  margin-bottom: 0;
  word-break: break-word;
}

/* By default use bold instead of italic to highlight */
.search-results-description em {
  font-style: normal;
  font-weight: bold;
}

/* Add a yellow background for Chinese */
html[lang|=zh] .search-results-description em {
  font-style: normal;
  background: yellow;
}

/***** Notifications *****/
.notification {
  border: 1px solid;
  display: table;
  font-family: sans-serif;
  font-size: 12px;
  padding: 13px 15px;
  transition: height 0.2s;
  width: 100%;
  color: #555;
}

.notification a {
  color: #158ec2;
}

.notification-inner {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 980px;
}

.notification-icon, .notification-inline.notification-error::before, .notification-text, .notification-dismiss {
  display: table-cell;
  vertical-align: middle;
}

.notification-text {
  padding: 0 15px;
  width: 100%;
}

.notification + .notification {
  margin-bottom: -1px;
  position: relative;
  top: -1px;
}

/* Error */
.notification-error {
  background: #ffeded;
  border-color: #f7cbcb;
}

.notification-error .notification-icon::before, .notification-error .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23555555'/%3E%3C/svg%3E");
}

/* Notice */
.notification-notice {
  background: #dbf3ff;
  border-color: #b5e0f5;
}

.notification-notice .notification-icon::before, .notification-notice .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l2 2L9 4.5'/%3E%3Ccircle cx='6' cy='6' r='5.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Alert / Lock */
.notification-alert {
  color: #ad5e18;
  background: #fff8ed;
  border-color: #fcdba9;
}

.notification-alert .notification-icon::before, .notification-alert .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ad5e18' stroke-linecap='round' d='M5.06 1.27l-4.5 8.5c-.18.33.06.73.44.73h9c.38 0 .62-.4.44-.73l-4.5-8.5a.494.494 0 00-.88 0zM5.5 4v2'/%3E%3Ccircle cx='5.5' cy='8' r='.8' fill='%23ad5e18'/%3E%3C/svg%3E");
}

.notification-icon::before, .notification-inline.notification-error::before {
  background-size: cover;
  content: "";
  display: inline-block;
  height: 14px;
  width: 14px;
  vertical-align: middle;
}

/* Dismiss button */
.notification-dismiss, a.notification-dismiss {
  color: #555;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 100ms ease;
  text-decoration: none !important;
}

.notification-dismiss:hover {
  opacity: 1;
}

/* Inline notifications */
.notification-inline {
  border-radius: 4px;
  line-height: 14px;
  margin-top: 5px;
  padding: 5px;
  position: relative;
  text-align: left;
  vertical-align: middle;
}
[dir=rtl] .notification-inline {
  text-align: right;
}
.notification-inline[aria-hidden=true] {
  display: none;
}
.notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23e35b66'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23e35b66'/%3E%3C/svg%3E");
  margin: -2px 5px 0 0;
}
[dir=rtl] .notification-inline.notification-error::before {
  margin: 0 0 0 5px;
}
.notification-inline.notification-error {
  background-color: #fff0f1;
  border: 1px solid #e35b66;
  color: #cc3340;
}
.notification-inline.notification-large {
  padding: 13px 15px;
  margin-bottom: 25px;
}

.notification-left-aligned {
  text-align: left;
  padding-left: 0;
}

html[dir=rtl] .notification-left-aligned {
  text-align: right;
  padding-left: auto;
  padding-right: 0;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  cursor: pointer;
  background: none;
  border: 0;
  display: inline-block;
  padding: 0;
  text-align: initial;
  vertical-align: middle;
}
.dropdown-toggle:hover {
  text-decoration: none;
}
.dropdown-toggle > * {
  display: inline-block;
}

.dropdown-menu {
  background: #fff;
  border: 1px solid #87929D;
  border-radius: 3px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  display: none;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  left: 0;
  margin-top: 1px;
  min-width: 170px;
  padding: 10px 0;
  position: absolute;
  text-align: left;
  z-index: 1000;
}
[dir=rtl] .dropdown-menu {
  text-align: right;
}
.dropdown-menu[aria-expanded=true] {
  display: block;
}
.dropdown-menu [role=separator] {
  border-bottom: 1px solid #e9ebed;
  margin: 4px 0;
}
.dropdown-menu [role=menuitem] {
  color: #333;
  cursor: pointer;
  display: block;
  padding: 7px 40px 7px 20px;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  text-align: start;
  line-height: inherit;
  width: 100%;
}
[dir=rtl] .dropdown-menu [role=menuitem] {
  padding: 7px 20px 7px 40px;
}
.dropdown-menu [role=menuitem]:hover, .dropdown-menu [role=menuitem]:focus {
  background: #f3f3f3;
  text-decoration: none;
  color: #333;
}
.dropdown-menu [role=menuitem][aria-selected=true] {
  cursor: default;
}
.dropdown-menu [role=menuitem][aria-selected=true]::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 7l3 3 7-7'%3E%3C/path%3E%3C/svg%3E");
  display: inline-block;
  height: 12px;
  margin-left: 10px;
  width: 12px;
}
[dir=rtl] .dropdown-menu [role=menuitem][aria-selected=true]::after {
  margin-left: 0;
  margin-right: 10px;
  float: left;
}
.dropdown-menu [role=menuitem][hidden], .dropdown-menu [role=menuitem][aria-hidden=true] {
  display: none !important;
}

.dropdown-menu-end {
  left: auto;
  right: 0;
}

.dropdown-menu-top {
  bottom: 100%;
  margin-bottom: 1px;
}

[dir=rtl] .dropdown-menu {
  left: auto;
  right: 0;
  text-align: right;
}
[dir=rtl] .dropdown-menu-end {
  left: 0;
  right: auto;
}

.dropdown-chevron-icon {
  vertical-align: middle;
}

.content-tags > p {
  color: #68737D;
  margin-top: 32px;
  margin-bottom: 4px;
}
.content-tags-add-hint {
  color: #68737D;
  font-size: 14px;
}

.content-tag-list {
  display: flex;
  flex-wrap: wrap;
  word-break: break-word;
}
.content-tag-list li {
  border-right: 1px solid #C2C8CC;
  margin-bottom: 4px;
}
[dir=ltr] .content-tag-list li {
  padding-right: 8px;
  margin-right: 8px;
}
[dir=rtl] .content-tag-list li {
  padding-left: 8px;
  margin-left: 8px;
}
.content-tag-list li:last-child {
  border: none;
}

/***** WYSIWYG Editor *****/
#hc-wysiwyg {
  border: 1px solid #87929D;
}

/***** Upload Dropzone *****/
.upload-dropzone {
  border: 1px solid #87929D;
}

/***** Custom pullouts *****/

p.tip {
  display: block;
  padding: 12px 18px 12px 18px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  position: relative;
  background-color: rgba(255, 246, 95, 1);
  vertical-align: middle;
  text-indent: 0;
  color: rgba(40, 38, 35, 1);
}

p.note {
  display: block;
  padding: 12px 18px 12px 18px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  position: relative;
  background-color: rgba(250, 245, 241, 1);
  vertical-align: middle;
  text-indent: 0;
  color: rgba(40, 38, 35, 1);
}

p.prerequisite {
  display: block;
  padding: 12px 18px 12px 18px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  position: relative;
  background-color: rgba(255, 250, 164, 1);
  vertical-align: middle;
  text-indent: 0;
  color: rgba(40, 38, 35, 1) !important;
}

p.prerequisite li {
  color: rgba(40, 38, 35, 1);
}

p.warning {
  display: block;
  padding: 12px 18px 12px 18px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  position: relative;
  background-color: rgba(245, 86, 86, 1);
  vertical-align: middle;
  text-indent: 0;
  color: rgba(40, 38, 35, 1) !important;
}


p.prerequisite li {
  color: rgba(40, 38, 35, 1) !important;
}

.warning a, .warning a:focus, .warning a:hover, .warning a:visited, .warning a:link {
    color: rgba(40, 38, 35, 1) !important;
}
.prerequisite a, .prerequisite a:focus, .prerequisite a:hover, .prerequisite a:visited, .prerequisite a:link {
    color: rgba(40, 38, 35, 1) !important;
}


p.comingsoon {
  display: block;
  padding: 12px 18px 12px 18px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  position: relative;
  background-color: rgba(255, 217, 13, 1);
  vertical-align: middle;
  text-indent: 0;
  color: rgba(40, 38, 35, 1);
}

p.tldr {
  display: block;
  padding: 12px 18px 12px 18px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  position: relative;
  background-color: rgba(226, 221, 214, 1);
  vertical-align: middle;
  text-indent: 0;
  color: rgba(40, 38, 35, 1);
}

p.info, p.performtasklocation {
  display: block;
  padding: 12px 18px 12px 18px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  position: relative;
  background-color: rgba(255, 246, 95, 1);
  vertical-align: middle;
  color: rgba(40, 38, 35, 1);
}

p.heading {
  font-size: 22px;
  font-weight: 520;
}

p.heading2 {
  font-size: 18px;
  font-weight: 300;
}

/***** Back to top button *****/

#backToTopButton {
  position: fixed;
  right: 20px;
  /* Raised so it clears the fixed Launchpad footer bar (taller on mobile when its text wraps). Compact 46px on mobile. */
  bottom: 72px;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 1);
  color: rgba(255, 255, 255, 1);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  /* Hidden by default; JS adds .is-visible past the scroll threshold to fade and rise it into view. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.9);
  -webkit-transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

#backToTopButton.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

#backToTopButton svg {
  width: 20px;
  height: 20px;
}

@media (min-width: 768px) {
  #backToTopButton {
    right: 32px;
    bottom: 62px;
    width: 52px;
    height: 52px;
  }
  #backToTopButton svg {
    width: 22px;
    height: 22px;
  }
}

/* Two rules, not one comma-joined selector list. A list containing a single
   selector the engine cannot parse is invalid in its entirety (Selectors 3,
   "Groups of selectors" -- forgiving parsing exists only inside :is()/:where()),
   so pairing these cost pre-2021 Safari and legacy Edge the hover emphasis as
   well as the focus emphasis. Split, an unsupported pseudo-class can only cost
   its own rule. The declarations are deliberately duplicated. */
#backToTopButton:hover {
  /* Kept in step with the :focus-visible twin below -- see the reasoning there.
     This half briefly kept darken() after PR #49 split the selector list while
     the lighten() fix was in flight against the pre-split rule. */
  background-color: #333;
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
}

/* No plain :focus companion: nothing in this theme removes the button's UA
   focus ring, so keyboard focus stays visible on engines that drop the rule
   below. Adding :focus here would instead make a mouse click stick the lifted
   state on -- the bug documented above .product-card__link:focus-visible. */
#backToTopButton:focus-visible {
  /* Lighten, not darken. brand_color is black, so darken() resolved to #000 --
     identical to the resting fill, and the fill half of this hover/focus state
     was inert; only the lift and the shadow read. lighten() moves a dark brand
     colour visibly and still reads as a state change on a mid-tone one. 20% is
     the magnitude stock Copenhagen already uses for its brand-fill button
     hovers, so this flips the direction without inventing a new number, and it
     is a step away from the resting fill rather than a flip to a light one --
     the icon colour needs no change. */
  background-color: #333;
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
}

/***** Info Block *****/
.info-block-container {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* The fill is its own setting rather than a tint of an existing one: Zendesk
   substitutes setting names as plain text and cannot wrap one in rgba(), so a
   translucent tint of the brand colour is not available here. The block sits on
   the saturated page background, so the fill is what makes it read as a
   distinct panel — the 1px border alone did not. Text stays rgba(40, 38, 35, 1), so
   keep this value light. */
.info-block {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(0, 0, 0, 1);
  border-radius: 6px;
  background-color: rgba(255, 253, 224, 1);
}

.info-block__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 0.15rem;
  color: rgba(0, 0, 0, 1);
}

.info-block__content {
  min-width: 0;
}

.info-block__title {
  margin: 0 0 0.25rem;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  color: rgba(40, 38, 35, 1);
}

.info-block__text {
  margin: 0;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: rgba(40, 38, 35, 1);
}

/***** Home hero search: center the magnifying glass in the search box *****/
.hero-search-box {
  position: relative;
}
.hero-search-box .search-icon {
  transform: translateY(-50%);
}

/***** Hide the redundant, unstyled collapsible toggle button in the search
       filters (sections already collapse via .collapsible-sidebar-title) *****/
.search-results-sidebar .collapsible-sidebar-toggle {
  display: none;
}

/***** Home page: static product cards + quick links *****
       Hardcoded by design — see
       docs/superpowers/specs/2026-08-03-home-product-buttons-design.md.
       These cards used to copy .blocks-item's border, radius, shadow and
       hover fill so the two families read as one system. The 2026-08-19 restyle
       deliberately broke that: .blocks-item keeps its 1px brand border, 4px
       radius and hard offset plate, while .product-card takes a black-alpha
       hairline plus a 6px gold left edge, 8px radius and a soft centred shadow. The accepted
       consequence is that the front page now carries TWO shadow languages --
       soft above the home divider, hard below it -- which was judged worth it to
       make the product row read as the academy's cards. Do not "restore
       consistency" by reverting one side alone.
       Every colour comes from a settings-backed variable; the literals are the
       neutral black-alpha shadows and the black-alpha hairline border, which is
       the established pattern here. *****/
.product-links {
  margin-bottom: 10px;
}

/* A filled bar, not a rule, spanning the same width as the cards above and
   below. Note the theme's own .container-divider is NOT usable here: despite
   the name it is a sticky white spacer and draws nothing.

   This used to be rgba(0, 0, 0, 1) held back by opacity: 0.4, which composited to
   a mid grey at 2.85:1 against the page. It is now the academy's accent at full
   strength -- 1.63:1. That is a real loss of separation, accepted knowingly
   when the gold bar was chosen over a warm-grey one; the whitespace above and
   below is doing most of the work. Do not reintroduce opacity here: the colour
   is used at full strength on purpose, and an alpha of a setting cannot be
   expressed at all (see CLAUDE.md). */
.home-divider {
  /* 56px below, paired with 56px above from .quick-links -- the two are a set,
     so change them together. */
  margin: 0 0 56px;
  border: 0;
  /* normalize sets `hr { height: 0 }` further up this file, so height MUST be
     stated explicitly -- an hr with only a background-color paints nothing. */
  height: 10px;
  /* 5px, not the academy's 6px. On a 10px-high bar the top-left and bottom-left
     radii sum to 12px, which exceeds the height, so CSS scales every corner by
     10/12 and clamps them to 5px anyway. Writing 6px would render identically
     and describe something that does not happen. The ends are semicircular. */
  border-radius: 5px;
  background-color: rgba(239, 199, 16, 1);
  opacity: 1;
}

/* --- Row 1: five vertical product cards (six below 1024px, where the Elucidat pair splits into two cards) --- */
.product-cards {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

/* The academy's announcement card: a pale fill, an accent edge, a soft shadow,
   modest corners. Read from academy.thelpacademy.com on 2026-08-19 -- these are
   that page's own values, not an approximation of a screenshot.

   The hairline is OURS, and it is deliberate. The academy's cards carry no
   border because they sit on #EFEFEF; ours sit on white, where the fill is
   1.08:1 against the page and the soft shadow peaks at 1.25:1. Without an
   outline the only remaining chrome would be the gold edge at 1.52:1 against
   the fill -- so in greyscale, in print, or at low vision the row would be text
   floating on white. rgba(0, 0, 0, 0.45) composites over the card's OWN fill
   (background-clip defaults to border-box) to rgb(140, 138, 90): 3.56:1 against
   the white page, 3.30:1 against the fill, clearing 1.4.11's 3:1 on both.

   It is a neutral literal rather than a setting because Zendesk substitutes
   settings as plain text and cannot compute an alpha of one -- a colour
   function wrapped around a setting emits invalid CSS and is dropped. See
   CLAUDE.md.

   The 6px gold edge is a marker, not the boundary. It is rgba(239, 199, 16, 1), the
   same gold as the row 2 buttons and the divider, so all three move together
   from one control in the editor. */
.product-card {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid rgba(0, 0, 0, 0.45);
  border-left: 6px solid rgba(239, 199, 16, 1);
  border-radius: 8px;
  background-color: rgba(255, 250, 164, 1);
  /* Two shadows, not one. The first is a zero-width inset placeholder for the
     accent that hover widens. Shadow lists interpolate position by position,
     and if any pair disagrees on `inset` the entire list becomes discrete --
     it snaps instead of animating. Without this slot, position 1 would pair
     this rule's outer soft shadow against the inset accent in :hover, so the
     accent would jump straight to width rather than grow. At 0 0 0 0 the
     placeholder paints nothing. */
  box-shadow: inset 0 0 0 0 rgba(239, 199, 16, 1), 0 4px 10px rgba(0, 0, 0, 0.1);
  -webkit-transition: box-shadow 0.2s ease, transform 0.2s ease;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  /* Colour lives on the container, not the anchor: `a:link { color: inherit }`
     near the top of this file is (0,1,1) and outranks a class on the anchor
     itself (0,1,0), so setting it there would be discarded. Putting it here
     lets that inherit rule pick it up. One ink for the whole card -- the
     academy pairs a LIGHTER heading with a darker body, which inverts the usual
     hierarchy and is not worth copying. */
  color: rgba(40, 38, 35, 1);
}

/* The fill IS the look now, so hover widens the accent instead of repainting.
   Swapping the fill would throw away the thing the restyle is for, and the
   academy's own cards -- which are not links -- have no hover state to copy.

   The accent grows as an INSET SHADOW, not by widening border-left. The border
   version reflowed the entire row: .product-card is `flex: 1 1 0`, so its border
   width feeds its flex base size, and adding 4px re-ran flex distribution across
   every card in the row. Measured on the sandbox at up to 8px of sibling
   movement -- and animated over 200ms, because border-left-width was in the
   transition list above. A box-shadow does not participate in layout at all.
   The inset is clipped to the padding box, which begins at the border's inner
   edge, so 6px of border plus 4px of inset paint as one continuous 10px bar.

   The transparent outline is what makes that trade safe, and it is NOT
   decoration. This control deliberately has no hover fill change, so the accent
   and the shadow are its only hover feedback -- and forced-colors: active drops
   box-shadow entirely, which would leave nothing at all. A transparent outline
   is forced to a system colour in forced-colors mode and stays invisible
   everywhere else. The negative offset is not about layout -- an outline never
   affects that -- it draws the ring just inside the border box so it cannot
   bleed over the neighbouring card in this tightly packed flex row. Same idiom
   as .quick-link:hover.
   prefers-reduced-motion is separately fine: that guard only kills transitions
   and transforms, so the accent still applies, just instantly.

   No lift. The accent and the shadow already announce the hover, so the
   movement was saying the same thing twice. The press is the only motion. */
.product-card:hover {
  box-shadow: inset 4px 0 0 rgba(239, 199, 16, 1), 0 8px 18px rgba(0, 0, 0, 0.16);
  outline: 2px solid transparent;
  outline-offset: -2px;
}

/* Slides right, into the direction of travel. There is no shadow plate here to
   press into -- that is the plate families' motion -- so the press is lateral.
   Rightward because the plate press also travels down-right and the picker's
   chevron points right: one direction across the whole site. An earlier draft
   went left, into the accent, and read as recoiling from the destination. The
   accent is held at its hover width and the fill does not change, both on
   request.

   The :not() excludes the split card, which has TWO destinations and is not a
   click target -- see .product-card--split:hover below. Without it, that card's
   `transform: none` (later in the file, same specificity) would win and the
   press would collapse the shadow with no movement: a half-press on a container
   that should not press at all. */
.product-card:not(.product-card--split):active {
  -webkit-transform: translateX(4px);
  transform: translateX(4px);
  box-shadow: inset 4px 0 0 rgba(239, 199, 16, 1), 0 2px 5px rgba(0, 0, 0, 0.14);
}

.product-card__link,
.product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  /* Centred, not top-aligned. Cards are all as tall as the tallest (Create,
     which carries two buttons), so top-aligning left the shorter cards with a
     large empty gap beneath their text. Centring the block drops the text into
     the card and puts the big product name just above the midline, which is
     where it reads best. */
  justify-content: center;
  padding: 20px 20px 18px;
  border-radius: inherit;
  color: inherit;
  text-align: center;
}

/* :focus is in this list to kill an underline, not to style focus. The global
   `a:hover, a:active, a:focus { text-decoration: underline }` near the top of
   this file is (0,1,1); a mouse click focuses the anchor WITHOUT making it
   :focus-visible, so once the pointer left, that rule was the last one matching
   and the underline stayed painted until focus moved on. This list is (0,2,0)
   and outranks it.

   This does NOT belong to the :focus-visible / :focus / :focus:not() ordering
   below -- that sequence governs `outline`, and this rule sets none. The
   separate .product-card__link:focus rule that supplies the forced-colors
   outline is untouched and unaffected: disjoint properties.

   Note .product-card__link:visited was already masking the bug here once a
   destination was in history, which is why it looked intermittent. Adding plain
   :focus to a comma list is safe -- unlike :focus-visible, it cannot invalidate
   the list. */
.product-card__link:visited,
.product-card__link:hover,
.product-card__link:active,
.product-card__link:focus {
  color: inherit;
  text-decoration: none;
}

/* :focus-visible, NOT :focus. A plain :focus is satisfied by a mouse click, so
   the ring stayed painted on the card after the pointer left it -- which reads
   as a stuck "visited" state, and was reported as exactly that. :focus-visible
   is the browser's own judgement about whether a focus ring should be shown:
   keyboard and programmatic focus keep it, a click does not. The ring itself is
   unchanged, so keyboard navigation is no worse off. Applied to all four
   clickable card/button families on the site -- they shared the bug. */
.product-card__link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 1);
  text-decoration: none;
}

/* Forced-colors fallback -- the same shape as .product-picker .quick-link:focus.
   Under `forced-colors: active` (Windows High Contrast) the user agent drops
   box-shadow entirely, so the ring above -- the ONLY focus indicator this card
   has on a normal display -- vanishes and a keyboard user gets no indicator at
   all, which is a WCAG 2.4.7 failure. An outline survives forced-colors (its
   colour is forced to a system colour), so it is the fallback.

   Deliberately AFTER the :focus-visible rule, not before it: that rule sets
   outline: 0, and a rule of equal specificity written above it would be
   overwritten for keyboard focus -- precisely the case this exists to cover. On
   a normal display the outline lands under/inside the box-shadow ring in the
   same colour, so nothing changes visually there.

   :focus-visible always gets its OWN rule and is never comma-joined with another
   state: an engine that does not know the pseudo-class discards the entire
   selector list it appears in. */
.product-card__link:focus {
  outline: 2px solid rgba(0, 0, 0, 1);
  outline-offset: 2px;
}

/* Modern engines only: a MOUSE-focused card drops the fallback outline, so the
   pointer behaviour is unchanged. Engines without :focus-visible cannot match
   this selector and keep the outline on any focus, which is the intent. */
.product-card__link:focus:not(:focus-visible) {
  outline: 0;
}

/* The cards carry no imagery at all. They used to show a wordmark at desktop
   and a monogram disc below 1024px; branding replaced both with a larger
   product name, which left the disc redundant at every width. */

/* --- Elucidat: one card, two destinations (desktop only) --- */

/* Hidden by default; the max-width 1023px block below swaps the pair in and
   this card out. Exactly one variant is visible at any width. */
.product-card--compact {
  display: none;
}

/* This card has TWO destinations, so it is not a single link and must not look
   like one. The hover affordance belongs to the two inner buttons.

   Both declarations are now inert guards, kept deliberately. `background-color`
   was already a no-op -- .product-card:hover stopped changing the fill -- and
   `transform: none` became one when the hover lift was removed. Neither is load
   bearing any more, but both stay in case a fill or a movement is reintroduced
   on .product-card:hover above.

   What actually keeps this card from pressing is the `:not(.product-card--split)`
   on .product-card:active, not this rule. That exclusion is the load-bearing
   part: without it the press would apply here, and this card must not press
   because the click targets are its two inner buttons.

   The shadow deepening and the accent widening from .product-card:hover both
   still apply and are intentionally retained -- the card should answer the
   pointer without reading as a single click target. */
.product-card--split:hover {
  background-color: rgba(255, 250, 164, 1);
  -webkit-transform: none;
  transform: none;
}

/* The academy's .button-link: a filled warm-dark button with a bold white
   label. Geometry can sit on the bare class -- nothing competes for it. */
.product-card__choice {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  margin-top: 8px;
  padding: 10px 16px;
  border: 0;
  border-radius: 6px;
  background-color: rgba(71, 68, 59, 1);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  -webkit-transition: background-color 0.2s ease, color 0.2s ease;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* COLOUR needs two classes. `a:link { color: inherit }` near the top of this
   file is (0,1,1) and outranks a single class on an anchor (0,1,0), so
   `.product-card__choice { color: … }` is discarded and the label inherits the
   card's own dark ink -- dark text on a dark fill, invisible. This was found in
   a render; it is not visible in source review. `a:visited { color: inherit }`
   is the same specificity, but the two-class selector below matches
   unconditionally and so already covers the visited state -- the :visited half
   is belt-and-braces, not load-bearing. .product-card__body is on the split
   card's wrapper, and that is the only card carrying these buttons. */
.product-card__body .product-card__choice,
.product-card__body .product-card__choice:visited {
  color: rgba(255, 255, 255, 1);
}

.product-card__body .product-card__choice:hover,
.product-card__body .product-card__choice:active {
  background-color: rgba(40, 38, 35, 1);
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
}

/* Two-tone, like .product-picker .quick-link:focus-visible. A single
   `0 0 0 3px rgba(0, 0, 0, 1)` band was fine when this button was near-white, but
   against the new rgba(71, 68, 59, 1) fill black-on-dark is 2.16:1 -- the ring reads
   as the button getting fatter rather than as a ring. The light inner band
   separates the two. */
.product-card__choice:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 5px rgba(0, 0, 0, 1);
  text-decoration: none;
}

/* Forced-colors fallback -- see .product-card__link:focus above for the full
   reasoning. Short version: forced-colors drops box-shadow, so the two-tone ring
   is the only indicator and it disappears; an outline survives. It sits after
   the :focus-visible rule because that rule sets outline: 0. At 2px offset the
   outline falls inside the ring's outer rgba(0, 0, 0, 1) band, so it is invisible on
   a normal display. */
.product-card__choice:focus {
  outline: 2px solid rgba(0, 0, 0, 1);
  outline-offset: 2px;
  /* Kills the global a:focus underline after a mouse click -- see
     .product-card__link above. */
  text-decoration: none;
}

/* Modern engines only: mouse focus loses the fallback outline. */
.product-card__choice:focus:not(:focus-visible) {
  outline: 0;
}

/* The name leads the card, with the caption directly beneath it now that the
   logo is gone -- a small gap is enough to separate the two lines. */
.product-card__name {
  margin-bottom: 6px;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}

/* Sits directly under the name, because that's what it explains now that the
   old wordmark is gone. */
.product-card__former {
  margin-bottom: 2px;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.3;
  opacity: 0.7;
}

.product-card__cta {
  margin-top: 6px;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  opacity: 0.85;
}

/* --- Row 2: two slim horizontal buttons, styled as the academy's gold banner.
       These used to share row 1's fill deliberately, so the rows differed only
       by border weight and corner radius. That is no longer true, and the old
       note is replaced rather than left standing: row 1 is now the pale card,
       row 2 is the accent, and the two differ by FILL above all. Row 2 also
       carries no border at all, so "differs by border weight" would be
       actively misleading to anyone tuning these. --- */
.quick-links {
  display: flex;
  gap: 16px;
  list-style: none;
  /* 56px, paired with .home-divider's 56px below it. This collapses with
     .product-links' own 10px bottom margin (the larger wins), so this value is
     the whole gap between the buttons and the divider bar. */
  margin: 0 0 56px;
  padding: 0;
}

/* The resting label colour goes HERE, not on .quick-link, because
   `a:link { color: inherit }` outranks a single class on the anchor, so a colour
   written on .quick-link itself would be discarded. This container has always
   carried the colour; the restyle only repointed it at a different setting. */
.quick-links__item {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  color: rgba(40, 38, 35, 1);
}

/* The academy's gold banner: a solid accent fill, no border, 6px corners and
   the soft shadow.

   The Release Notes picker also uses .quick-link. It states its own border,
   radius and resting shadow (see .product-picker .quick-link) so that this rule
   can differ freely. Do not "simplify" that duplication away -- `border: 0`
   here plus an inherited `border-width: 2px` there would paint no border at
   all, because width without style is inert. */
.quick-link {
  box-sizing: border-box;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 20px;
  border: 0;
  border-radius: 6px;
  background-color: rgba(239, 199, 16, 1);
  color: inherit;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  -webkit-transition: box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  transition: box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.quick-link:visited {
  color: inherit;
}

/* Inverts to the filled-button pair, matching the academy's own banner hover.
   The academy puts WHITE on the resting gold, which is 1.63:1 and fails AA --
   see the spec. Our resting label is rgba(40, 38, 35, 1) at 9.23:1, and white
   appears only on the dark hover fill, where it belongs.

   :active has its own rule directly below -- this button has no shadow plate to
   press into, so its press is lateral. */
.quick-link:hover {
  background-color: rgba(71, 68, 59, 1);
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
  /* Hover feedback that survives forced-colors. The three declarations above are
     ALL neutralised there -- the UA forces its own background and text colours
     and drops box-shadow -- so without this the button would show no hover state
     whatsoever. A transparent outline is forced to a system colour in
     forced-colors mode, so it appears exactly there and stays invisible
     everywhere else. The negative offset keeps it inside the button so it
     cannot shift the layout. */
  outline: 2px solid transparent;
  outline-offset: -2px;
}

/* Slides right, matching row 1 -- every soft-shadow button in the theme moves
   the same way. Chosen over a 1px downward sink, which read fine alone but would
   have been a third motion vocabulary alongside the slide and the plate press.

   The colours are restated rather than shared with :hover, because on keyboard
   activation :active fires WITHOUT :hover and would otherwise flash the resting
   gold mid-press.

   This rule MUST stay above .quick-link:focus-visible. Both are (0,2,0), and
   :focus-visible supplies the keyboard focus ring AS a box-shadow -- which this
   rule also sets. Source order is the only thing keeping the ring painted during
   a keyboard activation. Do not reorder them.

   No transparent outline here, unlike :hover. During a mouse press the anchor is
   also :focus and not :focus-visible, so .quick-link:focus:not(:focus-visible)
   at (0,3,0) sets outline: 0 and would win -- the declaration would never paint.

   The Release Notes picker overrides this with its own plate press at (0,3,0):
   .product-picker .quick-link:active. */
.quick-link:active {
  background-color: rgba(71, 68, 59, 1);
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
  -webkit-transform: translateX(4px);
  transform: translateX(4px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.14);
}

/* :focus-visible -- see .product-card__link above. */
.quick-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 1);
  text-decoration: none;
}

/* Forced-colors fallback -- see .product-card__link:focus above for the full
   reasoning. Short version: forced-colors drops box-shadow, so the ring above is
   the only indicator and it disappears; an outline survives. After the
   :focus-visible rule because that rule sets outline: 0. */
.quick-link:focus {
  outline: 2px solid rgba(0, 0, 0, 1);
  outline-offset: 2px;
  /* Kills the global a:focus underline after a mouse click -- see
     .product-card__link above. It cannot go in the :hover/:active list, because
     that list also changes the fill. This also covers the Release Notes picker,
     whose buttons carry the quick-link class, so the picker needs no rule of
     its own. */
  text-decoration: none;
}

/* Modern engines only: mouse focus loses the fallback outline. */
.quick-link:focus:not(:focus-visible) {
  outline: 0;
}

/* --- Below desktop: row 1 becomes a horizontal scroll-snap strip.
       A wrapping grid was rejected: two cards per row on mobile pushes the
       dynamic category grid far below the fold. The fixed 160px basis leaves a
       partial card visible at the right edge, which is the affordance that
       more exist. Keyboard tabbing still reaches every card and the browser
       scrolls focus into view, so this is not a keyboard trap. --- */
@media (max-width: 1023px) {
  .product-cards {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    /* Room for the soft shadow on all four sides. The figures below still
       include the 2px hover lift that used to exist here; the padding is a
       deliberate over-estimate either way, so it was left as measured rather
       than re-derived when the lift was removed.
       Sizing it by offset + full blur radius gives 6px up / 14px down / 10px
       sideways at rest and 12px up / 26px down / 18px sideways on hover, and
       translateY(-2px) moves the card itself 2px further up. Those figures are a
       deliberate OVER-estimate, not the real reach: a CSS blur approximates a
       Gaussian with sigma = blur / 2, so `0 4px 10px` actually fades out around
       1px up / 9px down / 5px sideways. Padding sized to the larger numbers is
       therefore comfortably safe rather than tight. padding-top was 0 when the
       shadow was a bottom-right plate -- with a centred shadow that clips the
       card. Note touch devices keep :hover after a tap, so a clipped hover state
       persists rather than flickering. */
    padding: 14px 20px 28px;
  }

  .product-card {
    /* 145px, not 160px: at 375px two 160px cards plus the gap and padding came
       to ~336px in a ~338px container, so the third card began exactly at the
       edge and no sliver showed. 145px leaves a visible peek, which is the
       affordance; without it the only cue is the scrollbar. */
    flex: 0 0 145px;
    scroll-snap-align: start;
  }

  /* Width is not scarce in a scroll strip, so Author and Create get a card
     each here rather than sharing one. */
  .product-card--split {
    display: none;
  }

  .product-card--compact {
    display: flex;
  }
}

@media (max-width: 767px) {
  .quick-links {
    flex-direction: column;
  }
}

/* Clears the sticky .container-divider spacer when the Confirm card jumps
   here (the header itself is not sticky). Same offset as the article headings
   further down this file. */
#product-guides {
  scroll-margin-top: 90px;
}

.product-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 40px;
  /* Bottom room only. Side padding was removed: the ancestor chain up to body is
     overflow: visible, so nothing can clip the offset shadow, and 4px of side
     padding pushed the block out of alignment with the h1 above it. */
  padding: 0 0 12px;
  list-style: none;
}

.product-picker__item {
  display: flex;
  flex: 0 0 auto;
  /* Fallback only -- .product-picker .quick-link sets the colour directly at
     higher specificity. This matters just if rgba(40, 38, 35, 1) arrives empty. */
  color: rgba(0, 0, 0, 1);
}

/* Content width, not a stretched track.

   226px is MEASURED against the real labels WITH GEIST ACTUALLY LOADED: the
   widest is Adaptive Compliance at 225px. An earlier 220px figure was taken
   before the web font had swapped in and so recorded fallback metrics, which are
   ~5.6% narrower -- two buttons then exceeded the floor and the set was not
   uniform. When a product is added or renamed, RE-MEASURE on a real render and
   confirm the font is live first: document.fonts.check("600 15px Geist") must be
   true, and note that the automation browser cannot load this font at all.

   min-height removes an order dependency. A captioned button computes to 62.34px
   and an uncaptioned one falls to .quick-link's 52px floor; flex stretch equalises
   only WITHIN a row, so a row that happened to hold no captioned product was 10px
   shorter -- and which row that is depends on the Zendesk section order, not on
   anything in this repo.

   max-width is a guard: the caption comes from an admin-editable field, so without
   a ceiling one long description would stretch its button across the whole row. */
.product-picker .quick-link {
  flex: 0 0 auto;
  min-width: 226px;
  max-width: 320px;
  min-height: 62px;
  /* Overrides .quick-link's own centring: text left, chevron hard right, so all
     the chevrons align down the block. */
  justify-content: space-between;
  padding: 12px 22px;
  gap: 12px;
  /* These three are stated in full rather than inherited from .quick-link.
     The home page's .quick-link is the academy-styled gold banner -- no
     border, 6px corners, soft shadow -- and this page is deliberately NOT
     that. Inheriting was fine while both wanted the same chrome; it stopped
     being fine the moment they diverged. In particular `border-width: 2px`
     alone would render NOTHING once the base rule sets `border: 0`, because
     width without style paints no border. */
  border: 2px solid rgba(0, 0, 0, 1);
  border-radius: 4px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.34), 5px 6px 9px rgba(0, 0, 0, 0.18);
  background-color: rgba(255, 250, 164, 1);
  color: rgba(40, 38, 35, 1);
  -webkit-transition: transform 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease, color 0.14s ease;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease, color 0.14s ease;
}

.product-picker__text {
  display: flex;
  flex-direction: column;
  /* Required for the caption's ellipsis to engage: a flex item's default
     min-width: auto would let it push the button wider instead of truncating. */
  min-width: 0;
  text-align: left;
}

.product-picker__name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

/* Matches .product-card__former on the home page, so both pages describe a
   rebrand the same way -- including font-family, which must be stated explicitly:
   .quick-link sets the heading font, so omitting this would silently diverge the
   two captions the moment either font setting is changed in the editor.

   Clamped rather than wrapped: an over-long description degrades to an ellipsis
   instead of doubling the button's height and breaking the row. The tint is
   opacity, NOT a colour function on a setting -- settings are substituted as plain
   text before any Sass runs, so a function around one emits invalid CSS that the
   browser discards silently. */
.product-picker__former {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-picker__caret {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  -webkit-transition: transform 0.14s ease;
  transition: transform 0.14s ease;
}

/* Hover inverts to the brand pair -- the theme's own shared .button:hover idiom,
   not the grey home_button_hover pair that plain .quick-link uses.

   Colour only. The lift and the plate growth are both gone: the inversion
   already announces the hover, and a plate widening from 4px to 7px while the
   button stays put reads as the plate sliding out from under it.

   With box-shadow removed here, the resting plate comes from the base
   .product-picker .quick-link rule. That is a specificity TIE with
   .quick-link:hover, resolved by source order -- the base picker rule sits
   later in this file and wins. Fragile but correct; if either rule is ever
   moved, re-check that the picker still shows its plate on hover.

   The chevron nudge (further down) is the one deliberate exception to the
   no-hover-movement rule. It is an affordance pointing at the destination
   rather than a lift, and it is one of two hover cues here that survive
   forced-colors, where the fill change is neutralised and box-shadow is
   dropped. The other is the transparent outline inherited from
   .quick-link:hover -- but a prior click cancels that one via
   .product-picker .quick-link:focus:not(:focus-visible), so the chevron is
   what remains in every case. */
.product-picker .quick-link:hover {
  background-color: rgba(0, 0, 0, 1);
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
}

/* Keyboard focus: the same inversion as hover, no movement, and a two-tone ring
   so it is unmistakable on either ground -- rgba(255, 255, 255, 1) immediately outside
   the button reads against the dark fill, rgba(0, 0, 0, 1) outside that reads against
   the white page. A single rgba(0, 0, 0, 1) ring would be the same colour as the fill
   it surrounds.

   Separate from :hover, never comma-joined with it: .quick-link draws its focus
   indicator AS a box-shadow, so a shared rule would overwrite the ring and
   silently remove the indicator. :focus-visible also always gets its OWN rule --
   an engine that does not know the pseudo-class discards the entire selector list
   it appears in, which has cost this theme a whole rule twice. */
.product-picker .quick-link:focus-visible {
  background-color: rgba(0, 0, 0, 1);
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 5px rgba(0, 0, 0, 1);
}

/* Forced-colors fallback -- the same shape as .product-card__link:focus on the
   home page. Under `forced-colors: active` (Windows High Contrast) the user agent
   drops box-shadow entirely, so the two-tone ring above vanishes and a keyboard
   user is left with no focus indicator at all -- a WCAG 2.4.7 failure. An outline
   survives forced-colors (its colour is forced to a system colour), so it is the
   fallback. It doubles as the indicator for engines that do not understand
   :focus-visible and therefore discard both that rule and the one below.

   THE ORDER IS LOAD-BEARING: this rule must stay BELOW :focus-visible. That rule
   sets outline: 0, and both selectors have the same specificity (0,3,0), so an
   outline written ABOVE it is cancelled for keyboard focus -- which is exactly
   the case this fallback exists to cover. That was the bug here until 2026-08-19.
   On a normal display the 2px offset lands the outline inside the ring's outer
   rgba(0, 0, 0, 1) band, so it is invisible and nothing changes.

   No box-shadow here. This rule used to restate the resting plate, back when a
   plain .quick-link:focus drew a ring that needed overriding; main renamed that
   rule to :focus-visible on 2026-08-19, so the plate now comes from
   .product-picker .quick-link's own base rule in every state that reaches here
   -- NOT from plain .quick-link's, which carries the soft shadow. Restating it
   below
   :focus-visible would overwrite the keyboard ring with the plate and undo the
   fix above. */
.product-picker .quick-link:focus {
  outline: 2px solid rgba(0, 0, 0, 1);
  outline-offset: 2px;
}

/* Modern engines only: a MOUSE-focused button loses the fallback outline, which
   is the behaviour :focus-visible exists to give. Engines without :focus-visible
   cannot match this selector at all, so they keep the outline above. */
.product-picker .quick-link:focus:not(:focus-visible) {
  outline: 0;
}

/* Pressed into the plate. The colours are restated because :active fires WITHOUT
   :hover on keyboard activation, and the inherited .quick-link:active would
   otherwise flash the grey home-page hover fill. */
.product-picker .quick-link:active {
  -webkit-transform: translate(3px, 3px);
  transform: translate(3px, 3px);
  background-color: rgba(0, 0, 0, 1);
  color: rgba(255, 255, 255, 1);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.34);
}

/* Two rules, not one list. An unknown pseudo-class invalidates an ENTIRE
   comma-separated selector list, so pairing :focus-visible with :hover here would
   drop the nudge altogether in any engine that does not support it. */
.product-picker .quick-link:hover .product-picker__caret {
  transform: translateX(4px);
}

.product-picker .quick-link:focus-visible .product-picker__caret {
  transform: translateX(4px);
}

/* The theme's FIRST reduced-motion guard. Colour still changes; only movement is
   dropped. :focus-visible is split into its own rule for the same reason as
   above -- in the earlier draft it sat in the same list as :hover and :active,
   which meant that on any engine without :focus-visible the whole guard was
   discarded and reduced-motion users still got the lift and the press.

   Guarded below: the four button presses and the picker's chevron nudge. Two
   hover lifts this comment used to cite -- the product card's and the picker's
   own -- no longer exist; neither does the guard entry the picker's had.

   #backToTopButton is guarded too, at the end of this block, and differently
   from everything above it: it keeps its opacity fade and loses only the
   movement. See the comment there.

   Nothing transform-shaped in this file is now left unguarded. Everything else
   is static: translateY(-50%) centring, a rotate and a scale flip. */
@media (prefers-reduced-motion: reduce) {
  .product-picker .quick-link,
  .product-picker__caret,
  .product-card,
  .quick-link,
  .blocks-item,
  .community-follow button {
    -webkit-transition: none;
    transition: none;
  }
  /* Hover no longer moves anything on any family, so only presses and the
     chevron are listed. */
  .product-picker .quick-link:active,
  .product-picker .quick-link:hover .product-picker__caret {
    -webkit-transform: none;
    transform: none;
  }
  .product-picker .quick-link:focus-visible .product-picker__caret {
    -webkit-transform: none;
    transform: none;
  }
  /* The three new presses. Colour and shadow still change -- this guard sets
     only `transition` and `transform` -- so every press keeps its shadow
     feedback, instantly rather than animated.

     The row 1 entry repeats the press rule's full selector, including the
     :not(). Specificity still decides inside a media query, and the press is
     (0,3,0) because :not() contributes its argument -- a bare
     `.product-card:active` at (0,2,0) would LOSE to it and reduced-motion
     users would keep the 4px slide. */
  .product-card:not(.product-card--split):active,
  .quick-link:active,
  .blocks-item:active,
  .community-follow button:active {
    -webkit-transform: none;
    transform: none;
  }

  /* The back-to-top button. It animates transform in three places -- its appear
     via .is-visible, its :hover and its :focus-visible -- and had no guard at
     all until now.

     The opacity fade is KEPT deliberately. prefers-reduced-motion is about
     movement, not opacity, and a cross-fade is gentler than the button popping
     in and out. So `transform` is dropped from the transition list while
     opacity, visibility, background-color and box-shadow keep theirs.

     Neutralising the base transform is what makes that fade motionless, and it
     is the non-obvious half. Without it, removing `transform` from the
     transition list would make the hidden-state transform snap instead of
     animate -- so on hide, the button would jump 16px down and shrink to 0.9
     instantly while its opacity was still fading out. Setting it to none here
     leaves the hidden and visible states at the same place, because
     .is-visible's `translateY(0) scale(1)` is the identity transform and needs
     no override.

     :hover and :focus-visible get separate rules and are NOT comma-joined. An
     engine that does not know :focus-visible discards the whole list it appears
     in, which would leave the hover lift running for exactly the users this
     guard is for. PR #49 split this same pair on these same two selectors. */
  #backToTopButton {
    -webkit-transform: none;
    transform: none;
    -webkit-transition: opacity 0.25s ease, visibility 0.25s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    transition: opacity 0.25s ease, visibility 0.25s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  }
  #backToTopButton:hover {
    -webkit-transform: none;
    transform: none;
  }
  #backToTopButton:focus-visible {
    -webkit-transform: none;
    transform: none;
  }
}

/***** Imported-content defensive hardening (.article-body) *****
       Migrated KB articles bring in full HTML (tables, media, foreign
       class/id names that can collide with theme classes). These rules are
       additive and scoped entirely to .article-body. No local render exists;
       verify on the sandbox via Part B of the preview checklist.
       Long-string wrapping is intentionally omitted — it already inherits
       from .article-content's word-wrap:break-word (style.css ~1941). *****/

/* Wide tables scroll within the content column, not the whole page.
   CSS-only: cannot wrap {{article.body}} output in a scroll div, so
   display:block on the table itself is the pragmatic route. */
.article-body table {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}

/* Elucidat/CKEditor wrap tables in figure.wysiwyg-table, whose default
   display:table + max-width:none becomes the table's containing block and
   defeats the max-width:100% cap above (the table resolves against an
   already-too-wide figure, and the figure — overflow:visible — leaks past
   the content column). Constrain the wrapper to the column and make it the
   scroll container instead. Scraper-source tables are unaffected (sanitiser
   strips the class, so no wrapper is present). */
.article-body figure.wysiwyg-table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  margin-left: 0;
  margin-right: 0;
}

/* Non-img media contained to content width (img already capped ~1839).
   Belt-and-suspenders: the sanitiser strips most iframe/embed/object on
   save, but this is cheap insurance for anything that survives. */
.article-body video,
.article-body iframe,
.article-body embed,
.article-body object {
  max-width: 100%;
}

/* Neutralise scraped elements whose class names collide with theme classes,
   so they render as plain content, not theme-styled boxes. Narrower than
   `all: revert` for predictable results. Starting list — extend against real
   collisions found in Part B. Inline-styled content is unaffected (inline
   wins specificity), and CKEditor image-style-* classes are deliberately
   excluded. */
.article-body .container,
.article-body .hero,
.article-body .section,
.article-body .blocks,
.article-body .blocks-item,
.article-body .button,
.article-body .btn,
.article-body .card,
.article-body .content,
.article-body .row,
.article-body .header,
.article-body .footer {
  max-width: none;
  width: auto;
  margin: revert;
  padding: revert;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  /* Added with the .blocks-item press: the theme's :active rule would otherwise
     make a scraped element carrying that class jump 2px on mouse-down inside an
     article body. */
  transform: none;
  transition: none;
  display: revert;
  float: none;
  position: static;
  color: inherit;
  text-align: inherit;
  text-transform: none;
}

/***** Article TOC / scroll-spy (vanilla) *****/
html {
  scroll-behavior: smooth;
}
#nav-list .sidenav-item.active {
  background-color: #000;
  color: rgba(255, 255, 255, 1) !important;
  text-decoration: none;
}
#nav-list .sidenav-item.sidenav-sub {
  padding-left: 22px;
}
.article-body h2,
.article-body h3,
.article-body p[id] {
  scroll-margin-top: 90px;
}

/***** Profile page: readable colours on this theme's dark background_color (scoped, low-risk) *****/
/* The Copenhagen profile CSS paints these blocks with darken(rgba(255, 246, 95, 1)),
   assuming background_color is light. This theme's background_color is navy, so the
   nav bar and activity cards came out navy with dark text (unreadable), and the
   header showed an awkward navy strip around its (already white) .container.
   Overrides below restore contrast. */
/* Banner: the inner .container is already white with default dark text; drop the
   surrounding navy so it's a clean white header (no navy strip, text stays dark). */
.profile-header {
  background-color: #fff;
}
/* Nav tabs: light bar with dark labels instead of navy-on-navy. */
.profile-nav {
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
}
/* Activity-overview cards: light card so the article previews are legible. */
.profile-activity-contribution {
  background-color: #fff;
  border: 1px solid #e5e5e5;
  color: rgba(40, 38, 35, 1);
}