@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: #0C0C0C;
  color: #FFFFFF;
  font-family: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, 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: 'Caudex', Georgia, 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: #9288CF;
  text-decoration: none;
}
a:visited {
  color: #734EA1;
}
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 #734EA1;
}
.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 #734EA1;
}
.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 #734EA1;
}

.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 #734EA1;
  border-radius: 4px;
  color: #734EA1;
  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: #734EA1;
}
.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: #734EA1;
  color: #FFFFFF;
  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: #9272bb;   /* brighten on hover (was darken) — see note at end */
  border-color: #9272bb;
}
.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: #734EA1;
  border: 0;
  border-radius: 4px;
  color: #FFFFFF;
  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: #FFFFFF;
}
.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: #9272bb;   /* brighten on hover (was darken) */
}
.button-large[disabled], .hbs-form input[type=submit][disabled] {
  background-color: #ddd;
}

.button-secondary {
  color: #fff;
  border: 1px solid #848F99;
  background-color: transparent;
}
.button-secondary:visited {
  color: #fff;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: #FFFFFF;
  border: 1px solid #848F99;
  background-color: #040404;
}

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

.split-button button {
  background-color: #734EA1;
  border: 0;
  color: #FFFFFF;
  height: 32px;
  line-height: 16px;
  outline-color: #734EA1;
}

[dir=rtl] .split-button button:not(:only-child):first-child {
  border-left: 1px solid #FFFFFF;
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):first-child {
  border-right: 1px solid #FFFFFF;
  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: #fff;
  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 #734EA1;
}

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

.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 #734EA1;
  text-decoration: none;
}

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

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

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

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

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

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

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

.form footer a {
  color: #fff;
  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: #734EA1;
}

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

.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: #9288CF;
  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: #9288CF;
  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: #FFFFFF;
  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: #FFFFFF;
}
.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: #9288CF;
  border: 1px solid #9288CF;
  border-radius: 4px;
  color: #FFFFFF;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 6px;
  line-height: 1.4286;
  padding: 6px 14px;
}
.ask-ai:visited {
  color: #FFFFFF;
}
.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: #FFFFFF;
}
.nav-wrapper-desktop .ask-ai:hover, .nav-wrapper-desktop .ask-ai:focus, .nav-wrapper-desktop .ask-ai:active {
  background-color: #E4E6EE;
  border-color: #E4E6EE;
  color: #FFFFFF;
  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: #FFFFFF;
}
.nav-wrapper-mobile .ask-ai:hover, .nav-wrapper-mobile .ask-ai:focus, .nav-wrapper-mobile .ask-ai:active {
  background-color: #E4E6EE;
  border-color: #E4E6EE;
  color: #FFFFFF;
  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: #9288CF;
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: #9288CF;
  background-color: transparent;
}
.user-info > button::after {
  color: #9288CF;
  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: #734EA1;
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: #FFFFFF;
  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: #fff;
}
.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: #fff;
  display: inline-block;
}

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

/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
  display: flex;
}
@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}
.breadcrumbs li {
  display: inline-block;
  color: #fff;
  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: #9288CF;
}

/***** 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: #734EA1;
}
.search input[type=search],
.search .clear-button {
  background-color: #fff;
  border-radius: 30px;
  border: none;
}
.search input[type=search], .search .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: #734EA1;
  color: #fff;
}
.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #734EA1;
}
.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: #734EA1;
}
[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: #734EA1;
}

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

.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/01JKWT3W48Z2FHRKPPBP1G0QZR);
  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 #734EA1;
  border-radius: 4px;
  box-sizing: border-box;
  color: #734EA1;
  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: #734EA1;
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: #FFFFFF;
  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: #FFFFFF;
}
.blocks-item-link {
  color: #734EA1;
  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 #734EA1;
  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/01JKWT3WW3AX2SHZJKH443CM1M);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}
.community a {
  color: #9288CF;
  text-decoration: underline;
}
.community a:visited {
  color: #734EA1;
}
.community a:hover, .community a:active, .community a:focus {
  color: #E4E6EE;
}

.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: #FFFFFF;
  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: #9288CF;
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: #734EA1;
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: #E4E6EE;
}
.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: #734EA1;
  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: #FFFFFF;
}
.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: #FFFFFF;
}

.icon-star {
  color: #734EA1;
  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: #FFFFFF;
  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: #9288CF;
  text-decoration: underline;
}
.article-body a:visited {
  color: #734EA1;
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: #E4E6EE;
}
.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: #000;
}
.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: #040404;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: #040404;
  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: #fff;
  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: #fff;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: #734EA1;
  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: #9288CF;
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: #734EA1;
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: #E4E6EE;
}
.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: #FFFFFF;
  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: #FFFFFF;
  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: #fff;
}

/***** 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: #fff;
}
.share a:hover {
  text-decoration: none;
  color: #734EA1;
}
.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: #fff;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}
.comment-callout a {
  color: #9288CF;
  text-decoration: underline;
}
.comment-callout a:visited {
  color: #734EA1;
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: #E4E6EE;
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: #fff;
  font-size: 13px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid #734EA1;
  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: #734EA1;
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
  font-family: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  color: #9288CF;
  text-decoration: underline;
}
.comment-body a:visited {
  color: #734EA1;
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: #E4E6EE;
}
.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: #000;
}
.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: #040404;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.comment-body pre {
  background: #040404;
  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: #fff;
  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: #fff;
  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: #734EA1;
}

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

.vote-voted {
  color: #734EA1;
}

.vote-voted:hover {
  color: #422d5c;
}

/***** 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/01JKWT3WGBJAJES2X307XJYZC9);
  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: #734EA1;
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: #FFFFFF;
  color: #FFFFFF;
}
.community-follow button[data-selected=true] {
  background-color: #734EA1;
  color: #FFFFFF;
}
.community-follow button[data-selected=true]::after {
  border-left: 1px solid #FFFFFF;
  color: #FFFFFF;
}
.community-follow button[data-selected=true]:hover {
  background-color: #422d5c;
  border-color: #422d5c;
}
.community-follow button::after {
  border-left: 1px solid #734EA1;
  content: attr(data-follower-count);
  color: #734EA1;
  display: inline-block;
  font-family: 'Caudex', Georgia, 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 #734EA1;
  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: #9288CF;
  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: #734EA1;
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #fff;
  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: #FFFFFF;
    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: #734EA1;
}
.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: #fff;
}
.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: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, 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: #9288CF;
  text-decoration: underline;
}
.post-body a:visited {
  color: #734EA1;
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: #E4E6EE;
}
.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: #000;
}
.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: #040404;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.post-body pre {
  background: #040404;
  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: #fff;
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: #fff;
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: #734EA1;
  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 {
  /* Match the tab-bar divider we set on .collapsible-nav (was stock #ddd, brighter/off) so every
     tab-switcher object shares the same line. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}
@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 #734EA1;
}

.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}
.collapsible-nav-list li {
  color: #FFFFFF;
  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: #FFFFFF;
  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;
  }
}
/* Collapsed (mobile) state: hide only the items that are NEITHER selected NOR current, so
   the active tab's label still shows next to the toggle. Must be a single chained selector
   (AND); as a comma list (OR) it matched every item lacking aria-selected — including our
   current tab, which uses class="current"/aria-current instead — and hid the whole bar,
   leaving just a bare chevron. Desktop still expands all via the min-width:768px rules. */
.collapsible-nav-list li:not([aria-selected=true]):not(.current) {
  display: none;
}
@media (min-width: 768px) {
  /* Desktop/tablet: show EVERY tab (no collapse). This must mirror the base hide selector's
     specificity — a single chained :not():not() (0,3,1), NOT a comma list (0,2,1) — otherwise
     the base hide rule out-specifies it and the bar stays collapsed on desktop too. */
  .collapsible-nav-list li:not([aria-selected=true]):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 #734EA1;
    order: 1;
  }
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
  color: #FFFFFF;
}

.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 #734EA1;
}
.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: #000;
  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: #fff;
  font-size: 13px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: #fff;
}

/***** 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;
  max-width: 100%;
  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: #fff;
  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 #734EA1;
}
.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 #734EA1;
}
.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: #040404;
    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: #fff;
  width: 40%;
  overflow-wrap: break-word;
}
.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: #fff;
  font-size: 13px;
}
.meta-data:not(:last-child)::after {
  content: "·";
  margin: 0 5px;
}

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

.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: #fff;
  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 #734EA1;
  border-radius: 4px;
  color: #734EA1;
  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: #000;
  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: #fff;
  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: #fff;
  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: #040404;
}
@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: #0C0C0C;
  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: #FFFFFF;
}
.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: #9288CF;
}
.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: #9288CF;
}
.search-results .no-results .action-prompt a:visited {
  color: #9288CF;
}

.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: #fff;
  font-size: 13px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: #734EA1;
  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/01KX607QH0SPRSJK73X3SCQN4R);
  margin-bottom: 10px;
  height: 320px;
}
.service-catalog-description {
  display: flow-root;
}
.service-catalog-description a {
  color: #9288CF;
  text-decoration: underline;
}
.service-catalog-description a:visited {
  color: #734EA1;
}
.service-catalog-description a:hover, .service-catalog-description a:active, .service-catalog-description a:focus {
  color: #E4E6EE;
}
.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: #000;
}
.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: #040404;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.service-catalog-description pre {
  background: #040404;
  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: #fff;
  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;
}
/* ===================== Void Hunters — dark theme overrides ===================== */
:root {
  --vh-hd-h: 112px;   /* header bar height (taller, voidhunters.com-style) */
  --vh-hd-w: 1000px;  /* header content container width = page content width (.container) */
}
/* Violet scrollbar across the whole knowledge base, matching voidhunters.com. Standard
   property for Firefox / modern Chrome; ::-webkit-* fallback for Safari / older Chrome. */
html {
  scrollbar-color: #442970 #0c0c0c;   /* thumb, track */
  scrollbar-width: auto;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #0c0c0c; }
::-webkit-scrollbar-thumb {
  background: #442970;
  border-radius: 7px;
  border: 2px solid #0c0c0c;   /* inset the thumb from the track edges */
}
::-webkit-scrollbar-thumb:hover { background: #573a8a; }
::-webkit-scrollbar-corner { background: #0c0c0c; }
/* Narrower content column across all pages (closer to voidhunters.com). Overrides
   Copenhagen's 1160px .container; the header content container tracks the same width
   (--vh-hd-w) so the logo/menu stay aligned with the content edges. */
.container {
  max-width: 1000px;
}
/* Category cards (home-page blocks): violet surface on the near-black page */
/* Home category cards — Clash-of-Clans style: 2 columns; each card has an icon on the
   left, the category title with an arrow, a short description, and the top 3 articles.
   Clean dark surface standing above the page texture, violet-tinted shadow bottom-right. */
.categories.blocks .blocks-list {
  display: grid;
  /* equal columns; minmax(0,…) lets text truncate instead of stretching the track */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;          /* every card the exact same height */
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.categories.blocks .blocks-item {
  margin: 0;
  padding: 24px 28px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  text-align: left;
  background: #111111;  /* tile surface (theme setting) */
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;           /* matched to Clash of Clans */
  /* Soft violet drop shadow offset to the bottom-right (the earlier look), kept discreet.
     Colour is a theme setting; color-mix applies the alpha (zass only substitutes vars, it
     does not evaluate rgba() — so rgba($var,a) would emit invalid CSS and be dropped). */
  box-shadow: 5px 6px 12px color-mix(in srgb, #584AA6 18%, transparent);
}
/* Icon slot on the left — placeholder tint now; per-category art is dropped in via
   `[data-cat="<category-id>"] { background-image: url($assets-...); }`. */
.blocks-item-icon {
  flex: 0 0 auto;
  align-self: center;           /* vertically centered in the card */
  width: 88px;
  height: 88px;
  background: center / contain no-repeat;  /* per-category image set in the icon map below */
}
.blocks-item-body { flex: 1 1 auto; min-width: 0; }  /* min-width:0 lets children truncate */
.blocks-item-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Caudex", Georgia, serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: color .15s ease;
}
/* One consistent color for every link state — kills the :visited flip that made some
   titles render a different colour depending on browse history. */
.blocks-item-title,
.blocks-item-title:link,
.blocks-item-title:visited { color: #85A0C2; }  /* voidhunters.com FAQ heading blue (theme setting) */
/* Wrap the category name over two lines instead of truncating it. The cards are a
   2-column grid at every width with no mobile breakpoint, so on a narrow viewport the
   old `nowrap` + ellipsis silently ate the end of a longer name — and "Playtests &
   Community" is longer than any name here before it. Equal card heights survive it
   because the rows are `grid-auto-rows: 1fr`. */
.blocks-item-title-text {
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.blocks-item-arrow { flex: none; color: #85A0C2; font-size: 22px; line-height: 1; transition: transform .15s ease; }
/* Hover: only the arrow nudges right — the title colour does NOT change. */
.blocks-item-title:hover .blocks-item-arrow { transform: translateX(5px); }
.blocks-item-description {
  display: block;
  margin-top: 0;             /* flush under the title */
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blocks-item-articles {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
/* No cap needed: Zendesk fills these lists client-side and shows three per category. The
   rule that used to hide the fourth row onwards never fired, because a fourth never exists. */
.blocks-item-articles a {
  display: block;
  padding: 4px 0;
  font-size: 14px;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .15s ease;
}
.blocks-item-articles a,
.blocks-item-articles a:link,
.blocks-item-articles a:visited { color: #9288CF; }    /* consistent across link states (theme setting) */
.blocks-item-articles a:hover { color: #E4E6EE; } /* highlight only the hovered link */
/* Neutralize Copenhagen's card-wide hover (it filled the whole tile violet and forced all
   text white). Card hover now does nothing; each element keeps its own colour; only the
   per-link :hover rules above fire. High specificity beats `.blocks-item:hover *`. */
.categories.blocks .blocks-item:hover,
.categories.blocks .blocks-item:focus,
.categories.blocks .blocks-item:active { background-color: #111111; }
.categories.blocks .blocks-item-description { color: rgba(255, 255, 255, 0.5); margin-top: 0; }
.categories.blocks .blocks-item-arrow { color: #85A0C2; }
.categories.blocks .blocks-item-title-text { color: inherit; }

/* Raise the cards section up toward the hero (≈ half a card) */
.section.knowledge-base { margin-top: -90px; }

/* ===================== Home sections · recent activity · footer ===================== */
/* Discreet-violet section dividers at content width. Replace Copenhagen's solid grey
   border-top (on .community/.activity) with a hairline gradient that gently fades to
   transparent at each end instead of stopping abruptly. */
/* The home page's promoted-articles band is its own section like Community / Recent activity,
   so it gets the same divider from this one rule rather than a near-copy. It sits inside
   {{#if promoted_articles}}, so the line appears and disappears together with the block —
   never a stray divider when nothing is promoted. */
.section.home-section,
.section.knowledge-base .articles { border-top: none; position: relative; }
.section.home-section::before,
.section.knowledge-base .articles::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, #9288CF 20%, transparent) 5%,
    color-mix(in srgb, #9288CF 20%, transparent) 95%,
    transparent 100%);
}

/* Section headings (Community, Recent activity) a touch larger. */
.section.home-section > h2,
.recent-activity-header { font-size: 28px; }

/* Recent activity: category label matches the card-title accent; article link unchanged. */
.recent-activity-item-parent,
.recent-activity-item-parent:link,
.recent-activity-item-parent:visited { color: #85A0C2; }
/* "Article created X ago" muted to the card-description grey (was too prominent). */
.recent-activity-item-time { color: rgba(255, 255, 255, 0.5); }

/* Recent activity: replace the full-width grey rule between items with a thin, centered,
   discreet-violet separator that fades out at the ends. */
.recent-activity-item { border-bottom: none; position: relative; }
.recent-activity-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  /* Visible band roughly half as wide as before — fades to transparent closer to the
     centre (30%/70% instead of 12%/88%). */
  background: linear-gradient(90deg, transparent 30%, color-mix(in srgb, #9288CF 30%, transparent) 50%, transparent 70%);
}

/* Footer: no dividing line from the rest of the page. */
.footer { border-top: none; }

/* Community banner — our artwork, blended into the page like the hero (no hard frame).
   The box takes the image's own aspect ratio so `cover` shows the WHOLE image with no
   crop, then a two-axis mask fades all four edges into the background. */
.community-image {
  background-image: url(/hc/theming_assets/01KX9WHKYEMPS05XRBYW1BRQPB);
  background-size: cover;          /* box ratio == image ratio below → nothing is cropped */
  background-position: center;
  aspect-ratio: 2560 / 967;        /* community.png intrinsic ratio */
  min-height: 0;                   /* defeat Copenhagen's 300px min so the ratio drives height */
  border-radius: 0;                /* no card frame — it melts into the page */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* ===================== Footer (Artifex Mundi) ===================== */
.footer {
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  padding: 44px 0 36px;
  margin-top: 40px;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 32px 40px;
  max-width: 1000px;   /* content width */
  margin: 0 auto;
  padding: 0 20px;
}
/* Left: logo + company info, aligned to the same height. */
.footer-brand { display: flex; align-items: center; gap: 18px; }
.footer-am-logo { height: 84px; width: auto; display: block; }
.footer-company { display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, 0.5); }
.footer-company-name { color: rgba(255, 255, 255, 0.85); font-weight: 600; }
/* Right: legal links (top), social icons (bottom-right). */
.footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 22px; }
.footer-legal a { color: rgba(255, 255, 255, 0.55); font-size: 13px; text-decoration: none; transition: color .15s ease; }
.footer-legal a:hover { color: #85A0C2; }
.footer-social { display: flex; gap: 16px; }
.footer-social-link { display: inline-flex; color: rgba(255, 255, 255, 0.5); transition: color .15s ease; }
.footer-social-link svg { width: 21px; height: 21px; display: block; }
.footer-social-link:hover { color: #85A0C2; }
/* Bottom bar: language selector only (copyright removed), aligned right. Renders only
   when there are alternative locales. No dividing line. */
.footer-bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  max-width: 1000px;
  margin: 28px auto 0;
  padding: 0 20px;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.4);
}

/* ===================== Category icons — one line per category =====================
   Zendesk has no per-category icon field, so icons are mapped here by category id.
   Keyed on [data-cat="<id>"] so the SAME map serves both the home category cards
   (.blocks-item-icon) and the category-page header (.category-header-icon).
   To add one: drop a transparent PNG/SVG in assets/ and uncomment the matching line
   (asset ref uses hyphens: file `cat-account.png` -> /hc/theming_assets/01KX9WHK7Z914TQYB59AXBT4F6).
   Adding a NEW category later = one new line below + its asset. */
[data-cat="48632193607697"] { background-image: url(/hc/theming_assets/01KX9WHK7Z914TQYB59AXBT4F6); }             /* Account */
[data-cat="48632206443025"] { background-image: url(/hc/theming_assets/01KX9WHK1NSQ4HCQN47HS1DCWH); }           /* Purchases */
[data-cat="48632240884241"] { background-image: url(/hc/theming_assets/01KX9WHK1PMST8XP8VBTAAC3RK); }            /* Gameplay */
[data-cat="48632238263185"] { background-image: url(/hc/theming_assets/01KYMT1VGM1KWMC4VH1SC0Q6TQ); }    /* Troubleshooting (asset name kept — renaming it would break nothing but churn the diff) */
[data-cat="49144019954065"] { background-image: url(/hc/theming_assets/01KX9WHKSE6SV6ZYXP9QK69MCH); }           /* Fair Play */
[data-cat="49144057777681"] { background-image: url(/hc/theming_assets/01KYD9WZZ7RFXYKEZ7388B9TT5); }          /* Playtests & Community */

/* The stock top-of-page divider under the header — remove it site-wide (every inner-page
   template renders it, and we don't want it anywhere). One global rule instead of editing
   each template. */
.container-divider { display: none; }

/* Search field — styled after voidhunters.com's Pre-register e-mail field. The FORM is a
   frosted, translucent panel (thin light border, soft symmetric corners, no button); the
   input + clear-button inside stay transparent so the panel reads clean even while typing.
   Copenhagen's .search rules are highly specific, so key visuals are forced. */
form.search {
  position: relative;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible;
}
/* Frosted layer: top + bottom hairlines + fill + blur, all masked so they fade to
   transparent at the left/right ends (like the site's Pre-register field). It lives on
   ::before so the input text and icon stay crisp on top and aren't faded by the mask. */
form.search::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(146, 136, 207, 0.06) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.38);
  border-bottom: 1px solid rgba(255, 255, 255, 0.38);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.search input[type=search],
.search .clear-button {
  position: relative;
  z-index: 1;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #ffffff !important;
}
.search input[type=search] {
  height: 52px;
  font-size: 15px;
  letter-spacing: 1.5px;
}
.search input[type=search]::placeholder {
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
  letter-spacing: 1.96px;
}
.search .search-icon { position: relative; z-index: 1; color: rgba(255, 255, 255, 0.6); }
/* widen the hero search a touch */
#main-content.hero .search { max-width: 640px; width: 100%; }

/* ===== Void Hunters — background + hero (site assets) ===== */
/* Base: solid near-black, with the noise texture as a translucent overlay —
   matching voidhunters.com exactly (opacity .29, 460x920 tile, over #0c0c0c). */
body {
  background-color: #0c0c0c;
  position: relative; /* containing block for the texture layer below */
}
body::before {
  content: "";
  position: absolute; /* scrolls with the page (spans the full document height) */
  inset: 0;
  z-index: -1; /* over the banner (-2), under the content */
  pointer-events: none;
  background-image: url(/hc/theming_assets/01KX9WHKQRWNZ6XX8BFA3WPFY9);
  background-repeat: repeat;
  background-size: 460px 920px;
  opacity: 0.29;
}
/* Bottom decorator — the "footer village" bitmap from voidhunters.com, anchored to the
   very bottom of the page and held there, UNDER the noise texture (z-index -2, below the
   texture's -1). Content width (centred like the banner), shown whole via aspect-ratio,
   at reduced opacity so it stays a discreet backdrop; sides + top gently fade into the page. */
body::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--vh-hd-w));   /* content width, centred like the banner — not full-bleed */
  bottom: 0;
  aspect-ratio: 1600 / 875;           /* footer-village.png intrinsic ratio → shown whole, no crop */
  z-index: -2;
  opacity: 0.6;                       /* discreet — kept from standing out too much */
  pointer-events: none;
  background-image: url(/hc/theming_assets/01KX9WHKP4QM0Z662JCW0T438S);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 100%;         /* box ratio == image ratio → no distortion, full image */
  /* Gently fade the sides + top so it melts into the page at the content edges. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, transparent 0%, #000 15%);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, transparent 0%, #000 15%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Article page — top background art (voidhunters.com news "DRZEWO"): a full-page-width,
   dark atmospheric backdrop hung from the top of the page, UNDER the noise texture
   (z-index -2). It scrolls away with the page. Sides fade (like the site) and the bottom
   fades so it melts down into the article. Injected only by article_page.hbs. */
.article-top-art {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;                 /* full page width — not the content column (per the site) */
  height: min(90vh, 900px);
  z-index: -2;                 /* under the noise texture (-1) */
  opacity: 0.5;                /* discreet — blends into the page, not intense */
  pointer-events: none;
  background-image: url(/hc/theming_assets/01KXB24XWRR9W127CW5HBPK3VT);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;      /* fill width; shows the top of the art (tree + light beam) */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, #000 55%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, #000 55%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
/* Hero: characters banner at top, blended into the texture; search sits low over it */
/* Hero = a fixed-aspect banner box (its own image proportions), so the FULL characters
   image is shown, never clipped, and the box reserves exactly its height (no overflow /
   no overlap with the content below). Overrides Copenhagen's fixed hero height. */
#main-content.hero {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: calc(-1 * var(--vh-hd-h)) auto 0; /* pull the banner up under the sticky header so it starts at the very top */
  height: auto !important; /* defeat Copenhagen's fixed hero height so aspect-ratio drives it */
  aspect-ratio: 2048 / 1575;
  background: transparent;
  padding: 0;
  min-height: 0;
  overflow: visible;
  display: block;
  pointer-events: none; /* the tall hero box overlaps the raised cards — let clicks pass through */
}
/* Characters fill the box; faded on the sides + bottom exactly like voidhunters.com's
   mask-side-bottom-fade, on top of the image's own natural bottom alpha. */
#main-content.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/hc/theming_assets/01KX9WHKXNTR1Q02BYTMASSBKV) top center / contain no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(#000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(#000 95%, transparent);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  z-index: -2; /* behind the noise texture (-1) so the grain sits on top of the banner */
  pointer-events: none;
}
/* Search overlaid over the lower-middle of the characters (slightly on top of them) */
#main-content.hero .hero-inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 72%;
  bottom: auto;
  display: flex;
  justify-content: center;
  z-index: 2;
  pointer-events: auto; /* re-enable interaction for the search itself */
}
/* "How can we help?" heading sitting just above the search, over the banner */
#main-content.hero .hero-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 59%;
  margin: 0;
  z-index: 2;
  text-align: center;
  font-family: "Caudex", Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  color: #ffffff;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.65);
}

/* Header — voidhunters.com style. `sticky` (not fixed) so it lives in normal flow: it
   respects the Zendesk preview/debug bar like the rest of the page (flows below it,
   shifts down when it expands) while still pinning on scroll. The hero banner is pulled
   up under it (hero's negative margin-top) so it starts at the very top.
   Bar background spans the FULL width; the content (logo ↔ nav) is constrained to the
   page content width and centered, so the logo sits beside the reading column. */
header.header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--vh-hd-h);
  min-height: var(--vh-hd-h);
  max-width: none;
  width: auto;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: max(24px, calc((100% - var(--vh-hd-w)) / 2));
  padding-right: max(24px, calc((100% - var(--vh-hd-w)) / 2));
  box-sizing: border-box;
  background: transparent; /* the darkening lives on ::before as a soft gradient scrim */
  overflow: visible;       /* let the oversized logo spill below the bar */
}
/* Soft gradient scrim — transparent at the very top of the page, fades in on scroll.
   Dark at the bar's top, fading to fully transparent at its bottom → no hard edge/border,
   a gentle transition like voidhunters.com (replaces the old solid fill + border). */
header.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(12, 12, 12, 0.95) 0%,
    rgba(12, 12, 12, 0.8) 70%,
    rgba(12, 12, 12, 0) 100%);
  opacity: 0;
  transition: opacity .3s ease;
}
header.header.is-scrolled::before { opacity: 1; }
/* Real Void Hunters wordmark — ~2x bigger, spilling below the bar like the site.
   position:relative nudges it (down to overflow below; left to align the visible
   wordmark with the content column) without disturbing the flex layout. */
header.header .logo { margin: 0; display: flex; align-items: center; }
header.header .logo a { display: inline-flex; align-items: center; }
header.header .logo img {
  height: 160px;
  width: auto;
  max-height: none;
  position: relative;
  top: 20px;
  left: -18px;
}
header.header .logo span { display: none; } /* the logo image already contains the wordmark */

/* Header nav links — match voidhunters.com exactly: Caudex, UPPERCASE, muted white,
   brightening to full white on hover. */
header.header .nav-wrapper-desktop .user-nav-list a,
header.header .nav-wrapper-desktop .ask-ai,
header.header .nav-wrapper-desktop .dropdown-toggle {
  font-family: "Caudex", Georgia, serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.36px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  transition: color .15s ease;
}
header.header .nav-wrapper-desktop .user-nav-list a:hover,
header.header .nav-wrapper-desktop .user-nav-list a:focus,
header.header .nav-wrapper-desktop .ask-ai:hover,
header.header .nav-wrapper-desktop .ask-ai:focus,
header.header .nav-wrapper-desktop .dropdown-toggle:hover,
header.header .nav-wrapper-desktop .dropdown-toggle:focus {
  color: #ffffff;
}
/* Account name is a proper noun → keep it Upper+lower case, not all-caps. */
header.header .nav-wrapper-desktop .user-info .dropdown-toggle {
  text-transform: none;
}

/* ===================== Article page ===================== */

/* Push the breadcrumbs + search bar down so they start below the oversized logo (which
   spills ~44px below the header bar) instead of colliding with it. */
.sub-nav { padding-top: 46px; }
.sub-nav .breadcrumbs li { font-size: 14px; }   /* delicate bump from Copenhagen's 13px */

/* Drop the "section" crumb from breadcrumbs across the whole KB. The {{breadcrumbs}} helper
   renders the full Home > Category > Section trail and offers no way to omit a segment, and
   the `category` object isn't exposed to build breadcrumbs by hand — so target the crumb
   semantically by its section link. display:none also drops its separator and removes it
   from the accessibility tree (not a positional hack). */
.breadcrumbs li:has(> a[href*="/sections/"]) { display: none; }

/* Sub-nav search — reuse the home hero's frosted field (search-full), just much smaller.
   No heading; only the "Search" field. */
.sub-nav .search-container { max-width: 280px; width: 100%; }
.sub-nav .search { max-width: 280px; width: 100%; }
.sub-nav .search input[type=search] { height: 38px; font-size: 13px; letter-spacing: 0.5px; }
.sub-nav .search input[type=search]::placeholder { font-style: italic; letter-spacing: 1px; }

/* Article prose — match voidhunters.com news formatting: Noto Sans body in a soft grey
   (#A7A7A7), Caudex headings in the same grey, comfortable reading rhythm. */
.article-body {
  font-family: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;
  color: #a7a7a7;
  font-size: 16px;
  line-height: 1.6;
}
.article-body p { margin: 0 0 1.15em; }
.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4 {
  font-family: 'Caudex', Georgia, serif;
  font-weight: 400;
  color: #a7a7a7;
  line-height: 1.2;
}
.article-body h2 { font-size: 24px; margin: 2.2rem 0 1rem; }
.article-body h3 { font-size: 20px; margin: 1.8rem 0 0.8rem; }
.article-body h4 { font-size: 18px; margin: 1.5rem 0 0.6rem; }
.article-body strong,
.article-body b { color: #a7a7a7; font-weight: 700; }
.article-body a,
.article-body a:link,
.article-body a:visited { color: #9288CF; }
.article-body a:hover { color: #E4E6EE; }
.article-body ul,
.article-body ol { padding-left: 1.5rem; margin: 0 0 1.15em; }
.article-body li { margin: 0.3em 0; }
/* In a help centre a blockquote is a callout, not a quotation — notes, warnings and the
   draft banner on unfinished articles all arrive as one. So it gets a panel and drops
   Copenhagen's italics, which made a warning read like an aside. */
.article-body blockquote {
  margin: 1.2em 0;
  padding: 0.85em 1.1em;
  border-left: 3px solid color-mix(in srgb, #85A0C2 60%, transparent);
  border-radius: 0 6px 6px 0;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.72);
  font-style: normal;
}
.article-body blockquote > :first-child { margin-top: 0; }
.article-body blockquote > :last-child { margin-bottom: 0; }
.article-body blockquote strong { color: #eaeaea; }
/* Inline code — styled to match the pre block. Uses Copenhagen's own selector
   (`.article-body :not(pre) > code`, specificity 0,1,2) so it actually wins over the
   stock rule; a plain `.article-body code` (0,1,1) would lose. */
.article-body :not(pre) > code {
  font-family: "Courier New", monospace;
  background: rgba(255, 255, 255, 0.05);            /* same surface as the pre block */
  border: 1px solid rgba(255, 255, 255, 0.08);      /* same hairline border */
  padding: 0.12em 0.45em;
  margin: 0 2px;
  border-radius: 5px;
  font-size: 0.9em;
}
.article-body pre {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 14px 16px;
  overflow-x: auto;
}
.article-body pre code { background: none; padding: 0; }
.article-body table { border-collapse: collapse; width: 100%; margin: 1.2em 0; }
.article-body th,
.article-body td { border: 1px solid rgba(255, 255, 255, 0.12); padding: 8px 12px; text-align: left; }
.article-body th { background: rgba(255, 255, 255, 0.05); color: #c9c9c9; }

/* Universal faded-gradient swimline (same as the home page dividers), for horizontal
   rules in prose and the article's section separators. */
.article-body hr,
.article-votes::before,
.article-relatives::before,
.article-sidebar::before,
.article-sidebar::after,
.article-return-to-top::before,
.comment-overview::before,
.comment-overview::after {
  border: none;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, #9288CF 20%, transparent) 5%,
    color-mix(in srgb, #9288CF 20%, transparent) 95%,
    transparent 100%);
}
.article-body hr { margin: 2rem 0; }
/* Replace Copenhagen's solid grey border-tops on the votes / relatives sections and the
   comment-overview (which has both a top AND bottom rule) with the faded swimline. */
.article-votes,
.article-relatives { border-top: none; position: relative; }
.article-votes::before,
.article-relatives::before { content: ""; position: absolute; top: 0; left: 0; right: 0; }
.comment-overview { border-top: none; border-bottom: none; position: relative; }
.comment-overview::before { content: ""; position: absolute; left: 0; right: 0; top: 0; }
.comment-overview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; }
/* Same faded-swimline for the two remaining Copenhagen rules on the article page: the
   "Return to top" bar (top border; hidden ≥1024px so it's inherently mobile) and the
   "Articles in this section" sidebar box (top+bottom borders — but ONLY below 1024px;
   ≥1024px the sidebar has no border, so its pseudo-lines must be media-scoped or they'd
   draw phantom lines on desktop). */
.article-return-to-top { border-top: none; position: relative; }
.article-return-to-top::before { content: ""; position: absolute; top: 0; left: 0; right: 0; }
@media (max-width: 1023px) {
  .article-sidebar { border-top: none; border-bottom: none; position: relative; }
  .article-sidebar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; }
  .article-sidebar::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; }
}

/* Consistent link colour on the article page — a visited article keeps the same colour. */
.article a:visited,
.article-sidebar a:visited,
.breadcrumbs a:visited,
.article-relatives a:visited { color: #9288CF; }

/* Sidebar "Articles in this section" title — accent colour, small-caps. Sidebar keeps
   Copenhagen's narrow width, so the title is allowed to wrap onto 2 lines. */
.sidenav-title {
  display: block;
  color: #85A0C2;
  font-family: 'Caudex', Georgia, serif;
  font-variant: small-caps;
  text-transform: none;
  font-size: 21px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0.3px;
}
/* Reserve room for the current-item arrow so every item's text stays left-aligned. */
.collapsible-sidebar-body .sidenav-item { position: relative; padding-left: 15px; }
/* Little arrow marking the article you're currently reading. */
.collapsible-sidebar-body .sidenav-item.current-article::before {
  content: "\25B8";   /* ▸ */
  position: absolute;
  left: 0;
  top: 0;
  color: #85A0C2;
}

/* Comment form — adapt to the dark theme, taking the search field as the cue: a dark
   translucent fill with a light hairline border, a soft blur, and light text (instead of
   the stock white box with black text). */
.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"] {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #ffffff;
  padding: 12px 14px;
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}
.comment-form textarea::placeholder,
.comment-form input::placeholder { color: rgba(255, 255, 255, 0.45); }
.comment-form textarea:focus,
.comment-form input:focus { border-color: rgba(255, 255, 255, 0.4); outline: none; }

/* CKEditor 5 (comment editor AND the new-request "Description" field) defaults to a white
   theme. Re-theme it dark GLOBALLY via its own CSS custom properties, plus explicit
   overrides for the editable surface — one rule set covers every editor in the theme. */
.ck.ck-reset,
.ck.ck-reset_all,
.ck-body-wrapper,
.ck-body-wrapper {
  --ck-color-base-background: #1b1b21;
  --ck-color-base-foreground: #232329;
  --ck-color-base-border: rgba(255, 255, 255, 0.2);
  --ck-color-base-active: #85a0c2;
  --ck-color-base-active-focus: #9bb2cf;
  --ck-color-base-text: #eaeaea;
  --ck-color-text: #eaeaea;
  --ck-color-focus-border: #9288cf;             /* discreet violet focus outline */
  --ck-color-focus-outer-shadow: transparent;   /* drop the light glow ring */
  --ck-color-shadow-drop: rgba(0, 0, 0, 0.5);
  --ck-color-toolbar-background: rgba(255, 255, 255, 0.03);
  --ck-color-toolbar-border: rgba(255, 255, 255, 0.18);
  --ck-color-button-default-background: transparent;
  --ck-color-button-default-hover-background: rgba(255, 255, 255, 0.1);
  --ck-color-button-default-active-background: rgba(255, 255, 255, 0.14);
  --ck-color-button-on-background: rgba(255, 255, 255, 0.12);
  --ck-color-button-on-hover-background: rgba(255, 255, 255, 0.18);
  --ck-color-button-on-active-background: rgba(255, 255, 255, 0.2);
  --ck-color-button-on-color: #ffffff;
  --ck-color-dropdown-panel-background: #1b1b21;
  --ck-color-dropdown-panel-border: rgba(255, 255, 255, 0.18);
  --ck-color-panel-background: #1b1b21;
  --ck-color-panel-border: rgba(255, 255, 255, 0.18);
  --ck-color-list-background: #1b1b21;
  --ck-color-list-button-hover-background: rgba(255, 255, 255, 0.1);
  --ck-color-list-button-on-background: rgba(255, 255, 255, 0.14);
  --ck-color-list-button-on-text: #ffffff;
  --ck-color-input-background: rgba(255, 255, 255, 0.05);
  --ck-color-input-border: rgba(255, 255, 255, 0.25);
  --ck-color-input-text: #ffffff;
  --ck-color-labeled-field-label-background: #1b1b21;
  --ck-color-split-button-hover-background: rgba(255, 255, 255, 0.12);
  --ck-color-tooltip-background: #000000;
  --ck-color-tooltip-text: #eaeaea;
}
/* Editable surface — translucent + blurred like the collapsed field. */
.ck.ck-editor__main > .ck-editor__editable,
.ck.ck-content {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}
/* Typed text + caret must be light. The request-form bundle injects, at RUNTIME and AFTER
   our sheet, `.ck.ck-content p, ul, ol { color:#000 !important }` (specificity 0,2,1) — so a
   plain `.ck-editor__editable *` (0,1,0) lost even with !important. We out-specify it with the
   3-class compound `.ck.ck-content.ck-editor__editable *` = (0,3,0), and `:not(a)` keeps our
   link colour (below) intact. */
.ck.ck-content,
.ck-editor__editable,
.ck.ck-content.ck-editor__editable *:not(a) {
  color: #eaeaea !important;
  caret-color: #eaeaea;
}
.ck.ck-content a { color: #9288CF !important; }
/* Focus outline: a thin, discreet violet — not the thick white ring/shadow. */
.ck-editor__editable.ck-focused,
.ck-editor__editable_inline.ck-focused,
.ck.ck-editor__main > .ck-editor__editable.ck-focused {
  border-color: #9288cf !important;
  box-shadow: none !important;
}
/* Toolbar + buttons + icons on the dark surface. Same frosted blur as the editable. */
.ck.ck-toolbar {
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}
/* The editable's backdrop-filter creates a stacking context, so the toolbar's dropdown
   panels (Paragraph, Code block) opened behind it. Lift the toolbar row + its panels above. */
.ck.ck-editor__top { position: relative; z-index: 10; }
.ck.ck-dropdown .ck-dropdown__panel,
.ck.ck-balloon-panel { z-index: 20; }
/* Force the SAME light tone on every button's text, icon color AND svg fill. Without
   !important the `color` lost to Zendesk's own grey (#5C6970) while only `fill` won — so
   fill-drawn glyphs (B, code) rendered light but text labels ("Paragraph") + currentColor
   glyphs (I) rendered dark. Forcing all three keeps the toolbar uniform, no per-button rules. */
.ck.ck-button,
.ck.ck-button .ck-button__label,
.ck.ck-dropdown__button .ck-button__label { color: #ececec !important; }
/* Enabled buttons read at full strength; only a DISABLED (unavailable) button is greyed —
   that's the only thing dimming should mean (e.g. Undo/Redo on a fresh form). */
.ck.ck-button:not(.ck-disabled) { opacity: 1; }
.ck.ck-button.ck-disabled { opacity: 0.4; }
/* All icons AND the dropdown/split-button down-arrows (which default to black fill).
   `color` drives currentColor — it colours BOTH fill="currentColor" and stroke-based glyphs. */
.ck.ck-icon,
.ck-dropdown__arrow { color: #ececec !important; }
/* fill on the icon ROOT only (NOT every descendant): plain filled paths inherit it, but a
   child's own fill="none" still wins — so outline icons (Insert image, Italic) keep their
   detail instead of flattening into a solid block. Arrows are single-shape, safe to force. */
.ck.ck-icon,
.ck-dropdown__arrow,
.ck-dropdown__arrow * { fill: #ececec !important; }

/* Dropdown menus — ONE consistent treatment for every popup: the Copenhagen menus (profile
   nav, comment sorter, language selector) AND the Garden combobox listboxes on forms (which
   ship near-black with an off-brand LIGHT border, hence !important). Dark panel, subtle border,
   soft shadow; light items; a subtle brand-violet wash on hover / current selection. */
.dropdown-menu,
[data-garden-id="dropdowns.combobox.listbox"] {
  background: #1b1b21 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55) !important;
  border-radius: 4px !important;
}
.dropdown-menu a,
.dropdown-menu [role="menuitem"],
.dropdown-menu [role="menuitemradio"],
.dropdown-menu button,
[data-garden-id="dropdowns.combobox.option"] {
  color: rgba(255, 255, 255, 0.85) !important;
}
.dropdown-menu a:hover,
.dropdown-menu a:focus,
.dropdown-menu [role="menuitem"]:hover,
.dropdown-menu [role="menuitem"]:focus,
.dropdown-menu [role="menuitemradio"]:hover,
.dropdown-menu [role="menuitemradio"]:focus,
[data-garden-id="dropdowns.combobox.option"]:hover,
[data-garden-id="dropdowns.combobox.option"][aria-selected="true"] {
  background-color: color-mix(in srgb, #9288CF 22%, transparent) !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;   /* replace the stock blue focus ring with a soft violet wash */
}
/* Group separator inside dropdown menus → our standard faded swimline (was a hard light rule). */
.dropdown-menu .separator {
  border: none;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, #9288CF 20%, transparent) 5%,
    color-mix(in srgb, #9288CF 20%, transparent) 95%,
    transparent 100%);
}

/* ===================== Sticky footer (site-wide) =====================
   Keep the content at least a viewport tall so the footer never floats up into the
   middle of the screen on short pages. Zendesk wraps every page template in <main>
   between the header and footer, so a flex column with a growing <main> does it. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > main { flex: 1 0 auto; }
body > .footer { flex-shrink: 0; }

/* ===================== Category page ===================== */
/* Copenhagen floats the content to 80% on the right (for a category nav it doesn't use);
   make it full width instead. */
.category-container { justify-content: center; }
@media (min-width: 1024px) {
  .category-content { flex: 1 1 100%; max-width: 100%; }
}
/* Header: category icon on the left, title + a discreet description on the right. Override
   Copenhagen's column/space-between page-header. */
.category-header {
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;   /* icon stretches to the title+description block height */
  gap: 20px;
}
.category-header-icon {
  flex: 0 0 auto;
  width: 66px;
  height: auto;
  align-self: stretch;    /* box height = header (title + description) height */
  /* longhand only — a `background:` shorthand here would reset the [data-cat] image to none */
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.category-header-text { min-width: 0; align-self: center; }
/* Tight title line-height (like the home cards) so the description sits right under the
   name — the big default line-height was the source of the gap, not the margin. */
.category-header .category-header-text h1 { margin: 0; line-height: 1.1; }
.category-header .page-header-description {
  margin: 0;              /* flush under the title, like the home-card description */
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  line-height: 1.3;
}

/* Sections as Supercell-style cards, flowed into two columns (multicol so cards of
   different heights pack without leaving row gaps). */
.section-tree {
  display: grid;                                     /* override Copenhagen's flex */
  grid-template-columns: repeat(2, minmax(0, 1fr));  /* always exactly two tiles per row */
  gap: 24px;                                         /* same as the home cards */
  align-items: stretch;                              /* both tiles in a row match the taller one */
  margin-top: 24px;                                  /* breathing room under the header */
}
.section-tree .section {
  margin: 0;
  padding: 22px 26px;
  background: #111111;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  box-shadow: 5px 6px 12px color-mix(in srgb, #584AA6 18%, transparent);
}
/* Simple card header — plain text (no link; every article is listed below it). */
.section-tree .section-tree-title {
  margin: 0 0 14px;
  font-family: 'Caudex', Georgia, serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #85A0C2;
}
/* Article list. */
.section-tree .article-list { list-style: none; margin: 0; padding: 0; }
.section-tree .article-list-item { margin: 0; padding: 0; }
.section-tree .article-list-link {
  display: block;
  padding: 5px 0;
  font-size: 15px;
  text-decoration: none;
}
/* Promoted articles are prefixed with an inline star SVG (and internal ones get a lock
   after the link). Our display:block link above pushed those icons onto a line of their
   own, so lay the row out as flex instead: the icons keep their intrinsic size and the
   link takes the rest. Baseline alignment — rather than center — keeps the star sitting
   on the text baseline like a glyph even when a long title wraps to two lines.
   Applies to both the category page (.section-tree) and the section page
   (.section-content), which share this markup and had the same break. */
.section-tree .article-list-item,
.section-content .article-list-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  /* Copenhagen clips the row (overflow:hidden + text-overflow:ellipsis) for single-line
     truncation; our titles wrap instead, and the clip would swallow the hanging star. */
  overflow: visible;
}
.section-tree .article-list-item > svg,
.section-content .article-list-item > svg { flex: none; }
/* The star hangs into the card's left padding (26px) instead of pushing its own title
   right, so every title in the list keeps the same left edge whether it is promoted or
   not. Without this the one starred row sat 18px further right than its neighbours. */
.section-tree .article-list-item > .icon-star,
.section-content .article-list-item > .icon-star { margin-left: -18px; }
.section-tree .article-list-item > .article-list-link,
.section-content .article-list-item > .article-list-link { flex: 1 1 auto; min-width: 0; }
.section-tree .article-list-link,
.section-tree .article-list-link:link,
.section-tree .article-list-link:visited { color: #9288CF; }
.section-tree .article-list-link:hover { color: #E4E6EE; }
.section-tree .see-all-articles {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  color: #85A0C2;
  text-decoration: none;
}

/* ===================== Section page (styled to match the category page) ===================== */
/* Same full-width fix as the category page (Copenhagen floats it to 80% on the right). */
.section-container { justify-content: center; }
@media (min-width: 1024px) {
  .section-content { flex: 1 1 100%; max-width: 100%; }
}
/* Keep the follow/subscribe control tucked to the right of the header. */
.section-content .category-header .section-subscribe { margin-left: auto; align-self: center; }
/* The article list becomes a single card, matching the category section cards. The links
   flow into two columns so a wide card doesn't leave the right half empty. */
.section-content .article-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 20px 26px;
  background: #111111;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  box-shadow: 5px 6px 12px color-mix(in srgb, #584AA6 18%, transparent);
  columns: 2;
  column-gap: 48px;
}
.section-content .article-list-item {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 15px;
  -webkit-column-break-inside: avoid;
          break-inside: avoid;
}
.section-content .article-list-link {
  display: block;
  padding: 5px 0;
  text-decoration: none;
}
.section-content .article-list-link,
.section-content .article-list-link:link,
.section-content .article-list-link:visited { color: #9288CF; }
.section-content .article-list-link:hover { color: #E4E6EE; }
/* Sub-section list (rare) — plain, no card, on the dark background. */
.section-content .section-list-item a { color: #85A0C2; }

/* ===================== Form controls — unified style (Zendesk Garden) =====================
   Just top + bottom hairlines (no side edges), a whisper of fill, no full border, no focus
   ring, no blur, no side-fade mask. Grayscale lines; brighten on focus. Field headings in
   the blue accent. Targeted by stable data-garden-id; fonts are already Noto Sans. */
[data-garden-id="forms.input"],
[data-garden-id="forms.textarea"],
[data-garden-id="dropdowns.combobox.trigger"] {
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.03) !important;   /* the semi-transparent grey fill */
  box-shadow: none !important;
}
[data-garden-id="forms.input"]:focus,
[data-garden-id="forms.textarea"]:focus,
[data-garden-id="dropdowns.combobox.trigger"]:focus-within,
[data-garden-id="dropdowns.combobox.trigger"][aria-expanded="true"] {
  border-color: rgba(255, 255, 255, 0.55) !important;
}
/* Field headings — blue accent + serif to emphasise the field (prose grey blended in too much).
   Bumped a touch larger than the 14px description below them, otherwise heading and hint were
   the same size and the labels got lost. */
[data-garden-id="dropdowns.combobox.label"],
[data-garden-id="forms.input_label"] {
  color: #85A0C2 !important;
  font-family: 'Caudex', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
}
/* Required asterisk is its own <span data-garden-id="typography.font" aria-hidden="true"> inside
   the label — so it's fully styleable. Give it the conventional red so it reads as "required"
   rather than as part of the (blue) heading. */
label span[data-garden-id="typography.font"][aria-hidden="true"] {
  color: #e06c75 !important;
}
/* The "Fields marked with an asterisk (*) are required" notice is a real <p> (aria-hidden, so
   it's decorative — the asterisks carry the semantics for AT). Small + same red as the stars. */
#new-request-form > p[data-garden-id="typography.paragraph"][aria-hidden="true"] {
  color: #e06c75 !important;
  font-size: 12px !important;
}
/* CKEditor to match the fields exactly: full border + radius + the same semi-transparent
   grey fill on BOTH the toolbar and the editable (no more see-through toolbar/area). A faint
   divider separates the toolbar from the text area. */
.ck.ck-editor {
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 4px !important;
  overflow: hidden;   /* clip the toolbar/editable fills to the rounded corners */
}
.ck.ck-editor:focus-within { border-color: rgba(255, 255, 255, 0.55) !important; }
/* CKEditor wraps the toolbar in .ck-sticky-panel__content, which carries its OWN
   top/left/right border — that's what visually doubled up against the component border.
   Kill the wrapper's border entirely; the only line inside the component is the toolbar's
   bottom divider below. */
.ck.ck-editor .ck-sticky-panel__content { border: 0 !important; }
.ck.ck-editor .ck.ck-toolbar {
  background: rgba(255, 255, 255, 0.03) !important;   /* same grey fill as the fields */
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;   /* the sole divider */
  border-radius: 0 !important;
}
.ck.ck-editor .ck-editor__editable {
  background: rgba(255, 255, 255, 0.03) !important;   /* match the fill */
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Attachments dropzone — give it the same semi-transparent grey fill + our border colour as
   the other fields so the prompt text doesn't float on nothing. Keep the border DASHED (the
   universal "drop things here" affordance) but in our tone, not the stock grey-blue. Prompt
   text neutral/muted, NOT purple, to match the convention of the rest of the controls.
   (Garden ships these as non-!important styled-component classes, so !important wins.) */
[data-garden-id="forms.file_upload"] {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px dashed rgba(255, 255, 255, 0.28) !important;
  border-radius: 4px !important;
  color: rgba(255, 255, 255, 0.6) !important;   /* prompt inherits this */
}
[data-garden-id="forms.file_upload"] * { color: rgba(255, 255, 255, 0.6) !important; }
[data-garden-id="forms.file_upload"]:hover,
[data-garden-id="forms.file_upload"]:focus-within {
  border-color: rgba(255, 255, 255, 0.55) !important;   /* brighten on hover, like the fields */
}

/* Checkboxes & radios — styled BLIND (this Support form has none to preview), following the
   same conventions as the rest of the controls: our hairline border + faint grey fill when
   empty, brand violet when checked, light label text. NOTE: unverified until a form that
   actually has these fields is previewed. `accent-color` cleanly recolours any input that keeps
   its native appearance; the explicit rules cover Garden's appearance:none custom inputs (which
   carry the forms.input gid). We set background-COLOR (not the `background` shorthand) so the
   checkmark/dot SVG Garden paints via background-image survives. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #734EA1;
}
[data-garden-id="forms.field"] input[type="checkbox"],
[data-garden-id="forms.field"] input[type="radio"],
[data-garden-id="forms.input"][type="checkbox"],
[data-garden-id="forms.input"][type="radio"] {
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background-color: rgba(255, 255, 255, 0.03) !important;
  box-shadow: none !important;
}
[data-garden-id="forms.field"] input[type="checkbox"]:hover,
[data-garden-id="forms.field"] input[type="radio"]:hover,
[data-garden-id="forms.input"][type="checkbox"]:hover,
[data-garden-id="forms.input"][type="radio"]:hover {
  border-color: rgba(255, 255, 255, 0.55) !important;
}
[data-garden-id="forms.field"] input[type="checkbox"]:checked,
[data-garden-id="forms.field"] input[type="radio"]:checked,
[data-garden-id="forms.input"][type="checkbox"]:checked,
[data-garden-id="forms.input"][type="radio"]:checked {
  background-color: #734EA1 !important;   /* violet fill; SVG check/dot stays on top */
  border-color: #734EA1 !important;
}
/* Checkbox/radio option labels read as field values (light), not the muted hint grey. */
[data-garden-id="forms.checkbox"],
[data-garden-id="forms.radio"] {
  color: #eaeaea !important;
}

/* Buttons — one consistent hover across the whole theme: BRIGHTEN, never darken. The stock
   Copenhagen primary/large hovers used `#422d5c` (fixed above to `lighten`);
   Garden's Submit is a styled-component, so we pin its base to the brand and lift it on hover
   with the SAME `#9272bb`. Global (not form-scoped) so every button matches. */
[data-garden-id="buttons.button"] {
  background-color: #734EA1 !important;
  border-color: #734EA1 !important;
  color: #ffffff !important;   /* some render violet-on-violet (low contrast) — force white */
}
/* A disabled Garden button must READ disabled even though we force the brand fill. */
[data-garden-id="buttons.button"][disabled],
[data-garden-id="buttons.button"][aria-disabled="true"] {
  opacity: 0.45 !important;
}
[data-garden-id="buttons.button"]:hover,
[data-garden-id="buttons.button"]:focus,
[data-garden-id="buttons.button"]:active {
  background-color: #9272bb !important;
  border-color: #9272bb !important;
}

/* Centre the request form as a narrow column inside the 1000px content block. The form was a
   650px column pinned hard-left (margin-left:0), so it looked shoved to the left. Centre the
   H1 + form; text/headings inside stay left-aligned (like the article-list sections). The
   breadcrumbs + search (.sub-nav) deliberately stay FULL content-block width, not narrowed. */
.container.new-request-page > h1,
.container.new-request-page > #main-content.form {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

/* Code blocks & inline code — the stock content styles give <pre> a near-white background
   (#f7f7f7) while our typed text is light, so code was light-on-light = unreadable. Flip the
   surface DARK to fit the theme; text stays light. 3-class compound out-specifies the stock
   `.ck .ck-content pre` (0,2,1). */
.ck.ck-content.ck-editor__editable pre {
  background: rgba(0, 0, 0, 0.32) !important;
  color: #eaeaea !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 4px !important;
}
.ck.ck-content.ck-editor__editable code {          /* inline code: a subtle tinted chip */
  background: rgba(255, 255, 255, 0.10) !important;
  color: #eaeaea !important;
  border-radius: 3px !important;
}
.ck.ck-content.ck-editor__editable pre code {      /* code inside a block: no double surface */
  background: transparent !important;
}

/* Inserted images must never blow past the editor width (they were rendering at natural size —
   the giant full-screen flash on insert). Applies once uploads work on live too. */
.ck.ck-content.ck-editor__editable img,
.ck.ck-content.ck-editor__editable figure.image {
  max-width: 100% !important;
  height: auto !important;
}

/* ===================== Following / My-Activities pages ===================== */

/* Tab bar (Contributions / Following) was a full-bleed PURE-BLACK band
   (#000) jammed right under the logo. Make it transparent so it sits
   on the page texture, add clear air below the sticky header, and delineate it with a faded
   hairline instead of the black slab. */
/* Tab bar (Contributions / Following): the divider must be CONTENT-WIDTH (not full-bleed) and
   clearly visible — matching the well-liked line under the Contributions sub-nav. So it goes on
   .collapsible-nav (container-width), NOT the full-width .my-activities-nav wrapper. */
.my-activities-nav {
  background-color: transparent !important;
  margin-top: 32px;
}
.my-activities-nav .collapsible-nav {
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
@media (min-width: 768px) {
  .collapsible-nav-list li:hover {
    border-bottom-color: rgba(255, 255, 255, 0.35) !important;
  }
  /* current-tab 4px violet segment sits on the line, like the reference */
  .collapsible-nav-list li.current,
  .collapsible-nav-list li[aria-selected=true] {
    border-bottom-color: #9288CF !important;
  }
}

/* "Show all" filter toggle — was near-invisible faint text; make it a legible control pill
   like the form fields (the menu it opens is already themed as a dark dropdown). */
.my-activities-following-header .dropdown-toggle {
  color: #eaeaea;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  padding: 6px 12px;
}
.my-activities-following-header .dropdown-toggle:hover,
.my-activities-following-header .dropdown-toggle[aria-expanded=true] {
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
}

/* Table dividers. Header row = a strong content-width hairline, SAME weight as the tab bar.
   Body rows = a swimline that tapers to transparent at both edges (border-image gradient). */
.my-activities-table thead tr,
.subscriptions-table thead tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
}
.my-activities-table tbody tr,
.subscriptions-table tbody tr {
  border-bottom: 1px solid transparent !important;
  border-image: linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb, #9288CF 26%, transparent) 12%,
      color-mix(in srgb, #9288CF 26%, transparent) 88%,
      transparent 100%) 1 !important;
}
/* Any other .table rows just get a plain faded hairline (never the stock #ddd slab). */
.table tr { border-bottom-color: rgba(255, 255, 255, 0.08) !important; }

/* Table title links: visited must NOT diverge to #734EA1 (that was the two-tone
   look). Keep our link violet for both states; hover to the hover tint, like the rest of the
   site. */
.striped-list-title,
.striped-list-title:visited {
  color: #9288CF !important;
}
.striped-list-title:hover,
.striped-list-title:focus {
  color: #E4E6EE !important;
}

/* Pagination Next/Prev/First/Last — frosted VIOLET pills so they read against the busy night-sky
   background (plain grey didn't separate). Translucent brand fill + blur; deepen on hover. */
.pagination-next-link,
.pagination-prev-link,
.pagination-first-link,
.pagination-last-link {
  background-color: color-mix(in srgb, #734EA1 55%, transparent) !important;
  border: 1px solid color-mix(in srgb, #9288CF 55%, transparent) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  -webkit-backdrop-filter: blur(10px) !important;
          backdrop-filter: blur(10px) !important;
}
.pagination-next-link:hover,
.pagination-prev-link:hover,
.pagination-first-link:hover,
.pagination-last-link:hover,
.pagination-next-link:focus,
.pagination-prev-link:focus,
.pagination-first-link:focus,
.pagination-last-link:focus {
  background-color: color-mix(in srgb, #734EA1 78%, transparent) !important;
  border-color: color-mix(in srgb, #9288CF 85%, transparent) !important;
  color: #ffffff !important;
}

/* ===================== Request list page (Garden-rendered SPA) =====================
   This page's tabs/table/controls are drawn by the `request-list` bundle via data-garden-id,
   NOT the Copenhagen my-activities / collapsible-nav classes the Following page uses — which is
   why the earlier styles reached only the shared Garden bits. Bring the rest in line here. */

/* The "Requests" heading sat right under the logo (no nav bar precedes it in this template). */
.requests-list-page > .my-activities-header {
  margin-top: 32px;
}
/* Garden tabs (My requests / CC'd / Organizational) → our tab-switcher line + violet active tab. */
[data-garden-id="tabs.tablist"] {
  border-bottom-color: rgba(255, 255, 255, 0.35) !important;
}
[data-garden-id="tabs.tab"][aria-selected="true"] {
  color: #9288CF !important;
  border-bottom-color: #9288CF !important;
}
/* Search box is a forms.faux_input (media-input wrapper), NOT forms.input — so it missed the field
   styling. Same surface as every other control: faint grey fill + our border, brighten on focus. */
[data-garden-id="forms.faux_input"] {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
[data-garden-id="forms.faux_input"]:focus-within {
  border-color: rgba(255, 255, 255, 0.55) !important;
}

/* Garden modal dialogs (Filter, Follow organization, …) — shared across Garden pages, so this is
   universal. They shipped near-black (#0C0C0C) with a stark WHITE border and a flat grey
   backdrop. Bring the window to our dark panel + subtle border (consistent with the dropdowns/
   menus), and turn the dim into a soft frosted-violet veil (delicate brand tint + blur). */
[data-garden-id="modals.modal"] {
  background-color: #1b1b21 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6) !important;
}
/* Modal title (a bare text node in the header) → larger Caudex heading; and a DISCREET divider
   under it (Garden shipped a stark near-white #E8EAEC line). */
[data-garden-id="modals.header"] {
  font-family: 'Caudex', Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: #eaeaea !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
[data-garden-id="modals.close"] { font-size: 16px !important; }   /* keep the ✕ from scaling with the title */
/* Backdrop: keep the frosted blur but CALMER — a dark, muted violet dim (the bright 35% brand
   read as "glowing"), plus a gentler blur. Universal to every Garden modal, not just these two. */
[data-garden-id="modals.backdrop"] {
  background-color: color-mix(in srgb, #734EA1 15%, rgba(0, 0, 0, 0.9)) !important;
  -webkit-backdrop-filter: blur(6px) !important;
          backdrop-filter: blur(6px) !important;
}

/* ===================== Error page ===================== */
/* Stock .error-page was a wide, top-left block. Centre the whole message in the middle of the
   screen and stack the page-not-found icon above it. (#main-content.error-page out-specifies
   the stock .error-page rule.) */
#main-content.error-page {
  max-width: 640px;
  min-height: 70vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 48px 20px;
}
/* Tight spacing between the three strings — drop the stock heading/paragraph margins so only
   the small flex `gap` separates them. */
#main-content.error-page h1,
#main-content.error-page h2,
#main-content.error-page p {
  margin: 0;
}
/* Icon at the asset's native 1:1 size (110×110) — no upscaling (was forced to 170 → stretched). */
.error-page-icon {
  width: auto;
  height: auto;
  max-width: 100%;
  margin-bottom: 20px;
}
#main-content.error-page a { margin-top: 16px; }
/* Mobile: it's just a 404 — keep the whole thing modest, not screen-dominating. */
@media (max-width: 767px) {
  #main-content.error-page { padding: 28px 20px; min-height: 48vh; gap: 4px; }
  .error-page-icon { max-width: 54px; margin-bottom: 10px; }
  #main-content.error-page h1 { font-size: 20px; }
  #main-content.error-page h2 { font-size: 15px; }
  #main-content.error-page p { font-size: 13px; }
}

/* ===================== Search results page ===================== */
/* A big, centred search sitting directly above the results (moved out of the top-right sub-nav)
   — reuses the frosted `.search` styling; the search-icon is absolutely placed in this box. */
.search-hero {
  max-width: 620px;
  margin: 6px auto 40px;
}
/* Same label as the home hero ("How can we help?"), just smaller — this screen leads with the
   results. Reuse the home's font MECHANISM incl. its fallback (Caudex → Georgia → serif); the
   home's rule is scoped to #main-content.hero and positioned over the banner, so we replicate the
   type here rather than borrow the positioning. */
.search-hero-title {
  margin: 0 0 14px;
  text-align: center;
  font-family: 'Caudex', Georgia, serif;   /* the setting already carries the Caudex → Georgia → serif fallback */
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.5px;
  color: #eaeaea;
}
.search-hero-field { position: relative; }   /* the search-icon anchors to the field, not the label */
.search-hero-field .search { width: 100%; }
.search-hero-field .search input[type=search] {
  width: 100%;
  flex: 1;
  padding-left: 46px;   /* clear the icon */
}
.search-hero-field .search-icon { color: rgba(255, 255, 255, 0.6); width: 18px; height: 18px; }

/* Empty view: swap the stock grey line-art SVG for our search icon, and fix the near-invisible
   dark headline (#2F3941) → light; keep the prompt a muted light. */
.search-results .no-results svg { display: none; }
.search-results .no-results::before {
  content: "";
  display: block;
  width: 110px;
  height: 110px;
  margin: 0 auto 18px;
  background: url(/hc/theming_assets/01KXBR2BYJT1VDC2DVPT6PKS4J) center / contain no-repeat;
}
.search-results .no-results .headline {
  color: #eaeaea !important;
  font-family: 'Caudex', Georgia, serif !important;
}
.search-results .no-results .action-prompt { color: rgba(255, 255, 255, 0.6) !important; }

/* Left filter panel: the selected filter was a light-grey pill (#E9EBED) with white text (bad
   contrast). Use our violet wash + light text; add a hover; lift the muted count. */
.search-results-sidebar .sidenav-item.current {
  background-color: color-mix(in srgb, #9288CF 22%, transparent) !important;
  color: #ffffff !important;
}
.search-results-sidebar .sidenav-item:hover {
  background-color: color-mix(in srgb, #9288CF 14%, transparent) !important;
}
.search-results-sidebar .doc-count { color: rgba(255, 255, 255, 0.5) !important; }
.collapsible-sidebar-toggle { color: #eaeaea; }

/* Results: author/date is secondary metadata — mute it so the (violet) titles and body lead. */
.search-result-meta-container .meta-data { color: rgba(255, 255, 255, 0.55) !important; }

/* Discreet vertical divider between the filter panel and the results, so the two columns read as
   one composition. A faded hairline that tapers to transparent at top + bottom (same treatment as
   the row swimlines, rotated). Desktop only — on mobile the layout stacks. */
@media (min-width: 1024px) {
  #main-content.search-results-column {
    position: relative;
    padding-left: 40px;
  }
  #main-content.search-results-column::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, #9288CF 28%, transparent) 12%,
      color-mix(in srgb, #9288CF 28%, transparent) 88%,
      transparent 100%);
  }
}

/* ===================== User profile page ===================== */
/* Header + tab-nav shipped as full-bleed near-black bands (darken(#0C0C0C)); make them
   transparent so they sit on the page texture like every other page. Extra top padding clears the
   sticky logo + sword tip (the removed band used to provide that separation). */
.profile-header {
  background-color: transparent !important;
  padding-top: 60px;
}
.profile-nav { background-color: transparent !important; }
/* Container-width divider under the tabs (the nav had none), matching our other tab-switchers;
   the current tab keeps its violet 4px segment from the shared .collapsible-nav rules. */
.profile-nav .collapsible-nav { border-bottom: 1px solid rgba(255, 255, 255, 0.35); }

/* Stat labels + descriptions were white (lighten(white)=white → no hierarchy); mute them so the
   values/titles lead. */
.profile-stats .stat-label,
.profile-section-description,
.profile-badges-item-description,
.profile-badges-item-metadata-description { color: rgba(255, 255, 255, 0.55) !important; }

/* Off-brand light rules (#ddd/#eee) → our faded hairlines. */
.profile-stats-activity,
.profile-stats-counters { border-color: rgba(255, 255, 255, 0.10) !important; }
.profile-contribution-list > .profile-contribution { border-top-color: rgba(255, 255, 255, 0.08) !important; }
.profile-contribution-list > .profile-contribution:last-child { border-bottom-color: rgba(255, 255, 255, 0.08) !important; }
@media (min-width: 768px) {
  .profile-activity:not(:last-child) { border-left-color: rgba(255, 255, 255, 0.12) !important; }  /* activity timeline line */
}

/* Activity contribution cards: were #040404 (barely visible on the dark page); give them our
   subtle raised card surface. */
.profile-activity-contribution {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}
/* Timeline dot glyph a touch brighter (was #ccc); keeps the page-bg fill that breaks the line. */
.profile-activity-icon { color: rgba(255, 255, 255, 0.65) !important; }

/* ===================== Community pages (topic list + post list) ===================== */
/* Banner: mirror the home hero — the community image as a masked, side/bottom-faded banner
   pulled up under the sticky header, with the search sitting LOW over it (not dead-centre).
   Replaces the stock /hc/theming_assets/01JKWT3WGBJAJES2X307XJYZC9 placeholder (a Zendesk stock photo). */
.community-hero {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: calc(-1 * var(--vh-hd-h)) auto 0;   /* pull up under the sticky header */
  height: auto !important;
  aspect-ratio: 2560 / 967;                    /* community.png's own proportions */
  background: transparent !important;          /* kill the stock /hc/theming_assets/01JKWT3WGBJAJES2X307XJYZC9 */
  padding: 0;
  min-height: 0;
  overflow: visible;
  display: block;
  pointer-events: none;
}
.community-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/hc/theming_assets/01KX9WHKYEMPS05XRBYW1BRQPB) top center / contain no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(#000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(#000 86%, transparent);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  z-index: -2;                                 /* behind the noise texture */
  pointer-events: none;
}
/* Search overlaid low over the banner (not dead-centre). */
.community-hero .hero-inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 84%;              /* low over the banner, out of the busy centre */
  bottom: auto;
  display: flex;
  justify-content: center;
  z-index: 2;
  pointer-events: auto;
}
.community-hero .search { max-width: 640px; width: 100%; }

/* Search placement on the community list pages. Desktop keeps the home-style search low
   over the banner (the .community-hero .hero-inner copy). Mobile instead shows the search
   under the breadcrumbs, like every other page, via the copy added to .sub-nav in the
   templates. Two {{search}} widgets exist (the helper emits no id, so duplicates are safe);
   exactly ONE is visible per breakpoint. The `.community-hero ~ .container` scoping keeps
   this off the category/section pages, whose sub-nav search must stay visible on desktop. */
@media (max-width: 767px) {
  .community-hero .hero-inner { display: none; }                             /* hide the banner search */
}
@media (min-width: 768px) {
  .community-hero ~ .container .sub-nav .search-container { display: none; } /* search lives on the banner */
}

/* Topic tiles: one consistent card. Was a transparent violet-bordered box with the title
   left-aligned but the description/meta centred. Now a subtle raised card (fill + hairline
   border), everything LEFT-aligned, with a soft hover (not the stock full-violet flip). */
.topics.blocks .topics-item {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  text-align: left !important;
}
.topics.blocks .topics-item:hover,
.topics.blocks .topics-item:focus-within {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}
.topics.blocks .topics-item .blocks-item-link { align-items: flex-start; justify-content: flex-start; }
.topics.blocks .topics-item .meta-group { justify-content: flex-start !important; }
/* Stable text colours (out-specify the base :hover * white flip so they don't change on hover). */
.topics.blocks .topics-item .blocks-item-title { color: #85A0C2 !important; }
.topics.blocks .topics-item .blocks-item-description { color: rgba(255, 255, 255, 0.55) !important; }
.topics.blocks .topics-item .meta-data { color: rgba(255, 255, 255, 0.55) !important; }

/* Community header ("Community Topics" / "All posts") + its dropdown toggle shipped BLACK
   (invisible on the dark page) — force light. */
.community-header .title,
.community-header .dropdown-toggle,
.community-header .dropdown-toggle .title { color: #eaeaea !important; }

/* Section dividers (were stock #ddd) → our faded hairlines. */
.community,
.activity,
.community-activity,
.topic-header,
.topic-header .dropdown { border-color: rgba(255, 255, 255, 0.10) !important; }

/* Secondary metadata muted so titles/values lead. */
.topics-item .meta-data { color: rgba(255, 255, 255, 0.55) !important; }

/* Post-list filter/sorter toggles ("Show all" / "Sort by…") were also BLACK — force light. */
.topic-header .dropdown-toggle,
.topic-header .dropdown-toggle .title { color: #eaeaea !important; }
/* Post metadata muted so the (violet) post titles lead. */
.posts-list .meta-data { color: rgba(255, 255, 255, 0.55) !important; }

/* ===================== Native (Copenhagen) form controls ===================== */
/* The new-community-post form + comment form use plain {{input}}/{{select}}/{{textarea}}
   (NOT Garden), so the global Garden field styling never reached them — they rendered WHITE.
   Give native controls the same dark field surface so the field style is truly global. */
.form-field input:where(:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button])),
.form-field select,
.form-field textarea,
.form-field .nesty-input,
.form-field .hc-multiselect-toggle,
.hbs-form input:where(:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button])),
.hbs-form select,
.hbs-form textarea {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 4px !important;
  color: #eaeaea !important;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.form-field .nesty-input:focus,
.form-field .hc-multiselect-toggle:focus,
.hbs-form input:focus,
.hbs-form select:focus,
.hbs-form textarea:focus {
  border-color: rgba(255, 255, 255, 0.55) !important;
}
/* Native <select> dropdown list items readable on our dark panel. */
.form-field select option,
.hbs-form select option { background-color: #1b1b21; color: #eaeaea; }
/* Optional/hint text muted (was white / lighten(white)). */
.form-field .optional { color: rgba(255, 255, 255, 0.55) !important; }

/* Content-tags multiselect (native <select multiple> + its JS widget) — force our dark surface
   (the JS widget stays a transparent placeholder in local preview; native fallback rendered white). */
.form-field select[multiple],
#multi-select-content_tags,
#multi-select-content_tags > div {
  -webkit-appearance: none;
          appearance: none;
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 4px !important;
  color: #eaeaea !important;
}

/* Community post + comment bodies = prose: our article-body treatment (light text inherits;
   violet links; constrained images). */
.post-body a,
.comment-body a { color: #9288CF; text-decoration: underline; }
.post-body a:visited,
.comment-body a:visited { color: #734EA1; }
.post-body a:hover, .post-body a:active, .post-body a:focus,
.comment-body a:hover, .comment-body a:active, .comment-body a:focus { color: #E4E6EE; }
.post-body img,
.comment-body img { height: auto; max-width: 100%; }

/* Follow/subscribe buttons — the "Follow" (not-following) state shipped as a transparent outline;
   make it a FILLED brand button like everywhere else (matching its own "Unfollow"/selected state).
   Covers community (post/topic/profile), section and article follow. Hover brightens (the
   selected state used the old darken). */
.community-follow button,
.section-subscribe button,
.article-subscribe button {
  background-color: #734EA1 !important;
  border: 1px solid #734EA1 !important;
  color: #FFFFFF !important;
}
.community-follow button::after,
.section-subscribe button::after,
.article-subscribe button::after {
  border-left-color: color-mix(in srgb, #FFFFFF 40%, transparent) !important;
  color: #FFFFFF !important;
}
.community-follow button:hover, .community-follow button:focus,
.community-follow button[data-selected=true]:hover, .community-follow button[data-selected=true]:focus,
.section-subscribe button:hover, .section-subscribe button:focus,
.section-subscribe button[data-selected=true]:hover, .section-subscribe button[data-selected=true]:focus,
.article-subscribe button:hover, .article-subscribe button:focus,
.article-subscribe button[data-selected=true]:hover, .article-subscribe button[data-selected=true]:focus {
  background-color: #9272bb !important;
  border-color: #9272bb !important;
}

/* ============================================================================
   MOBILE (≤ 767px) — phone layout overrides.
   These fire only on small viewports; the desktop layout (≥ 768px) is untouched.
   Each rule reuses the desktop selector verbatim so it matches specificity and
   wins purely on source order (this block is last in the file).
   ============================================================================ */
@media (max-width: 767px) {

  /* ---- Header / logo: shrink the oversized wordmark proportionally ---- */
  :root { --vh-hd-h: 66px; }                 /* shorter bar on phones (hero pulls up by this) */
  header.header { gap: 12px; }
  header.header .logo img {
    height: 92px;                            /* was 160px */
    top: 12px;
    left: -6px;
  }

  /* ---- Hero: stop the title + search colliding; keep search comfortably tappable ---- */
  #main-content.hero .hero-title {
    top: 58%;                                 /* lowered ~one label-height (was 50%) */
    font-size: clamp(20px, 5vw, 26px);       /* a touch smaller than before (was up to 30px) */
    padding: 0 16px;
  }
  /* Align the hero search to the content column (24px insets = same edges as the cards)
     via left/right instead of padding. The search-icon is absolutely positioned against
     .hero-inner, so it ignores padding (it sat at x15, jammed on the field's edge); using
     left/right moves the whole box so the icon lands ~15px INSIDE the field — matching the
     category page's sub-nav search, which reads much cleaner. */
  #main-content.hero .hero-inner { top: 78%; left: 24px; right: 24px; padding: 0; }
  #main-content.hero .search { max-width: 100%; }
  /* Desktop pulls the cards 90px up under the tall hero; on the short mobile hero that
     jams them into the search. Give the search room to breathe above the first card. */
  .section.knowledge-base { margin-top: 24px; }
  .search input[type=search] {
    height: 46px;                            /* still big enough to tap/type on a phone */
    font-size: 16px;                         /* 16px avoids iOS focus-zoom */
    letter-spacing: 0.5px;
  }
  .search input[type=search]::placeholder { letter-spacing: 0.5px; }

  /* ---- Home category cards: one column, no icon, everything left-aligned ---- */
  .categories.blocks .blocks-list { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 16px; }
  .categories.blocks .blocks-item {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 20px;
    text-align: left;
  }
  .blocks-item-icon { display: none; }                                   /* no icon on mobile */
  .blocks-item-body { width: 100%; text-align: left; }
  .blocks-item-title { justify-content: flex-start; }
  .blocks-item-title-text { white-space: normal; overflow: visible; }
  .blocks-item-description { white-space: normal; text-align: left; }
  .blocks-item-articles { text-align: left; margin-top: 12px; }

  /* ---- Sub-nav (category / section / article): breadcrumbs on line 1, then a full-width
         search on line 2, styled like the home hero (the desktop override caps it at 280px
         / 38px, which reads tiny and stops short on a phone). .sub-nav is already
         flex-direction:column on mobile, so the two rows come for free. ---- */
  .sub-nav .search-container,
  .sub-nav .search { max-width: 100%; }
  .sub-nav .search input[type=search] { height: 46px; font-size: 16px; letter-spacing: 0.5px; }

  /* ---- Cards, everywhere they appear: one column, contents left-aligned (same as home).
         Category page section-tree is a 2-col grid of cards; the section page's article
         list is one card with 2 text columns. Both collapse to a single column. ---- */
  .section-tree { grid-template-columns: 1fr; gap: 16px; }
  .section-content .article-list { columns: 1; }

  /* ---- Footer: stack the columns, center everything, shrink the AM logo ---- */
  .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 24px; }
  .footer-brand { flex-direction: column; text-align: center; gap: 12px; }
  .footer-am-logo { height: 60px; }
  .footer-company { align-items: center; }
  /* Drop the address lines + Tax ID under the logo on mobile (keep the company name). */
  .footer-company span:not(.footer-company-name) { display: none; }
  .footer-right { align-items: center; }
  .footer-legal { justify-content: center; }
  .footer-social { justify-content: center; }
  .footer-bottom { justify-content: center; }
}

/* ============================================================================
   Mobile nav (hamburger + dropdown) — dark/violet restyle, GLOBAL.
   Copenhagen ships this menu white (#fff panel, dark #FFFFFF, #f3f3f3 hover)
   and the CLOSED hamburger inherits a dark stroke → invisible on our dark header
   (it only shows once open, when Copenhagen fills the icon with a #f3f3f3 circle).
   The mobile nav renders below 1024px, so these overrides are left UNMEDIATED —
   they apply wherever the menu is actually visible (phones AND tablets). Selectors
   mirror the Copenhagen ones verbatim so they win purely on source order.
   ============================================================================ */
/* Hamburger button — make the three strokes visible on the dark bar (both states) */
.nav-wrapper-mobile .menu-button-mobile { color: #eaeaea; }
.nav-wrapper-mobile .menu-button-mobile .icon-menu { color: #eaeaea; }
/* open state: Copenhagen fills the icon circle #f3f3f3 (white) — use a violet tint */
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
  background: color-mix(in srgb, #734EA1 26%, transparent);
}

/* Dropdown panel — frosted dark violet instead of the white sheet */
.nav-wrapper-mobile .menu-list-mobile {
  background-color: color-mix(in srgb, #734EA1 14%, rgba(12, 12, 12, 0.97));
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
/* Items — light text, violet-tinted hover/focus (was dark text + #f3f3f3) */
.nav-wrapper-mobile .menu-list-mobile-items a,
.nav-wrapper-mobile .menu-list-mobile-items button { color: #eaeaea; }
.nav-wrapper-mobile .menu-list-mobile-items a:hover,
.nav-wrapper-mobile .menu-list-mobile-items a:focus,
.nav-wrapper-mobile .menu-list-mobile-items a:active,
.nav-wrapper-mobile .menu-list-mobile-items button:hover,
.nav-wrapper-mobile .menu-list-mobile-items button:focus,
.nav-wrapper-mobile .menu-list-mobile-items button:active {
  background-color: color-mix(in srgb, #734EA1 22%, transparent);
  text-decoration: none;
}
/* Dividers + profile sub-label → subtle light */
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider { border-bottom-color: rgba(255, 255, 255, 0.10); }
.nav-wrapper-mobile .menu-list-mobile-items .my-profile .my-profile-tooltip { color: rgba(255, 255, 255, 0.5); }

/* ============================================================================
   Contributions / Following — collapsible-nav polish (mobile collapsed state)
   ============================================================================ */
/* (1)+(2) Tab-bar dividers were a flat whitish hairline (rgba(255,255,255,.35)). On mobile,
   swap them for our standard faded-violet swimline (transparent at both ends), and give the
   TOP bar (Contributions/Following) a top line too so it's enclosed like the sub-nav. The
   lines are absolutely-positioned pseudo-elements — the nav is a flex column AND already
   position:relative, so an absolute ::before/::after does NOT become a stray flex item.
   Scoped to mobile; the desktop tab-underline styling is left untouched. */
@media (max-width: 767px) {
  .my-activities-nav .collapsible-nav,
  .profile-nav .collapsible-nav { border-bottom: none; }
  .collapsible-nav-border { border-top: none; border-bottom: none; }
  .my-activities-nav .collapsible-nav::before,
  .my-activities-nav .collapsible-nav::after,
  .profile-nav .collapsible-nav::before,
  .profile-nav .collapsible-nav::after,
  .collapsible-nav-border::before,
  .collapsible-nav-border::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb, #9288CF 20%, transparent) 5%,
      color-mix(in srgb, #9288CF 20%, transparent) 95%,
      transparent 100%);
  }
  .my-activities-nav .collapsible-nav::before,
  .profile-nav .collapsible-nav::before,
  .collapsible-nav-border::before { top: 0; }
  .my-activities-nav .collapsible-nav::after,
  .profile-nav .collapsible-nav::after,
  .collapsible-nav-border::after { bottom: 0; }
}

/* (3) Toggle icon: one chevron that flips (down = expand, up = collapse) rather than morphing
   into an X — the familiar down/up-arrow convention. The toggle is hidden ≥768px, so this is
   mobile-only in effect. Applied to the article-sidebar toggle too, for one consistent icon. */
.collapsible-nav-toggle[aria-expanded=false] .chevron-icon,
.collapsible-nav-toggle[aria-expanded=true] .chevron-icon,
.collapsible-sidebar-toggle[aria-expanded=false] .chevron-icon,
.collapsible-sidebar-toggle[aria-expanded=true] .chevron-icon {
  display: inline-block;
  transition: transform .15s ease;
}
.collapsible-nav-toggle[aria-expanded=true] .chevron-icon,
.collapsible-sidebar-toggle[aria-expanded=true] .chevron-icon { transform: rotate(180deg); }
.collapsible-nav-toggle[aria-expanded=true] .x-icon,
.collapsible-sidebar-toggle[aria-expanded=true] .x-icon { display: none; }
/* The chevron paths are stroke="currentColor"; .collapsible-nav-toggle had no colour set so
   it inherited near-black and vanished on the dark bar. Match the sidebar toggle (#eaeaea). */
.collapsible-nav-toggle { color: #eaeaea; }

/* ===================== Search sidebar — filter swimlines + chevron ===================== */
/* The filter sidebar (Type / Source / …) had a flat white border-top (#ddd) above it and no
   line below. It only shows below 1024px (the ≥1024px column layout drops it), so there we
   swap it for our faded-violet swimline — top AND bottom — so the filter block is enclosed
   consistently, like every other tab/section divider. */
@media (max-width: 1023px) {
  .search-results-sidebar { border-top: none; }
  /* Hug each filter control (Type / Source / …) tightly with the faded swimline — top AND
     bottom on the control itself — instead of one line stranded at the sidebar's far bottom
     (which sat ~30px under the control, past its margin, reading as detached / "too low").
     .filters-in-section is a .collapsible-sidebar (already position:relative). */
  .search-results-sidebar .filters-in-section::before,
  .search-results-sidebar .filters-in-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb, #9288CF 20%, transparent) 5%,
      color-mix(in srgb, #9288CF 20%, transparent) 95%,
      transparent 100%);
  }
  .search-results-sidebar .filters-in-section::before { top: 0; }
  .search-results-sidebar .filters-in-section::after { bottom: 0; }
}
/* Filter toggle chevron in the accent blue, matching the blue filter titles ("Type", …). */
.search-results-sidebar .collapsible-sidebar-toggle { color: #85A0C2; }

/* ===================== Instant-search suggestions (<zd-autocomplete>) =====================
   Zendesk's autocomplete dropdown (shown while typing in any search box) is a LIGHT-DOM web
   component (no shadow root), shipping white with blue titles + dark-grey breadcrumbs. Restyle
   it to our dark/violet frosted panel. The tags carry no classes, so we target them directly;
   !important beats the component's own injected stylesheet. Applies on mobile AND desktop. */
zd-autocomplete {
  background: color-mix(in srgb, #734EA1 12%, rgba(12, 12, 12, 0.97)) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.55) !important;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
zd-autocomplete [role="option"] { color: rgba(255, 255, 255, 0.85) !important; }
zd-autocomplete [role="option"]:hover,
zd-autocomplete [role="option"][aria-selected="true"] {
  background: color-mix(in srgb, #734EA1 22%, transparent) !important;
}
zd-autocomplete-title-multibrand,
zd-autocomplete-title { color: #eaeaea !important; }
/* the matched substring (<em>) — highlight in our link violet, upright (not italic) */
zd-autocomplete-title-multibrand em,
zd-autocomplete-title em { color: #9288CF !important; font-style: normal; font-weight: 700; }
zd-autocomplete-breadcrumbs-multibrand,
zd-autocomplete-breadcrumbs { color: rgba(255, 255, 255, 0.5) !important; }
/* The same dropdown also renders a HEADER ("Featured articles" when the field is focused but
   empty, "Suggested articles" while typing) plus a hairline under every row. Zendesk ships both
   in light-theme colours — a dark-slate #2F3941 heading (invisible on our panel) and #C2C8CC
   rules (the harsh light lines) — so they need overriding too. The heading is dressed like our
   other section labels (Caudex, small-caps, accent blue) for consistency. */
zd-autocomplete-header {
  color: #85A0C2 !important;
  font-family: 'Caudex', Georgia, serif !important;
  font-size: 18px !important;      /* Zendesk ships 15px — too timid for a panel heading */
  font-variant: small-caps;
  letter-spacing: 0.3px;
  border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}
zd-autocomplete [role="option"] { border-bottom-color: rgba(255, 255, 255, 0.08) !important; }

/* ===================== Promoted / featured article lists =====================
   Used by the home page's promoted-articles block AND the community pages' "Featured posts"
   list (same markup), so styling it here covers both. Base Copenhagen renders these as three
   bare text columns divided by #ddd underlines — visibly unfinished next to our category
   cards. Turn every entry into a compact card in the same language as those cards. */
/* Same vertical rhythm as the Community / Recent activity bands (see the shared ::before rule
   above): 60px of air above the divider, then 30px before the heading. Measured off those
   sections rather than eyeballed — their gap comes from a 60px section margin-bottom. */
.section.knowledge-base .articles { margin-top: 60px; padding-top: 30px; }
.section.knowledge-base .articles > h2 {
  margin: 0 0 18px;
  text-align: center;
  font-family: 'Caudex', Georgia, serif;
  font-size: 26px;
  color: #eaeaea;
}
.promoted-articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  /* collapses to 1 col on phones */
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Neutralise the base flex sizing (33% width + 30px right padding + nth-child hacks). */
.promoted-articles-item {
  flex: none;
  width: auto;
  padding: 0;
  align-self: stretch;
  background: #111111;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  box-shadow: 5px 6px 12px color-mix(in srgb, #584AA6 18%, transparent);
  transition: background-color .15s ease, border-color .15s ease;
}
@media (min-width: 1024px) {
  .promoted-articles-item { padding-right: 0; width: auto; align-self: stretch; }
}
/* The link fills the card; the base #ddd underline goes away (incl. its last-child variants). */
.promoted-articles-item a,
.promoted-articles-item:last-child a {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  box-sizing: border-box;
  border: 0;
  padding: 16px 18px;
  color: #9288CF;
  font-size: 15px;
  line-height: 1.35;
  text-decoration: none;
}
/* Chevron echoing the category cards' arrow. */
.promoted-articles-item a::after {
  content: "\203A";
  margin-left: auto;
  color: #85A0C2;
  font-size: 20px;
  line-height: 1;
  transition: transform .15s ease;
}
.promoted-articles-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}
.promoted-articles-item:hover a { color: #E4E6EE; }
.promoted-articles-item:hover a::after { transform: translateX(4px); }
zd-autocomplete [role="option"]:last-child { border-bottom-color: transparent !important; }

/* ===================== Support request form — prefill read-only cue =====================
   The Player ID field, when prefilled from the game URL, is locked read-only by script.js
   (class .vh-prefilled-readonly). Subtle cue that it's auto-provided (not a broken field):
   slightly dimmed + not-allowed cursor. Editable/organic Player ID is untouched. */
input.vh-prefilled-readonly {
  opacity: 0.7 !important;
  cursor: not-allowed !important;
}

/* ===================== Dropdown toggles — light text (global) =====================
   Copenhagen's .dropdown-toggle sets no colour, so in a few spots it inherited near-black
   and vanished on our dark theme (e.g. the profile "Sort by recent activity" sorter, and
   the article/post comment sorter). Set a light default globally — context-specific rules
   (header nav, community/topic headers, …) are more specific and still win where they set
   their own colour. The chevron uses currentColor, so it lights up too. */
.dropdown-toggle { color: #eaeaea; }
/* The profile sorter's divider was a light-grey #eee hairline (mobile) — off on the dark
   page; drop it to our subtle hairline. */
.profile-section-sorter { border-top-color: rgba(255, 255, 255, 0.12); }

/* ===================== Requests — list + single ticket (dark-theme pass) =====================
   These pages were still on stock Copenhagen (light #ddd/#eee/#efefef bits, near-black slabs)
   that read badly on the dark theme. Unify with the rest of the system. */

/* [LIST] The table header sat on a solid #0c0c0c slab (covering the page texture/glow, looked
   like a black band). Make it transparent with a content-width hairline, like the my-activities
   tables. */
.requests-list-page thead {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
}

/* [SINGLE] Content started UNDER the oversized logo (breadcrumbs slid beneath it). Push the
   breadcrumbs — and everything below — down to clear it, like the .sub-nav padding elsewhere. */
.request-breadcrumbs { padding-top: 56px; }

/* [SINGLE] Stock light hairlines → our subtle dark-theme hairline. */
.request-title { border-bottom-color: rgba(255, 255, 255, 0.12); }
.request-details { border-bottom-color: rgba(255, 255, 255, 0.10); }
.request-sidebar { border-top-color: rgba(255, 255, 255, 0.12); border-bottom-color: rgba(255, 255, 255, 0.12); }

/* [SINGLE] "Ticket details" summary panel was a flat near-black box (#040404). Frosted,
   violet-tinted card that sits on the page like our other surfaces (desktop = the right rail). */
@media (min-width: 1024px) {
  .request-sidebar {
    background: color-mix(in srgb, #734EA1 16%, rgba(12, 12, 12, 0.6)) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 10px !important;
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
    padding: 12px 20px !important;
  }
}

/* [SINGLE] Resting "Add to conversation" field was light-grey (#efefef) with white text —
   invisible. Match our dark form fields: faint fill, hairline border, muted light label. */
.request-main .comment-show-container {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: rgba(255, 255, 255, 0.55) !important;
  border-radius: 4px !important;
}
.request-main .comment-show-container:hover {
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

/* [LIST] Row separators were a near-white #e8eaec hairline — swap for our subtle faded
   swimline (tapered at both ends), matching the my-activities / subscriptions tables. */
.requests-list-page tbody tr {
  border-bottom: 1px solid transparent !important;
  border-image: linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb, #9288CF 26%, transparent) 12%,
      color-mix(in srgb, #9288CF 26%, transparent) 88%,
      transparent 100%) 1 !important;
}

/* ===================== "Still need help?" escalation block (article footer) =====================
   The LAST step of the deflection ladder: the player read the article and is still stuck. The
   contact path lives here rather than in the header, so support is not the first thing offered.

   Content comes from Zendesk's native {{request_callout}} helper (article_page.hbs), NOT from
   hardcoded markup — so the wording stays localized by Zendesk in every enabled language, and
   Zendesk's own permission logic applies ("a link for users to create a request, IF they are
   allowed"). Staff can't submit requests from the help center, so for agents/admins the helper
   renders EMPTY — hence the :has(a) guard: style it only when there is a real link, and hide the
   empty shell otherwise so nobody sees a blank card. Browsers without :has() fall back to the
   plain inline link (graceful, never a broken box). */
.article-more-questions:has(a) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 34px 0 24px;
  padding: 26px 28px;
  text-align: center;
  background: color-mix(in srgb, #734EA1 14%, rgba(12, 12, 12, 0.55));
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  font-family: 'Caudex', Georgia, serif;
  font-size: 19px;
  line-height: 1.3;
  color: #eaeaea;
}
/* Turn the callout's link into a filled button (matches the Follow / submit buttons). */
.article-more-questions:has(a) a,
.article-more-questions:has(a) a:visited {
  display: inline-block;
  padding: 11px 26px;
  background-color: #734EA1;
  border: 1px solid #734EA1;
  border-radius: 4px;
  color: #FFFFFF;
  font-family: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;
  font-size: 15px;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.article-more-questions:has(a) a:hover,
.article-more-questions:has(a) a:focus,
.article-more-questions:has(a) a:active {
  background-color: #9272bb;
  border-color: #9272bb;
  color: #FFFFFF;
}
.article-more-questions:not(:has(a)) { display: none; }

/* ---------------------------------------------------------------------------
   Content-status badges (pipeline)
   Two independent axes, mirrored into article labels because the templating
   language cannot see the other one:
     · `wip`     → content is not finished
     · `testers` → restricted to the [VH] Testers user segment, i.e. invisible
                   to ordinary signed-in users
   The two are independent and BOTH render: an article can be finished but held
   back until launch (eye only), or unfinished and hidden (WIP + eye).
   Section- and category-level badges are derived in script.js: the Section and
   Category template objects carry no labels and no segment information, so the
   only place that knowledge exists in the page is the article list itself.
   --------------------------------------------------------------------------- */
/* Both badges live in one wrapper so they share a single alignment context: each one
   used to hang off the heading's baseline on its own, and since the word badge and the
   icon badge have different box heights they ended up at different heights and with an
   uneven gap. The wrapper centres them against each other, and carries the gap. */
.vh-badge-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 9px;
  vertical-align: middle;
}
.vh-badge-group:empty { display: none; }              /* article with no labels at all */

.vh-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 18px;                                        /* identical for word and icon */
  padding: 0 6px;
  border-radius: 3px;
  border: 1px solid transparent;
  font-family: 'Caudex', Georgia, serif;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  font-weight: 600;
}
.vh-badge-wip {
  color: #f0c674;
  border-color: color-mix(in srgb, #f0c674 40%, transparent);
  background: color-mix(in srgb, #f0c674 12%, transparent);
  padding-top: 1px;                                    /* the caps sit high in this face */
}
.vh-badge-hidden {
  color: #85A0C2;
  border-color: color-mix(in srgb, #85A0C2 40%, transparent);
  background: color-mix(in srgb, #85A0C2 12%, transparent);
  padding: 0 5px;
}
.vh-badge-hidden .vh-badge-icon { display: block; }

/* Article rows are flex with the link stretched for a wide click target, and aligned on
   the baseline for the promoted star. The badge group is not text, so centre it on the
   row instead of hanging it off that baseline. */
.article-list-item > .vh-badge-group { align-self: center; }

/* Home page: the badge sits inside the category link, between the name and the chevron, so
   it must not inherit the small-caps treatment of the title, and the article rows there need
   the same flex row the category page uses. */
.blocks-item-title .vh-badge-group { margin: 0 8px 0 9px; vertical-align: 0.12em; }
.blocks-item-title .vh-badge { font-variant: normal; letter-spacing: 0.08em; }
.blocks-item-articles li { display: flex; align-items: center; gap: 6px; }
.blocks-item-articles li > .vh-badge-group { margin-left: 2px; }

/* Inside a heading the group must not inherit the display size, and it sits slightly
   above the heading's baseline rather than on it. */
.article-title .vh-badge-group,
.section-tree-title .vh-badge-group,
.page-header h1 .vh-badge-group { vertical-align: 0.18em; }
.article-title .vh-badge,
.page-header h1 .vh-badge { height: 20px; font-size: 11px; }

/* ===================== Voidex display font — article headings (H1–H4) =====================
   Branded display face for article headings. WOFF2 (every modern browser) + WOFF fallback
   (older) — both work everywhere. font-display:swap shows the Caudex fallback immediately and
   swaps in Voidex once the ~400 KB file loads (no invisible text during download). The face is
   Voidex Bold; declared as `normal` so headings render it as-is (no synthetic bolding). */
@font-face {
  font-family: 'Voidex';
  src: url(/hc/theming_assets/01KYPYBE183NMTEZ0D2ZGAKA0G) format('woff2'),
       url(/hc/theming_assets/01KYPYBEP4WT35MFBR858AKJZA) format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.article-title,
.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4 {
  font-family: 'Voidex', 'Caudex', Georgia, serif;
}
/* In-article headings (NOT the title) rendered as small caps — a distinct section look. */
.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4 {
  font-variant: small-caps;
  letter-spacing: 0.5px;
}