@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: var(--n-bg);
  color: var(--n-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

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

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

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

h4 {
  font-size: 16px;
}

a {
  color: var(--n-link);
  text-decoration: none;
}
a:visited {
  color: var(--n-link-visited);
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}

.hbs-form input,
.hbs-form textarea, .search input,
.search textarea {
  color: var(--n-text);
  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 var(--n-brand);
}
.hbs-form input[disabled], .search input[disabled] {
  background-color: var(--n-border);
}
.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 var(--n-s1);
  background-position: right 10px center;
  border: 1px solid var(--n-text2);
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: var(--n-text3);
  width: 100%;
}
.hbs-form select:focus, .search select:focus {
  border: 1px solid var(--n-brand);
}
.hbs-form select::-ms-expand, .search select::-ms-expand {
  display: none;
}
.hbs-form textarea, .search textarea {
  border: 1px solid var(--n-text2);
  border-radius: 2px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}
.hbs-form textarea:focus, .search textarea:focus {
  border: 1px solid var(--n-brand);
}

.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 var(--n-border);
  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 var(--n-brand);
  border-radius: 4px;
  color: var(--n-brand);
  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: var(--n-brand);
}
.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: var(--n-brand);
  color: var(--n-brand-text);
  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: darken(var(--n-brand), 20%);
  border-color: darken(var(--n-brand), 20%);
}
.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: var(--n-brand);
  border: 0;
  border-radius: 4px;
  color: var(--n-brand-text);
  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: var(--n-brand-text);
}
.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: darken(var(--n-brand), 20%);
}
.button-large[disabled], .hbs-form input[type=submit][disabled] {
  background-color: var(--n-border);
}

.button-secondary {
  color: lighten(var(--n-text), 20%);
  border: 1px solid var(--n-text2);
  background-color: transparent;
}
.button-secondary:visited {
  color: lighten(var(--n-text), 20%);
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: var(--n-text);
  border: 1px solid var(--n-text2);
  background-color: darken(var(--n-bg), 3%);
}

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

.split-button button {
  background-color: var(--n-brand);
  border: 0;
  color: var(--n-brand-text);
  height: 32px;
  line-height: 16px;
  outline-color: var(--n-brand);
}

[dir=rtl] .split-button button:not(:only-child):first-child {
  border-left: 1px solid var(--n-brand-text);
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):first-child {
  border-right: 1px solid var(--n-brand-text);
  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: lighten(var(--n-text), 20%);
  font-size: 13px;
  text-align: left;
}
[dir=rtl] .table th,
[dir=rtl] .table th a {
  text-align: right;
}
.table tr {
  border-bottom: 1px solid var(--n-border);
  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 var(--n-text2);
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}
.form-field input:focus {
  border: 1px solid var(--n-brand);
}

.form-field input[type=text] {
  border: 1px solid var(--n-text2);
  border-radius: 4px;
}
.form-field input[type=text]:focus {
  border: 1px solid var(--n-brand);
}

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

.form-field .nesty-input {
  border-radius: 4px;
  border: 1px solid var(--n-text2);
  height: 40px;
  line-height: 40px;
  outline: none;
  vertical-align: middle;
}
.form-field .nesty-input:focus {
  border: 1px solid var(--n-brand);
  text-decoration: none;
}

.form-field .hc-multiselect-toggle {
  border: 1px solid var(--n-text2);
}

.form-field .hc-multiselect-toggle:focus {
  outline: none;
  border: 1px solid var(--n-brand);
  text-decoration: none;
}

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

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

.form-field .optional {
  color: lighten(var(--n-text), 20%);
  margin-left: 4px;
}

.form-field p {
  color: lighten(var(--n-text), 20%);
  font-size: 12px;
  margin: 5px 0;
}

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

.form footer a {
  color: lighten(var(--n-text), 20%);
  cursor: pointer;
  margin-right: 15px;
}

.form .suggestion-list {
  font-size: 13px;
  margin-top: 30px;
}
.form .suggestion-list label {
  border-bottom: 1px solid var(--n-border);
  display: block;
  padding-bottom: 5px;
}
.form .suggestion-list li {
  padding: 10px 0;
}
.form .suggestion-list li a:visited {
  color: var(--n-link-visited);
}

/***** 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: var(--n-brand);
}

.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: var(--n-s1);
  box-shadow: 0 0 4px 0 var(--n-shadow), 0 4px 10px 0 var(--n-shadow-soft);
  border: solid 1px var(--n-border);
  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: var(--n-link);
  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: var(--n-link);
  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: var(--n-s2);
}
.nav-wrapper-mobile .menu-list-mobile {
  position: absolute;
  background-color: var(--n-s1);
  box-shadow: 0 10px 10px 0 var(--n-shadow);
  border-top: solid 1px var(--n-border);
  border-bottom: solid 1px var(--n-border);
  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 var(--n-border);
  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: var(--n-text);
  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: var(--n-s2);
  text-decoration: underline;
}
.nav-wrapper-mobile .menu-list-mobile-items a {
  display: block;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: var(--n-text);
}
.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: var(--n-s2);
}
.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: var(--n-text2);
}
.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;
}

/***** 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: var(--n-link);
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: var(--n-link);
  background-color: transparent;
}
.user-info > button::after {
  color: var(--n-link);
  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: var(--n-brand);
  border: 2px solid var(--n-s1);
  border-radius: 50%;
  bottom: -4px;
  background-color: var(--n-brand-text);
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 17px;
}

/***** Footer *****/
.footer {
  border-top: 1px solid var(--n-border);
  margin-top: 60px;
  padding: 30px 0;
}
.footer a {
  color: lighten(var(--n-text), 20%);
}
.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: lighten(var(--n-text), 20%);
  display: inline-block;
}

.powered-by-zendesk a,
.powered-by-zendesk a:visited {
  color: lighten(var(--n-text), 20%);
}

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

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

.search {
  border-color: var(--n-text2);
  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: var(--n-brand);
}
.search input[type=search],
.search .clear-button {
  background-color: var(--n-s1);
  border-radius: 30px;
  border: none;
}
.search-full input[type=search], .search-full .clear-button {
  border-color: var(--n-s1);
}
.search input[type=search] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  color: var(--n-text2);
  flex: 1 1 auto;
  height: 40px;
  width: 100%;
}
.search input[type=search]:focus {
  color: var(--n-text3);
}
.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 var(--n-s1) inset;
}
.search .clear-button {
  align-items: center;
  box-sizing: border-box;
  color: var(--n-text2);
  cursor: pointer;
  display: none;
  flex: none;
  justify-content: center;
  padding: 0 15px;
}
.search .clear-button:hover {
  background-color: var(--n-brand);
  color: var(--n-s1);
}
.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px var(--n-brand);
}
.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: var(--n-brand);
}
[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: var(--n-brand);
}

[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: var(--n-brand);
}
[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: var(--n-brand);
}

.search-icon {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  left: 15px;
  z-index: 1;
  width: 18px;
  height: 18px;
  color: var(--n-text2);
  pointer-events: none;
}
[dir=rtl] .search-icon {
  left: auto;
  right: 15px;
}

/***** Hero component *****/
.hero {
  background-image: url(/hc/theming_assets/01JXG3XK8BA6WQ865PGCCTHXTW);
  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 var(--n-brand);
  border-radius: 4px;
  box-sizing: border-box;
  color: var(--n-brand);
  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: var(--n-brand);
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: var(--n-brand-text);
  text-decoration: none;
}
.blocks-item-internal {
  background-color: transparent;
  border: 1px solid var(--n-border);
}
.blocks-item-internal .icon-lock {
  height: 15px;
  width: 15px;
  bottom: 5px;
  position: relative;
}
.blocks-item-internal a {
  color: var(--n-text);
}
.blocks-item-link {
  color: var(--n-brand);
  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 var(--n-brand);
  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 var(--n-border);
  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 var(--n-border);
  }
}

/***** Community section in homepage *****/
.community {
  text-align: center;
}
.community-image {
  min-height: 300px;
  margin-top: 32px;
  background-image: url(/hc/theming_assets/01JXG3XM1XYHJKF26677STKX99);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}
.community a {
  color: var(--n-link);
  text-decoration: underline;
}
.community a:visited {
  color: var(--n-link-visited);
}
.community a:hover, .community a:active, .community a:focus {
  color: var(--n-link-hover);
}

.community,
.activity {
  border-top: 1px solid var(--n-border);
  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 var(--n-border);
  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: var(--n-text);
  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: var(--n-link);
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: var(--n-link-visited);
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: var(--n-link-hover);
}
.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: var(--n-brand);
  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: var(--n-text);
}
.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: var(--n-text);
}

.icon-star {
  color: var(--n-brand);
  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 var(--n-border);
  font-size: 16px;
  padding: 15px 0;
}
.section-list-item:first-child {
  border-top: 1px solid var(--n-border);
}
.section-list-item a {
  align-items: center;
  color: var(--n-text);
  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: 100%;
    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-info img { /* -js */
  border-radius: 8px;
}
.article-meta {
  display: inline-block;
  vertical-align: middle;
}
.article-body {
  display: flow-root;
}
.article-body a {
  color: var(--n-link);
  text-decoration: underline;
}
.article-body a:visited {
  color: var(--n-link-visited);
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: var(--n-link-hover);
}
.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: darken(var(--n-bg), 5%);
}
.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: darken(var(--n-bg), 3%);
  border: 1px solid var(--n-border);
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: darken(var(--n-bg), 3%);
  border: 1px solid var(--n-border);
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.article-body blockquote {
  border-left: 1px solid var(--n-border);
  color: lighten(var(--n-text), 20%);
  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: lighten(var(--n-text), 20%);
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: var(--n-brand);
  width: 18px;
  height: 18px;
}
.article-sidebar {
  border-bottom: 1px solid var(--n-border);
  border-top: 1px solid var(--n-border);
  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 var(--n-border);
  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 var(--n-border);
  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: var(--n-link);
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: var(--n-link-visited);
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: var(--n-link-hover);
}
.article-return-to-top {
  border-top: 1px solid var(--n-text2);
}
@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}
.article-return-to-top a {
  color: var(--n-text);
  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: var(--n-text);
  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: lighten(var(--n-text), 20%);
}

/***** 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: lighten(var(--n-text), 20%);
}
.share a:hover {
  text-decoration: none;
  color: var(--n-brand);
}
.share a svg {
  height: 18px;
  width: 18px;
  display: block;
}

/***** Comments *****/
/* Styles comments inside articles, posts and requests */
.comment {
  border-bottom: 1px solid var(--n-border);
  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 var(--n-border);
  border-top: 1px solid var(--n-border);
  padding: 20px 0;
}
.comment-overview p {
  margin-top: 0;
}
.comment-callout {
  color: lighten(var(--n-text), 20%);
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}
.comment-callout a {
  color: var(--n-link);
  text-decoration: underline;
}
.comment-callout a:visited {
  color: var(--n-link-visited);
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: var(--n-link-hover);
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: lighten(var(--n-text), 20%);
  font-size: 13px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid var(--n-brand);
  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: var(--n-brand);
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  color: var(--n-link);
  text-decoration: underline;
}
.comment-body a:visited {
  color: var(--n-link-visited);
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: var(--n-link-hover);
}
.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: darken(var(--n-bg), 5%);
}
.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: darken(var(--n-bg), 3%);
  border: 1px solid var(--n-border);
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.comment-body pre {
  background: darken(var(--n-bg), 3%);
  border: 1px solid var(--n-border);
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.comment-body blockquote {
  border-left: 1px solid var(--n-border);
  color: lighten(var(--n-text), 20%);
  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: lighten(var(--n-text), 20%);
  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: var(--n-brand);
}

.vote-up, .vote-down {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  color: lighten(var(--n-text), 20%);
  cursor: pointer;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vote-voted {
  color: var(--n-brand);
}

.vote-voted:hover {
  color: darken(var(--n-brand), 20%);
}

/***** 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/01JXG3XKKTPJ66169NGPBAHQZA);
  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 var(--n-border);
  font-size: 13px;
}
@media (min-width: 768px) {
  .topic-header {
    padding-bottom: 10px;
  }
}
.topic-header .dropdown {
  display: block;
  border-top: 1px solid var(--n-border);
  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: var(--n-brand);
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: var(--n-brand-text);
  color: var(--n-brand-text);
}
.community-follow button[data-selected=true] {
  background-color: var(--n-brand);
  color: var(--n-brand-text);
}
.community-follow button[data-selected=true]::after {
  border-left: 1px solid var(--n-brand-text);
  color: var(--n-brand-text);
}
.community-follow button[data-selected=true]:hover {
  background-color: darken(var(--n-brand), 20%);
  border-color: darken(var(--n-brand), 20%);
}
.community-follow button::after {
  border-left: 1px solid var(--n-brand);
  content: attr(data-follower-count);
  color: var(--n-brand);
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}
@media (min-width: 768px) {
  .community-follow button::after {
    position: static;
  }
}
[dir=rtl] .community-follow button::after {
  border-left: 0;
  border-right: 1px solid var(--n-brand);
  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 var(--n-border);
  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: var(--n-link);
  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: var(--n-link-visited);
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: lighten(var(--n-text), 20%);
  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: var(--n-text);
    display: block;
  }
}

/***** Status labels *****/
/* Styles labels used in posts, articles and requests */
.status-label {
  background-color: var(--n-success);
  border-radius: 4px;
  color: var(--n-on-accent);
  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: var(--n-brand);
}
.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: var(--n-border);
  color: lighten(var(--n-text), 20%);
}
.status-label-pending, .status-label-pending-moderation {
  background-color: var(--n-info);
  text-align: center;
}
.status-label-open {
  background-color: var(--n-error);
}
.status-label-solved {
  background-color: var(--n-text2);
}
.status-label-new {
  background-color: var(--n-warning);
  color: var(--n-warning);
}
.status-label-hold {
  background-color: var(--n-text);
}
.status-label-request {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .status-label-request {
    max-width: 150px;
  }
}

/***** Post *****/
/*
* The post grid is defined this way:
* Content | Sidebar
* 70%     | 30%
*/
.post {
  flex: 1;
  margin-bottom: 10px;
}
@media (min-width: 1024px) {
  .post {
    flex: 1 0 70%;
    max-width: 70%;
  }
}
.post-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .post-container {
    flex-direction: row;
  }
}
.post-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .post-header {
    align-items: baseline;
    flex-direction: row;
  }
}
.post-header .status-label {
  vertical-align: super;
}
.post-title {
  margin-bottom: 20px;
  width: 100%;
}
@media (min-width: 768px) {
  .post-title {
    margin-bottom: 0;
    padding-right: 10px;
  }
}
.post-title h1 {
  display: inline;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .post-title h1 {
    margin-right: 5px;
  }
}
.post-author {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}
.post-avatar {
  margin-bottom: 30px;
}
.post-content {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  word-break: break-word;
}
.post-info-container {
  display: flex;
  margin-bottom: 40px;
}
.post-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .post-info {
  padding-right: 0;
  padding-left: 20px;
}
.post-meta {
  display: inline-block;
  flex: 1;
  margin-left: 10px;
  vertical-align: middle;
}
[dir=rtl] .post-meta {
  margin-left: 0;
  margin-right: 10px;
}
.post-body {
  display: flow-root;
}
.post-body a {
  color: var(--n-link);
  text-decoration: underline;
}
.post-body a:visited {
  color: var(--n-link-visited);
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: var(--n-link-hover);
}
.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: darken(var(--n-bg), 5%);
}
.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: darken(var(--n-bg), 3%);
  border: 1px solid var(--n-border);
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.post-body pre {
  background: darken(var(--n-bg), 3%);
  border: 1px solid var(--n-border);
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.post-body blockquote {
  border-left: 1px solid var(--n-border);
  color: lighten(var(--n-text), 20%);
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: lighten(var(--n-text), 20%);
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: var(--n-brand);
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 5px;
  vertical-align: middle;
}
.post-sidebar {
  border-top: 1px solid var(--n-border);
  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: var(--n-info);
  border-radius: 4px;
  color: var(--n-on-accent);
  font-size: 12px;
  font-weight: 600;
  padding: 0px 8px;
  vertical-align: top;
  white-space: nowrap;
  display: inline-block;
  line-height: 18px;
  vertical-align: middle;
}

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

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

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

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

.community-badge {
  margin: 2px;
}

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

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

.collapsible-nav-border {
  border-bottom: 1px solid var(--n-border);
  border-top: 1px solid var(--n-border);
}
@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 var(--n-brand);
}

.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}
.collapsible-nav-list li {
  color: var(--n-text);
  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: var(--n-text);
  display: block;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:hover {
    border-bottom: 4px solid var(--n-border);
  }
  .collapsible-nav-list li:hover a:not([aria-current=page]) {
    padding: 15px 0 11px 0;
    text-decoration: none;
  }
}
.collapsible-nav-list li:not([aria-selected=true]),
.collapsible-nav-list li:not(.current) {
  display: none;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:not([aria-selected=true]),
  .collapsible-nav-list li:not(.current) {
    display: block;
  }
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true] {
    padding: 15px 0 11px 0;
  }
}
.collapsible-nav-list li[aria-selected=true],
.collapsible-nav-list li.current {
  order: 0;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true],
  .collapsible-nav-list li.current {
    border-bottom: 4px solid var(--n-brand);
    order: 1;
  }
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
  color: var(--n-text);
}

.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 var(--n-brand);
}
.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: darken(var(--n-bg), 5%);
  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: lighten(var(--n-text), 20%);
  font-size: 13px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: lighten(var(--n-text), 20%);
}

/***** Request *****/
.request-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .request-container {
    align-items: flex-start;
    flex-direction: row;
  }
}
.request-container .comment-container {
  min-width: 0;
}
.request-breadcrumbs {
  margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .request-breadcrumbs {
    margin-bottom: 60px;
  }
}
.request-main {
  flex: 1 0 auto;
  order: 1;
}
.request-main .comment-fields, .request-main .request-submit-comment {
  display: none;
}
.request-main .comment-fields.shown {
  display: block;
}
.request-main .request-submit-comment.shown {
  display: inline;
}
@media (min-width: 1024px) {
  .request-main {
    flex: 0 0 66%;
    order: 0;
    min-width: 0;
  }
}
.request-main .comment-form-controls {
  display: block;
}
.request-main .comment-ccs {
  display: block;
}
.request-main .comment-show-container {
  border-radius: 2px;
  border: 1px solid var(--n-border);
  color: lighten(var(--n-text), 20%);
  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 var(--n-brand);
}
.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 var(--n-brand);
}
.request-main input#mark_as_solved {
  display: none;
}
.request-title {
  width: 100%;
}
@media (min-width: 1024px) {
  .request-title {
    border-bottom: 1px solid var(--n-border);
    margin-bottom: 0;
    max-width: 66%;
    padding-bottom: 20px;
  }
}
.request-sidebar {
  border-bottom: 1px solid var(--n-border);
  border-top: 1px solid var(--n-border);
  flex: 1 0 auto;
  order: 0;
}
@media (min-width: 1024px) {
  .request-sidebar {
    background-color: darken(var(--n-bg), 3%);
    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 var(--n-border);
  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: lighten(var(--n-text), 20%);
  width: 40%;
}
.request-details .request-collaborators {
  display: inline-block;
}
.request-attachments dt, .request-attachments dd {
  width: 100%;
}
.request-attachments dd {
  margin: 10px 0 0 0;
}
.request-form textarea {
  min-height: 120px;
}
.request-follow-up {
  padding-top: 20px;
}

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

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

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

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

.meta-group * {
  display: inline;
}

.meta-data {
  color: lighten(var(--n-text), 20%);
  font-size: 13px;
}
.meta-data:not(:last-child)::after {
  content: "·";
  margin: 0 5px;
}

/* User Profiles */
.profile-header {
  padding: 30px 0;
  background-color: darken(var(--n-bg), 3%);
}

.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: lighten(var(--n-text), 20%);
  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 var(--n-border);
  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 var(--n-border);
}
@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 var(--n-brand);
  border-radius: 4px;
  color: var(--n-brand);
  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: darken(var(--n-bg), 5%);
  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: lighten(var(--n-text), 20%);
  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 var(--n-border);
  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 var(--n-border);
  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: lighten(var(--n-text), 20%);
  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 var(--n-border);
}
@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 var(--n-border);
}

.profile-contribution-icon {
  left: 0;
  position: absolute;
  color: var(--n-border-h);
  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: var(--n-text2);
}

.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 var(--n-border);
  }
  [dir=rtl] .profile-activity:not(:last-child) {
    border-left: 0;
    border-right: 1px solid var(--n-border);
  }
}

.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: darken(var(--n-bg), 3%);
}
@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: var(--n-bg);
  background-position: 50% 50%;
  text-align: center;
  color: var(--n-border-h);
}
[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 var(--n-border);
  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: var(--n-text);
}
.search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current {
  background-color: var(--n-border);
  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: var(--n-border);
  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: var(--n-text2);
  flex-grow: 0;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .sidenav-tag .content-tag .close-icon {
  color: var(--n-text3);
  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: var(--n-text2);
}
.search-results-sidebar .see-all-filters {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  padding: 10px;
  color: var(--n-link);
}
.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 var(--n-border);
}
.search-results .no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rem;
}
.search-results .no-results .headline {
  color: var(--n-text);
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.45px;
}
.search-results .no-results .action-prompt {
  color: var(--n-text2);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.154px;
}
.search-results .no-results .action-prompt a {
  color: var(--n-link);
}
.search-results .no-results .action-prompt a:visited {
  color: var(--n-link);
}

.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: lighten(var(--n-text), 20%);
  font-size: 13px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: var(--n-brand);
  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: var(--n-text2);
  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: var(--n-text3);
}

.notification a {
  color: var(--n-info);
}

.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: var(--n-error-bg);
  border-color: var(--n-error-bg);
}

.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: var(--n-info-bg);
  border-color: var(--n-info-bg);
}

.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: var(--n-warning);
  background: var(--n-warning-bg);
  border-color: var(--n-warning-bg);
}

.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: var(--n-text3);
  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: var(--n-error-bg);
  border: 1px solid var(--n-error);
  color: var(--n-error);
}
.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: var(--n-s1);
  border: 1px solid var(--n-border);
  border-radius: 3px;
  box-shadow: 0px 20px 30px 0px var(--n-shadow);
  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 var(--n-border);
  margin: 4px 0;
}
.dropdown-menu [role=menuitem],
.dropdown-menu [role=menuitemradio] {
  color: var(--n-text);
  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: var(--n-info-bg);
  text-decoration: none;
  color: var(--n-text);
}
.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: var(--n-text2);
  margin-top: 32px;
  margin-bottom: 4px;
}
.content-tags-add-hint {
  color: var(--n-text2);
  font-size: 14px;
}

.content-tag-list {
  display: flex;
  flex-wrap: wrap;
  word-break: break-word;
}
.content-tag-list li {
  border-right: 1px solid var(--n-border);
  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 var(--n-text2);
}

/***** Upload Dropzone *****/
.upload-dropzone {
  border: 1px solid var(--n-text2);
}

/***** Summary component *****/
zd-summary-block {
  background: var(--n-s2);
}
[dir=ltr] zd-summary-block {
  border-left-color: var(--n-text2);
}
[dir=rtl] zd-summary-block {
  border-right-color: var(--n-text2);
}

.service-catalog-hero {
  background-image: url(/hc/theming_assets/01KEH3NJ5DKPDDJF7CJ3FVCNMP);
  margin-bottom: 10px;
  height: 320px;
}
.service-catalog-description {
  display: flow-root;
}
.service-catalog-description a {
  color: var(--n-link);
  text-decoration: underline;
}
.service-catalog-description a:visited {
  color: var(--n-link-visited);
}
.service-catalog-description a:hover, .service-catalog-description a:active, .service-catalog-description a:focus {
  color: var(--n-link-hover);
}
.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: darken(var(--n-bg), 5%);
}
.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: darken(var(--n-bg), 3%);
  border: 1px solid var(--n-border);
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.service-catalog-description pre {
  background: darken(var(--n-bg), 3%);
  border: 1px solid var(--n-border);
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.service-catalog-description blockquote {
  border-left: 1px solid var(--n-border);
  color: lighten(var(--n-text), 20%);
  font-style: italic;
  padding: 0 15px;
}
/* ============================================
 /* ============================================
   NZXT SUPPORT CENTER — CUSTOM THEME OVERRIDES
   ============================================
   
   INSTRUCTIONS:
   1. In your style.css, find the LAST line of the original Copenhagen CSS
      (it ends around the service-catalog styles)
   2. DELETE everything you previously added below that point
   3. Paste this ENTIRE block as the only custom CSS at the bottom
   ============================================ */

/* ---------- VARIABLES ---------- */
/* ---------- PALETTE ----------
   Every colour in this stylesheet resolves through these custom properties.
   Dark is the default; light overrides live on [data-theme="light"].
   The inline script in document_head.hbs sets data-theme before first paint,
   so there is no flash of the wrong theme.

   Settings-backed tokens are editable under Customize design > Colors (dark)
   and > Light mode colours (light). Derived and status tokens below are
   intentionally not exposed as settings.
   ---------------------------------------------------------------- */

:root,
[data-theme="dark"] {
  --n-bg: rgba(13, 13, 13, 1);
  --n-s1: rgba(13, 13, 13, 1);
  --n-s2: rgba(22, 22, 22, 1);
  --n-s3: rgba(28, 28, 28, 1);
  --n-border: rgba(34, 34, 34, 1);
  --n-border-h: rgba(68, 68, 68, 1);
  --n-text: rgba(224, 224, 224, 1);
  --n-text2: rgba(119, 119, 119, 1);
  --n-text3: rgba(85, 85, 85, 1);
  --n-accent: rgba(123, 47, 242, 1);
  --n-accent2: rgba(200, 64, 233, 1);
  --n-brand: rgba(123, 47, 242, 1);
  --n-brand-text: rgba(224, 224, 224, 1);
  --n-link: rgba(200, 64, 233, 1);
  --n-link-hover: rgba(123, 47, 242, 1);
  --n-link-visited: rgba(160, 106, 224, 1);
  --web-purple: rgba(138, 0, 252, 1);
  --callout-bg: rgba(32, 32, 32, 1);
  --callout-alert: rgba(209, 46, 46, 0.4);
  --callout-info: rgba(33, 172, 232, 0.4);
  --callout-policy: rgba(135, 85, 236, 0.4);

  --n-shadow: rgba(0, 0, 0, 0.45);
  --n-shadow-soft: rgba(0, 0, 0, 0.25);
  --n-overlay: rgba(0, 0, 0, 0.92);
  --n-on-accent: #fff;
  --n-error-bg: color-mix(in srgb, var(--n-error) 18%, var(--n-s2));
  --n-info-bg: color-mix(in srgb, var(--n-info) 18%, var(--n-s2));
  --n-warning-bg: color-mix(in srgb, var(--n-warning) 18%, var(--n-s2));
  --n-success-bg: color-mix(in srgb, var(--n-success) 18%, var(--n-s2));
}

[data-theme="light"] {
  --n-bg: rgba(255, 255, 255, 1);
  --n-s1: rgba(250, 250, 250, 1);
  --n-s2: rgba(244, 244, 245, 1);
  --n-s3: rgba(235, 235, 237, 1);
  --n-border: rgba(221, 221, 221, 1);
  --n-border-h: rgba(187, 187, 187, 1);
  --n-text: rgba(23, 24, 26, 1);
  --n-text2: rgba(92, 97, 102, 1);
  --n-text3: rgba(134, 140, 147, 1);
  --n-accent: rgba(108, 31, 214, 1);
  --n-accent2: rgba(165, 47, 208, 1);
  --n-brand: rgba(108, 31, 214, 1);
  --n-brand-text: rgba(255, 255, 255, 1);
  --n-link: rgba(108, 31, 214, 1);
  --n-link-hover: rgba(77, 19, 160, 1);
  --n-link-visited: rgba(139, 63, 208, 1);
  --web-purple: rgba(138, 0, 252, 1);
  --callout-bg: rgba(245, 245, 247, 1);
  --callout-alert: rgba(209, 46, 46, 0.4);
  --callout-info: rgba(33, 172, 232, 0.4);
  --callout-policy: rgba(135, 85, 236, 0.4);

  --n-shadow: rgba(0, 0, 0, 0.14);
  --n-shadow-soft: rgba(0, 0, 0, 0.08);
  --n-overlay: rgba(255, 255, 255, 0.94);
  --n-error-bg: color-mix(in srgb, var(--n-error) 12%, #fff);
  --n-info-bg: color-mix(in srgb, var(--n-info) 12%, #fff);
  --n-warning-bg: color-mix(in srgb, var(--n-warning) 12%, #fff);
  --n-success-bg: color-mix(in srgb, var(--n-success) 12%, #fff);
}

/* Tokens that are the same in both modes. */
:root {
  --n-success: #038153;
  --n-error: #cc3340;
  --n-warning: #ffb648;
  --n-info: #1f73b7;
  --n-glow: color-mix(in srgb, var(--n-accent) 30%, transparent);
  --n-text-soft: color-mix(in srgb, var(--n-text) 78%, var(--n-text2));
}

/* Colour changes animate rather than snap when the mode is switched.
   Suppressed for anyone who has asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .nzxt-cat-card,
  .nzxt-faq-item,
  .nzxt-action-card,
  .nzxt-contact,
  .nzxt-search-container {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }
}

/* ---------- GLOBAL ---------- */
body, html {
  background: var(--n-bg) !important;
  color: var(--n-text) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ---------- HIDE DEFAULT ZENDESK HERO ---------- */
.hero {
  display: none !important;
}

/* ---------- HEADER / NAV ---------- */
.header {
  background: var(--n-overlay) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid var(--n-border) !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 clamp(20px, 4vw, 48px) !important;
}

/* Brand name in header */
.header .logo span {
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--n-text) !important;
}
.header .logo a:hover,
.header .logo a:focus,
.header .logo a:active {
  text-decoration: none !important;
}

/* Nav links */
.nav-wrapper-desktop a {
  color: var(--n-text2) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.nav-wrapper-desktop a:hover {
  color: var(--n-text) !important;
  text-decoration: none !important;
}

/* Submit a Request — styled as purple button */
.nav-wrapper-desktop a.submit-a-request,
a.submit-a-request {
  background: var(--n-accent) !important;
  color: var(--n-text) !important;
  padding: 8px 18px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  text-decoration: none !important;
  transition: all 0.25s !important;
  display: inline-block !important;
}
.nav-wrapper-desktop a.submit-a-request:hover,
a.submit-a-request:hover {
  background: var(--n-accent2) !important;
  box-shadow: 0 0 20px var(--n-glow) !important;
  text-decoration: none !important;
}

/* User info dropdown */
.header .user-info > button {
  color: var(--n-text2) !important;
}
.header .user-info > button:hover {
  color: var(--n-text) !important;
}
.header .dropdown-menu {
  background: var(--n-s2) !important;
  border-color: var(--n-border) !important;
}
.header .dropdown-menu [role=menuitem],
.header .dropdown-menu [role=menuitemradio] {
  color: var(--n-text2) !important;
}
.header .dropdown-menu [role=menuitem]:hover,
.header .dropdown-menu [role=menuitemradio]:hover {
  background: color-mix(in srgb, var(--n-accent) 10%, transparent) !important;
  color: var(--n-text) !important;
}

/* ---------- HERO SECTION ---------- */
.nzxt-hero {
  padding: 100px 40px 70px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--n-accent) 10%, transparent) 0%, transparent 60%);
}
.nzxt-hero-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--n-accent2);
  margin-bottom: 24px;
}
.nzxt-hero h1 {
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1.05;
  margin-bottom: 16px;
  color: var(--n-text);
}
.nzxt-hero h1 span {
  background: linear-gradient(135deg, var(--n-accent), var(--n-accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nzxt-hero p {
  color: var(--n-text2);
  font-size: 15px;
  max-width: 440px;
  margin: 0 auto 48px;
  line-height: 1.6;
}

/* ---------- SEARCH BAR ---------- */
/* Zendesk's {{search}} helper outputs:
   <form class="search" role="search">
     <svg class="search-icon">...</svg>
     <input type="search" ...>
   </form>
   We need to override ALL of that.
*/
.nzxt-search-container {
  max-width: 580px;
  margin: 0 auto;
  position: relative;
}

/* Reset the .search wrapper that Zendesk adds */
.nzxt-search-container .search {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: block !important;
  position: relative !important;
}

/* Style the actual input */
.nzxt-search-container .search input[type="search"] {
  width: 100% !important;
  padding: 16px 20px 16px 48px !important;
  background: var(--n-s2) !important;
  border: 1px solid var(--n-border) !important;
  border-radius: 10px !important;
  color: var(--n-text) !important;
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important;
  outline: none !important;
  height: auto !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color 0.25s, box-shadow 0.25s !important;
}
.nzxt-search-container .search input[type="search"]:focus {
  border-color: var(--n-accent) !important;
  box-shadow: 0 0 0 3px var(--n-glow) !important;
}
.nzxt-search-container .search input[type="search"]::placeholder {
  color: var(--n-text3) !important;
}

/* Reposition Zendesk's built-in search icon */
.nzxt-search-container .search .search-icon {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1 !important;
  color: var(--n-text3) !important;
  pointer-events: none !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
}

/* Hide the custom SVG icon since Zendesk provides one */
.nzxt-search-svg {
  display: none !important;
}

/* Hide the clear button default styling issues */
.nzxt-search-container .search .clear-button {
  background: var(--n-s2) !important;
  color: var(--n-text2) !important;
  border-radius: 0 10px 10px 0 !important;
}

/* Popular search tags */
.nzxt-popular-searches {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.nzxt-popular-searches a {
  padding: 6px 14px !important;
  background: transparent !important;
  border: 1px solid var(--n-border) !important;
  border-radius: 100px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--n-text2) !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
}
.nzxt-popular-searches a:hover {
  border-color: var(--n-accent) !important;
  color: var(--n-accent2) !important;
  background: color-mix(in srgb, var(--n-accent) 6%, transparent) !important;
  text-decoration: none !important;
}

/* ---------- SECTIONS ---------- */
.nzxt-section {
  padding: 64px clamp(20px, 4vw, 48px);
  max-width: 1140px;
  margin: 0 auto;
}
.nzxt-section-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 36px;
}
.nzxt-section-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--n-text);
}
.nzxt-section-line {
  flex: 1;
  height: 1px;
  background: var(--n-border);
}

/* ---------- CATEGORY GRID ---------- */
.nzxt-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.nzxt-cat-card {
  display: block;
  background: var(--n-s2);
  border: 1px solid var(--n-border);
  border-radius: 12px;
  padding: 36px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  position: relative;
  overflow: hidden;
  text-decoration: none !important;
  color: var(--n-text) !important;
}
.nzxt-cat-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--n-accent), var(--n-accent2));
  transform: scaleX(0);
  transition: transform 0.4s cubic-bezier(.25,.8,.25,1);
}
.nzxt-cat-card:hover {
  border-color: color-mix(in srgb, var(--n-accent) 40%, transparent) !important;
  background: var(--n-s3);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--n-accent) 8%, transparent);
  text-decoration: none !important;
}
.nzxt-cat-card:hover::after { transform: scaleX(1); }
.nzxt-cat-card:visited { color: var(--n-text) !important; }
.nzxt-cat-icon {
  width: 52px; height: 52px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--n-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--n-accent) 6%, transparent);
  transition: all 0.3s;
}
.nzxt-cat-icon svg { color: var(--n-text); }
.nzxt-cat-card:hover .nzxt-cat-icon {
  border-color: color-mix(in srgb, var(--n-accent) 30%, transparent);
  background: color-mix(in srgb, var(--n-accent) 10%, transparent);
}
.nzxt-cat-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--n-text);
  letter-spacing: -0.3px;
}
.nzxt-cat-card p {
  font-size: 14px;
  color: var(--n-text2);
}

/* ---------- FAQ GRID ---------- */
.nzxt-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.nzxt-faq-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: transparent;
  border: 1px solid var(--n-border);
  border-radius: 10px;
  text-decoration: none !important;
  color: var(--n-text) !important;
  transition: all 0.25s;
}
.nzxt-faq-item:hover {
  border-color: color-mix(in srgb, var(--n-accent) 40%, transparent);
  background: color-mix(in srgb, var(--n-accent) 4%, transparent);
  text-decoration: none !important;
}
.nzxt-faq-item:visited { color: var(--n-text) !important; }
.nzxt-faq-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--n-accent);
  min-width: 20px;
}
.nzxt-faq-item span {
  font-size: 13px;
  flex: 1;
  line-height: 1.4;
}
.nzxt-faq-arrow {
  color: var(--n-text3);
  font-size: 14px;
  transition: all 0.2s;
  flex-shrink: 0;
}
.nzxt-faq-item:hover .nzxt-faq-arrow {
  color: var(--n-accent2);
  transform: translateX(2px);
}

/* ---------- QUICK ACTIONS ---------- */
.nzxt-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.nzxt-action-card {
  display: block;
  background: var(--n-s2);
  border: 1px solid var(--n-border);
  border-radius: 12px;
  padding: 28px 22px;
  text-align: center;
  text-decoration: none !important;
  color: var(--n-text) !important;
  transition: all 0.3s;
}
.nzxt-action-card:hover {
  border-color: color-mix(in srgb, var(--n-accent) 40%, transparent);
  transform: translateY(-2px);
  background: var(--n-s3);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--n-accent) 8%, transparent);
  text-decoration: none !important;
}
.nzxt-action-card:visited { color: var(--n-text) !important; }
.nzxt-action-icon {
  width: 44px; height: 44px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--n-accent), var(--n-accent2));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nzxt-action-icon svg { color: var(--n-text); }
.nzxt-action-card h3 { font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--n-text); }
.nzxt-action-card p { font-size: 12px; color: var(--n-text2); line-height: 1.5; }

/* ---------- CONTACT BANNER ---------- */
.nzxt-contact {
  margin: 40px auto 80px;
  max-width: 1044px;
  padding: 48px clamp(24px, 4vw, 48px);
  border: 1px solid color-mix(in srgb, var(--n-accent) 25%, transparent);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--n-accent) 8%, transparent), color-mix(in srgb, var(--n-accent2) 4%, transparent));
}
.nzxt-contact h2 { font-size: 20px; font-weight: 700; color: var(--n-text); }
.nzxt-contact p { color: var(--n-text2); font-size: 13px; margin-top: 6px; }
.nzxt-contact-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.nzxt-c-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--n-border);
  border-radius: 8px;
  color: var(--n-text) !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
}
.nzxt-c-btn:hover {
  border-color: var(--n-accent);
  box-shadow: 0 0 16px var(--n-glow);
  text-decoration: none !important;
}
.nzxt-c-btn.primary {
  background: var(--n-accent);
  border-color: var(--n-accent);
}
.nzxt-c-btn.primary:hover {
  background: var(--n-accent2);
  border-color: var(--n-accent2);
  box-shadow: 0 0 20px var(--n-glow);
}

/* ---------- FOOTER ---------- */
.footer {
  background: var(--n-bg) !important;
  border-top: 1px solid var(--n-border) !important;
  color: var(--n-text3) !important;
  margin-top: 0 !important;
}
.footer a,
.footer-language-selector button,
.powered-by-zendesk a {
  color: var(--n-text2) !important;
}
.footer a:hover { color: var(--n-accent2) !important; }

/* ---------- ANIMATIONS ---------- */
@keyframes nzxtFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.nzxt-fade { animation: nzxtFadeIn 0.5s ease forwards; }
.nzxt-d1 { animation-delay: 0.05s; opacity: 0; }
.nzxt-d2 { animation-delay: 0.1s; opacity: 0; }
.nzxt-d3 { animation-delay: 0.15s; opacity: 0; }
.nzxt-d4 { animation-delay: 0.2s; opacity: 0; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .nzxt-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .nzxt-actions-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .nzxt-hero { padding: 80px 20px 50px; }
  .nzxt-cat-grid { grid-template-columns: 1fr 1fr; }
  .nzxt-faq-grid { grid-template-columns: 1fr; }
  .nzxt-actions-grid { grid-template-columns: 1fr; }
  .nzxt-contact { padding: 32px 24px; }
}
/* ---------- FORCE SEARCH INPUT STYLING ---------- */
.nzxt-hero .nzxt-search-container .nzxt-search-input,
input.nzxt-search-input,
input#nzxt-search {
  width: 100% !important;
  padding: 16px 20px 16px 48px !important;
  background: var(--n-s2) !important;
  border: 1px solid var(--n-border) !important;
  border-radius: 10px !important;
  color: var(--n-text) !important;
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important;
  outline: none !important;
  height: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color 0.25s, box-shadow 0.25s !important;
}
input#nzxt-search:focus {
  border-color: var(--n-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--n-accent) 30%, transparent) !important;
}
input#nzxt-search::placeholder {
  color: var(--n-text3) !important;
}

/* Position the search icon properly */
.nzxt-search-container .nzxt-search-icon {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--n-text3) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
/* Show nav links but keep Submit a Request styled as button */
.nav-wrapper-desktop .user-nav-list li {
  display: inline-block !important;
}
.nav-wrapper-desktop .user-nav-list li a {
  display: inline-block !important;
  visibility: visible !important;
}
/* Re-apply button style specifically to submit-a-request */
.nav-wrapper-desktop a.submit-a-request,
.user-nav-list a.submit-a-request {
  background: var(--n-accent) !important;
  color: var(--n-text) !important;
  padding: 8px 18px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  text-decoration: none !important;
}
.nav-wrapper-desktop a.submit-a-request:hover,
.user-nav-list a.submit-a-request:hover {
  background: var(--n-accent2) !important;
  box-shadow: 0 0 20px color-mix(in srgb, var(--n-accent) 30%, transparent) !important;
  text-decoration: none !important;
}
/* ---------- CUSTOM SEARCH INPUT ---------- */
.nzxt-search-container {
  max-width: 580px;
  margin: 0 auto;
  position: relative;
}
.nzxt-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--n-text3);
  pointer-events: none;
  z-index: 2;
}
input#nzxt-search {
  width: 100% !important;
  padding: 16px 20px 16px 48px !important;
  background: var(--n-s2) !important;
  border: 1px solid var(--n-border) !important;
  border-radius: 10px !important;
  color: var(--n-text) !important;
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important;
  outline: none !important;
  height: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  transition: border-color 0.25s, box-shadow 0.25s !important;
}
input#nzxt-search:focus {
  border-color: var(--n-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--n-accent) 30%, transparent) !important;
}
input#nzxt-search::placeholder {
  color: var(--n-text3) !important;
}

/* Force nav links visible */
.nav-wrapper-desktop .user-nav-list li {
  display: inline-block !important;
}
.nav-wrapper-desktop .user-nav-list a {
  display: inline-block !important;
}
/* ---------- MAIN NAV LINKS ---------- */
.nzxt-main-nav {
  display: inline-flex;
  gap: 28px;
  margin-right: 24px;
}
.nzxt-main-nav a {
  color: var(--n-text2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  letter-spacing: 0.2px;
  transition: color 0.2s !important;
}
.nzxt-main-nav a:hover {
  color: var(--n-text) !important;
  text-decoration: none !important;
}
.nzxt-main-nav a.nzxt-nav-active {
  color: var(--n-text) !important;
}

/* Adjust header layout for new nav */
.header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.nav-wrapper-desktop {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
}
/* ---------- FORCE MAIN NAV VISIBLE ---------- */
.nzxt-main-nav {
  display: inline-flex !important;
  gap: 28px !important;
  margin-right: 24px !important;
  visibility: visible !important;
}
.nzxt-main-nav a {
  display: inline-block !important;
  visibility: visible !important;
  color: var(--n-text2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  letter-spacing: 0.2px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
.nzxt-main-nav a:hover {
  color: var(--n-text) !important;
  text-decoration: none !important;
}
.nzxt-main-nav a.nzxt-nav-active {
  color: var(--n-text) !important;
}

/* Make sure desktop nav wrapper shows everything */
.nav-wrapper-desktop {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  visibility: visible !important;
}

/* Keep user-nav items visible too */
.nav-wrapper-desktop .user-nav {
  display: inline-block !important;
  position: relative !important;
}
.nav-wrapper-desktop .user-nav-list li {
  display: inline-block !important;
  visibility: visible !important;
}
.nav-wrapper-desktop .user-nav-list li a {
  display: inline-block !important;
  visibility: visible !important;
}
/* ---------- MAIN NAV LINKS ---------- */
.nzxt-main-nav {
  display: inline-flex !important;
  gap: 28px !important;
  margin-right: 24px !important;
  visibility: visible !important;
}
.nzxt-main-nav a {
  display: inline-block !important;
  visibility: visible !important;
  color: var(--n-text2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  letter-spacing: 0.2px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
.nzxt-main-nav a:hover {
  color: var(--n-text) !important;
  text-decoration: none !important;
}
.nzxt-main-nav a.nzxt-nav-active {
  color: var(--n-text) !important;
}
.nav-wrapper-desktop {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  visibility: visible !important;
}
.nav-wrapper-desktop .user-nav {
  display: inline-block !important;
  position: relative !important;
}
.nav-wrapper-desktop .user-nav-list li {
  display: inline-block !important;
  visibility: visible !important;
}
.nav-wrapper-desktop .user-nav-list li a {
  display: inline-block !important;
  visibility: visible !important;
}
<nav class="nzxt-main-nav">
/* ---------- HEADER LAYOUT FIX ---------- */
.header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 clamp(20px, 4vw, 48px) !important;
}

/* Logo stays left */
.header .logo {
  flex-shrink: 0;
}

/* Desktop nav takes up the middle space */
.nav-wrapper-desktop {
  display: inline-flex !important;
  align-items: center !important;
  flex: 1 !important;
  justify-content: flex-end !important;
  gap: 0 !important;
}

/* The nav list — push links to center with gap */
.nav-wrapper-desktop .user-nav {
  display: inline-block !important;
  position: relative !important;
}
.nav-wrapper-desktop .user-nav-list {
  display: flex !important;
  align-items: center !important;
  gap: 32px !important;
}
.nav-wrapper-desktop .user-nav-list li {
  display: inline-block !important;
  visibility: visible !important;
}

/* Extra nav links style */
.user-nav-list a.nzxt-extra-nav {
  color: var(--n-text2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: inline-block !important;
  visibility: visible !important;
  padding: 0 !important;
}
.user-nav-list a.nzxt-extra-nav:hover {
  color: var(--n-text) !important;
  text-decoration: none !important;
}
.user-nav-list a.nzxt-nav-active {
  color: var(--n-text) !important;
}

/* Submit button — add left margin to separate from nav links */
.user-nav-list a.submit-a-request {
  margin-left: 16px !important;
}

/* User info dropdown — small gap from button */
.nav-wrapper-desktop .user-info {
  margin-left: 16px !important;
}

/* ---------- INNER PAGES (Category, Section, Article) ---------- */

/* Breadcrumbs */
.breadcrumbs li,
.breadcrumbs li a,
.breadcrumbs li a:visited {
  color: var(--n-accent) !important;
}
.breadcrumbs li {
  color: var(--n-text2) !important;
}

/* Sub-nav search on inner pages */
.sub-nav .search input[type="search"] {
  background: var(--n-s2) !important;
  border: 1px solid var(--n-border) !important;
  border-radius: 10px !important;
  color: var(--n-text) !important;
}
.sub-nav .search input[type="search"]:focus {
  border-color: var(--n-accent) !important;
}
.sub-nav .search {
  border: none !important;
}
.sub-nav .search .search-icon {
  color: var(--n-text3) !important;
}

/* Page titles */
.page-header h1,
.section-tree-title,
.section-tree-title a {
  color: var(--n-text) !important;
}
.page-header-description {
  color: var(--n-text2) !important;
}

/* Category blocks (sections list) */
.blocks-item {
  background: var(--n-s2) !important;
  border: 1px solid var(--n-border) !important;
  border-radius: 12px !important;
  transition: all 0.3s !important;
}
.blocks-item:hover {
  border-color: color-mix(in srgb, var(--n-accent) 40%, transparent) !important;
  background: var(--n-s3) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--n-accent) 8%, transparent);
}
.blocks-item-link {
  color: var(--n-text) !important;
  padding: 24px 30px !important;
}
.blocks-item-link:visited {
  color: var(--n-text) !important;
}
.blocks-item:hover .blocks-item-link {
  color: var(--n-text) !important;
  text-decoration: none !important;
}
.blocks-item-title {
  color: var(--n-text) !important;
  font-weight: 600 !important;
}
.blocks-item-description {
  color: var(--n-text2) !important;
}

/* Section tree (articles list within a category) */
.section-tree-title a {
  color: var(--n-text) !important;
}
.section-tree-title a:hover {
  color: var(--n-accent2) !important;
}
.article-list-item a {
  color: var(--n-text2) !important;
}
.article-list-item a:hover {
  color: var(--n-text) !important;
  text-decoration: none !important;
}
.see-all-articles {
  color: var(--n-accent) !important;
}
.see-all-articles:hover {
  color: var(--n-accent2) !important;
}

/* Section page — article list */
.section-list-item {
  border-bottom-color: var(--n-border) !important;
}
.section-list-item:first-child {
  border-top-color: var(--n-border) !important;
}
.section-list-item a {
  color: var(--n-text) !important;
}
.section-list-item a:hover {
  color: var(--n-accent2) !important;
  text-decoration: none !important;
}

/* Article page */
.article-title {
  color: var(--n-text) !important;
}
.article-body {
  color: var(--n-text) !important;
}
.article-body a {
  color: var(--n-accent) !important;
}
.article-body a:hover {
  color: var(--n-accent2) !important;
}
.article-author,
.article-meta,
.meta-data {
  color: var(--n-text2) !important;
}
.article-votes {
  border-top-color: var(--n-border) !important;
}
.article-relatives {
  border-top-color: var(--n-border) !important;
}
.article-sidebar {
  border-color: var(--n-border) !important;
}
.sidenav-title {
  color: var(--n-text) !important;
}
.sidenav-item {
  color: var(--n-text2) !important;
}
.sidenav-item:hover {
  color: var(--n-accent2) !important;
}

/* Container background for inner pages */
.container {
  color: var(--n-text) !important;
}
.container-divider {
  border-top-color: var(--n-border) !important;
}

/* Links throughout */
a:visited {
  color: var(--n-accent) !important;
}

/* Pagination */
.pagination a {
  color: var(--n-accent) !important;
  border-color: var(--n-border) !important;
}
.pagination a:hover {
  background: var(--n-accent) !important;
  color: var(--n-text) !important;
}
/* ---------- ARTICLE SIDEBAR SPACING ---------- */
@media (min-width: 1024px) {
  .article-sidebar {
    padding-right: 0px !important;
  }

  .article {
    padding-left: 60px !important;
  }
}
/* ---- Testing rounding of tables in KB ---- */
.article-body table {
  	box-shadow: 0 4px 8px 0 var(--n-shadow); /* drop shadow */
    border-radius: 8px; /* Adjust radius for more/less roundness */
    border-collapse: separate !important; /* Required for corners to show */
    border-spacing: 0;
  	background: var(--callout-bg);
    border: 1px solid var(--web-purple); /* Optional border, default color was var(--n-text-soft) */
    overflow: hidden; /* Ensures corners are clipped */
}

/* Optional: Rounds the top-left and top-right corners of the header */
.article-body table th:first-child {
    border-top-left-radius: 8px;
}
.article-body table th:last-child {
    border-top-right-radius: 8px;
}
/* --- End roudning of tables in KB -JS --- /*
/* ---------- CATEGORY PAGE SECTION CARDS ---------- */
.section-tree .section {
  background: var(--n-s2) !important;
  border: 1px solid var(--n-border) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  margin-bottom: 16px !important;
  transition: all 0.3s !important;
}
.section-tree .section:hover {
  border-color: color-mix(in srgb, var(--n-accent) 40%, transparent) !important;
  background: var(--n-s3) !important;
}
.nzxt-section-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.nzxt-article-count {
  font-size: 12px;
  color: var(--n-text3);
  font-weight: 500;
}
.section-tree-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 0 !important;
}
.section-tree-title a {
  color: var(--n-text) !important;
}
.section-tree-title a:hover {
  color: var(--n-accent2) !important;
  text-decoration: none !important;
}
.section-tree .article-list-item {
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--n-border) !important;
}
.section-tree .article-list-item:last-child {
  border-bottom: none !important;
}
.section-tree .article-list-item a {
  color: var(--n-text2) !important;
  font-size: 13px !important;
}
.section-tree .article-list-item a:hover {
  color: var(--n-text) !important;
}
.section-tree .see-all-articles {
  color: var(--n-accent) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding-top: 12px !important;
}
.section-tree .see-all-articles:hover {
  color: var(--n-accent2) !important;
  text-decoration: none !important;
}
/* ---------- MOBILE EXPERIENCE FIXES ---------- */

/* Mobile header */
@media (max-width: 768px) {
  .header {
    height: 56px !important;
    padding: 0 16px !important;
  }
  .header .logo span {
    font-size: 15px !important;
    letter-spacing: 3px !important;
  }
  .nzxt-main-nav,
  .nav-wrapper-desktop {
    display: none !important;
  }
  body {
    padding-bottom: 80px !important;
  }
  .container {
    padding: 0 16px !important;
  }
  .sub-nav {
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 30px !important;
  }
  .sub-nav .search-container {
    max-width: 100% !important;
    width: 100% !important;
  }
  .sub-nav .search input[type="search"] {
    width: 100% !important;
  }
  .page-header h1 {
    font-size: 24px !important;
  }
  .page-header-description {
    font-size: 13px !important;
  }
  .article-container {
    flex-direction: column !important;
  }
  .article {
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
  }
  .article-sidebar {
    max-width: 100% !important;
    margin-bottom: 16px !important;
  }
  .article-title {
    font-size: 22px !important;
  }
  .article-body {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }
  .article-body img {
    border-radius: 8px !important;
  }
  .article-list-item a,
  .section-list-item a,
  .sidenav-item {
    padding: 12px 0 !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* Mobile hero section */
@media (max-width: 640px) {
  .nzxt-hero {
    text-align: center !important;
    padding: 50px 20px 40px !important;
  }
  .nzxt-hero h1 {
    font-size: 28px !important;
    letter-spacing: -1px !important;
  }
  .nzxt-hero p {
    font-size: 13px !important;
    margin-bottom: 32px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .nzxt-search-container,
  .nzxt-search-container .search {
    max-width: 100% !important;
  }
  input#nzxt-search {
    padding: 14px 16px 14px 44px !important;
    font-size: 14px !important;
  }
  .nzxt-popular-searches {
    gap: 6px !important;
  }
  .nzxt-popular-searches a {
    font-size: 10px !important;
    padding: 5px 10px !important;
  }
  .nzxt-cat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .nzxt-cat-card {
    padding: 24px 20px !important;
  }
  .nzxt-faq-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .nzxt-faq-item {
    padding: 14px 16px !important;
  }
  .nzxt-actions-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .nzxt-action-card {
    padding: 20px 14px !important;
  }
  .nzxt-action-card h3 {
    font-size: 12px !important;
  }
  .nzxt-action-card p {
    font-size: 11px !important;
  }
  .nzxt-contact {
    padding: 28px 20px !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 20px !important;
    margin: 30px 16px 60px !important;
  }
  .nzxt-contact h2 {
    font-size: 18px !important;
  }
  .nzxt-contact-btns {
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .nzxt-c-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 20px !important;
  }
  .nzxt-section {
    padding: 40px 16px !important;
  }
  .nzxt-section-title {
    font-size: 18px !important;
  }
  .section-tree {
    flex-direction: column !important;
  }
  .section-tree .section {
    flex: 1 0 100% !important;
    max-width: 100% !important;
  }
  .section-list-item a {
    font-size: 14px !important;
    padding: 4px 0 !important;
  }
  .footer-inner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
    padding: 0 16px !important;
  }
}

@media (max-width: 400px) {
  .nzxt-cat-grid {
    gap: 8px !important;
  }
  .nzxt-cat-card {
    padding: 20px 12px !important;
  }
  .nzxt-cat-card h3 {
    font-size: 12px !important;
  }
  .nzxt-cat-card p {
    font-size: 10px !important;
  }
}

/* ---------- REQUEST FORM ---------- */
#new-request-form input,
#new-request-form select,
#new-request-form textarea,
#new-request-form [role="textbox"],
#new-request-form [role="combobox"],
.form input,
.form select,
.form textarea,
.form .nesty-input {
  background-color: var(--n-s2) !important;
  border: 1px solid var(--n-border-h) !important;
  border-radius: 8px !important;
  color: var(--n-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  /* padding: 12px 14px !important; */
}
#new-request-form input:focus,
#new-request-form select:focus,
#new-request-form textarea:focus,
.form input:focus,
.form select:focus,
.form textarea:focus {
  border-color: var(--n-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--n-accent) 30%, transparent) !important;
  outline: none !important;
}
#new-request-form label,
#new-request-form legend,
.form label {
  color: var(--n-text-soft) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}
#new-request-form p,
.form p,
.form .optional {
  color: var(--n-text2) !important;
}
#new-request-form > div,
#new-request-form form,
#new-request-form fieldset,
#new-request-form [class*="Field"],
#new-request-form [class*="field"],
#new-request-form [class*="Form"],
#new-request-form [class*="form"],
#new-request-form [class*="Container"],
#new-request-form [class*="container"],
#new-request-form [class*="Wrapper"],
#new-request-form [class*="wrapper"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#new-request-form select,
.form select {
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23777' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-color: var(--n-s2) !important;
}
#new-request-form button[type="submit"],
#new-request-form input[type="submit"],
.form input[type="submit"] {
  background-color: var(--n-accent) !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--n-on-accent) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  padding: 12px 32px !important;
  cursor: pointer !important;
  font-size: 14px !important;
}
#new-request-form button[type="submit"]:hover,
#new-request-form input[type="submit"]:hover,
.form input[type="submit"]:hover {
  background-color: var(--n-accent2) !important;
box-shadow: 0 0 20px color-mix(in srgb, var(--n-accent) 30%, transparent) !important;
}
#new-request-form [class*="upload"],
#new-request-form [class*="Upload"],
#new-request-form [class*="dropzone"],
#new-request-form [class*="Dropzone"],
.upload-dropzone {
  background-color: var(--n-s2) !important;
  border: 1px dashed var(--n-border-h) !important;
  border-radius: 8px !important;
  color: var(--n-text2) !important;
}
#new-request-form [class*="toolbar"],
#new-request-form [class*="Toolbar"],
#hc-wysiwyg {
  background-color: var(--n-s3) !important;
  border: 1px solid var(--n-border-h) !important;
}
#new-request-form [class*="toolbar"] button,
#new-request-form [class*="Toolbar"] button {
  color: var(--n-text2) !important;
  background-color: transparent !important;
  border: none !important;
}
#new-request-form [role="listbox"],
#new-request-form [role="option"] {
  background-color: var(--n-s2) !important;
  border-color: var(--n-border-h) !important;
  color: var(--n-text) !important;
}
/* Remove outer form border */
#new-request-form form,
.form {
  border: none !important;
  box-shadow: none !important;
}

/* WYSIWYG editor body (white area) */
#new-request-form [class*="editor"],
#new-request-form [class*="Editor"],
#new-request-form [role="textbox"],
#new-request-form [contenteditable],
#new-request-form iframe,
#new-request-form .ck-editor__editable,
#new-request-form [class*="RichText"],
#new-request-form [class*="richtext"],
#new-request-form [class*="ck-content"] {
  background-color: var(--n-s2) !important;
  color: var(--n-text) !important;
  border: 1px solid var(--n-border-h) !important;
}

/* Attachments area */
#new-request-form [class*="FileList"],
#new-request-form [class*="filelist"],
#new-request-form [class*="Attachment"],
#new-request-form [class*="attachment"] {
  background-color: transparent !important;
  border: none !important;
}

div#new-request-form {
  background-color: var(--n-s1);
  padding: 20px;
  border-radius: 8px;
}
.header .logo img {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: 40px !important;
  width: auto !important;
}
.header .logo img {
  max-height: 80px !important;
  height: 80px !important;
  width: auto !important;
}
.nzxt-hero h1 span {
  padding-right: 6px;
}

/* ==========================================================================
   Localization support - added with the i18n rework of home_page.hbs
   ========================================================================== */

/* Popular Questions numbering.
   The 01/02/03 labels used to be typed into the markup. Now that the grid is
   driven by promoted_articles the count varies per locale (6 in en-us, 5 in
   fr and de), so the numbers are generated instead. */
.nzxt-faq-grid {
  counter-reset: nzxt-faq;
}

.nzxt-faq-item {
  counter-increment: nzxt-faq;
}

.nzxt-faq-num::before {
  content: counter(nzxt-faq, decimal-leading-zero);
}

/* Centred final row.
   Both grids move from CSS grid to flex so a last row that does not fill the
   width is centred rather than left-aligned. Column counts and gaps match the
   grid definitions above at every breakpoint, so the full-row layout is
   unchanged. */
.nzxt-cat-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.nzxt-cat-grid > .nzxt-cat-card {
  flex: 0 1 calc((100% - 28px) / 3);
  max-width: calc((100% - 28px) / 3);
}

.nzxt-faq-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.nzxt-faq-grid > .nzxt-faq-item {
  flex: 0 1 calc((100% - 8px) / 2);
  max-width: calc((100% - 8px) / 2);
}

@media (max-width: 900px) {
  .nzxt-cat-grid > .nzxt-cat-card {
    flex-basis: calc((100% - 14px) / 2);
    max-width: calc((100% - 14px) / 2);
  }
}

@media (max-width: 640px) {
  .nzxt-faq-grid > .nzxt-faq-item {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* Card caps.
   Curlybars has no numeric comparison, so both loops render everything Guide
   returns for the locale and the sliders hide the overflow here. Hidden cards
   are display:none, so they leave the flex flow entirely and the centring
   above counts only what is actually visible. */
.nzxt-cat-grid.nzxt-cap-1 > .nzxt-cat-card:nth-child(n + 2),
.nzxt-cat-grid.nzxt-cap-2 > .nzxt-cat-card:nth-child(n + 3),
.nzxt-cat-grid.nzxt-cap-3 > .nzxt-cat-card:nth-child(n + 4),
.nzxt-cat-grid.nzxt-cap-4 > .nzxt-cat-card:nth-child(n + 5),
.nzxt-cat-grid.nzxt-cap-5 > .nzxt-cat-card:nth-child(n + 6),
.nzxt-cat-grid.nzxt-cap-6 > .nzxt-cat-card:nth-child(n + 7),
.nzxt-cat-grid.nzxt-cap-7 > .nzxt-cat-card:nth-child(n + 8),
.nzxt-cat-grid.nzxt-cap-8 > .nzxt-cat-card:nth-child(n + 9),
.nzxt-cat-grid.nzxt-cap-9 > .nzxt-cat-card:nth-child(n + 10),
.nzxt-cat-grid.nzxt-cap-10 > .nzxt-cat-card:nth-child(n + 11),
.nzxt-cat-grid.nzxt-cap-11 > .nzxt-cat-card:nth-child(n + 12),
.nzxt-cat-grid.nzxt-cap-12 > .nzxt-cat-card:nth-child(n + 13) {
  display: none;
}

.nzxt-faq-grid.nzxt-fcap-1 > .nzxt-faq-item:nth-child(n + 2),
.nzxt-faq-grid.nzxt-fcap-2 > .nzxt-faq-item:nth-child(n + 3),
.nzxt-faq-grid.nzxt-fcap-3 > .nzxt-faq-item:nth-child(n + 4),
.nzxt-faq-grid.nzxt-fcap-4 > .nzxt-faq-item:nth-child(n + 5),
.nzxt-faq-grid.nzxt-fcap-5 > .nzxt-faq-item:nth-child(n + 6),
.nzxt-faq-grid.nzxt-fcap-6 > .nzxt-faq-item:nth-child(n + 7),
.nzxt-faq-grid.nzxt-fcap-7 > .nzxt-faq-item:nth-child(n + 8),
.nzxt-faq-grid.nzxt-fcap-8 > .nzxt-faq-item:nth-child(n + 9),
.nzxt-faq-grid.nzxt-fcap-9 > .nzxt-faq-item:nth-child(n + 10),
.nzxt-faq-grid.nzxt-fcap-10 > .nzxt-faq-item:nth-child(n + 11),
.nzxt-faq-grid.nzxt-fcap-11 > .nzxt-faq-item:nth-child(n + 12),
.nzxt-faq-grid.nzxt-fcap-12 > .nzxt-faq-item:nth-child(n + 13) {
  display: none;
}

/* Category descriptions come from Guide now and vary in length far more than
   the hand-written ones did. Keep the cards on a common baseline. */
.nzxt-cat-card p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Colour mode switch
   The icon shows the mode you would move TO: a sun while dark, a moon while
   light. Both icons ship in the markup and CSS picks one, so the swap needs
   no JavaScript and cannot flash.
   --------------------------------------------------------------------------- */
.nzxt-mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--n-border);
  border-radius: 8px;
  color: var(--n-text2);
  cursor: pointer;
}

.nzxt-mode-toggle:hover {
  border-color: var(--n-border-h);
  color: var(--n-text);
  background: var(--n-s3);
}

.nzxt-mode-toggle:focus-visible {
  outline: 2px solid var(--n-accent);
  outline-offset: 2px;
}

.nzxt-mode-icon {
  display: none;
}

[data-theme="dark"] .nzxt-mode-icon--sun,
[data-theme="light"] .nzxt-mode-icon--moon {
  display: block;
}

.nzxt-mode-toggle-item {
  display: flex;
  align-items: center;
}

/* ---------------------------------------------------------------------------
   Logo per colour mode
   Two logos ship in the markup when a light mode logo is set, and CSS picks
   one, so the swap costs no JavaScript and cannot flash. With no light logo
   uploaded the dark one is recoloured instead, using the fallback chosen in
   Customize design > Appearance.
   --------------------------------------------------------------------------- */
/* The existing rule .header .logo img carries display: inline-block !important,
   so these have to match it on both weight and specificity or both logos render
   side by side and the visible one gets pushed right. Adding img to the selector
   plus !important is what makes them stick. */
.logo img.logo-img--light {
  display: none !important;
}

[data-theme="light"] .logo.has-light-logo img.logo-img--dark {
  display: none !important;
}

[data-theme="light"] .logo.has-light-logo img.logo-img--light {
  display: inline-block !important;
}

/* ---------------------------------------------------------------------------
   Section card images
   The slot bleeds over the card's 24px side padding so it spans the full card
   width, which lets the image below be 50% of the card rather than 50% of its
   content box. Keep the -24px in step if the card padding ever changes.

   aspect-ratio rather than a fixed height: every card in a row is the same
   width, so every slot resolves to the same height and the cards stay level,
   at any breakpoint, without a media query.

   Only unhidden by script.js once the image has actually loaded, so a dead URL
   leaves the card exactly as it was. Cards with no mapping keep a zero-height
   slot and are untouched.
   --------------------------------------------------------------------------- */
.nzxt-section-media {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -4px -24px 18px;
  aspect-ratio: 2 / 1;
  overflow: hidden;
}

/* display: flex above would otherwise defeat the hidden attribute. */
.nzxt-section-media[hidden] {
  display: none;
}

.nzxt-section-media img {
  width: 50%;
  height: 100%;
  object-fit: contain;
}

/* ---------------------------------------------------------------------------
   Text and icons sitting on the accent fill
   These elements are painted on --n-accent, so their contrast comes from the
   fill rather than the page. Inheriting --n-text made them near-black in light
   mode and unreadable on purple. --n-on-accent is white in both modes.

   Scoped deliberately: .nzxt-c-btn.primary only, because the sibling outline
   buttons sit on the card surface and must keep --n-text.
   --------------------------------------------------------------------------- */
.nav-wrapper-desktop a.submit-a-request,
.user-nav-list a.submit-a-request,
.nzxt-c-btn.primary,
.nzxt-action-icon svg {
  color: var(--n-on-accent) !important;
}


/* ---------- SECTION CARD: SUB-SECTIONS THEN ARTICLES ----------
   Sub-sections and articles share one <ul> so the six-item cap counts both
   together. Curlybars has no arithmetic, so category_page.hbs renders
   everything Guide returns (up to 5 sub-sections and 6 articles on the
   category page) and the cap below hides item 7 onward. Sub-sections are
   emitted first, so they always take the slots before articles do. */
.nzxt-mixed-list > .article-list-item:nth-child(n + 7) {
  display: none !important;
}
.nzxt-mixed-list:has(> .article-list-item:nth-child(7)) > .article-list-item:nth-child(6) {
  border-bottom: none !important;
}
.nzxt-subsection-item > a.article-list-link {
  color: var(--n-text) !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.nzxt-subsection-item > a.article-list-link:hover {
  color: var(--n-accent) !important;
}
.nzxt-subsection-icon {
  color: var(--n-text2);
  flex: 0 0 auto;
}