@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%;
}

body {
  margin: 0;
}

main {
  display: block;
}

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

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: #FAFAF7;
  color: #141414;
  font-family: -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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  margin-top: 0;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

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

h4 {
  font-size: 16px;
}

a {
  color: #141414;
  text-decoration: none;
}
a:visited {
  color: #5C5C5C;
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}

.hbs-form input,
.hbs-form textarea, .search input,
.search textarea {
  color: #000;
  font-size: 14px;
}
.hbs-form input, .search input {
  max-width: 100%;
  box-sizing: border-box;
  transition: border 0.12s ease-in-out;
  /* We use the :where selector to not increase the specificity of the selector */
}
.hbs-form input:where(:not([type=checkbox])), .search input:where(:not([type=checkbox])) {
  outline: none;
}
.hbs-form input:where(:not([type=checkbox])):focus, .search input:where(:not([type=checkbox])):focus {
  border: 1px solid #a3dd3a;
}
.hbs-form input[disabled], .search input[disabled] {
  background-color: #ddd;
}
.hbs-form select, .search 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 #848F99;
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: #555;
  width: 100%;
}
.hbs-form select:focus, .search select:focus {
  border: 1px solid #a3dd3a;
}
.hbs-form select::-ms-expand, .search select::-ms-expand {
  display: none;
}
.hbs-form textarea, .search textarea {
  border: 1px solid #848F99;
  border-radius: 2px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}
.hbs-form textarea:focus, .search textarea:focus {
  border: 1px solid #a3dd3a;
}

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

.container-divider {
  border-top: 1px solid #ddd;
  margin-bottom: 20px;
}

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 *****/
.button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
  background-color: transparent;
  border: 1px solid #a3dd3a;
  border-radius: 4px;
  color: #a3dd3a;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  line-height: 2.34;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out, color 0.15s ease-in-out;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  -webkit-touch-callout: none;
}
@media (min-width: 768px) {
  .button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
    width: auto;
  }
}
.button:visited, .pagination-next-link:visited, .pagination-prev-link:visited, .pagination-first-link:visited, .pagination-last-link:visited, .subscriptions-subscribe button:visited, .requests-table-toolbar .organization-subscribe button:visited, .community-follow button:visited, .article-subscribe button:visited, .section-subscribe button:visited, .split-button button:visited {
  color: #a3dd3a;
}
.button:hover, .pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover, .subscriptions-subscribe button:hover, .requests-table-toolbar .organization-subscribe button:hover, .community-follow button:hover, .article-subscribe button:hover, .section-subscribe button:hover, .split-button button:hover, .button:active, .pagination-next-link:active, .pagination-prev-link:active, .pagination-first-link:active, .pagination-last-link:active, .subscriptions-subscribe button:active, .requests-table-toolbar .organization-subscribe button:active, .community-follow button:active, .article-subscribe button:active, .section-subscribe button:active, .split-button button:active, .button:focus, .pagination-next-link:focus, .pagination-prev-link:focus, .pagination-first-link:focus, .pagination-last-link:focus, .subscriptions-subscribe button:focus, .requests-table-toolbar .organization-subscribe button:focus, .community-follow button:focus, .article-subscribe button:focus, .section-subscribe button:focus, .split-button button:focus, .button.button-primary, .button-primary.pagination-next-link, .button-primary.pagination-prev-link, .button-primary.pagination-first-link, .button-primary.pagination-last-link, .subscriptions-subscribe button.button-primary, .subscriptions-subscribe button[data-selected=true], .requests-table-toolbar .organization-subscribe button.button-primary, .requests-table-toolbar .organization-subscribe button[data-selected=true], .community-follow button.button-primary, .article-subscribe button.button-primary, .article-subscribe button[data-selected=true], .section-subscribe button.button-primary, .section-subscribe button[data-selected=true], .split-button button.button-primary {
  background-color: #a3dd3a;
  color: #141414;
  text-decoration: none;
}
.button.button-primary:hover, .button-primary.pagination-next-link:hover, .button-primary.pagination-prev-link:hover, .button-primary.pagination-first-link:hover, .button-primary.pagination-last-link:hover, .subscriptions-subscribe button.button-primary:hover, .subscriptions-subscribe button[data-selected=true]:hover, .requests-table-toolbar .organization-subscribe button.button-primary:hover, .requests-table-toolbar .organization-subscribe button[data-selected=true]:hover, .community-follow button.button-primary:hover, .article-subscribe button.button-primary:hover, .article-subscribe button[data-selected=true]:hover, .section-subscribe button.button-primary:hover, .section-subscribe button[data-selected=true]:hover, .split-button button:hover, .button.button-primary:focus, .button-primary.pagination-next-link:focus, .button-primary.pagination-prev-link:focus, .button-primary.pagination-first-link:focus, .button-primary.pagination-last-link:focus, .subscriptions-subscribe button.button-primary:focus, .subscriptions-subscribe button[data-selected=true]:focus, .requests-table-toolbar .organization-subscribe button.button-primary:focus, .requests-table-toolbar .organization-subscribe button[data-selected=true]:focus, .community-follow button.button-primary:focus, .article-subscribe button.button-primary:focus, .article-subscribe button[data-selected=true]:focus, .section-subscribe button.button-primary:focus, .section-subscribe button[data-selected=true]:focus, .split-button button.button-primary:focus, .button.button-primary:active, .button-primary.pagination-next-link:active, .button-primary.pagination-prev-link:active, .button-primary.pagination-first-link:active, .button-primary.pagination-last-link:active, .subscriptions-subscribe button.button-primary:active, .subscriptions-subscribe button[data-selected=true]:active, .requests-table-toolbar .organization-subscribe button.button-primary:active, .requests-table-toolbar .organization-subscribe button[data-selected=true]:active, .community-follow button.button-primary:active, .article-subscribe button.button-primary:active, .article-subscribe button[data-selected=true]:active, .section-subscribe button.button-primary:active, .section-subscribe button[data-selected=true]:active, .split-button button.button-primary:active {
  background-color: #6b971a;
  border-color: #6b971a;
}
.button[data-disabled], [data-disabled].pagination-next-link, [data-disabled].pagination-prev-link, [data-disabled].pagination-first-link, [data-disabled].pagination-last-link, .subscriptions-subscribe button[data-disabled], .requests-table-toolbar .organization-subscribe button[data-disabled], .community-follow button[data-disabled], .article-subscribe button[data-disabled], .section-subscribe button[data-disabled], .split-button button[data-disabled] {
  cursor: default;
}

.button-large, .hbs-form input[type=submit] {
  cursor: pointer;
  background-color: #a3dd3a;
  border: 0;
  border-radius: 4px;
  color: #141414;
  font-size: 14px;
  line-height: 2.72;
  min-width: 190px;
  padding: 0 1.9286em;
  width: 100%;
}
@media (min-width: 768px) {
  .button-large, .hbs-form input[type=submit] {
    width: auto;
  }
}
.button-large:visited, .hbs-form input[type=submit]:visited {
  color: #141414;
}
.button-large:hover, .button-large:active, .button-large:focus, .hbs-form input[type=submit]:hover, .hbs-form input[type=submit]:active, .hbs-form input[type=submit]:focus {
  background-color: #6b971a;
}
.button-large[disabled], .hbs-form input[type=submit][disabled] {
  background-color: #ddd;
}

.button-secondary {
  color: #474747;
  border: 1px solid #848F99;
  background-color: transparent;
}
.button-secondary:visited {
  color: #474747;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: #141414;
  border: 1px solid #848F99;
  background-color: #f4f4ee;
}

/***** Split button *****/
.split-button {
  display: flex;
}

.split-button button {
  background-color: #a3dd3a;
  border: 0;
  color: #141414;
  height: 32px;
  line-height: 16px;
  outline-color: #a3dd3a;
}

[dir=rtl] .split-button button:not(:only-child):first-child {
  border-left: 1px solid #141414;
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):first-child {
  border-right: 1px solid #141414;
  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,
.table th a {
  color: #474747;
  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 #848F99;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}
.form-field input:focus {
  border: 1px solid #a3dd3a;
}

.form-field input[type=text] {
  border: 1px solid #848F99;
  border-radius: 4px;
}
.form-field input[type=text]:focus {
  border: 1px solid #a3dd3a;
}

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

.form-field .nesty-input {
  border-radius: 4px;
  border: 1px solid #848F99;
  height: 40px;
  line-height: 40px;
  outline: none;
  vertical-align: middle;
}
.form-field .nesty-input:focus {
  border: 1px solid #a3dd3a;
  text-decoration: none;
}

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

.form-field .hc-multiselect-toggle:focus {
  outline: none;
  border: 1px solid #a3dd3a;
  text-decoration: none;
}

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

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

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

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

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

.form footer a {
  color: #474747;
  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: #5C5C5C;
}

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

.logo a {
  display: inline-block;
}

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

.user-nav {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .user-nav {
    position: relative;
  }
}
.user-nav[aria-expanded=true] {
  background-color: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  border: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 1;
}
.user-nav[aria-expanded=true] > a {
  display: block;
  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: #141414;
  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: #141414;
  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;
}
.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: #141414;
  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: #141414;
}
.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;
}

#zd-modal-container ~ .skip-navigation {
  display: none;
}

.ask-ai {
  align-items: center;
  background-color: #141414;
  border: 1px solid #141414;
  border-radius: 4px;
  color: #141414;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 6px;
  line-height: 1.4286;
  padding: 6px 14px;
}
.ask-ai:visited {
  color: #141414;
}
.ask-ai .ask-ai-icon {
  flex-shrink: 0;
}

.nav-wrapper-desktop .ask-ai {
  margin-inline-end: 16px;
  padding: 6px 14px;
}
.nav-wrapper-desktop .ask-ai, .nav-wrapper-desktop .ask-ai:visited {
  color: #141414;
}
.nav-wrapper-desktop .ask-ai:hover, .nav-wrapper-desktop .ask-ai:focus, .nav-wrapper-desktop .ask-ai:active {
  background-color: #7eb52a;
  border-color: #7eb52a;
  color: #141414;
  text-decoration: none;
}

.nav-wrapper-mobile .ask-ai {
  margin: 4px 24px;
  padding: 6px 14px;
  width: auto;
  height: auto;
}
.nav-wrapper-mobile .ask-ai, .nav-wrapper-mobile .ask-ai:visited {
  color: #141414;
}
.nav-wrapper-mobile .ask-ai:hover, .nav-wrapper-mobile .ask-ai:focus, .nav-wrapper-mobile .ask-ai:active {
  background-color: #7eb52a;
  border-color: #7eb52a;
  color: #141414;
  text-decoration: 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: #141414;
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: #141414;
  background-color: transparent;
}
.user-info > button::after {
  color: #141414;
  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: #a3dd3a;
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: #141414;
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 17px;
}

/***** Footer *****/
.footer {
  border-top: 1px solid #ddd;
  margin-top: 60px;
  padding: 30px 0;
}
.footer a {
  color: #474747;
}
.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
}
@media (min-width: 1160px) {
  .footer-inner {
    padding: 0;
    width: 90%;
  }
}
.footer-language-selector button {
  color: #474747;
  display: inline-block;
}

.powered-by-zendesk a,
.powered-by-zendesk a:visited {
  color: #474747;
}

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

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

.search {
  border-color: #848F99;
  border-radius: 30px;
  border-style: solid;
  border-width: 1px;
  display: flex;
  position: relative;
  transition: border 0.12s ease-in-out;
}
.search:focus-within {
  border-color: #a3dd3a;
}
.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: #a3dd3a;
  color: #fff;
}
.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #a3dd3a;
}
.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: #a3dd3a;
}
[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: #a3dd3a;
}

[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: #a3dd3a;
}
[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: #a3dd3a;
}

.search-icon {
  position: relative;
  top: 50%;
  transform: translateY(-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/01J917AS5CP0JQ2TMQRWNE56XP);
  background-position: center;
  background-size: cover;
  height: 300px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}
.hero-inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-width: 610px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 10px 0;
}
@media (min-width: 768px) {
  .page-header {
    align-items: baseline;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
  }
}
.page-header .section-subscribe {
  flex-shrink: 0;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .page-header .section-subscribe {
    margin-bottom: 0;
  }
}
.page-header h1 {
  flex-grow: 1;
  margin-bottom: 10px;
}
.page-header-description {
  font-style: italic;
  margin: 0 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 {
  align-items: baseline;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 15px 30px;
  justify-content: space-between;
  margin-bottom: 55px;
}
@media (min-width: 768px) {
  .sub-nav {
    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 #a3dd3a;
  border-radius: 4px;
  box-sizing: border-box;
  color: #a3dd3a;
  display: flex;
  flex: 1 0 340px;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
}
@media (min-width: 768px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  background-color: #a3dd3a;
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: #141414;
  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: #141414;
}
.blocks-item-link {
  color: #a3dd3a;
  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;
}
.blocks-item-link:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #a3dd3a;
  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/01J917AT0Y02WQ3H3PGKQ9AZH6);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}
.community a {
  color: #141414;
  text-decoration: underline;
}
.community a:visited {
  color: #5C5C5C;
}
.community a:hover, .community a:active, .community a:focus {
  color: #7eb52a;
}

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

/***** Recent activity *****/
.recent-activity-header {
  margin-bottom: 10px;
  text-align: center;
}
.recent-activity-list {
  padding: 0;
}
.recent-activity-item {
  border-bottom: 1px solid #ddd;
  overflow: auto;
  padding: 20px 0;
}
.recent-activity-item h3 {
  margin: 0;
}
.recent-activity-item-parent {
  font-size: 16px;
  font-weight: 600;
}
.recent-activity-item-parent, .recent-activity-item-link {
  margin: 6px 0;
  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: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-activity-item-meta {
  color: #141414;
  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 {
  display: inline-block;
  font-size: 13px;
}
.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-controls {
  padding-top: 15px;
}
.recent-activity-controls a {
  color: #141414;
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: #5C5C5C;
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: #7eb52a;
}
.recent-activity-accessibility-label {
  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;
}
.recent-activity-comment-icon svg {
  vertical-align: middle;
  color: #a3dd3a;
  width: 16px;
  height: 16px;
}
.recent-activity-comment-icon:after {
  content: attr(data-comment-count);
  margin-left: 3px;
}
[dir=rtl] .recent-activity-comment-icon:after {
  margin-left: 0;
  margin-right: 3px;
}

/***** Category pages *****/
.category-container {
  display: flex;
  justify-content: flex-end;
}
.category-content {
  flex: 1;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .category-content {
    flex: 0 0 80%;
  }
}

.section-tree {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .section-tree {
    flex-direction: row;
  }
}
.section-tree .section {
  flex: initial;
  max-width: 100%;
}
@media (min-width: 768px) {
  .section-tree .section {
    flex: 0 0 45%; /* Two columns for tablet and desktop. Leaving 5% separation between columns */
  }
}
.section-tree-title {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 600;
}
.section-tree-title a {
  color: #141414;
}
.section-tree .see-all-articles {
  display: block;
  padding: 15px 0;
}

.article-list-item {
  font-size: 16px;
  padding: 15px 0;
  text-overflow: ellipsis;
  overflow: hidden;
}
.article-list-item a {
  color: #141414;
}

.icon-star {
  color: #a3dd3a;
  font-size: 18px;
}

/***** Section pages *****/
.section-container {
  display: flex;
  justify-content: flex-end;
}
.section-content {
  flex: 1;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .section-content {
    flex: 0 0 80%;
  }
}
.section-list {
  margin: 40px 0;
}

.section-list-item {
  border-bottom: 1px solid #ddd;
  font-size: 16px;
  padding: 15px 0;
}
.section-list-item:first-child {
  border-top: 1px solid #ddd;
}
.section-list-item a {
  align-items: center;
  color: #141414;
  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;
}

/***** 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;
  margin-bottom: 40px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}
.article-avatar {
  margin-right: 10px;
}
.article-author {
  margin-bottom: 10px;
}
.article-title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 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: #141414;
  text-decoration: underline;
}
.article-body a:visited {
  color: #5C5C5C;
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: #7eb52a;
}
.article-body img {
  height: auto;
  max-width: 100%;
}
.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: #f0f0e7;
}
.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: #f4f4ee;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: #f4f4ee;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.article-body blockquote {
  border-left: 1px solid #ddd;
  color: #474747;
  font-style: italic;
  padding: 0 15px;
}
.article-body > p:last-child {
  margin-bottom: 0;
}
.article-content {
  line-height: 1.6;
  margin: 40px 0;
  word-wrap: break-word;
}
.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.article-comment-count {
  color: #474747;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: #a3dd3a;
  width: 18px;
  height: 18px;
}
.article-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    flex: 0 0 17%;
    height: auto;
    max-width: 17%;
  }
}
.article-relatives {
  border-top: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .article-relatives {
    flex-direction: row;
  }
}
.article-relatives > * {
  flex: 1 0 50%;
  min-width: 50%;
  overflow-wrap: break-word;
  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-votes-question {
  font-size: 15px;
  font-weight: normal;
  margin-bottom: 0;
}
.article-vote {
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}
.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}
.article-more-questions a {
  color: #141414;
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: #5C5C5C;
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: #7eb52a;
}
.article-return-to-top {
  border-top: 1px solid #848F99;
}
@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}
.article-return-to-top a {
  color: #141414;
  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;
}

.sidenav-title {
  font-size: 15px;
  position: relative;
  font-weight: 600;
}
.sidenav-item {
  display: block;
  margin-top: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-articles li,
.related-articles li {
  margin-bottom: 15px;
}

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

/***** 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: #474747;
}
.share a:hover {
  text-decoration: none;
  color: #a3dd3a;
}
.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;
}
.comment-overview {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 20px 0;
}
.comment-overview p {
  margin-top: 0;
}
.comment-callout {
  color: #474747;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}
.comment-callout a {
  color: #141414;
  text-decoration: underline;
}
.comment-callout a:visited {
  color: #5C5C5C;
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: #7eb52a;
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: #474747;
  font-size: 13px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid #a3dd3a;
  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: #a3dd3a;
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  color: #141414;
  text-decoration: underline;
}
.comment-body a:visited {
  color: #5C5C5C;
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: #7eb52a;
}
.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: #f0f0e7;
}
.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: #f4f4ee;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.comment-body pre {
  background: #f4f4ee;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.comment-body blockquote {
  border-left: 1px solid #ddd;
  color: #474747;
  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: #474747;
  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: #a3dd3a;
}

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

.vote-voted {
  color: #a3dd3a;
}

.vote-voted:hover {
  color: #6b971a;
}

/***** 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/01J917ASJ6R42VDW7Z0J4SBV68);
  margin-bottom: 10px;
}
.community-footer {
  padding-top: 50px;
  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: #a3dd3a;
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: #141414;
  color: #141414;
}
.community-follow button[data-selected=true] {
  background-color: #a3dd3a;
  color: #141414;
}
.community-follow button[data-selected=true]::after {
  border-left: 1px solid #141414;
  color: #141414;
}
.community-follow button[data-selected=true]:hover {
  background-color: #6b971a;
  border-color: #6b971a;
}
.community-follow button::after {
  border-left: 1px solid #a3dd3a;
  content: attr(data-follower-count);
  color: #a3dd3a;
  display: inline-block;
  font-family: -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 #a3dd3a;
  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: #141414;
  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: #5C5C5C;
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #474747;
  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: #141414;
    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: #a3dd3a;
}
.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: #474747;
}
.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: -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: #141414;
  text-decoration: underline;
}
.post-body a:visited {
  color: #5C5C5C;
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: #7eb52a;
}
.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: #f0f0e7;
}
.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: #f4f4ee;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.post-body pre {
  background: #f4f4ee;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.post-body blockquote {
  border-left: 1px solid #ddd;
  color: #474747;
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: #474747;
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: #a3dd3a;
  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 #a3dd3a;
}

.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}
.collapsible-nav-list li {
  color: #141414;
  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: #141414;
  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 #a3dd3a;
    order: 1;
  }
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
  color: #141414;
}

.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: 10px 0;
  position: relative;
}
@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 0;
  }
}
.collapsible-sidebar-title {
  margin-top: 0;
}
.collapsible-sidebar-toggle {
  position: absolute;
  top: 22.5px;
  transform: translateY(-50%);
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-toggle {
    display: none;
  }
}
[dir=rtl] .collapsible-sidebar-toggle {
  left: 0;
  right: auto;
}
.collapsible-sidebar-toggle-icon {
  display: none;
}
.collapsible-sidebar-toggle[aria-expanded=false] .chevron-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle[aria-expanded=true] .x-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle:focus {
  outline: none;
  border: 1px solid #a3dd3a;
}
.collapsible-sidebar-body {
  display: none;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-body {
    display: block;
  }
}
.collapsible-sidebar[aria-expanded=true] {
  max-height: none;
}
.collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-body {
  display: block;
}

/***** My activities *****/
.my-activities-nav {
  background-color: #f0f0e7;
  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: #474747;
  font-size: 13px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: #474747;
}

/***** 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: #474747;
  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 #a3dd3a;
}
.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 #a3dd3a;
}
.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: #f4f4ee;
    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%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.request-details dd::after {
  content: "\a";
  white-space: pre;
}
.request-details dt {
  line-break: strict;
  color: #474747;
  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: #474747;
  font-size: 13px;
}
.meta-data:not(:last-child)::after {
  content: "·";
  margin: 0 5px;
}

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

.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: #474747;
  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 #a3dd3a;
  border-radius: 4px;
  color: #a3dd3a;
  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: #f0f0e7;
  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: #474747;
  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: #474747;
  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: #f4f4ee;
}
@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: #FAFAF7;
  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: #141414;
}
.search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current {
  background-color: #e9ebed;
  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;
}
.search-results-sidebar .see-all-filters {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  padding: 10px;
  color: #141414;
}
.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 > 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;
}
.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: #141414;
}
.search-results .no-results .action-prompt a:visited {
  color: #141414;
}

.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: #474747;
  font-size: 13px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: #a3dd3a;
  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-toggle[aria-expanded=true] + .dropdown-menu {
  display: block;
}

.dropdown-menu {
  background: #fff;
  border: 1px solid #d8dcde;
  border-radius: 3px;
  box-shadow: 0px 20px 30px 0px rgba(23, 73, 77, 0.15);
  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 [role=separator] {
  border-bottom: 1px solid #e9ebed;
  margin: 4px 0;
}
.dropdown-menu [role=menuitem],
.dropdown-menu [role=menuitemradio] {
  color: #2f3941;
  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],
[dir=rtl] .dropdown-menu [role=menuitemradio] {
  padding: 7px 20px 7px 40px;
}
.dropdown-menu [role=menuitem]:hover, .dropdown-menu [role=menuitem]:focus,
.dropdown-menu [role=menuitemradio]:hover,
.dropdown-menu [role=menuitemradio]:focus {
  background: rgba(31, 115, 183, 0.08);
  text-decoration: none;
  color: #2f3941;
}
.dropdown-menu [role=menuitem][aria-selected=true], .dropdown-menu [role=menuitem][aria-checked=true],
.dropdown-menu [role=menuitemradio][aria-selected=true],
.dropdown-menu [role=menuitemradio][aria-checked=true] {
  cursor: default;
}
.dropdown-menu [role=menuitem][aria-selected=true]::after, .dropdown-menu [role=menuitem][aria-checked=true]::after,
.dropdown-menu [role=menuitemradio][aria-selected=true]::after,
.dropdown-menu [role=menuitemradio][aria-checked=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, [dir=rtl] .dropdown-menu [role=menuitem][aria-checked=true]::after,
[dir=rtl] .dropdown-menu [role=menuitemradio][aria-selected=true]::after,
[dir=rtl] .dropdown-menu [role=menuitemradio][aria-checked=true]::after {
  margin-left: 0;
  margin-right: 10px;
  float: left;
}
.dropdown-menu [role=menuitem][hidden], .dropdown-menu [role=menuitem][aria-hidden=true],
.dropdown-menu [role=menuitemradio][hidden],
.dropdown-menu [role=menuitemradio][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 #848F99;
}

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

/***** Summary component *****/
zd-summary-block {
  background: #f3f6f6;
}
[dir=ltr] zd-summary-block {
  border-left-color: #859fa1;
}
[dir=rtl] zd-summary-block {
  border-right-color: #859fa1;
}

.service-catalog-hero {
  background-image: url(/hc/theming_assets/01KEH6M1EVRDPB8PDFG576NF6E);
  margin-bottom: 10px;
  height: 320px;
}
.service-catalog-description {
  display: flow-root;
}
.service-catalog-description a {
  color: #141414;
  text-decoration: underline;
}
.service-catalog-description a:visited {
  color: #5C5C5C;
}
.service-catalog-description a:hover, .service-catalog-description a:active, .service-catalog-description a:focus {
  color: #7eb52a;
}
.service-catalog-description img {
  height: auto;
  max-width: 100%;
}
.service-catalog-description p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.service-catalog-description p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.service-catalog-description p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.service-catalog-description p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.service-catalog-description figure.image {
  display: table;
  margin: 0 auto;
}
.service-catalog-description figure.image > img {
  display: block;
  width: 100%;
}
.service-catalog-description figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.service-catalog-description figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.service-catalog-description figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.service-catalog-description figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.service-catalog-description figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f0f0e7;
}
.service-catalog-description ul,
.service-catalog-description ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .service-catalog-description ul,
[dir=rtl] .service-catalog-description ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.service-catalog-description ul > ul,
.service-catalog-description ol > ol,
.service-catalog-description ol > ul,
.service-catalog-description ul > ol,
.service-catalog-description li > ul,
.service-catalog-description li > ol {
  margin: 0;
}
.service-catalog-description ul {
  list-style-type: disc;
}
.service-catalog-description :not(pre) > code {
  background: #f4f4ee;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.service-catalog-description pre {
  background: #f4f4ee;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.service-catalog-description blockquote {
  border-left: 1px solid #ddd;
  color: #474747;
  font-style: italic;
  padding: 0 15px;
}
.service-catalog-main-content {
  display: flex;
  gap: 32px;
}
.service-catalog-list {
  width: 100%;
}
.service-catalog-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 20px;
}

.is-service-catalog-preview #navbar-container,
.is-service-catalog-preview .navbar-container,
.is-service-catalog-preview .assembly-bar,
.is-service-catalog-preview [data-garden-id="chrome.subnav"] {
  display: none !important;
}

/* PayMoji overrides — must be last so they win against Copenhagen defaults */
/* ============================================================
   PayMoji Support — Theme Overrides
   Last in the @import chain so this wins against Copenhagen defaults.
   ============================================================ */
/* ---- Design Tokens ---- */
:root {
  /* Brand */
  --pm-lime: #a3dd3a;
  --pm-lime-bright: #b8e85a;
  --pm-lime-deep: #7eb52a;
  --pm-lime-soft: #e8f5d2;
  --pm-lime-faint: #f3f9e8;
  --pm-lime-shadow: rgba(163, 221, 58, 0.35);
  --pm-ink: #141414;
  --pm-ink-soft: #1f1f1f;
  --pm-indigo: #5247E5;
  --pm-indigo-soft: #ECEAFB;
  --pm-gold: #f3b53a;
  --pm-magenta: #e84a8c;
  /* Neutrals */
  --pm-paper: #FAFAF7;
  --pm-paper-warm: #F4F2EC;
  --pm-surface: #FFFFFF;
  --pm-surface-sunken: #F7F5F0;
  --pm-border: #ECE9E0;
  --pm-border-strong: #D9D5C8;
  --pm-border-faint: #F3F1EA;
  --pm-text: #141414;
  --pm-text-mute: #545148;
  --pm-text-faint: #8E8B7E;
  /* Type */
  --pm-font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --pm-font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --pm-font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  /* Spacing (4px scale) */
  --pm-s-1: 4px;
  --pm-s-2: 8px;
  --pm-s-3: 12px;
  --pm-s-4: 16px;
  --pm-s-5: 24px;
  --pm-s-6: 32px;
  --pm-s-7: 48px;
  --pm-s-8: 64px;
  --pm-s-9: 96px;
  --pm-s-10: 128px;
  /* Radius */
  --pm-r-sm: 8px;
  --pm-r-md: 14px;
  --pm-r-lg: 20px;
  --pm-r-xl: 28px;
  --pm-r-2xl: 36px;
  --pm-r-pill: 999px;
  /* Shadow */
  --pm-shadow-1: 0 1px 0 rgba(20,20,20,0.04), 0 1px 2px rgba(20,20,20,0.03);
  --pm-shadow-2: 0 2px 0 rgba(20,20,20,0.04), 0 8px 24px -10px rgba(20,20,20,0.10);
  --pm-shadow-3: 0 4px 0 rgba(20,20,20,0.04), 0 18px 40px -16px rgba(20,20,20,0.15);
  --pm-shadow-lime: 0 12px 28px -10px var(--pm-lime-shadow);
  /* Motion */
  --pm-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --pm-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --pm-dur: 240ms;
  /* Layout */
  --pm-container: 1200px;
  --pm-container-narrow: 880px;
  /* Sparkle SVG */
  --pm-sparkle-lime: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 6 C 55 36, 64 45, 94 50 C 64 55, 55 64, 50 94 C 45 64, 36 55, 6 50 C 36 45, 45 36, 50 6 Z' fill='%23a3dd3a'/></svg>");
}

/* ---- Base ---- */
html {
  color-scheme: only light; /* Tells browsers (esp. Brave/Chrome) NOT to auto-darken */
}

body {
  font-family: var(--pm-font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--pm-text);
  background: radial-gradient(1100px 600px at 10% -10%, rgba(163, 221, 58, 0.1), transparent 60%), radial-gradient(900px 500px at 90% 0%, rgba(82, 71, 229, 0.06), transparent 60%), var(--pm-paper);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  margin: 0;
}

h1, h2, h3, h4, h5 {
  font-family: var(--pm-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}

::selection {
  background: var(--pm-lime);
  color: var(--pm-ink);
}

/* ---- Containers ---- */
.pm-container {
  max-width: var(--pm-container);
  margin: 0 auto;
  padding: 0 var(--pm-s-5);
}

.pm-container-narrow {
  max-width: var(--pm-container-narrow);
  margin: 0 auto;
  padding: 0 var(--pm-s-5);
}

/* ---- Topnav ---- */
.pm-topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 250, 247, 0.85);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--pm-border-faint);
}

.pm-topnav-inner {
  display: flex;
  align-items: center;
  gap: var(--pm-s-5);
  height: 68px;
  max-width: var(--pm-container);
  margin: 0 auto;
  padding: 0 var(--pm-s-5);
}

.pm-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pm-font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--pm-ink);
  text-decoration: none;
  white-space: nowrap;
  min-width: 0;
  flex-shrink: 1;
}

.pm-brand:hover, .pm-brand:visited {
  color: var(--pm-ink);
  text-decoration: none;
}

.pm-brand-mark {
  width: 32px;
  height: 32px;
  display: inline-flex;
  flex-shrink: 0;
}

.pm-brand-mark img {
  width: 100%;
  height: 100%;
}

.pm-brand-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-brand-sub {
  font-weight: 500;
  color: var(--pm-text-mute);
  margin-left: 2px;
}

.pm-spacer {
  flex: 1 1 auto;
  min-width: 0;
}

.pm-topnav form.pm-nav-search {
  display: flex !important;
  align-items: center;
  gap: 10px;
  background: var(--pm-surface) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-r-pill) !important;
  padding: 8px 14px 8px 12px !important;
  width: 320px !important;
  flex-shrink: 0;
  transition: border-color var(--pm-dur) var(--pm-ease-out), box-shadow var(--pm-dur);
}

.pm-nav-search:focus-within {
  border-color: var(--pm-ink);
  box-shadow: 0 0 0 4px rgba(20, 20, 20, 0.06);
}

.pm-nav-search svg {
  width: 16px;
  height: 16px;
  color: var(--pm-text-faint);
  flex-shrink: 0;
}

.pm-nav-search input {
  border: 0;
  background: transparent;
  flex: 1;
  outline: none;
  font-size: 14px;
  font-family: var(--pm-font-body);
  color: var(--pm-ink);
}

.pm-nav-search kbd {
  font-family: var(--pm-font-mono);
  font-size: 11px;
  color: var(--pm-text-faint);
  padding: 2px 6px;
  border: 1px solid var(--pm-border);
  border-radius: 4px;
  background: var(--pm-paper);
}

a.pm-btn-signin {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 9px 18px !important;
  background: var(--pm-ink) !important;
  color: var(--pm-paper) !important;
  border-radius: var(--pm-r-pill) !important;
  text-decoration: none !important;
  white-space: nowrap;
  visibility: visible !important;
  transition: transform var(--pm-dur) var(--pm-ease-spring), background var(--pm-dur);
}

a.pm-btn-signin:hover, a.pm-btn-signin:focus {
  background: var(--pm-ink-soft) !important;
  transform: translateY(-1px);
  text-decoration: none !important;
  color: var(--pm-paper) !important;
}

a.pm-btn-signin:visited {
  color: var(--pm-paper) !important;
}

.pm-menu-mobile {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  color: var(--pm-ink);
  cursor: pointer;
}

.pm-nav-mobile {
  display: none;
}

/* ---- Mobile topnav ---- */
@media (max-width: 760px) {
  .pm-topnav-inner {
    height: 56px;
    padding: 0 var(--pm-s-4);
    gap: var(--pm-s-3);
  }
  .pm-brand {
    font-size: 16px;
    gap: 8px;
  }
  .pm-brand-mark {
    width: 28px;
    height: 28px;
  }
  .pm-btn-signin {
    padding: 8px 14px !important;
    font-size: 13px !important;
    flex-shrink: 0;
  }
}
@media (max-width: 420px) {
  .pm-brand-sub {
    display: none;
  } /* drop "/ Support" on very small screens */
}
/* ---- Mobile hero search ---- */
@media (max-width: 600px) {
  .pm-hero form.pm-hero-search {
    padding: 4px 4px 4px 18px !important;
    gap: 6px;
  }
  .pm-hero .pm-hero-search-icon {
    width: 18px !important;
    height: 18px !important;
  }
  .pm-hero form.pm-hero-search input[type=search] {
    font-size: 16px !important; /* iOS won't zoom-in if ≥16px */
    padding: 12px 4px !important;
    min-width: 0;
  }
  .pm-hero form.pm-hero-search button.pm-hero-search-go {
    padding: 10px 18px !important;
    font-size: 13px !important;
    flex-shrink: 0;
  }
}
/* ---- Hero (home page) ---- */
.pm-hero {
  position: relative;
  padding: var(--pm-s-8) var(--pm-s-5) var(--pm-s-7);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.pm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-r-pill);
  font-family: var(--pm-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pm-text-mute);
}

.pm-eyebrow-dot {
  width: 18px;
  height: 18px;
  background-image: var(--pm-sparkle-lime);
  background-size: contain;
  background-repeat: no-repeat;
}

.pm-hero-title {
  margin: var(--pm-s-5) auto var(--pm-s-4);
  max-width: 14ch;
  font-family: var(--pm-font-display);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--pm-ink);
  font-variation-settings: "opsz" 96;
}

.pm-hero-sub {
  font-size: 18px;
  color: var(--pm-text-mute);
  max-width: 50ch;
  margin: 0 auto var(--pm-s-6);
  line-height: 1.55;
}

.pm-hero-search-wrap {
  max-width: 640px;
  margin: 0 auto;
}

.pm-sprinkle {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  background-image: var(--pm-sparkle-lime);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.7;
}

.pm-sp1 {
  top: 14%;
  left: 10%;
  width: 36px;
  height: 36px;
  transform: rotate(-18deg);
}

.pm-sp2 {
  top: 22%;
  right: 12%;
  width: 22px;
  height: 22px;
  transform: rotate(24deg);
  opacity: 0.6;
}

.pm-sp3 {
  bottom: 14%;
  left: 18%;
  width: 18px;
  height: 18px;
  transform: rotate(8deg);
  opacity: 0.5;
}

.pm-sp4 {
  bottom: 28%;
  right: 8%;
  width: 30px;
  height: 30px;
  transform: rotate(-30deg);
  opacity: 0.7;
}

/* Hero search — hardcoded form, full control */
.pm-hero form.pm-hero-search {
  display: flex !important;
  align-items: center;
  gap: 10px;
  background: var(--pm-surface) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-r-pill) !important;
  padding: 6px 6px 6px 24px !important;
  box-shadow: var(--pm-shadow-2);
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  transition: border-color var(--pm-dur), box-shadow var(--pm-dur), transform var(--pm-dur);
}

.pm-hero form.pm-hero-search:focus-within {
  border-color: var(--pm-ink) !important;
  box-shadow: 0 0 0 6px rgba(20, 20, 20, 0.06), var(--pm-shadow-3) !important;
  transform: translateY(-1px);
}

.pm-hero .pm-hero-search-icon {
  width: 20px !important;
  height: 20px !important;
  color: var(--pm-text-mute);
  flex-shrink: 0;
}

.pm-hero form.pm-hero-search input[type=search] {
  flex: 1;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  font-size: 18px !important;
  font-family: var(--pm-font-body) !important;
  color: var(--pm-ink) !important;
  padding: 16px 14px !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.pm-hero form.pm-hero-search input[type=search]::placeholder {
  color: var(--pm-text-faint) !important;
}

/* Hide the X clear button on webkit search inputs + Copenhagen's JS-injected .clear-button */
.pm-hero form.pm-hero-search input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.pm-hero form.pm-hero-search .clear-button,
.pm-hero form.pm-hero-search button[type=reset] {
  display: none !important;
}

.pm-hero form.pm-hero-search button.pm-hero-search-go,
.pm-hero form.pm-hero-search button[type=submit] {
  background: var(--pm-ink) !important;
  color: var(--pm-paper) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 14px 26px !important;
  border-radius: var(--pm-r-pill) !important;
  border: 0 !important;
  cursor: pointer;
  font-family: var(--pm-font-body) !important;
  transition: background var(--pm-dur);
  text-decoration: none !important;
}

.pm-hero form.pm-hero-search button.pm-hero-search-go:hover {
  background: var(--pm-ink-soft) !important;
}

/* popular chips */
.pm-popular-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: var(--pm-s-5);
}

.pm-popular-label {
  font-size: 14px;
  color: var(--pm-text-faint);
  font-weight: 500;
  align-self: center;
  margin-right: 4px;
}

.pm-popular-chips a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  padding: 6px 14px;
  border-radius: var(--pm-r-pill);
  border: 1px solid var(--pm-border);
  background: var(--pm-surface);
  color: var(--pm-text-mute) !important;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--pm-dur) var(--pm-ease-out);
}

.pm-popular-chips a:hover {
  border-color: var(--pm-ink);
  color: var(--pm-ink) !important;
  transform: translateY(-1px);
  text-decoration: none;
}

.pm-popular-chips a:nth-child(n+6) {
  display: none;
}

/* ---- Sections ---- */
.pm-section {
  padding: var(--pm-s-6) 0;
}

.pm-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: var(--pm-s-5);
  gap: var(--pm-s-5);
}

.pm-section-title {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.pm-section-sub {
  font-size: 14px;
  color: var(--pm-text-mute);
  margin: 6px 0 0;
}

.pm-see-all {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-ink) !important;
  text-decoration: none;
  margin-top: var(--pm-s-4);
}

.pm-see-all:hover {
  color: var(--pm-lime-deep) !important;
  text-decoration: none;
}

/* ---- Category tiles ---- */
.pm-cat-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pm-s-4);
}

@media (max-width: 920px) {
  .pm-cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .pm-cat-grid {
    grid-template-columns: 1fr;
  }
}
.pm-cat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  min-height: 240px;
  padding: var(--pm-s-6);
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-r-lg);
  overflow: hidden;
  text-decoration: none !important;
  transition: transform var(--pm-dur) var(--pm-ease-out), border-color var(--pm-dur), box-shadow var(--pm-dur);
  isolation: isolate;
  color: inherit !important;
}

.pm-cat-tile::before {
  content: "";
  position: absolute;
  inset: auto -20px -30px auto;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--pm-lime-faint);
  opacity: 0;
  transition: opacity var(--pm-dur);
  z-index: -1;
}

.pm-cat-tile:hover {
  border-color: var(--pm-ink);
  transform: translateY(-3px);
  box-shadow: var(--pm-shadow-2);
  text-decoration: none;
}

.pm-cat-tile:hover::before {
  opacity: 1;
}

/* per-tile illustration via :nth-of-type — URLs come from CSS custom properties
   set in document_head.hbs using Zendesk's {{asset}} helper */
.pm-cat-illo {
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: var(--pm-s-5);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 14px;
  flex-shrink: 0;
}

.pm-cat-grid > li:nth-of-type(6n+1) .pm-cat-illo {
  background-image: var(--pm-illo-1);
}

.pm-cat-grid > li:nth-of-type(6n+2) .pm-cat-illo {
  background-image: var(--pm-illo-2);
}

.pm-cat-grid > li:nth-of-type(6n+3) .pm-cat-illo {
  background-image: var(--pm-illo-3);
}

.pm-cat-grid > li:nth-of-type(6n+4) .pm-cat-illo {
  background-image: var(--pm-illo-4);
}

.pm-cat-grid > li:nth-of-type(6n+5) .pm-cat-illo {
  background-image: var(--pm-illo-5);
}

.pm-cat-grid > li:nth-of-type(6n) .pm-cat-illo {
  background-image: var(--pm-illo-6);
}

.pm-cat-grid > li:nth-of-type(6n+1) .pm-cat-tile::before {
  background: var(--pm-lime-faint);
}

.pm-cat-grid > li:nth-of-type(6n+2) .pm-cat-tile::before {
  background: var(--pm-indigo-soft);
}

.pm-cat-grid > li:nth-of-type(6n+3) .pm-cat-tile::before {
  background: #FFF1E5;
}

.pm-cat-grid > li:nth-of-type(6n+4) .pm-cat-tile::before {
  background: #FFE9F0;
}

.pm-cat-grid > li:nth-of-type(6n+5) .pm-cat-tile::before {
  background: var(--pm-lime-faint);
}

.pm-cat-grid > li:nth-of-type(6n+6) .pm-cat-tile::before {
  background: #FFF5D6;
}

.pm-cat-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}

.pm-cat-desc {
  font-size: 14px;
  color: var(--pm-text-mute);
  margin: 0 0 var(--pm-s-4);
  line-height: 1.5;
  flex: 1 1 auto; /* grow to push the meta link down */
  display: -webkit-box;
  -webkit-line-clamp: 3; /* cap at 3 lines, ellipsize the rest */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pm-cat-meta {
  font-size: 12px;
  color: var(--pm-text-faint);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto; /* sticks the BROWSE link to the bottom of the tile */
}

.pm-cat-tile:hover .pm-cat-meta {
  color: var(--pm-ink);
}

/* ---- Article list ---- */
.pm-art-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--pm-border);
}

.pm-art-list li {
  border-bottom: 1px solid var(--pm-border);
}

.pm-art-list a {
  display: flex;
  align-items: center;
  gap: var(--pm-s-4);
  padding: var(--pm-s-5) 0;
  text-decoration: none !important;
  color: var(--pm-ink) !important;
  transition: padding var(--pm-dur) var(--pm-ease-out);
}

.pm-art-list a:hover {
  padding-left: var(--pm-s-3);
}

.pm-art-sparkle {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-image: var(--pm-sparkle-lime);
  background-size: contain;
  background-repeat: no-repeat;
}

.pm-art-title {
  flex: 1;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--pm-ink);
}

.pm-art-arr {
  color: var(--pm-text-faint);
  transition: transform var(--pm-dur) var(--pm-ease-spring), color var(--pm-dur);
}

.pm-art-list a:hover .pm-art-arr {
  transform: translateX(4px);
  color: var(--pm-ink);
}

.pm-art-lock {
  color: var(--pm-text-faint);
}

.pm-pill-promoted {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--pm-r-pill);
  background: var(--pm-lime-faint);
  color: var(--pm-lime-deep);
  letter-spacing: 0.02em;
}

/* ---- CTA band ---- */
.pm-cta-band {
  position: relative;
  margin: var(--pm-s-7) 0 0;
  padding: var(--pm-s-7) var(--pm-s-6);
  background: var(--pm-ink);
  color: #FAFAF7;
  border-radius: var(--pm-r-2xl);
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}

.pm-cta-band::before, .pm-cta-band::after {
  content: "";
  position: absolute;
  background-image: var(--pm-sparkle-lime);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: -1;
  opacity: 0.85;
}

.pm-cta-band::before {
  top: -30px;
  right: 6%;
  width: 80px;
  height: 80px;
  transform: rotate(-15deg);
}

.pm-cta-band::after {
  bottom: 24px;
  left: 8%;
  width: 48px;
  height: 48px;
  transform: rotate(20deg);
}

.pm-cta-pre {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pm-lime);
  margin-bottom: var(--pm-s-4);
}

.pm-cta-title {
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 auto var(--pm-s-4);
  max-width: 18ch;
  color: #FAFAF7;
}

.pm-cta-sub {
  font-size: 18px;
  color: rgba(250, 250, 247, 0.7);
  margin: 0 auto var(--pm-s-6);
  max-width: 48ch;
}

.pm-cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- Buttons ---- */
.pm-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--pm-r-pill);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none !important;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--pm-dur) var(--pm-ease-spring), background var(--pm-dur), box-shadow var(--pm-dur);
}

.pm-btn-primary {
  background: var(--pm-ink);
  color: var(--pm-paper) !important;
}

.pm-btn-primary:hover {
  background: var(--pm-ink-soft);
  transform: translateY(-1px);
  box-shadow: var(--pm-shadow-2);
}

.pm-btn-lime {
  background: var(--pm-lime);
  color: var(--pm-ink) !important;
}

.pm-btn-lime:hover {
  background: var(--pm-lime-bright);
  transform: translateY(-1px);
  box-shadow: var(--pm-shadow-lime);
}

.pm-btn-ghost {
  background: transparent;
  color: #FAFAF7 !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.pm-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.4);
}

.pm-btn-lg {
  padding: 16px 28px;
  font-size: 16px;
}

/* ---- Breadcrumb (Zendesk renders <ol class="breadcrumbs">) ---- */
.pm-breadcrumb {
  font-size: 14px;
  color: var(--pm-text-mute);
  margin-bottom: var(--pm-s-5);
}

.pm-breadcrumb ol, .pm-breadcrumb .breadcrumbs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pm-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pm-breadcrumb li + li::before {
  content: "/";
  color: var(--pm-text-faint);
  margin-right: 8px;
}

.pm-breadcrumb a {
  color: var(--pm-text-mute) !important;
  text-decoration: none;
  transition: color var(--pm-dur);
}

.pm-breadcrumb a:hover {
  color: var(--pm-ink) !important;
}

.pm-breadcrumb .current, .pm-breadcrumb li[aria-current=page] {
  color: var(--pm-ink);
  font-weight: 500;
}

/* ---- Sub-hero (used by category, section, article, new_request) ---- */
.pm-sub-hero {
  padding: var(--pm-s-7) 0 var(--pm-s-6);
  border-bottom: 1px solid var(--pm-border);
  margin-bottom: var(--pm-s-7);
}

.pm-cat-hero {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: var(--pm-s-7);
  align-items: end;
}

@media (max-width: 700px) {
  .pm-cat-hero {
    grid-template-columns: 1fr;
  }
  .pm-cat-hero-illo {
    display: none;
  }
}
.pm-cat-hero-title {
  font-size: clamp(36px, 5.5vw, 60px);
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: var(--pm-s-3) 0;
  max-width: 16ch;
}

.pm-cat-hero-desc {
  font-size: 18px;
  color: var(--pm-text-mute);
  max-width: 50ch;
  margin: var(--pm-s-3) 0 0;
  line-height: 1.55;
}

.pm-cat-hero-illo {
  position: relative;
  width: 200px;
  height: 200px;
  justify-self: end;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 14px 22px rgba(20, 20, 20, 0.15));
}

/* fallback: use sending-money illustration if no other matches */
.pm-cat-hero-illo {
  background-image: url("illo-sending-money.png");
}

/* ---- Category page body (sidebar + main grid) ---- */
.pm-cat-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--pm-s-8);
  padding-bottom: var(--pm-s-9);
  align-items: start;
}

.pm-contact-body {
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: var(--pm-s-9);
}

@media (max-width: 900px) {
  .pm-cat-body {
    grid-template-columns: 1fr;
  }
  /* On mobile: kill sticky positioning (was overlapping main content on scroll).
     Also reorder so main content comes first (sidebar after — secondary nav). */
  .pm-cat-body .pm-side-nav,
  .pm-article-body .pm-article-side {
    position: static !important;
    top: auto !important;
    order: 2;
    margin-top: var(--pm-s-6);
    padding-top: var(--pm-s-5);
    border-top: 1px solid var(--pm-border);
  }
  .pm-cat-body .pm-cat-main,
  .pm-article-body .pm-article-content {
    order: 1;
  }
}
/* ---- Side nav ---- */
.pm-side-nav {
  position: sticky;
  top: 96px;
  font-size: 14px;
}

.pm-side-group {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pm-text-faint);
  margin: var(--pm-s-5) 0 var(--pm-s-3);
}

.pm-side-group:first-child {
  margin-top: 0;
}

.pm-side-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pm-side-nav li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px 7px 14px;
  border-radius: var(--pm-r-sm);
  color: var(--pm-text-mute) !important;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  transition: background var(--pm-dur), color var(--pm-dur);
  margin-bottom: 2px;
}

.pm-side-nav li a:hover {
  color: var(--pm-ink) !important;
  background: var(--pm-paper-warm);
  text-decoration: none;
}

.pm-side-nav li a.current {
  color: var(--pm-ink) !important;
  background: var(--pm-lime-faint);
  font-weight: 600;
}

.pm-side-nav li a.current::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--pm-lime);
  border-radius: 2px;
}

.pm-side-count {
  font-family: var(--pm-font-mono);
  font-size: 11px;
  color: var(--pm-text-faint);
}

/* Sidebar primary CTA — matches regular nav link style for visual consistency.
   Just slightly bolder + ink color (instead of muted gray) to mark it as the primary
   action in the list, without the highlighted pill treatment that felt too loud. */
.pm-side-nav li a.pm-side-cta,
.pm-side-nav .pm-side-cta,
.pm-side-nav li a.pm-side-cta:visited,
.pm-side-nav li a.pm-side-cta:link {
  color: var(--pm-ink) !important;
  font-weight: 600 !important;
  background: transparent !important;
}

.pm-side-nav li a.pm-side-cta::before {
  display: none !important; /* hide the "current" accent bar */
}

.pm-side-nav li a.pm-side-cta:hover,
.pm-side-nav li a.pm-side-cta:focus {
  color: var(--pm-lime-deep) !important;
  background: var(--pm-paper-warm) !important;
}

/* Sidebar SECONDARY CTA (e.g., "← Back to all topics") — even more subtle */
.pm-side-nav li a.pm-side-cta-alt,
.pm-side-nav .pm-side-cta-alt {
  color: var(--pm-text-mute) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

.pm-side-nav li a.pm-side-cta-alt:hover {
  color: var(--pm-ink) !important;
}

/* ---- Sub-topic grid (category page) ---- */
.pm-h-sub {
  font-family: var(--pm-font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 var(--pm-s-4);
}

.pm-h-sub a {
  color: inherit !important;
  text-decoration: none;
}

.pm-h-sub a:hover {
  color: var(--pm-lime-deep) !important;
}

.pm-subtopic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--pm-s-3);
  margin-bottom: var(--pm-s-7);
}

@media (max-width: 600px) {
  .pm-subtopic-grid {
    grid-template-columns: 1fr;
  }
}
.pm-subtopic {
  padding: var(--pm-s-4) var(--pm-s-5);
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-r-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none !important;
  color: inherit !important;
  transition: all var(--pm-dur);
}

.pm-subtopic:hover {
  border-color: var(--pm-ink);
  transform: translateY(-1px);
  box-shadow: var(--pm-shadow-1);
}

.pm-subtopic strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
}

.pm-subtopic span {
  font-size: 14px;
  color: var(--pm-text-mute);
}

.pm-subtopic-count {
  font-family: var(--pm-font-mono);
  font-size: 12px;
  color: var(--pm-text-faint);
}

.pm-section-block {
  margin-bottom: var(--pm-s-7);
}

/* ---- Article page ---- */
.pm-article-hero {
  margin-bottom: 0;
}

.pm-article-title {
  font-size: clamp(32px, 5vw, 56px);
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: var(--pm-s-3) 0;
  max-width: 22ch;
  color: var(--pm-ink);
}

.pm-article-meta {
  display: flex;
  align-items: center;
  gap: var(--pm-s-3);
  font-size: 14px;
  color: var(--pm-text-mute);
  margin-top: var(--pm-s-4);
  flex-wrap: wrap;
}

.pm-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--pm-r-pill);
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--pm-ink);
}

.pm-pill-fresh {
  background: var(--pm-lime-faint);
  border-color: var(--pm-lime);
  color: var(--pm-ink);
}

.pm-meta-sep {
  color: var(--pm-text-faint);
}

.pm-article-body {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--pm-s-8);
  padding-top: var(--pm-s-7);
  padding-bottom: var(--pm-s-9);
  align-items: start;
}

@media (max-width: 900px) {
  .pm-article-body {
    grid-template-columns: 1fr;
  }
}
.pm-article-side {
  font-size: 14px;
}

/* ---- Prose (article body — content from Zendesk WYSIWYG) ---- */
.pm-prose {
  font-size: 18px;
  line-height: 1.7;
  color: var(--pm-ink-soft);
}

.pm-prose h2 {
  font-size: 32px;
  margin: var(--pm-s-7) 0 var(--pm-s-4);
  letter-spacing: -0.015em;
}

.pm-prose h3 {
  font-size: 24px;
  margin: var(--pm-s-6) 0 var(--pm-s-3);
}

.pm-prose h4 {
  font-size: 18px;
  font-weight: 700;
  margin: var(--pm-s-5) 0 var(--pm-s-2);
}

.pm-prose p {
  margin: 0 0 var(--pm-s-4);
}

.pm-prose ul, .pm-prose ol {
  margin: 0 0 var(--pm-s-4);
  padding-left: 0;
}

/* Common list-item base — applies to any nesting depth */
.pm-prose ul > li, .pm-prose ol > li {
  list-style: none;
  position: relative;
  margin-bottom: var(--pm-s-3);
}

/* Sparkle bullet — ONLY direct children of <ul>, so nested <ul> inside <ol> still gets sparkles
   (instead of inheriting the OL counter) */
.pm-prose ul > li {
  padding-left: 28px;
}

.pm-prose ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.65em;
  width: 12px;
  height: 12px;
  background-image: var(--pm-sparkle-lime);
  background-size: contain;
  background-repeat: no-repeat;
}

/* Numbered circle — ONLY direct children of <ol>. Nested <ul> children won't get the counter. */
.pm-prose ol {
  counter-reset: step;
}

.pm-prose ol > li {
  padding-left: 44px;
  counter-increment: step;
}

.pm-prose ol > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  background: var(--pm-ink);
  color: var(--pm-paper);
  border-radius: var(--pm-r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pm-font-mono);
  font-size: 12px;
  font-weight: 700;
}

/* Nested lists: give a little vertical breathing room */
.pm-prose li > ul,
.pm-prose li > ol {
  margin: var(--pm-s-3) 0 0;
}

.pm-prose code {
  font-family: var(--pm-font-mono);
  font-size: 0.88em;
  background: var(--pm-surface-sunken);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--pm-border-faint);
  color: var(--pm-ink);
}

.pm-prose pre {
  font-family: var(--pm-font-mono);
  font-size: 14px;
  background: var(--pm-ink);
  color: var(--pm-lime);
  padding: var(--pm-s-5);
  border-radius: var(--pm-r-md);
  overflow-x: auto;
}

.pm-prose a {
  color: var(--pm-ink) !important;
  border-bottom: 2px solid var(--pm-lime);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--pm-dur);
}

.pm-prose a:hover {
  background: var(--pm-lime-faint);
}

.pm-prose strong {
  color: var(--pm-ink);
  font-weight: 700;
}

/* ---- Images in article body ----
   Default: block-level, LEFT-aligned (not centered), no float, no text-wrap.
   Left-aligned default keeps lone-paragraph icons next to the left margin
   where they read as icons-above-headings, not floating in the middle.
   Rounded corners on, NO border (writers don't want auto-added gray outlines). ---- */
.pm-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--pm-r-md);
  border: 0;
  margin: var(--pm-s-5) 0;
  float: none !important; /* override inline style="float:left" from WYSIWYG */
  clear: both;
}

/* If a writer explicitly centers an image (WYSIWYG "align center"), respect it.
   Most WYSIWYGs produce `text-align: center` on the parent <p>, which we honor
   by using inline-block when the parent declares centering. */
.pm-prose p[style*="text-align: center"] img,
.pm-prose p[style*="text-align:center"] img,
.pm-prose [align=center] img {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

/* ===== CKEditor image widgets — single source of truth for icon vs content =====
   CKEditor (the Zendesk WYSIWYG) outputs two clearly-tagged widget classes:
     <span class="image-inline">…</span>  ← icon — render small + inline
     <figure class="image">…</figure>     ← content — render full-size + block
   Anywhere either of these appears, we style by the class, not by where it lives
   in the DOM. This avoids breaking content images that happen to be inside (or
   near) a heading. */
/* ===== Zendesk's PUBLISHED HTML for sized icons =====
   On save, Zendesk strips CKEditor's <span class="image-inline"> wrapper and
   replaces it with a bare <img class="wysiwyg-image-resized"> element with
   the writer's chosen width/aspect-ratio baked into the img's inline style.
   We target the published class directly. */
.pm-prose img.wysiwyg-image-resized,
.pm-prose :is(h1, h2, h3, h4, h5, h6) img.wysiwyg-image-resized {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 var(--pm-s-3) 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  max-height: none !important;
  /* DO NOT set width — writer's inline style="width:Npx" sticks */
}

/* Keep the editor-preview class targeted too, in case the editor is rendered
   via the same theme (or Zendesk doesn't always strip it). */
.pm-prose span.image-inline,
.pm-prose .image-inline,
.pm-prose .image-inline.ck-widget {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 var(--pm-s-3) 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  max-width: 96px !important;
  max-height: none !important;
  overflow: visible !important;
  height: auto !important;
}

.pm-prose .image-inline > img,
.pm-prose .image-inline img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Block content image widget — full size, no constraints, no border.
   Default LEFT-align, but honor CKEditor's alignment classes + Zendesk's
   wysiwyg-image-align-* classes + parent <p style="text-align: center"> intent. */
.pm-prose figure.image {
  display: block;
  margin: var(--pm-s-5) 0;
  text-align: left;
  max-width: 100%;
}

.pm-prose figure.image img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: var(--pm-r-md);
}

/* ---- CKEditor image alignment classes ----
   CKEditor sets one of these when the writer picks Center / Left / Right.
   Zendesk preserves them in the published HTML. */
.pm-prose figure.image.image-style-align-center,
.pm-prose figure.image.image-style-block-align-center,
.pm-prose figure.image.image_resized.image-style-align-center {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.pm-prose figure.image.image-style-align-center img,
.pm-prose figure.image.image-style-block-align-center img {
  margin-left: auto;
  margin-right: auto;
}

.pm-prose figure.image.image-style-align-right,
.pm-prose figure.image.image-style-block-align-right {
  margin-left: auto !important;
  margin-right: 0 !important;
  text-align: right !important;
}

.pm-prose figure.image.image-style-align-right img,
.pm-prose figure.image.image-style-block-align-right img {
  margin-left: auto;
  margin-right: 0;
}

.pm-prose figure.image.image-style-align-left,
.pm-prose figure.image.image-style-block-align-left {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

/* ---- Zendesk's published alignment markers (when CKEditor classes get stripped) ----
   Zendesk sometimes wraps centered images in <p style="text-align: center">
   instead of preserving figure.image.image-style-align-center.
   `width: auto` is critical — forces browser to use the image's HTML width attribute
   instead of any inherited container constraint that might shrink it. */
.pm-prose p[style*="text-align: center"] img,
.pm-prose p[style*="text-align:center"] img,
.pm-prose p.wysiwyg-text-align-center img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

.pm-prose p[style*="text-align: right"] img,
.pm-prose p[style*="text-align:right"] img,
.pm-prose p.wysiwyg-text-align-right img {
  margin-left: auto !important;
  margin-right: 0 !important;
  display: block !important;
}

/* Honor the parent <p>'s text-align for inline-rendered figure.image */
.pm-prose p[style*=text-align] figure.image,
.pm-prose div[style*=text-align] figure.image {
  text-align: inherit !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Headings: keep CKEditor wrapper inline (strong/em/a/etc.) so the icon flows
   beside the text instead of breaking to its own line. */
.pm-prose :is(h1, h2, h3, h4, h5, h6) :is(strong, em, b, i, a) {
  display: inline !important;
}

/* ===== Fallback for non-CKEditor markup =====
   For plain <h2><img>Title</h2> (writer typed image at start of heading without
   using a CKEditor widget), render as an inline icon. Narrower selector — only
   targets img as DIRECT first child of heading, won't catch content images
   that happen to be inside a heading via deeper nesting. */
.pm-prose h1 > img:first-child,
.pm-prose h2 > img:first-child,
.pm-prose h3 > img:first-child,
.pm-prose h4 > img:first-child,
.pm-prose h5 > img:first-child,
.pm-prose h6 > img:first-child {
  display: inline-block;
  vertical-align: middle;
  margin: 0 var(--pm-s-3) 0 0;
  width: auto;
  height: auto;
  max-height: 1.4em;
  max-width: 56px;
  border: 0;
  float: none !important;
}

/* Pattern B: image alone in a <p> that's immediately followed by a heading.
   Render as a small left-aligned icon stacked tight above the heading
   (instead of a centered block image). Recommend writers use Pattern A for inline. */
.pm-prose p:has(> img:only-child):has(+ :is(h1, h2, h3, h4, h5, h6)) {
  text-align: left;
  margin: var(--pm-s-5) 0 4px;
  line-height: 0;
}

.pm-prose p:has(> img:only-child):has(+ :is(h1, h2, h3, h4, h5, h6)) > img {
  display: inline-block;
  max-height: 40px;
  max-width: 56px;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 6px;
}

.pm-prose p:has(> img:only-child) + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: var(--pm-s-2);
}

/* If the writer leaves an empty paragraph that only wraps an icon image
   (a common WYSIWYG side-effect), center it cleanly */
.pm-prose p:has(> img:only-child) {
  text-align: center;
  margin: var(--pm-s-5) 0;
}

/* Make sure any paragraph that follows an image starts on a clean line */
.pm-prose p {
  clear: both;
}

/* ---- Blockquote — DUAL STYLE based on content density.
   - Compact left-border italic by default (short refs like "See: …", quoted lines).
   - Auto-promotes to chunky lime card when content is multi-paragraph or contains
     lists/headings/images (visual weight matches the content density).
   - Writer can force chunky via class="callout" for single-paragraph callouts. ---- */
.pm-prose blockquote {
  display: block;
  margin: var(--pm-s-2) 0;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--pm-border-strong);
  background: transparent;
  font-style: italic;
  color: var(--pm-text-mute);
  border-radius: 0;
  font-size: 16px;
  line-height: 1.55;
}

.pm-prose blockquote p {
  margin: 0;
}

.pm-prose blockquote + blockquote {
  margin-top: var(--pm-s-2); /* tighten when stacked */
}

.pm-prose blockquote:hover {
  border-left-color: var(--pm-lime);
  transition: border-left-color var(--pm-dur);
}

/* Auto-promote chunky lime card when content density justifies it */
.pm-prose blockquote:has(> p ~ p),
.pm-prose blockquote:has(> ul),
.pm-prose blockquote:has(> ol),
.pm-prose blockquote:has(> h1),
.pm-prose blockquote:has(> h2),
.pm-prose blockquote:has(> h3),
.pm-prose blockquote:has(> h4),
.pm-prose blockquote:has(> img),
.pm-prose blockquote:has(> figure),
.pm-prose blockquote:has(> table),
.pm-prose blockquote.callout,
.pm-prose .callout { /* <div class="callout">…</div> */
  display: block !important;
  margin: var(--pm-s-5) 0 !important;
  padding: var(--pm-s-5) !important;
  border-radius: var(--pm-r-md) !important;
  background: var(--pm-lime-faint) !important;
  border: 1px solid var(--pm-lime-soft) !important;
  border-left: 1px solid var(--pm-lime-soft) !important; /* override compact 3px border */
  font-style: normal !important;
  color: var(--pm-ink) !important;
  line-height: 1.6 !important;
}

.pm-prose blockquote:has(> p ~ p) > p,
.pm-prose blockquote.callout > p,
.pm-prose .callout > p {
  margin: 0 0 var(--pm-s-3) !important;
}

.pm-prose blockquote:has(> p ~ p) > p:last-child,
.pm-prose blockquote.callout > p:last-child,
.pm-prose .callout > p:last-child {
  margin: 0 !important;
}

.pm-prose .callout.warn {
  background: #FFF6E6 !important;
  border-color: #FAD58A !important;
}

/* Fallback for browsers without :has() support — keep explicit .callout working. */
@supports not (selector(:has(*))) {
  .pm-prose blockquote.callout,
  .pm-prose .callout {
    display: block;
    margin: var(--pm-s-5) 0;
    padding: var(--pm-s-5);
    border-radius: var(--pm-r-md);
    background: var(--pm-lime-faint);
    border: 1px solid var(--pm-lime-soft);
    font-style: normal;
    color: var(--pm-ink);
    line-height: 1.6;
  }
}
/* ---- Accordion / collapsible panels in article body ----
   Handles three markup patterns Zendesk's WYSIWYG may produce:
   1. Native HTML <details>/<summary> (modern Tiptap-based editor)
   2. <details data-collapsable="true"> (Zendesk WYSIWYG specific)
   3. <div class="collapsible"> with <h2/h3 class="collapsible-title"> + .collapsible-content (legacy)
   For class-based variants, see the small JS shim in document_head.hbs that adds .is-open toggle. */
.pm-prose details,
.pm-prose .collapsible {
  display: block;
  margin: var(--pm-s-4) 0;
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-r-md);
  overflow: hidden;
  transition: border-color var(--pm-dur), box-shadow var(--pm-dur);
}

.pm-prose details:hover,
.pm-prose .collapsible:hover {
  border-color: var(--pm-border-strong);
}

.pm-prose details[open],
.pm-prose .collapsible.is-open {
  border-color: var(--pm-lime-deep);
  box-shadow: var(--pm-shadow-1);
}

/* Summary / title row — the clickable heading */
.pm-prose details > summary,
.pm-prose .collapsible > .collapsible-title,
.pm-prose .collapsible > h2:first-child,
.pm-prose .collapsible > h3:first-child,
.pm-prose .collapsible > h4:first-child {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pm-s-4);
  padding: var(--pm-s-4) var(--pm-s-5);
  margin: 0;
  font-family: var(--pm-font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--pm-ink);
  background: var(--pm-surface);
  transition: background var(--pm-dur);
  user-select: none;
}

.pm-prose details > summary::-webkit-details-marker {
  display: none;
}

.pm-prose details > summary::marker {
  content: "";
  display: none;
}

.pm-prose details > summary:hover,
.pm-prose .collapsible > .collapsible-title:hover,
.pm-prose .collapsible.is-open > .collapsible-title,
.pm-prose details[open] > summary {
  background: var(--pm-lime-faint);
}

/* Chevron indicator — rotates 180° when open */
.pm-prose details > summary::after,
.pm-prose .collapsible > .collapsible-title::after,
.pm-prose .collapsible > h2:first-child::after,
.pm-prose .collapsible > h3:first-child::after,
.pm-prose .collapsible > h4:first-child::after {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6,9 12,15 18,9'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform var(--pm-dur) var(--pm-ease-spring);
}

.pm-prose details[open] > summary::after,
.pm-prose .collapsible.is-open > .collapsible-title::after,
.pm-prose .collapsible.is-open > h2:first-child::after,
.pm-prose .collapsible.is-open > h3:first-child::after,
.pm-prose .collapsible.is-open > h4:first-child::after {
  transform: rotate(180deg);
}

/* Content area — everything inside the details/collapsible that isn't the summary/title */
.pm-prose details > *:not(summary),
.pm-prose .collapsible > .collapsible-content,
.pm-prose .collapsible > *:not(.collapsible-title):not(h2):not(h3):not(h4) {
  padding: 0 var(--pm-s-5) var(--pm-s-4);
  border-top: 1px solid var(--pm-border-faint);
  font-size: 16px;
  line-height: 1.65;
  color: var(--pm-ink-soft);
}

/* Restore prose paragraph styling inside accordion content */
.pm-prose details > *:not(summary):first-of-type,
.pm-prose .collapsible > .collapsible-content > *:first-child {
  padding-top: var(--pm-s-4);
}

.pm-prose details p,
.pm-prose .collapsible-content p {
  margin: 0 0 var(--pm-s-3);
}

.pm-prose details p:last-child,
.pm-prose .collapsible-content p:last-child {
  margin-bottom: 0;
}

/* Strip the top-border from <p> inside accordion since the wrapper already has it */
.pm-prose details > p,
.pm-prose .collapsible > p {
  border-top: 0;
}

/* Class-based collapsibles start closed; CSS hides content until JS adds .is-open */
.pm-prose .collapsible:not(.is-open) > .collapsible-content,
.pm-prose .collapsible:not(.is-open) > *:not(.collapsible-title):not(h2):not(h3):not(h4) {
  display: none;
}

/* ---- Adjacent-sibling accordion pattern (PayMoji team's preferred markup):
   <div class="accordion"><h3>Question</h3></div>
   <div class="panel"><p>Answer</p></div>
   The .accordion is the clickable header; the immediately-following .panel is the content. ---- */
.pm-prose .accordion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pm-s-4);
  padding: var(--pm-s-4) var(--pm-s-5);
  margin: var(--pm-s-4) 0 0;
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-r-md);
  cursor: pointer;
  user-select: none;
  transition: background var(--pm-dur), border-color var(--pm-dur), border-radius var(--pm-dur);
}

.pm-prose .accordion:hover {
  background: var(--pm-lime-faint);
  border-color: var(--pm-border-strong);
}

.pm-prose .accordion h2,
.pm-prose .accordion h3,
.pm-prose .accordion h4 {
  margin: 0;
  font-family: var(--pm-font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--pm-ink);
  flex: 1 1 auto;
  line-height: 1.4;
}

.pm-prose .accordion::after {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6,9 12,15 18,9'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform var(--pm-dur) var(--pm-ease-spring);
}

.pm-prose .accordion.is-open {
  background: var(--pm-lime-faint);
  border-color: var(--pm-lime-deep);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.pm-prose .accordion.is-open::after {
  transform: rotate(180deg);
}

/* The .panel sits as a sibling RIGHT AFTER .accordion. Hidden by default, shown when the
   preceding accordion has .is-open. Visually attached: no top border, shared bottom-radius. */
.pm-prose .panel {
  display: none;
  padding: var(--pm-s-4) var(--pm-s-5);
  margin: 0 0 var(--pm-s-4);
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-top: 0;
  border-radius: 0 0 var(--pm-r-md) var(--pm-r-md);
}

.pm-prose .accordion.is-open + .panel {
  display: block;
  border-color: var(--pm-lime-deep);
}

.pm-prose .panel p {
  margin: 0 0 var(--pm-s-3);
  font-size: 16px;
  line-height: 1.65;
  color: var(--pm-ink-soft);
}

.pm-prose .panel p:last-child {
  margin: 0;
}

.pm-prose .panel a {
  color: var(--pm-ink) !important;
  border-bottom: 2px solid var(--pm-lime);
  font-weight: 600;
  text-decoration: none;
}

.pm-prose .panel a:hover {
  background: var(--pm-lime-faint);
}

/* Prose default bullet sparkle styling carries through for ul/ol inside .panel — no override needed */
/* ---- Attachments & content tags ---- */
.pm-attachments {
  margin: var(--pm-s-6) 0;
  padding: var(--pm-s-5);
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-r-md);
}

.pm-attachments h3 {
  font-size: 16px;
  margin-bottom: var(--pm-s-3);
}

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

.pm-attachments li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
}

.pm-attachments li svg {
  color: var(--pm-text-faint);
}

.pm-attachments li a {
  color: var(--pm-ink);
  border-bottom: 1px solid var(--pm-border);
}

.pm-att-size {
  font-family: var(--pm-font-mono);
  font-size: 12px;
  color: var(--pm-text-faint);
  margin-left: auto;
}

.pm-content-tags {
  margin: var(--pm-s-6) 0;
  padding-top: var(--pm-s-5);
  border-top: 1px solid var(--pm-border);
}

.pm-content-tags-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pm-text-faint);
  margin-bottom: 8px;
  display: block;
}

.pm-content-tags ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pm-content-tags li a {
  display: inline-block;
  padding: 4px 12px;
  background: var(--pm-lime-faint);
  border-radius: var(--pm-r-pill);
  color: var(--pm-ink);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--pm-lime-soft);
}

.pm-content-tags li a:hover {
  background: var(--pm-lime);
  border-color: var(--pm-lime);
}

/* ---- Helpful widget (replaces Zendesk's article-votes) ---- */
.pm-helpful, .article-votes {
  margin: var(--pm-s-7) 0;
  padding: var(--pm-s-6);
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-r-lg);
  display: flex;
  align-items: center;
  gap: var(--pm-s-5);
  flex-wrap: wrap;
}

.pm-helpful-q, .article-votes-question {
  font-family: var(--pm-font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--pm-ink);
  margin: 0;
  flex: 1;
}

.pm-helpful-actions, .article-votes-controls {
  display: flex;
  gap: 10px;
}

.pm-vote, .article-vote, button.article-vote {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 80px !important;
  width: auto !important;
  height: auto !important;
  padding: 11px 22px !important;
  background: var(--pm-surface) !important;
  border: 1.5px solid var(--pm-border-strong) !important;
  border-radius: var(--pm-r-pill) !important;
  font-family: var(--pm-font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--pm-ink) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: transform 200ms var(--pm-ease-spring), background var(--pm-dur), border-color var(--pm-dur) !important;
}

.pm-vote svg, .article-vote svg {
  display: none !important;
}

.pm-vote-up:hover, .article-vote-up:hover {
  background: var(--pm-lime-faint) !important;
  border-color: var(--pm-lime-deep) !important;
  transform: translateY(-1px);
}

.pm-vote-down:hover, .article-vote-down:hover {
  background: #FFEFEC !important;
  border-color: #d35a4a !important;
  transform: translateY(-1px);
}

.pm-vote-selected, button.article-vote.button-primary, .split-button button.article-vote:hover, .section-subscribe button.article-vote[data-selected=true], .article-subscribe button.article-vote[data-selected=true], .requests-table-toolbar .organization-subscribe button.article-vote[data-selected=true], .subscriptions-subscribe button.article-vote[data-selected=true] {
  background: var(--pm-ink) !important;
  color: var(--pm-lime) !important;
  border-color: var(--pm-ink) !important;
}

.pm-helpful-count, .article-votes-count, small.article-votes-count {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--pm-text-faint);
  font-family: var(--pm-font-mono);
  text-align: right;
  margin-top: 4px;
  letter-spacing: 0.02em;
}

/* Hide Submit a ticket button when already on /hc/requests/new */
.pm-on-new-request a.pm-btn-signin {
  display: none !important;
}

/* ---- Sparkle divider ---- */
.pm-sparkle-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--pm-text-faint);
  margin: var(--pm-s-7) 0;
}

.pm-sparkle-line {
  flex: 1;
  height: 1px;
  background: var(--pm-border);
}

.pm-sparkle-sp {
  width: 14px;
  height: 14px;
  background-image: var(--pm-sparkle-lime);
  background-size: contain;
  background-repeat: no-repeat;
}

.pm-related-h {
  font-family: var(--pm-font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 var(--pm-s-4);
}

/* ---- Related articles (Zendesk renders <section class="related-articles"><h3>Related articles</h3><ul>…</ul></section>) ---- */
.recent-articles,
.related-articles {
  margin-top: var(--pm-s-8);
}

.recent-articles h3,
.related-articles h3 {
  font-family: var(--pm-font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--pm-ink);
  margin: 0 0 var(--pm-s-5);
}

.recent-articles ul,
.related-articles ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--pm-border);
}

.recent-articles li,
.related-articles li {
  border-bottom: 1px solid var(--pm-border);
}

.recent-articles li a,
.related-articles li a {
  display: block;
  padding: var(--pm-s-4) 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--pm-ink) !important;
  text-decoration: none;
  letter-spacing: -0.015em;
  border: 0 !important;
  transition: padding var(--pm-dur), color var(--pm-dur);
}

.recent-articles li a:hover,
.related-articles li a:hover {
  color: var(--pm-lime-deep) !important;
  padding-left: var(--pm-s-2);
}

/* ---- Contact / new request page ---- */
.pm-reply-banner {
  display: flex;
  align-items: center;
  gap: var(--pm-s-4);
  padding: var(--pm-s-4) var(--pm-s-5);
  background: var(--pm-ink);
  color: var(--pm-paper);
  border-radius: var(--pm-r-md);
  margin-bottom: var(--pm-s-6);
}

.pm-reply-clock {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pm-lime);
  color: var(--pm-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pm-reply-clock svg {
  width: 20px;
  height: 20px;
}

.pm-reply-banner strong {
  display: block;
  font-size: 16px;
  margin-bottom: 2px;
  font-family: var(--pm-font-body);
}

.pm-reply-banner span {
  font-size: 14px;
  color: rgba(250, 250, 247, 0.7);
}

.pm-form-wrap {
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-r-lg);
  padding: var(--pm-s-6);
}

/* ---- Zendesk's React new-request-form: light-touch overrides only ---- */
/* Wrap the form in a soft card; let Garden components render naturally inside */
.pm-form-wrap {
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-r-lg);
  padding: var(--pm-s-6);
  box-shadow: var(--pm-shadow-1);
}

/* Match typography but don't fight Garden's layout */
.pm-form-wrap, .pm-form-wrap * {
  font-family: var(--pm-font-body);
}

/* Submit button — keep it on brand, but don't break Garden's internal structure */
.pm-form-wrap button[type=submit] {
  background: var(--pm-lime) !important;
  color: var(--pm-ink) !important;
  font-weight: 600 !important;
  border: 0 !important;
  border-radius: var(--pm-r-pill) !important;
}

.pm-form-wrap button[type=submit]:hover {
  background: var(--pm-lime-bright) !important;
}

/* ---- Trust row ---- */
.pm-trust-row {
  margin-top: var(--pm-s-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pm-s-3);
}

@media (max-width: 700px) {
  .pm-trust-row {
    grid-template-columns: 1fr;
  }
}
.pm-trust-item {
  padding: var(--pm-s-4);
  background: var(--pm-surface);
  border: 1px solid var(--pm-border-faint);
  border-radius: var(--pm-r-md);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.pm-trust-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--pm-r-sm);
  background: var(--pm-lime-faint);
  color: var(--pm-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pm-trust-icon svg {
  width: 16px;
  height: 16px;
}

.pm-trust-item strong {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
  font-family: var(--pm-font-body);
  font-weight: 700;
}

.pm-trust-item span {
  font-size: 12px;
  color: var(--pm-text-mute);
  line-height: 1.5;
}

/* ---- Comments ---- */
.pm-comments {
  margin-top: var(--pm-s-8);
  padding-top: var(--pm-s-7);
  border-top: 1px solid var(--pm-border);
}

.pm-comments h2 {
  font-size: 24px;
  margin-bottom: var(--pm-s-2);
}

.pm-comments-count {
  font-size: 14px;
  color: var(--pm-text-mute);
  margin-bottom: var(--pm-s-5);
}

.pm-comment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pm-comment {
  padding: var(--pm-s-5) 0;
  border-bottom: 1px solid var(--pm-border-faint);
}

.pm-comment-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--pm-s-3);
}

.pm-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.pm-comment-author strong {
  font-size: 14px;
}

.pm-comment-author strong a {
  color: var(--pm-ink) !important;
}

.pm-comment-date {
  font-size: 12px;
  color: var(--pm-text-faint);
  display: block;
}

.pm-comment-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--pm-ink-soft);
}

.pm-comment-form-inner {
  margin-top: var(--pm-s-5);
  padding: var(--pm-s-5);
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-r-md);
}

/* ---- Pagination (Zendesk renders <nav class="pagination">) ---- */
.pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: var(--pm-s-6) 0;
}

.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--pm-r-sm);
  border: 1px solid var(--pm-border);
  background: var(--pm-surface);
  color: var(--pm-text-mute) !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--pm-dur);
}

.pagination a:hover {
  border-color: var(--pm-ink);
  color: var(--pm-ink) !important;
}

.pagination .current, .pagination [aria-current=page] {
  background: var(--pm-ink) !important;
  color: var(--pm-paper) !important;
  border-color: var(--pm-ink);
}

/* ---- Footer ---- */
.pm-footer {
  margin-top: var(--pm-s-10);
  padding: var(--pm-s-6) 0;
  border-top: 1px solid var(--pm-border);
  background: var(--pm-paper);
}

.pm-footer-inner {
  max-width: var(--pm-container);
  margin: 0 auto;
  padding: 0 var(--pm-s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--pm-s-4);
}

.pm-footer .pm-brand {
  font-size: 18px;
}

.pm-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--pm-text-mute);
  font-weight: 600;
}

.pm-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pm-lime);
  box-shadow: 0 0 0 3px var(--pm-lime-faint);
  animation: pm-pulse 2.4s var(--pm-ease-out) infinite;
}

@keyframes pm-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px var(--pm-lime-faint);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(163, 221, 58, 0.06);
  }
}
.pm-locale-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--pm-text-mute) !important;
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  padding: 6px 12px;
  border-radius: var(--pm-r-pill);
  cursor: pointer;
}

.pm-copy {
  font-family: var(--pm-font-mono);
  font-size: 12px;
  color: var(--pm-text-faint);
}

/* ---- Hide default Copenhagen header/footer so ours wins ---- */
.header {
  display: none !important;
}

.footer:not(.pm-footer) {
  display: none !important;
}

/* ---- Hide elements we don't use ---- */
.user-info {
  display: none !important;
}

.sign-in {
  display: none !important;
}

.community-image {
  display: none !important;
}

/* Skip-nav accessible */
.skip-navigation {
  position: absolute;
  left: -9999px;
  z-index: 999;
  background: var(--pm-ink);
  color: var(--pm-paper);
  padding: 8px 16px;
  border-radius: var(--pm-r-sm);
}

.skip-navigation:focus {
  left: 16px;
  top: 16px;
}