/* 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;
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
@media (min-width: 768px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  background-color: rgba(0, 0, 0, 1);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.4), 8px 10px 14px rgba(0, 0, 0, 0.2);
}
.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;
}
.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active {
  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;
}
.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;
  }
}
.community-follow button {
  line-height: 30px;
  padding: 0 10px 0 15px;
  position: relative;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow button {
    width: auto;
  }
}
.community-follow button:hover {
  background-color: rgba(0, 0, 0, 1);
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, 1);
}
.community-follow button[data-selected=true] {
  background-color: rgba(0, 0, 0, 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);
}
.community-follow button[data-selected=true]:hover {
  /* lighten, not darken: [data-selected=true] above fills this with
     brand_color, which is black, so darken() returned the same #000. Same 20%
     magnitude, opposite direction. The white follower-count divider still
     reads against the lighter fill. */
  background-color: #333;
  border-color: #333;
}
.community-follow button::after {
  border-left: 1px solid rgba(0, 0, 0, 1);
  content: attr(data-follower-count);
  color: rgba(0, 0, 0, 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(0, 0, 0, 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);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  -webkit-transition: box-shadow 0.2s ease, transform 0.2s ease, border-left-width 0.2s ease;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-left-width 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 and lifts 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 widening is NOT decoration, it is the state. A shadow change and a
   transform are both removable by the user agent: prefers-reduced-motion kills
   the lift (see the guard at the end of this file) and forced-colors: active
   drops box-shadow entirely. With the fill change gone, those two together
   would otherwise leave this control with no hover feedback whatsoever. A
   border width survives both, and it sits next to the label rather than at the
   card's outer edge, so magnified readers see it too. */
.product-card:hover {
  border-left-width: 10px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

.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;
}

.product-card__link:visited,
.product-card__link:hover,
.product-card__link:active {
  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 suppressions. `background-color` is now a no-op --
   .product-card:hover stopped changing the fill -- but it is kept as a
   belt-and-braces guard in case a fill hover is ever reintroduced above.
   `transform: none` is the live one, and it suppresses the LIFT only: without
   it this card would rise on pointer-enter, which is a stronger clickability
   cue than the fill change this rule was originally written to suppress. The
   shadow deepening from .product-card:hover still applies and is intentionally
   retained, as it was before this restyle -- the card should still answer the
   pointer without reading as a single click target. The accent widening is
   likewise NOT suppressed: it reads as "this card is under the pointer" rather
   than "this card is a button". */
.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;
}

/* 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;
  transition: box-shadow 0.2s ease, background-color 0.2s ease, color 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 shares this rule, so a mouse press looks like hover. That is a
   deliberate difference from .product-picker .quick-link, which presses into
   its shadow plate -- this button has no plate to press into. On keyboard
   activation :active fires WITHOUT :hover, and .quick-link:focus-visible sits
   later in this file and restores the focus ring, so the ring survives. Do not
   reorder those two rules. */
.quick-link:hover,
.quick-link:active {
  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;
}

/* :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;
}

/* 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, plus the 2px hover lift.
       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 -- and lifts the
   button off its shadow plate. */
.product-picker .quick-link:hover {
  transform: translate(-2px, -2px);
  background-color: rgba(0, 0, 0, 1);
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
  box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.42), 9px 11px 15px rgba(0, 0, 0, 0.2);
}

/* 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 .quick-link's
   own base rule in every state that reaches here. 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 {
  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.

   Elsewhere in this file there are 10 other transform declarations, but only
   three of them animate (the product-card lift on the home page); the rest are
   static translateY(-50%) centring, a rotate and a scale flip. Auditing those
   three is separate work. */
@media (prefers-reduced-motion: reduce) {
  .product-picker .quick-link,
  .product-picker__caret {
    -webkit-transition: none;
    transition: none;
  }
  .product-picker .quick-link:hover,
  .product-picker .quick-link:active,
  .product-picker .quick-link:hover .product-picker__caret {
    transform: none;
  }
  .product-picker .quick-link:focus-visible,
  .product-picker .quick-link:focus-visible .product-picker__caret {
    transform: none;
  }
  .product-card {
    -webkit-transition: none;
    transition: none;
  }
  .product-card:hover {
    -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;
  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);
}