@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: #FAF6EE;
  color: #16263F;
  font-family: 'Inter', -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: 'Onest', 'Inter', -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: #BF4630;
  text-decoration: none;
}
a:visited {
  color: #BF4630;
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}

.hbs-form input,
.hbs-form textarea, .search input,
.search textarea {
  color: #000;
  font-size: 14px;
}
.hbs-form input, .search input {
  max-width: 100%;
  box-sizing: border-box;
  transition: border 0.12s ease-in-out;
  /* We use the :where selector to not increase the specificity of the selector */
}
.hbs-form input:where(:not([type=checkbox])), .search input:where(:not([type=checkbox])) {
  outline: none;
}
.hbs-form input:where(:not([type=checkbox])):focus, .search input:where(:not([type=checkbox])):focus {
  border: 1px solid #E15D43;
}
.hbs-form input[disabled], .search input[disabled] {
  background-color: #ddd;
}
.hbs-form select, .search select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") no-repeat #fff;
  background-position: right 10px center;
  border: 1px solid #848F99;
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: #555;
  width: 100%;
}
.hbs-form select:focus, .search select:focus {
  border: 1px solid #E15D43;
}
.hbs-form select::-ms-expand, .search select::-ms-expand {
  display: none;
}
.hbs-form textarea, .search textarea {
  border: 1px solid #848F99;
  border-radius: 2px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}
.hbs-form textarea:focus, .search textarea:focus {
  border: 1px solid #E15D43;
}

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

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

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

.error-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
}
@media (min-width: 1200px) {
  .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, .article-subscribe button, .section-subscribe button, .split-button button {
  background-color: transparent;
  border: 1px solid #E15D43;
  border-radius: 4px;
  color: #E15D43;
  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, .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, .article-subscribe button:visited, .section-subscribe button:visited, .split-button button:visited {
  color: #E15D43;
}
.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, .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, .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, .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], .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: #E15D43;
  color: #FFFFFF;
  text-decoration: none;
}
.button.button-primary:hover, .button-primary.pagination-next-link:hover, .button-primary.pagination-prev-link:hover, .button-primary.pagination-first-link:hover, .button-primary.pagination-last-link:hover, .subscriptions-subscribe button.button-primary:hover, .subscriptions-subscribe button[data-selected=true]:hover, .requests-table-toolbar .organization-subscribe button.button-primary:hover, .requests-table-toolbar .organization-subscribe button[data-selected=true]:hover, .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, .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, .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: #a4311a;
  border-color: #a4311a;
}
.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], .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: #E15D43;
  border: 0;
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 14px;
  line-height: 2.72;
  min-width: 190px;
  padding: 0 1.9286em;
  width: 100%;
}
@media (min-width: 768px) {
  .button-large, .hbs-form input[type=submit] {
    width: auto;
  }
}
.button-large:visited, .hbs-form input[type=submit]:visited {
  color: #FFFFFF;
}
.button-large:hover, .button-large:active, .button-large:focus, .hbs-form input[type=submit]:hover, .hbs-form input[type=submit]:active, .hbs-form input[type=submit]:focus {
  background-color: #a4311a;
}
.button-large[disabled], .hbs-form input[type=submit][disabled] {
  background-color: #ddd;
}

.button-secondary {
  color: #30548b;
  border: 1px solid #848F99;
  background-color: transparent;
}
.button-secondary:visited {
  color: #30548b;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: #16263F;
  border: 1px solid #848F99;
  background-color: #f7f0e2;
}

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

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

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

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

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

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

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

.form-field input {
  border: 1px solid #848F99;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}
.form-field input:focus {
  border: 1px solid #E15D43;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.logo span {
  margin: 0 10px;
  color: #E15D43;
}

.logo a {
  display: inline-block;
}

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

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

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

@media (max-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: inline-block;
  }
}
.nav-wrapper-desktop a {
  border: 0;
  color: #BF4630;
  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: #BF4630;
  text-decoration: underline;
}

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

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

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

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

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

.nav-wrapper-mobile .ask-ai {
  margin: 4px 24px;
  padding: 6px 14px;
  width: auto;
  height: auto;
}
.nav-wrapper-mobile .ask-ai, .nav-wrapper-mobile .ask-ai:visited {
  color: #FFFFFF;
}
.nav-wrapper-mobile .ask-ai:hover, .nav-wrapper-mobile .ask-ai:focus, .nav-wrapper-mobile .ask-ai:active {
  background-color: #A4311A;
  border-color: #A4311A;
  color: #FFFFFF;
  text-decoration: none;
}

/***** User info in header *****/
.user-info {
  display: inline-block;
}
.user-info .dropdown-toggle::after {
  display: none;
}
@media (min-width: 768px) {
  .user-info .dropdown-toggle::after {
    display: inline-block;
  }
}
.user-info > button {
  border: 0;
  color: #BF4630;
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: #BF4630;
  background-color: transparent;
}
.user-info > button::after {
  color: #BF4630;
  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: #E15D43;
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: #FFFFFF;
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 17px;
}

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

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

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

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

.search {
  border-color: #848F99;
  border-radius: 30px;
  border-style: solid;
  border-width: 1px;
  display: flex;
  position: relative;
  transition: border 0.12s ease-in-out;
}
.search:focus-within {
  border-color: #E15D43;
}
.search input[type=search],
.search .clear-button {
  background-color: #fff;
  border-radius: 30px;
  border: none;
}
.search-full input[type=search], .search-full .clear-button {
  border-color: #fff;
}
.search input[type=search] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  color: #666;
  flex: 1 1 auto;
  height: 40px;
  width: 100%;
}
.search input[type=search]:focus {
  color: #555;
}
.search input[type=search]::-webkit-search-decoration, .search input[type=search]::-webkit-search-cancel-button, .search input[type=search]::-webkit-search-results-button, .search input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
.search input[type=search]:-webkit-autofill, .search input[type=search]:-webkit-autofill:hover, .search input[type=search]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
.search .clear-button {
  align-items: center;
  box-sizing: border-box;
  color: #777;
  cursor: pointer;
  display: none;
  flex: none;
  justify-content: center;
  padding: 0 15px;
}
.search .clear-button:hover {
  background-color: #E15D43;
  color: #fff;
}
.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #E15D43;
}
.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: #E15D43;
}
[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: #E15D43;
}

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

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

/***** Hero component *****/
.hero {
  /* Upstream Copenhagen paints a full-bleed homepage background image here. The
     Maxinodes hero is a CSS-only cream band (see _maxinodes.scss) to match the
     marketing site and to avoid a large image request on every page. The setting
     is removed from manifest.json, so this must not reference it. */
  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 #E15D43;
  border-radius: 4px;
  box-sizing: border-box;
  color: #E15D43;
  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: #E15D43;
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: #FFFFFF;
  text-decoration: none;
}
.blocks-item-internal {
  background-color: transparent;
  border: 1px solid #ddd;
}
.blocks-item-internal .icon-lock {
  height: 15px;
  width: 15px;
  bottom: 5px;
  position: relative;
}
.blocks-item-internal a {
  color: #16263F;
}
.blocks-item-link {
  color: #E15D43;
  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 #E15D43;
  text-decoration: none;
}
.blocks-item-title {
  margin-bottom: 0;
  font-size: 16px;
}
.blocks-item-description {
  margin: 0;
}
.blocks-item-description:not(:empty) {
  margin-top: 10px;
}

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

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

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

/* Community section removed: Gather is not enabled on this account. */
.community,
.activity {
  border-top: 1px solid #ddd;
  padding: 30px 0;
}

/***** Recent activity *****/
.recent-activity-header {
  margin-bottom: 10px;
  text-align: center;
}
.recent-activity-list {
  padding: 0;
}
.recent-activity-item {
  border-bottom: 1px solid #ddd;
  overflow: auto;
  padding: 20px 0;
}
.recent-activity-item h3 {
  margin: 0;
}
.recent-activity-item-parent {
  font-size: 16px;
  font-weight: 600;
}
.recent-activity-item-parent, .recent-activity-item-link {
  margin: 6px 0;
  display: inline-block;
  width: 100%;
}
@media (min-width: 768px) {
  .recent-activity-item-parent, .recent-activity-item-link {
    width: 70%;
    margin: 0;
  }
}
.recent-activity-item-link {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-activity-item-meta {
  color: #16263F;
  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: #BF4630;
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: #BF4630;
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: #A4311A;
}
.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: #E15D43;
  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: #16263F;
}
.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: #16263F;
}

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

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

.section-list-item {
  border-bottom: 1px solid #ddd;
  font-size: 16px;
  padding: 15px 0;
}
.section-list-item:first-child {
  border-top: 1px solid #ddd;
}
.section-list-item a {
  align-items: center;
  color: #16263F;
  display: flex;
  justify-content: space-between;
}

.see-all-sections-trigger {
  cursor: pointer;
  display: block;
  padding: 15px;
  text-align: center;
}
.see-all-sections-trigger[aria-hidden=true] {
  display: none;
}

/***** Article *****/
.article {
  /*
  * The article grid is defined this way to optimize readability:
  * Sidebar | Content | Free space
  * 17%     | 66%     | 17%
  */
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .article {
    flex: 1 0 66%;
    max-width: 66%;
    min-width: 640px;
    padding: 0 30px;
  }
}
.article-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .article-container {
    flex-direction: row;
  }
}
.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 40px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}
.article-avatar {
  margin-right: 10px;
}
.article-author {
  margin-bottom: 10px;
}
.article-title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (min-width: 768px) {
  .article-title {
    flex-basis: 100%; /* Take entire row */
  }
}
.article-title .icon-lock {
  position: relative;
  left: -5px;
  vertical-align: baseline;
}
.article [role=button] {
  flex-shrink: 0; /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
  width: 100%;
}
@media (min-width: 768px) {
  .article [role=button] {
    width: auto;
  }
}
.article-info {
  max-width: 100%;
}
.article-meta {
  display: inline-block;
  vertical-align: middle;
}
.article-body {
  display: flow-root;
}
.article-body a {
  color: #BF4630;
  text-decoration: underline;
}
.article-body a:visited {
  color: #BF4630;
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: #A4311A;
}
.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: #f4ecda;
}
.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: #f7f0e2;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: #f7f0e2;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.article-body blockquote {
  border-left: 1px solid #ddd;
  color: #30548b;
  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: #30548b;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: #E15D43;
  width: 18px;
  height: 18px;
}
.article-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    flex: 0 0 17%;
    height: auto;
    max-width: 17%;
  }
}
.article-relatives {
  border-top: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .article-relatives {
    flex-direction: row;
  }
}
.article-relatives > * {
  flex: 1 0 50%;
  min-width: 50%;
  overflow-wrap: break-word;
  margin-right: 0;
}
.article-relatives > *:last-child {
  padding: 0;
}
@media (min-width: 768px) {
  .article-relatives > * {
    padding-right: 20px;
  }
}
.article-votes {
  border-top: 1px solid #ddd;
  padding: 30px 0;
  text-align: center;
}
.article-votes-question {
  font-size: 15px;
  font-weight: normal;
  margin-bottom: 0;
}
.article-vote {
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}
.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}
.article-more-questions a {
  color: #BF4630;
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: #BF4630;
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: #A4311A;
}
.article-return-to-top {
  border-top: 1px solid #848F99;
}
@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}
.article-return-to-top a {
  color: #16263F;
  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: #16263F;
  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: #30548b;
}

/***** 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: #30548b;
}
.share a:hover {
  text-decoration: none;
  color: #E15D43;
}
.share a svg {
  height: 18px;
  width: 18px;
  display: block;
}

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

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

.vote-voted {
  color: #E15D43;
}

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

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

/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  padding: 0;
}
.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}
.striped-list-info {
  flex: 2;
}
.striped-list-title {
  color: #BF4630;
  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: #BF4630;
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #30548b;
  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: #16263F;
    display: block;
  }
}

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

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

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

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

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

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

.no-activities {
  color: #30548b;
}

/***** Request *****/
.request-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .request-container {
    align-items: flex-start;
    flex-direction: row;
  }
}
.request-container .comment-container {
  min-width: 0;
}
.request-breadcrumbs {
  margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .request-breadcrumbs {
    margin-bottom: 60px;
  }
}
.request-main {
  flex: 1 0 auto;
  max-width: 100%;
  order: 1;
}
.request-main .comment-fields, .request-main .request-submit-comment {
  display: none;
}
.request-main .comment-fields.shown {
  display: block;
}
.request-main .request-submit-comment.shown {
  display: inline;
}
@media (min-width: 1024px) {
  .request-main {
    flex: 0 0 66%;
    order: 0;
    min-width: 0;
  }
}
.request-main .comment-form-controls {
  display: block;
}
.request-main .comment-ccs {
  display: block;
}
.request-main .comment-show-container {
  border-radius: 2px;
  border: 1px solid #ddd;
  color: #30548b;
  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 #E15D43;
}
.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 #E15D43;
}
.request-main input#mark_as_solved {
  display: none;
}
.request-title {
  width: 100%;
}
@media (min-width: 1024px) {
  .request-title {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    max-width: 66%;
    padding-bottom: 20px;
  }
}
.request-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  order: 0;
}
@media (min-width: 1024px) {
  .request-sidebar {
    background-color: #f7f0e2;
    border: 0;
    font-size: 13px;
    flex: 0 0 auto;
    padding: 0 20px;
    width: 30%;
  }
}
.request-sidebar h2 {
  font-size: 15px;
  font-weight: 600;
  position: relative;
}
@media (min-width: 1024px) {
  .request-sidebar h2 {
    display: none;
  }
}
.request-details {
  border-bottom: 1px solid #ddd;
  font-size: 0;
  margin: 0;
  padding-bottom: 20px;
}
.request-details:last-child {
  border: 0;
}
.request-details dt, .request-details dd {
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  margin: 20px 0 0 0;
}
.request-details dd {
  padding: 0 10px;
  width: 60%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.request-details dd::after {
  content: "\a";
  white-space: pre;
}
.request-details dt {
  line-break: strict;
  color: #30548b;
  width: 40%;
  overflow-wrap: break-word;
}
.request-details .request-collaborators {
  display: inline-block;
}
.request-attachments dt, .request-attachments dd {
  width: 100%;
}
.request-attachments dd {
  margin: 10px 0 0 0;
}
.request-form textarea {
  min-height: 120px;
}
.request-follow-up {
  padding-top: 20px;
}

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

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

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

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

.meta-group * {
  display: inline;
}

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

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

.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: #30548b;
  flex: 0 0 100px;
  margin-right: 10px;
}
[dir=rtl] .profile-stats .stat-label {
  margin-left: 10px;
  margin-right: 0;
}

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

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

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

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

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

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

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

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

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

.profile-private-badge {
  flex-basis: 100%;
  border: solid 1px #E15D43;
  border-radius: 4px;
  color: #E15D43;
  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: #f4ecda;
  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: #30548b;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .profile-section-description {
    flex: 1 0 50%;
    padding-bottom: 0;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.profile-activity-contribution {
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background-color: #f7f0e2;
}
@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: #FAF6EE;
  background-position: 50% 50%;
  text-align: center;
  color: #ccc;
}
[dir=rtl] .profile-activity-icon {
  right: 0;
}
@media (min-width: 768px) {
  .profile-activity-icon {
    left: -14px;
  }
  [dir=rtl] .profile-activity-icon {
    right: -14px;
  }
}

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

/***** Search results *****/
.search-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .search-results {
    flex-direction: row;
  }
}
.search-results-column {
  flex: 1;
}
@media (min-width: 1024px) {
  .search-results-column {
    flex: 0 0 75%;
  }
}
.search-results-sidebar {
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .search-results-sidebar {
    border: 0;
    flex: 0 0 20%;
    height: auto;
  }
}
.search-results-sidebar .sidenav-item {
  border-radius: 4px;
  padding: 10px 36px;
  margin-bottom: 4px;
  color: #16263F;
}
.search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current {
  background-color: #e9ebed;
  text-decoration: none;
}
.search-results-sidebar .sidenav-subitem {
  unicode-bidi: embed;
}
.search-results-sidebar .sidenav-tag {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-grow: 0;
}
.search-results-sidebar .sidenav-tag .content-tag {
  background: #E9EBED;
  border-radius: 4px;
  padding: 4px 12px;
  text-decoration: none;
}
.search-results-sidebar .sidenav-tag .content-tag .label {
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  letter-spacing: -0.000427656px;
  color: #49545C;
  flex-grow: 0;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .sidenav-tag .content-tag .close-icon {
  color: #555555;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .collapsible-sidebar {
  margin-bottom: 30px;
}
.search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
  display: none;
}
@media (min-width: 1024px) {
  .search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
    display: block;
  }
}
.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n+6) {
  display: none;
}
.search-results-sidebar .multibrand-filter-list .doc-count {
  color: #666;
}
.search-results-sidebar .see-all-filters {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  padding: 10px;
  color: #BF4630;
}
.search-results-sidebar .see-all-filters[aria-hidden=true] {
  display: none;
}
.search-results-sidebar .see-all-filters:hover {
  text-decoration: underline;
}
.search-results-sidebar .see-all-filters::after {
  content: " ⌄";
  font-weight: bold;
}
.search-results-subheading {
  font-size: 18px;
  font-weight: 600;
}
.search-results-list {
  margin-bottom: 25px;
}
.search-results-list > li {
  padding: 20px 0;
}
.search-results-list > li:first-child {
  border-top: 1px solid #ddd;
}
.search-results .no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rem;
}
.search-results .no-results .headline {
  color: #2F3941;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.45px;
}
.search-results .no-results .action-prompt {
  color: #68737D;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.154px;
}
.search-results .no-results .action-prompt a {
  color: #BF4630;
}
.search-results .no-results .action-prompt a:visited {
  color: #BF4630;
}

.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: #30548b;
  font-size: 13px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: #E15D43;
  vertical-align: middle;
  width: 13px;
  height: 13px;
}
[dir=ltr] .search-result-votes, [dir=ltr] .search-result-meta-count {
  margin-left: 20px;
}
[dir=rtl] .search-result-votes, [dir=rtl] .search-result-meta-count {
  margin-right: 20px;
}
.search-result-meta-container {
  color: #666;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .search-result-meta-container {
    flex-direction: row;
    align-items: center;
  }
}
@media (min-width: 1024px) {
  .search-result-meta-container nav {
    flex: 1;
  }
}
@media (min-width: 1024px) {
  [dir=ltr] .search-result-meta-container .meta-data {
    margin-left: 20px;
  }
}
@media (min-width: 1024px) {
  [dir=rtl] .search-result-meta-container .meta-data {
    margin-right: 20px;
  }
}
.search-result-meta-container .meta-data::after {
  content: none;
}
.search-result-breadcrumbs {
  margin: 0;
}
.search-result-description {
  margin-top: 10px;
  margin-bottom: 0;
  word-break: break-word;
}

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

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

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

.notification a {
  color: #158ec2;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.dropdown-toggle {
  cursor: pointer;
  background: none;
  border: 0;
  display: inline-block;
  padding: 0;
  text-align: initial;
  vertical-align: middle;
}
.dropdown-toggle:hover {
  text-decoration: none;
}
.dropdown-toggle > * {
  display: inline-block;
}
.dropdown-toggle[aria-expanded=true] + .dropdown-menu {
  display: block;
}

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

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

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

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

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

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

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

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

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

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

/* =============================================================================
   _fonts.scss — Maxinodes self-hosted brand faces, served as Guide theme assets.
   GENERATED — do not hand-edit. Source: help-center-restyle/fonts.css.
   Regenerate with: python3 tools/regen_fonts_scss.py

   The /brand/fonts/NAME.woff2 paths are rewritten to the ZASS asset variable that
   zass.mjs derives for every file in assets/. Body = Inter, display = Onest
   (Onest carries Cyrillic, so RU headings stay in the display face instead of
   falling back to Inter).
   ============================================================================= */
/* Maxinodes self-hosted brand fonts — generated from Google Fonts CSS2 (latin+latin-ext+cyrillic+cyrillic-ext).
   Served same-origin from /brand/fonts/ — NO third-party (Google) requests.
   Body = Inter, headings (--mx-font-display) = Onest. Onest gives EN+RU headings one face. */
/* cyrillic-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1F3ZDPX7KDW4MSTPG061) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1GAV4CJ50RWJ5MWVYC6V) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1E1H8ACMWBAD8478QN9B) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1D5SWWYMJCCB8GKAQS49) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1F3ZDPX7KDW4MSTPG061) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1GAV4CJ50RWJ5MWVYC6V) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1E1H8ACMWBAD8478QN9B) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1D5SWWYMJCCB8GKAQS49) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1F3ZDPX7KDW4MSTPG061) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1GAV4CJ50RWJ5MWVYC6V) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1E1H8ACMWBAD8478QN9B) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1D5SWWYMJCCB8GKAQS49) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1F3ZDPX7KDW4MSTPG061) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1GAV4CJ50RWJ5MWVYC6V) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1E1H8ACMWBAD8478QN9B) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1D5SWWYMJCCB8GKAQS49) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1E1H8ACMWBAD8478QN9B) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1D5SWWYMJCCB8GKAQS49) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1GT59PDYPR6XVVM68W3V) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1DR9QNY83ARSBYWARRK0) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1GCDM7A7N5RK4AD8AWVM) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1GBB7KE6QD32H1087V65) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1FSJ82GCPMWNXSQWC6SV) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1G811WP1NB92ZYQZ2HEZ) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1GXWAM1ZJN3R695ZXZEB) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1H03R8M8P5V8P8WZS70J) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1H0GZ8AWVKT1NN0RYS3G) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1GZQXFA2SV9CEKXYRA10) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1GHJBK9KB06B77BSX854) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1GE006EVXM753YRS6YKF) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1G89CJ8ZHXD0AAYE5MME) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1GGK11GT9CAD1VYDJ09J) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1H0J7E2BB8KJVA201ZAT) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/hc/theming_assets/01KZ8W1GG1CB13MX2WB1AFJYFX) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* =============================================================================
   _maxinodes.scss — the Maxinodes brand layer.

   Imported LAST from index.scss, so it wins on source order and needs almost no
   !important. The rule for this file: everything that is *Maxinodes* lives here;
   upstream Copenhagen partials stay as close to stock as possible so a future
   Copenhagen rebase is a diff over ~40 untouched files plus this one.

   !important is used in exactly three situations, and each occurrence says which:
     (a) beating a Zendesk-injected inline style attribute,
     (b) beating an upstream rule that is itself !important,
     (c) beating an upstream rule with higher specificity that is not worth
         restructuring an upstream partial to out-specify.

   Palette and component recipes are copied from the marketing site
   (website/site/resources/css/app.css) so support.maxinodes.com,
   www.maxinodes.com and my.maxinodes.com read as one property. The colour values
   themselves come through as ZASS settings (#E15D43, #E8DFCB, …) so Max can
   retune them in Theming Center without a rebuild — see manifest.json.

   LIGHT ONLY. Zendesk Guide has no dark mode and the brand system has no dark
   palette; do not add prefers-color-scheme rules here.
   ============================================================================= */
/* ---- 1. Local aliases -------------------------------------------------------
   ZASS substitutes #E15D43 etc. server-side, so they cannot be used inside
   Sass colour functions. These aliases exist purely to make the rules below read
   like the marketing CSS they were ported from. */
/* Coral-deep drops below AA on the tinted surfaces (3.99:1 on coral-soft, 4.28:1 on
   cream-2), so those get a darker step. Coral-deep itself stays as the link colour, where
   it passes at 5.08:1 on paper and 4.83:1 on cream. */
/* Decorative hairlines and CONTROL borders are different jobs. WCAG 1.4.11 wants 3:1 for
   anything a user has to find and operate; line-strong is 1.63:1 and is fine for card
   edges but not for input borders. Upstream made the same split
   ($high-contrast-border-color #848F99, "maintains a 3:1 contrast ratio"). */
/* Verbatim from .paths / .plan-card on the marketing site — the single shadow that
   makes a surface read as a Maxinodes card. */
/* Anchor-scroll offset only since 2026-08-31. Since 2026-09-01 the brand row is PINNED
   (min-height 78 + the shell's 1px border, 70+1 below 600 — see .header), so this is the
   exact tablet-and-up height, no longer a rounding of a content-driven one. */
/* ---- 2. Page shell ---------------------------------------------------------- */
body {
  background-color: #FAF6EE;
  color: #16263F;
  font-size: 15.5px;
  line-height: 1.6;
}

/* Copenhagen renders header, main and footer as bare siblings. Pin the footer to the
   bottom on short pages (404, empty search) so it never floats mid-viewport. */
body {
  display: flex;
  flex-direction: column;
  /* 100vh resolves against the LARGE viewport, i.e. with the mobile toolbar retracted,
     so short pages gain ~60-115px of dead scroll and the sticky header jitters as the
     toolbar collapses. svh is the small-viewport equivalent; older engines drop it. */
  min-height: 100vh;
  min-height: 100svh;
}
body > main {
  flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: #16263F;
  letter-spacing: -0.02em;
  font-weight: 600;
}

h1 {
  font-size: 34px;
  line-height: 1.2;
}

h2 {
  font-size: 23px;
  line-height: 1.3;
}

h3 {
  font-size: 18px;
}

a {
  color: #BF4630;
}
a:visited {
  color: #BF4630;
}
a:hover, a:active, a:focus {
  color: #A4311A;
}

/* Coral focus ring on every focusable surface — the one interaction signal shared
   across all three properties. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #E15D43;
  outline-offset: 3px;
  /* No border-radius here. `a:focus-visible` is (0,1,1) and out-specifies .mx-btn
     (0,1,0), so declaring a radius rewrote the BUTTON's own 8px corners to 4px on keyboard
     focus. `outline` already follows the element's real radius in every shipping engine. */
}

/* Marketing uses a flat --container-max: 1200px with 28px gutters. Upstream's
   max-width-container mixin instead switches to `width: 90%` above its own breakpoint,
   which makes the gutters grow with the viewport. Pin it to the marketing geometry. */
.container,
.header {
  width: 100%;
  max-width: 1200px;
  padding-left: 28px;
  padding-right: 28px;
}

/* Upstream separates the header from content with a full-bleed rule; the brand row
   already carries its own hairline, so this one is redundant. */
.container-divider {
  display: none;
}

/* ---- 3. Header / brand row --------------------------------------------------
   Mirrors .site-nav + .nav-inner on the marketing site: cream band, single hairline,
   sticky, 1200px inner, logo left, nav centre, EN/RU + CTA cluster right. */
.mx-header-shell {
  background: #FAF6EE;
  border-bottom: 1px solid #E8DFCB;
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Upstream's .header is `display: flex; justify-content: space-between`. The right-hand
   cluster is pinned by a `margin-left: auto` — carried by .mx-lang until 2026-08-30 and by
   .nav-wrapper-desktop since — and that auto margin absorbs ALL the free space, which
   collapses the space-between gap and leaves the wordmark touching the first nav link. An
   explicit gap is what actually holds the row apart at every width; do not remove it. */
/* Content-driven, NOT a fixed height. Marketing and the portal are 18px of vertical
   padding around the tallest child (the 39.6px CTA) plus the 1px border = 76.6px; this
   theme's fixed 72px made the Help Centre visibly shorter than both. $mx-header-height
   survives only as the anchor-scroll offset below. */
.header {
  height: auto;
  padding: 18px 28px;
  gap: 28px;
  position: relative;
}

/* Flex, not the upstream block. header.hbs wraps the wordmark in <div class="logo">
   (marketing and the portal make the <a> a direct flex child of the row instead), and a
   block box puts its inline-flex anchor on a text baseline — the box measured 38.8px
   around a 32px SVG, with the SVG pinned to the top. .header centres the 38.8px box, so
   the logo itself rendered 3.4px ABOVE the optical centre the other two sit on. */
.logo {
  display: flex;
  align-items: center;
  /* The wordmark is an inline SVG in header.hbs (structure follows currentColor,
     coral node fixed), not settings.logo — so it stays crisp and recolourable.
     The height matches .logo svg on the marketing site exactly. */
}
.logo a {
  display: inline-flex;
  align-items: center;
  color: #16263F;
  line-height: 1;
}
.logo svg {
  height: 32px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.logo span {
  color: #16263F;
  font-family: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* Brand-row geometry below the desktop breakpoint. Hand-written 1000/600 max-width
   queries, NOT Copenhagen's 768/1024 mixins, for the same reason the footer's queries
   were rewritten: marketing and the client area both step at 1000 and 600, so anything
   on the 768 ladder diverges from them across a whole band. The header sat on that
   ladder until now, which is why this property narrowed its gutter and shrank its
   wordmark from 768 down while the other two only narrowed at 600 and never shrank
   the wordmark at all.

   Height is PINNED rather than content-driven. Each property carries a different
   right-hand cluster once the nav collapses (marketing keeps a CTA + a 42px hamburger,
   the portal a cart + a 26px one, this row only the 32px hamburger), so the tallest
   child differs and the rows measured 79 / 69 / 76.6px with the wordmark on three
   baselines — y = 23 / 18 / 21.8 at 830px on 2026-08-31. 78 and 70 (+ the shell's 1px
   border = 79 and 71) are marketing's own numbers; all three now render them.
   Mirrored in website/site/resources/css/app.css (.nav-inner) and
   whmcs/templates/maxinodes/css/custom.css (.mx-brandrow-inner). */
@media (max-width: 1000px) {
  .header {
    min-height: 78px;
  }
}
@media (max-width: 600px) {
  .container,
  .header {
    padding-left: 20px;
    padding-right: 20px;
  }
  .header {
    padding-top: 14px;
    padding-bottom: 14px;
    min-height: 70px;
    /* Was 12px from 768 down, to buy width for logo + language pills + hamburger. The
       pills left this row on 2026-08-30, so the budget is now wordmark 149 + hamburger
       71 = 220px inside a 335px content box at 375px — 115px of slack. Kept only as a
       floor; `justify-content: space-between` is what actually places the two. */
    gap: 12px;
  }
  .mx-foot-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}
/* The centre nav is desktop-only. Below 1024px the brand row cannot hold logo + nav +
   language pills + the CTA cluster without the CTAs falling off the right edge, and the
   same links are already in the mobile menu. */
.mx-nav {
  display: none;
  align-items: center;
  /* 32px, matching .nav-links on marketing and .mx-nav-links on the portal. At 26px this
     nav measured 360px against their 378px for the same four labels, so the three rows
     were still visibly different widths even once centred. */
  gap: 32px;
  /* 1001px, not Copenhagen's desktop (>=1024). Marketing and the client area both
     collapse at 1000, and this footer's queries were already hand-written to 1000/600
     during the footer unification; the header was left on the 1024 ladder, so between
     1001 and 1023 this property showed a nav the other two had already collapsed.

     Absolutely centred rather than flowed. `justify-content: space-between` puts the nav
     wherever the two side clusters leave room, and those clusters legitimately differ per
     property (cart, Sign in vs Login vs Client area) — so a flowed nav can never land in
     the same place on all three. Centring makes its position a function of the container
     alone, which IS identical everywhere. Safe because the nav is hidden below 1001px,
     so it can never overlap the clusters. */
}
@media (min-width: 1001px) {
  .mx-nav {
    display: flex;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
.mx-nav a {
  font-size: 14.5px;
  font-weight: 500;
  color: #3B4B65;
  transition: color 0.15s;
}
.mx-nav a:hover, .mx-nav a[aria-current=page] {
  color: #BF4630;
  text-decoration: none;
}

.mx-nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Copenhagen's own user-nav (Sign in / profile dropdown) sits in the right cluster
   next to ours. Neutralise its link styling so it reads as part of the same row.

   ⚠ display MUST stay inside @include desktop. Upstream hides this wrapper below 1024px
   (`@include mobile { display:none } @include tablet { display:none }`) and shows the
   hamburger instead. Declaring `display: flex` unconditionally here rendered BOTH clusters
   at 375px — the header overflowed by 110px and pushed the hamburger off-screen entirely.
   The language pills used to live in here and were moved out to their own always-visible
   container in header.hbs, precisely so this wrapper can go back to being desktop-only. */
/* The hamburger's hide threshold must move with .mx-nav's show threshold, or the band
   between them renders a full desktop nav AND the hamburger at the same time. Upstream
   hides .nav-wrapper-mobile at @include desktop (>=1024) in _header.scss:103; .mx-nav now
   appears at >=1001, so this closes the 1001-1023 gap. Override rather than editing
   _header.scss — that file is upstream and is replaced wholesale on a Copenhagen bump. */
@media (min-width: 1001px) {
  .nav-wrapper-mobile {
    display: none;
  }
}
/* ---- 3c. Mobile menu — full-height cream panel ------------------------------
   Parity with marketing .mobile-menu and the portal .mx-mobile-menu (2026-09-01).
   Upstream rendered a white dropdown card under the header: 16px links padded 8/24,
   grey hover, #ddd dividers, drop shadow — a visibly different product from the cream
   panels the other two properties open. It also broke the language switcher: the pill
   row is not an <a>, so upstream's 24px item padding never reached it and the capsule
   sat flush against the panel edge.

   The panel is FIXED and starts under the sticky brand row, so the logo and the toggle
   never move on open — the same guarantee the other two get by making their overlay's
   top row a replica of the brand row. 79px/71px are the pinned row heights
   (min-height 78/70 + the shell's 1px border); z-index stays below the shell's 50 so
   the row keeps taking clicks.

   Selectors are .nav-wrapper-mobile-qualified: upstream styles every <a>/<button> in
   this list at (0,1,1), which outranks the bare component classes — the same trap
   documented in §16. */
.nav-wrapper-mobile .menu-button-mobile {
  min-width: 0;
  padding: 8px;
  border-radius: 6px;
  color: #16263F;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-wrapper-mobile .menu-button-mobile:hover {
  background-color: #F2EBDB;
}
.nav-wrapper-mobile .menu-button-mobile .icon-menu,
.nav-wrapper-mobile .menu-button-mobile .icon-menu-close {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 0;
}
.nav-wrapper-mobile .menu-button-mobile .icon-menu-close {
  display: none;
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
  display: none;
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu-close {
  display: block;
}

.nav-wrapper-mobile .menu-list-mobile {
  position: fixed;
  top: 79px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  background-color: #FAF6EE;
  border-top: 0;
  border-bottom: 0;
  box-shadow: none;
  overflow-y: auto;
  padding: 0 28px 32px;
}
@media (max-width: 600px) {
  .nav-wrapper-mobile .menu-list-mobile {
    top: 71px;
    padding: 0 20px 32px;
  }
}

.nav-wrapper-mobile .menu-list-mobile-items {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  /* 28 = the other two menus' 12px top-row margin + 16px nav padding. This panel opens
     directly under the header hairline, so both belong to this one padding — at 16 the
     first link sat 12px closer to the logo here than on marketing and the portal. */
  padding-top: 28px;
  /* Marketing .mobile-menu nav a, verbatim (22px display face, 18px rows, hairline). */
  /* Property-specific rows (Client area, Status page, the signed-in account links) at
     the smaller pitch the portal uses for its account list. */
  /* Foot cluster: outline + filled button pair, pills centred beneath — the marketing
     .mobile-menu-cta stack. margin-top: auto pins it to the panel foot whatever sits
     above (the signed-in list is longer than the visitor one). */
  /* Marketing's full-size .btn metrics (12px 22px / 14.5px 600 / 2px border / 8px
     radius), NOT the brand row's .mx-btn--sm — the overlay buttons are full-size on the
     other two properties as well. */
  /* coral-deep rest / deepest hover — the 2026-08-31 filled-CTA contrast rule. */
  /* Restore the capsule pill from upstream's block-anchor treatment, at the thumb size
     the ≤768 rule already gives pills (this menu shows to 1000, so pin it here for the
     whole range). Colour and hover background need re-asserting — upstream's (0,1,1)
     anchor rule outranks the bare .mx-lang__pill component. */
}
.nav-wrapper-mobile .menu-list-mobile-items .item {
  margin: 0;
}
.nav-wrapper-mobile .menu-list-mobile-items .item a,
.nav-wrapper-mobile .menu-list-mobile-items .item button {
  display: block;
  width: 100%;
  padding: 18px 0;
  border-bottom: 1px solid #E8DFCB;
  font-family: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #16263F;
  text-align: left;
}
.nav-wrapper-mobile .menu-list-mobile-items .item a:hover, .nav-wrapper-mobile .menu-list-mobile-items .item a:focus, .nav-wrapper-mobile .menu-list-mobile-items .item a:active,
.nav-wrapper-mobile .menu-list-mobile-items .item button:hover,
.nav-wrapper-mobile .menu-list-mobile-items .item button:focus,
.nav-wrapper-mobile .menu-list-mobile-items .item button:active {
  background-color: transparent;
  color: #BF4630;
  text-decoration: none;
}
.nav-wrapper-mobile .menu-list-mobile-items .mx-menu-secondary a,
.nav-wrapper-mobile .menu-list-mobile-items .mx-menu-secondary button {
  padding: 12px 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: #3B4B65;
}
.nav-wrapper-mobile .menu-list-mobile-items .mx-menu-secondary .my-profile {
  display: flex;
  align-items: center;
}
.nav-wrapper-mobile .menu-list-mobile-items .mx-menu-cta {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nav-wrapper-mobile .menu-list-mobile-items .mx-menu-cta a.mx-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.6; /* marketing .btn inherits body 1.6 — unified height 51.2px */
  text-decoration: none;
}
.nav-wrapper-mobile .menu-list-mobile-items .mx-menu-cta a.mx-menu-btn:hover, .nav-wrapper-mobile .menu-list-mobile-items .mx-menu-cta a.mx-menu-btn:focus, .nav-wrapper-mobile .menu-list-mobile-items .mx-menu-cta a.mx-menu-btn:active {
  text-decoration: none;
}
.nav-wrapper-mobile .menu-list-mobile-items .mx-menu-cta a.mx-menu-btn--primary,
.nav-wrapper-mobile .menu-list-mobile-items .mx-menu-cta a.mx-menu-btn--primary:visited {
  background-color: #BF4630;
  color: #FFFFFF;
}
.nav-wrapper-mobile .menu-list-mobile-items .mx-menu-cta a.mx-menu-btn--primary:hover,
.nav-wrapper-mobile .menu-list-mobile-items .mx-menu-cta a.mx-menu-btn--primary:focus,
.nav-wrapper-mobile .menu-list-mobile-items .mx-menu-cta a.mx-menu-btn--primary:active {
  background-color: #A03A25;
  color: #FFFFFF;
}
.nav-wrapper-mobile .menu-list-mobile-items .mx-menu-cta a.mx-menu-btn--light,
.nav-wrapper-mobile .menu-list-mobile-items .mx-menu-cta a.mx-menu-btn--light:visited {
  background-color: #FFFFFF;
  border-color: #D5CAAF;
  color: #16263F;
}
.nav-wrapper-mobile .menu-list-mobile-items .mx-menu-cta a.mx-menu-btn--light:hover,
.nav-wrapper-mobile .menu-list-mobile-items .mx-menu-cta a.mx-menu-btn--light:focus,
.nav-wrapper-mobile .menu-list-mobile-items .mx-menu-cta a.mx-menu-btn--light:active {
  background-color: #FFFFFF;
  border-color: #16263F;
  color: #16263F;
}
.nav-wrapper-mobile .menu-list-mobile-items .mx-menu-cta .mx-lang {
  align-self: center;
  margin-top: 4px;
}
.nav-wrapper-mobile .menu-list-mobile-items .mx-menu-cta .mx-lang__pill {
  display: inline-block;
  width: auto;
  padding: 7px 12px;
  border-bottom: 0;
  color: #5C6478;
}
.nav-wrapper-mobile .menu-list-mobile-items .mx-menu-cta .mx-lang__pill:hover, .nav-wrapper-mobile .menu-list-mobile-items .mx-menu-cta .mx-lang__pill:focus {
  background-color: transparent;
  color: #16263F;
}
.nav-wrapper-mobile .menu-list-mobile-items .mx-menu-cta .mx-lang__pill.is-active {
  background: #16263F;
  color: #FFFFFF;
}

/* NO `margin-left: auto` here. It was added 2026-08-30 when the language pill (which had
   carried it) left this row, on the assumption that the auto margin was load-bearing. It
   is not — .header is `justify-content: space-between`, which is exactly what marketing
   and the portal use, and an auto margin OVERRIDES it: the whole 348px of free space went
   to one side and pinned the nav hard against the logo at x=324 where the other two sit
   at ~490. Letting space-between distribute puts all three within a few px. */
.nav-wrapper-desktop {
  align-items: center;
  gap: 10px;
  /* tablet (>=768), not the nav's own 1001 threshold. Upstream hides this wrapper AND
     shows the hamburger below 1024, which left ~500px of empty brand row with no CTA at
     all on iPad portrait. Showing the CTA cluster from 768 up fills it and keeps every
     link reachable, because the hamburger stays visible until 1001 — the naive fix
     (hiding the hamburger at tablet) would strand the nav links, since .mx-nav does not
     appear until 1001. Band map after 2026-08-30:
       <768        logo + hamburger
       768-1000    logo + CTA cluster + hamburger   (nav lives in the menu)
       >=1001      logo + nav + CTA cluster         (no hamburger) */
  /* ⚠ Upstream `.nav-wrapper-desktop a` (0,1,1) sets `padding: 0 20px 0 0`,
     `color: #BF4630`, `font-size: 14px` and its own display rules on EVERY anchor in
     this cluster — and it out-specifies a bare `.mx-btn` / `.mx-lang__pill` (0,1,0).
     Excluding our components from our OWN rule above does nothing about that; they have to
     be re-asserted at (0,2,0), which also beats the base `a:visited` (0,1,1) from §2.
     This is why the RU pill collapsed to unpadded coral text while the EN pill — a <span>,
     which upstream's `a` selector never matched — looked correct.

     Anything new added to this cluster needs the same treatment. */
  /* Header CTA metrics, pinned so all three properties render an identical button:
     13.5px / line-height 1.6 / 8px 16px / 1px border = 39.6px tall. Without the explicit
     border this button was 37.6 against marketing's 39.6. */
  /* ⚠ The :hover/:focus/:active states need re-asserting SEPARATELY. Upstream ships
     `.nav-wrapper-desktop a:hover, …:focus, …:active { background-color: transparent;
     color: #BF4630; text-decoration: underline; }` at (0,2,1), which out-specifies the
     (0,2,0) rules above — so a button styled correctly at rest lost its coral fill and
     turned into underlined text the moment you pointed at it. Matching (0,2,1) here wins
     on source order because this file is imported last.

     RULE OF THUMB for this cluster: every property upstream sets on `a` must be
     re-asserted at BOTH rest and hover/focus/active, or the component breaks in one state
     only — which is easy to miss when eyeballing a static page. */
}
@media (min-width: 768px) {
  .nav-wrapper-desktop {
    display: flex;
  }
}
.nav-wrapper-desktop a:not(.mx-btn):not(.mx-lang__pill) {
  color: #3B4B65;
  font-size: 14.5px;
  font-weight: 500;
  padding: 0;
}
.nav-wrapper-desktop a:not(.mx-btn):not(.mx-lang__pill):hover, .nav-wrapper-desktop a:not(.mx-btn):not(.mx-lang__pill):focus, .nav-wrapper-desktop a:not(.mx-btn):not(.mx-lang__pill):active {
  color: #BF4630;
  text-decoration: none;
}
.nav-wrapper-desktop .mx-btn {
  display: inline-flex;
  width: auto;
  padding: 8px 16px;
  font-size: 13.5px;
}
.nav-wrapper-desktop .mx-btn {
  font-size: 13.5px;
  line-height: 1.6;
  padding: 8px 16px;
  border: 1px solid transparent;
}
.nav-wrapper-desktop .mx-btn--primary {
  color: #FFFFFF;
}
.nav-wrapper-desktop .mx-btn--light {
  color: #16263F;
}
.nav-wrapper-desktop .mx-btn:hover,
.nav-wrapper-desktop .mx-btn:focus,
.nav-wrapper-desktop .mx-btn:active {
  text-decoration: none;
}
.nav-wrapper-desktop .mx-btn--primary:hover,
.nav-wrapper-desktop .mx-btn--primary:focus,
.nav-wrapper-desktop .mx-btn--primary:active {
  background-color: #BF4630;
  border-color: #BF4630;
  color: #FFFFFF;
}
.nav-wrapper-desktop .mx-btn--light:hover,
.nav-wrapper-desktop .mx-btn--light:focus,
.nav-wrapper-desktop .mx-btn--light:active {
  background-color: #FFFFFF;
  border-color: #16263F;
  color: #16263F;
}

.user-nav-list > li {
  margin-left: 20px;
}

/* Signed-in agents get a name in the brand row. Long names would push the CTA cluster
   off the right edge, so cap it. End users see "Sign in" here and are unaffected. */
.user-info .dropdown-toggle > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- 3b. EN/RU pill switcher ------------------------------------------------
   Byte-equivalent to partials/lang-switcher.blade.php on the marketing site and to the
   WHMCS clone. Since 2026-08-30 this control appears in the FOOTER and the MOBILE MENU
   only — the header pill was removed on all three properties.

   The `margin-left: auto` that used to live here was the only such rule in this file and
   was what pinned the header's whole right-hand cluster; the explicit `gap: 28px` on
   .header exists because that auto margin absorbed the free space and collapsed
   upstream's justify-content: space-between. It moved to .nav-wrapper-desktop when the
   pill left, or the layout would have silently reverted. `margin-right: 12px` was a
   brand-row concern (clearing the hamburger) and is simply gone. */
.mx-lang {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(22, 38, 63, 0.18);
  border-radius: 999px;
  overflow: hidden;
  background: #FFFFFF;
}

/* 7px 12px — synced to the marketing partial 2026-09-01, which raised its pills for
   the 24px minimum target size on 2026-08-31; all three properties now render one pill.
   (The old 6px/14px here guarded against the 999px-radius curve clipping the outer
   glyphs on a 22px-tall pill; at the current 26.5px height marketing ships these exact
   numbers with no clip.) */
.mx-lang__pill {
  display: inline-block;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  /* ⚠ No opacity at rest. Browsers composite element opacity in gamma-encoded sRGB, so
     0.55 x #16263F over the white pill resolves to #7F8895 — 3.58:1, below AA. The inactive
     pill is a real, readable label, so it gets a real colour instead. */
  color: #5C6478;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  /* Same :visited trap as the buttons — the RU pill is an <a>, so once followed it would
     otherwise pick up #BF4630 instead of the ink/paper pill colours. */
  /* :focus is mandatory here, not optional — without it the base `a:focus` rule repaints
     the pill on keyboard focus. */
}
.mx-lang__pill:visited {
  color: #5C6478;
}
.mx-lang__pill:hover, .mx-lang__pill:focus {
  color: #16263F;
  text-decoration: none;
}
.mx-lang__pill.is-active, .mx-lang__pill.is-active:visited {
  background: #16263F;
  color: #FFFFFF;
  opacity: 1;
}

/* ---- 4. Buttons -------------------------------------------------------------
   Copenhagen ships .button / .button-large; the marketing recipes are .btn /
   .btn-primary / .btn-light. Both names are styled so upstream templates and our
   own markup land on the same visual. */
.button, .split-button button, .section-subscribe button, .article-subscribe button, .requests-table-toolbar .organization-subscribe button, .subscriptions-subscribe button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link,
.mx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
  text-align: center;
  /* Upstream's line-height: 2.34 is sized for its own padding: 0 20px. Under our 12px
     padding it made every .button 62px tall — Follow, the Yes/No votes — against the
     marketing .btn's 51.2px (12px padding + 14.5px x 1.6 + 2px borders). 2026-09-11. */
  line-height: 1.6;
}

/* Follow is a secondary action; upstream's `.button { width: 100% }` below tablet turned
   it into a full-width coral bar under every section and article title on a phone. The
   subscribe buttons @extend .button upstream (_section.scss, _article.scss), so they are
   named here rather than reached through it. */
.section-subscribe button,
.article-subscribe button {
  width: auto;
}

/* ⚠ :visited MUST be listed on every button variant. The base `a:visited` rule in §2 is
   (0,1,1) and out-specifies `.mx-btn--primary` (0,1,0), so once a visitor has followed the
   CTA once, the label renders coral-deep on coral and becomes unreadable. Same trap for
   any future variant — if it sets `color`, it needs `&:visited` too. */
/* ⚠ The FILL is coral-deep, not coral. White on #E15D43 measures 3.59:1 — below AA for
   normal text, and .mx-btn is 14.5px/600 so the large-text exemption does not apply.
   #BF4630 gives 5.08:1, and #A4311A (upstream's own #a4311a) gives 6.92:1
   for the hover step. Coral itself stays the accent for borders and icons, where the 3:1
   non-text threshold applies. */
.button, .split-button button, .section-subscribe button, .article-subscribe button, .requests-table-toolbar .organization-subscribe button, .subscriptions-subscribe button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link,
.mx-btn--primary {
  background: #BF4630;
  color: #FFFFFF;
  border-color: #BF4630;
}
.button:visited, .split-button button:visited, .section-subscribe button:visited, .article-subscribe button:visited, .requests-table-toolbar .organization-subscribe button:visited, .subscriptions-subscribe button:visited, .pagination-next-link:visited, .pagination-prev-link:visited, .pagination-first-link:visited, .pagination-last-link:visited,
.mx-btn--primary:visited {
  color: #FFFFFF;
}
.button:hover, .split-button button:hover, .section-subscribe button:hover, .article-subscribe button:hover, .requests-table-toolbar .organization-subscribe button:hover, .subscriptions-subscribe button:hover, .pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover, .button:focus, .split-button button:focus, .section-subscribe button:focus, .article-subscribe button:focus, .requests-table-toolbar .organization-subscribe button:focus, .subscriptions-subscribe button:focus, .pagination-next-link:focus, .pagination-prev-link:focus, .pagination-first-link:focus, .pagination-last-link:focus, .button:active, .split-button button:active, .section-subscribe button:active, .article-subscribe button:active, .requests-table-toolbar .organization-subscribe button:active, .subscriptions-subscribe button:active, .pagination-next-link:active, .pagination-prev-link:active, .pagination-first-link:active, .pagination-last-link:active,
.mx-btn--primary:hover,
.mx-btn--primary:focus,
.mx-btn--primary:active {
  background: #A03A25;
  border-color: #A03A25;
  color: #FFFFFF;
  transform: translateY(-1px);
  text-decoration: none;
}

.mx-btn--light {
  background: #FFFFFF;
  color: #16263F;
  border-color: #D5CAAF;
}
.mx-btn--light:visited {
  color: #16263F;
}
.mx-btn--light:hover, .mx-btn--light:focus, .mx-btn--light:active {
  border-color: #16263F;
  color: #16263F;
  text-decoration: none;
}

.mx-btn--sm {
  padding: 8px 16px;
  font-size: 13.5px;
  border-width: 1px;
}

/* ---- 5. Hero + search -------------------------------------------------------
   Upstream .hero is a 300px full-bleed background image. Maxinodes' is a CSS-only
   cream band (no image request) with the search box as the single focal element. */
.hero {
  background: #FAF6EE;
  background-image: none;
  height: auto;
  padding: 56px 28px 60px;
  text-align: center;
  border-bottom: 1px solid #E8DFCB;
}

/* Upstream .hero-inner is vertically centred inside a fixed 300px hero
   (position:relative; top:50%; translateY(-50%)). This hero is auto-height, so the
   centring is dropped — but position:relative is KEPT, because .search-icon is
   position:absolute and needs a positioned ancestor. */
.hero-inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  top: auto;
  transform: none;
}
.hero-inner h1, .hero-inner h2 {
  font-family: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: #16263F;
}

/* The icon must centre against the SEARCH FIELD, not the whole hero (which now also
   holds the title and sub-line), so it gets its own positioning context. */
.mx-search-wrap {
  position: relative;
}

.mx-hero-title {
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.mx-hero-sub {
  color: #5C6478;
  font-size: 16px;
  margin: 0 0 28px;
}

/* {{search}} renders <form class="search"><input type="search"></form>, and upstream
   puts the VISIBLE box on the FORM (border + 30px pill radius) while the input itself
   is border:none. So the brand treatment goes on the form; styling the input instead
   produces a box-inside-a-box. */
.search {
  background: #FFFFFF;
  border: 1px solid #D5CAAF;
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(22, 38, 63, 0.04), 0 24px 60px -28px rgba(22, 38, 63, 0.16);
  transition: border-color 0.15s, box-shadow 0.15s;
  /* WCAG 1.4.11 wants 3:1 on the boundary of anything you have to operate. */
  border-color: #8E7E52;
}
.search:focus-within {
  border-color: #E15D43;
  box-shadow: 0 0 0 3px #FBDED5;
}
.search input[type=search],
.search .clear-button {
  background: transparent;
  border-radius: 8px;
  color: #16263F;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
.search input[type=search] {
  height: 46px;
  padding: 0 18px 0 44px;
  font-size: 16px; /* iOS zoom threshold — see §11 */
  /* (c) upstream `.search input:where(:not([type=checkbox])):focus` sets a 1px
     #E15D43 border at higher specificity than a bare :focus here, which would
     re-introduce the inner box. The ring lives on the form instead. */
}
.search input[type=search]::placeholder {
  color: #5C6478;
}
.search input[type=search]:focus {
  border: 0 !important;
  outline: none;
}

/* Hero search is the page's focal element, so it gets the marketing field height. */
.mx-search-wrap .search input[type=search] {
  height: 54px;
}

.search-icon {
  color: #5C6478;
  z-index: 1;
}

.mx-search-wrap .search-icon {
  left: 18px;
  width: 16px;
  height: 16px;
}

/* The instant-search panel rule that sat here still listed `.search-results-column` — the
   search results page's MAIN column — so §16's fix for exactly that never took effect: the
   whole results list stayed boxed in a card with no padding, every title and snippet
   touching its border (measured 2026-09-11 at 375px: text at x=21, border at x=20). The
   panel now lives only in §16, which already declared it on its own. */
/* ---- 6. Home: category grid -------------------------------------------------
   .blocks-item is the card. Upstream gives it a flat 1px #ddd border; lift it to the
   marketing card recipe with a coral hover. */
.knowledge-base {
  padding-top: 48px;
}

.blocks-list {
  display: grid;
  gap: 24px;
  margin: 0;
}

.blocks-item {
  width: auto;
  margin: 0;
  background: #FFFFFF;
  border: 1px solid #D5CAAF;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(22, 38, 63, 0.04), 0 24px 60px -28px rgba(22, 38, 63, 0.16);
  transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s;
  /* ⚠ Upstream inverts the whole card on hover — `.blocks-item:hover` sets
     `background-color: #E15D43` and `.blocks-item:hover *` sets
     `color: #FFFFFF`. Our design keeps the card paper and moves only the border
     and title, so the background MUST be re-asserted; leaving it unset produced a solid
     coral card whose title stayed coral-deep (our own more-specific title rule beat
     upstream's `*`), i.e. unreadable coral-on-coral. */
  /* Beats `.blocks-item:hover *` (0,2,0) for the description, which would otherwise turn
     white-on-paper. The title is handled by its own rule below. */
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  background-color: #FFFFFF;
  border-color: #E15D43;
  box-shadow: 0 1px 0 rgba(22, 38, 63, 0.04), 0 28px 64px -26px rgba(225, 93, 67, 0.22);
  transform: translateY(-2px);
}
.blocks-item:hover .blocks-item-description, .blocks-item:focus .blocks-item-description, .blocks-item:active .blocks-item-description {
  color: #5C6478;
}

.blocks-item-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 26px 24px;
  border: 0;
  text-align: left;
}
.blocks-item-link:hover {
  text-decoration: none;
}

.blocks-item-title {
  font-family: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #16263F;
  letter-spacing: -0.01em;
}
.blocks-item:hover .blocks-item-title {
  color: #BF4630;
}

.blocks-item-description {
  color: #5C6478;
  font-size: 14px;
  line-height: 1.6;
}

/* ---- 7. Promoted / featured articles ---------------------------------------- */
.articles {
  margin-top: 56px;
}
.articles h2 {
  font-family: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #16263F;
  margin-bottom: 16px;
}

.promoted-articles {
  background: #FFFFFF;
  border: 1px solid #D5CAAF;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(22, 38, 63, 0.04), 0 24px 60px -28px rgba(22, 38, 63, 0.16);
  padding: 8px 24px;
}

.promoted-articles-item {
  border-bottom: 1px solid #E8DFCB;
}
.promoted-articles-item:last-child {
  border-bottom: 0;
}
.promoted-articles-item a {
  display: block;
  padding: 14px 0;
  color: #3B4B65;
  font-size: 15px;
}
.promoted-articles-item a:hover {
  color: #BF4630;
  text-decoration: none;
}

/* ---- 7b. "Still stuck?" closing panel (home) --------------------------------
   Cream-2 panel, centred, one coral CTA. Deliberately the only thing below the
   category grid, so the fallback path into a ticket is unmissable. */
.mx-still-stuck {
  margin-top: 64px;
  padding: 40px 28px;
  text-align: center;
  background: #F2EBDB;
  border: 1px solid #E8DFCB;
  border-radius: 14px;
}
.mx-still-stuck h2 {
  font-family: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 22px;
  margin-bottom: 8px;
}
.mx-still-stuck p {
  color: #3B4B65;
  margin: 0 auto 22px;
  max-width: 48ch;
}

/* ---- 8. Sub-nav + breadcrumbs ----------------------------------------------- */
.sub-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid #E8DFCB;
  margin-bottom: 32px;
}

/* ⚠ Measured at 375px: a three-crumb trail is 697px wide in a 320px column and is an
   INDEPENDENT cause of page-level horizontal scroll, separate from the table above.
   min-width: 0 on both the flex container and the items is what actually lets them
   shrink — without it the flex items refuse to go below their content width. */
.breadcrumbs {
  margin: 0;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}
.breadcrumbs li {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: #5C6478;
  font-size: 13.5px;
  /* Upstream `.breadcrumbs li a:visited` is (0,2,2) and beats a bare `.breadcrumbs li a`
     (0,1,2) — specificity is compared before source order, so importing last does not
     help. Matching its shape is the only way to keep visited crumbs muted. */
}
.breadcrumbs li a {
  color: #5C6478;
}
.breadcrumbs li a:visited {
  color: #5C6478;
}
.breadcrumbs li a:hover, .breadcrumbs li a:focus, .breadcrumbs li a:active {
  color: #BF4630;
}
.breadcrumbs li + li::before {
  color: #D5CAAF;
}

.sub-nav .search-container {
  max-width: 320px;
  flex: 1 1 240px;
}
.sub-nav .search-container .search {
  box-shadow: none;
}
.sub-nav .search-container input[type=search] {
  height: 40px;
  padding-left: 38px;
  font-size: 16px; /* iOS zoom threshold — see §11 */
}
.sub-nav .search-container .search-icon {
  left: 14px;
}

/* ---- 9. Category + section pages -------------------------------------------- */
.page-header h1 {
  font-family: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 30px;
  letter-spacing: -0.02em;
  color: #16263F;
}

.page-header-description {
  color: #5C6478;
  font-size: 16px;
  max-width: 64ch;
}

.section-tree {
  display: grid;
  gap: 24px;
  margin-top: 32px;
}
.section-tree > .section {
  margin: 0;
  padding: 24px 26px;
  background: #FFFFFF;
  border: 1px solid #D5CAAF;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(22, 38, 63, 0.04), 0 24px 60px -28px rgba(22, 38, 63, 0.16);
  transition: border-color 0.15s, box-shadow 0.2s;
}
.section-tree > .section:hover {
  border-color: #E15D43;
  box-shadow: 0 1px 0 rgba(22, 38, 63, 0.04), 0 28px 64px -26px rgba(225, 93, 67, 0.22);
}

.section-tree-title {
  font-family: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 17px;
  margin-bottom: 12px;
}
.section-tree-title a {
  color: #16263F;
}
.section-tree-title a:hover {
  color: #BF4630;
  text-decoration: none;
}

.article-list-item {
  border-bottom: 1px solid #E8DFCB;
}
.article-list-item:last-child {
  border-bottom: 0;
}

.article-list-link {
  display: block;
  padding: 11px 0;
  color: #3B4B65;
  font-size: 14.5px;
  line-height: 1.5;
}
.article-list-link:hover {
  color: #BF4630;
  text-decoration: none;
}

.see-all-articles {
  display: inline-block;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: #BF4630;
}

.section-list-item {
  border-bottom: 1px solid #E8DFCB;
}
.section-list-item a {
  color: #16263F;
  padding: 14px 0;
}
.section-list-item a:hover {
  color: #BF4630;
  text-decoration: none;
}

.icon-star {
  color: #E15D43;
}

.icon-lock {
  color: #5C6478;
}

/* ---- 10. Article page ------------------------------------------------------- */
/* column-gap, not gap: the 48px is the sidebar|article gutter of the desktop row. Below
   1024px upstream stacks the container, and a plain `gap` became 48px of empty cream between
   the collapsed "Articles in this section" bar and the title — 88px with upstream's own
   margins (2026-09-11, 375px). The row never wraps, so the row-gap never had a job. */
.article-container {
  column-gap: 48px;
}

.article-sidebar .sidenav-title {
  font-family: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5C6478;
}

.sidenav-item {
  color: #3B4B65;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 0;
  /* coral-deep on coral-soft is 3.99:1 and on cream-2 4.28:1; the deepest step gives
     5.28:1 / 5.65:1. :visited is needed or the base a:visited (0,1,1) beats .sidenav-item. */
}
.sidenav-item:hover, .sidenav-item:focus {
  background: #F2EBDB;
  color: #A03A25;
  text-decoration: none;
}
.sidenav-item:visited {
  color: #3B4B65;
}
.sidenav-item.current-article, .sidenav-item.current-article:visited {
  background: #FBDED5;
  color: #A03A25;
  font-weight: 600;
  border: 0;
}

.article-title {
  font-family: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #16263F;
}

.article-author,
.article-meta {
  color: #5C6478;
  font-size: 13.5px;
}

/* The reading column. 145 imported articles are dense technical prose with tables and
   code; 68ch keeps line length legible while the page itself stays 1200px. */
.article-body {
  color: #3B4B65;
  font-size: 16px;
  line-height: 1.75;
  max-width: 68ch;
  /* Standing brand rule (carried over from help.css §14): no italics anywhere.
     Emphasis is coral-deep plus weight, never slanted. */
  /* Tables — the imported KB uses them heavily (plan matrices, DNS records). */
  /* ⚠ Measured at 375px with the real Microsoft-365 DNS-records table from the import:
     840px wide inside a 320px column, taking documentElement.scrollWidth to 860 and
     scrolling the ENTIRE page sideways. `border-collapse: collapse` also makes
     border-radius inert in every engine, so the old `overflow: hidden` bought nothing and
     only clipped columns.

     `display: block` turns the table into its own scroll container. The trade is real:
     block tables lose column-width negotiation, so narrow tables no longer auto-size to
     content. Accepted here because a clipped DNS value is data loss and a slightly loose
     2-column table is not. `role="table"` on the element would restore the semantics that
     display:block strips — worth doing in the importer alongside a wrapper div. */
  /* Code — dark ink block, matching the marketing site and the transactional email
     template. Inline code is a cream-2 chip in coral-deep. */
  /* Coral-deep on cream-2 is 4.28:1 — below AA, and this chip is the single most repeated
     element across the imported KB. Paper lifts it to 5.08:1 and gives the chip a real edge
     against the page instead of a 1.1:1 tint nobody can see. */
}
.article-body h1, .article-body h2, .article-body h3, .article-body h4 {
  font-family: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: #16263F;
  letter-spacing: -0.02em;
  margin-top: 2em;
  margin-bottom: 0.6em;
}
.article-body h2 {
  font-size: 24px;
}
.article-body h3 {
  font-size: 19px;
}
.article-body a {
  color: #BF4630;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  /* The tint was coral-soft: 1.18:1 against cream, i.e. no visible underline at all,
     leaving links distinguished by colour alone (1.74:1 against body text — well under the
     3:1 WCAG 1.4.1's colour-only technique requires). */
  text-decoration-color: currentColor;
  /* :focus belongs beside :hover — keyboard users get the same cue. The hover colour is
     the deepest step, not $mx-coral: coral is 3.33:1 on cream. */
}
.article-body a:hover, .article-body a:focus {
  color: #A03A25;
  text-decoration-color: currentColor;
}
.article-body strong {
  color: #16263F;
  font-weight: 600;
}
.article-body em, .article-body i {
  font-style: normal;
  color: #BF4630;
  font-weight: 600;
}
.article-body ul, .article-body ol {
  padding-left: 1.4em;
  margin: 1em 0;
}
.article-body ul {
  list-style: disc;
}
.article-body ol {
  list-style: decimal;
}
.article-body li {
  margin-bottom: 0.5em;
}
.article-body li::marker {
  color: #BF4630;
}
.article-body hr {
  border: 0;
  border-top: 1px solid #E8DFCB;
  margin: 2.5em 0;
}
.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.article-body table {
  display: block;
  width: max-content;
  min-width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  border: 1px solid #E8DFCB;
  margin: 1.5em 0;
  font-size: 14.5px;
}
.article-body th {
  background: #F2EBDB;
  color: #16263F;
  font-family: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  border: 1px solid #E8DFCB;
}
.article-body td {
  padding: 10px 14px;
  border: 1px solid #E8DFCB;
  color: #3B4B65;
}
.article-body pre {
  background: #16263F;
  color: #FAF6EE;
  border: 0;
  border-radius: 8px;
  padding: 16px 18px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.6;
}
.article-body pre code {
  background: transparent;
  color: #FAF6EE;
  padding: 0;
  border: 0;
  font-size: inherit;
}
.article-body :not(pre) > code {
  background: #FFFFFF;
  color: #BF4630;
  border: 1px solid #D5CAAF;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.9em;
}
.article-body blockquote {
  background: #F2EBDB;
  border: 0;
  border-left: 3px solid #BF4630;
  border-radius: 0 8px 8px 0;
  margin: 1.5em 0;
  padding: 2px 18px;
  color: #3B4B65;
}

/* Vote / feedback block */
.article-votes {
  border-top: 1px solid #E8DFCB;
  padding-top: 28px;
}

.article-vote {
  background: #FFFFFF;
  border: 1px solid #D5CAAF;
  color: #3B4B65;
  border-radius: 8px;
  /* ⚠ article_page.hbs passes class='button article-vote article-vote-up', so the §4
     .button recipe applies to this element TOO — including its background on
     :hover/:focus/:active and its white :visited colour. Every state that group covers has
     to be re-asserted here or the Yes/No label goes invisible: the coral-deep fill from
     .button plus the coral-deep text from .article-vote is 1.00:1. */
  /* The voted class is `button-primary` (the helper's selected_class), NOT `vote-voted` —
     the old &-up.vote-voted rule matched nothing at all. */
}
.article-vote:visited {
  color: #3B4B65;
}
.article-vote:hover, .article-vote:focus, .article-vote:active {
  background: #FFFFFF;
  border-color: #E15D43;
  color: #BF4630;
  transform: none;
}
.article-vote.button-primary, .split-button button.article-vote:hover, .section-subscribe button.article-vote[data-selected=true], .article-subscribe button.article-vote[data-selected=true], .requests-table-toolbar .organization-subscribe button.article-vote[data-selected=true], .subscriptions-subscribe button.article-vote[data-selected=true] {
  background: #BF4630;
  border-color: #BF4630;
  color: #FFFFFF;
}
.article-vote.button-primary:visited, .split-button button.article-vote:visited:hover, .section-subscribe button.article-vote[data-selected=true]:visited, .article-subscribe button.article-vote[data-selected=true]:visited, .requests-table-toolbar .organization-subscribe button.article-vote[data-selected=true]:visited, .subscriptions-subscribe button.article-vote[data-selected=true]:visited {
  color: #FFFFFF;
}
.article-vote.button-primary:hover, .split-button button.article-vote:hover, .section-subscribe button.article-vote[data-selected=true]:hover, .article-subscribe button.article-vote[data-selected=true]:hover, .requests-table-toolbar .organization-subscribe button.article-vote[data-selected=true]:hover, .subscriptions-subscribe button.article-vote[data-selected=true]:hover, .article-vote.button-primary:focus, .section-subscribe button.article-vote[data-selected=true]:focus, .article-subscribe button.article-vote[data-selected=true]:focus, .requests-table-toolbar .organization-subscribe button.article-vote[data-selected=true]:focus, .subscriptions-subscribe button.article-vote[data-selected=true]:focus, .article-vote.button-primary:active, .section-subscribe button.article-vote[data-selected=true]:active, .article-subscribe button.article-vote[data-selected=true]:active, .requests-table-toolbar .organization-subscribe button.article-vote[data-selected=true]:active, .subscriptions-subscribe button.article-vote[data-selected=true]:active {
  background: #A03A25;
  border-color: #A03A25;
  color: #FFFFFF;
  transform: none;
}

.article-relatives,
.article-footer {
  border-top: 1px solid #E8DFCB;
}

/* ---- 11. Forms (Submit a request, sign-in) ---------------------------------- */
.form input[type=text],
.form input[type=email],
.form input[type=password],
.form input[type=search],
.form input[type=number],
.form textarea,
.form select,
.hbs-form input[type=text],
.hbs-form input[type=email],
.hbs-form input[type=password],
.hbs-form input[type=search],
.hbs-form input[type=number],
.hbs-form textarea,
.hbs-form select {
  background: #FFFFFF;
  /* Control borders use the 3:1 token, not the decorative hairline (1.63:1). */
  border: 1px solid #8E7E52;
  border-radius: 8px;
  color: #16263F;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  /* 16px, not 15px. iOS Safari auto-zooms a focused field under 16px and never zooms back
     out. Set at source rather than patched in a media query — the mobile patch was (0,1,1)
     and lost to this (0,2,1) rule, so it never actually applied. */
  font-size: 16px;
  padding: 12px 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form input[type=text]:focus,
.form input[type=email]:focus,
.form input[type=password]:focus,
.form input[type=search]:focus,
.form input[type=number]:focus,
.form textarea:focus,
.form select:focus,
.hbs-form input[type=text]:focus,
.hbs-form input[type=email]:focus,
.hbs-form input[type=password]:focus,
.hbs-form input[type=search]:focus,
.hbs-form input[type=number]:focus,
.hbs-form textarea:focus,
.hbs-form select:focus {
  /* (c) same upstream :where() focus rule as §5. No `outline: none` — this rule is
     (0,3,1) and would suppress the global :focus-visible ring for these fields. */
  border: 1px solid #E15D43 !important;
  box-shadow: 0 0 0 3px #FBDED5;
}
.form .form-field > label,
.form label,
.hbs-form .form-field > label,
.hbs-form label {
  color: #16263F;
  font-weight: 600;
  font-size: 14px;
}

/* The Description field is not a textarea: the new-request-form bundle mounts CKEditor, a
   contenteditable the 16px rule above never reaches, and injects `.ck .ck-content
   { font-size: 15px }` (0,2,0) after this stylesheet — so iOS zoomed in on the one field
   everybody types the most into (2026-09-11). (0,3,0) wins wherever the bundle's tag lands. */
.ck.ck-editor .ck-content {
  font-size: 16px;
}

.form-field .nesty-input {
  background: #FFFFFF;
  border: 1px solid #D5CAAF;
  border-radius: 8px;
  color: #16263F;
}

/* Notice at collection above the ticket form (new_request_page.hbs). Width tracks
   upstream's `.form { max-width: 650px }` so the notice and the fields share an edge —
   a note wider than the form it belongs to reads as page furniture and gets skipped. */
.mx-form-note {
  max-width: 650px;
  margin: 0 0 24px;
  padding: 14px 16px;
  background: #F2EBDB;
  border: 1px solid #E8DFCB;
  border-radius: 8px;
  color: #3B4B65;
  font-size: 14px;
  line-height: 1.6;
}
.mx-form-note a {
  color: #BF4630;
  text-decoration: underline;
}

/* ---- 12. Search results ------------------------------------------------------ */
.search-results-subheading,
.search-result-title a {
  font-family: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: #16263F;
}
.search-results-subheading:hover,
.search-result-title a:hover {
  color: #BF4630;
}

.search-result-description {
  color: #3B4B65;
}

.search-result-breadcrumbs,
.search-result-meta-count {
  color: #5C6478;
  font-size: 13px;
}

.search-result-votes {
  color: #5C6478;
}

.search-results-list > li {
  border-bottom: 1px solid #E8DFCB;
  padding: 20px 0;
}

/* ---- 13. Pagination, notifications, misc ------------------------------------ */
.pagination-current,
.pagination-page a {
  color: #3B4B65;
}

.pagination-current {
  background: #E15D43;
  color: #FFFFFF;
  border-radius: 6px;
}

.notification {
  border-radius: 8px;
  border: 1px solid #D5CAAF;
  background: #FFFFFF;
  color: #16263F;
}

.notification-error {
  border-color: #E15D43;
  background: #FBDED5;
  color: #16263F;
}

.notification-success {
  border-color: #6B8B7A;
  background: #D6E2D9;
  color: #16263F;
}

.dropdown-menu {
  background: #FFFFFF;
  border: 1px solid #D5CAAF;
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(22, 38, 63, 0.04), 0 24px 60px -28px rgba(22, 38, 63, 0.16);
}
.dropdown-menu a {
  color: #3B4B65;
}
.dropdown-menu a:hover {
  background: #F2EBDB;
  color: #BF4630;
  text-decoration: none;
}

.striped-list-item {
  border-bottom: 1px solid #E8DFCB;
}

.recent-activity-item {
  border-bottom: 1px solid #E8DFCB;
}

/* ---- 14. Footer -------------------------------------------------------------
   Full rebuild of the marketing .site-footer: paper panel, top hairline, 1200px
   4-column grid, brand blurb + social, three link columns, legal bottom row. */
.footer {
  background: #FFFFFF;
  border-top: 1px solid #E8DFCB;
  padding: 64px 0 32px;
  margin-top: 72px;
  flex-shrink: 0;
}

.mx-foot-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

.mx-foot-grid {
  display: grid;
  gap: 32px;
  margin-bottom: 36px;
}

/* Grid items default to min-width:auto, so a 1fr track refuses to shrink below its
   longest line and the grid overflows instead of wrapping. Russian labels are long
   enough to hit it. */
.mx-foot-brand,
.mx-foot-col {
  min-width: 0;
}

/* Legal strip, 2026-08-30 — was a fifth column. It owns the hairline that
   .mx-foot-bottom used to draw, so that rule no longer has one. */
.mx-foot-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 11px 22px;
  font-size: 13.5px;
  line-height: 1.6;
  padding-top: 26px;
  border-top: 1px solid #E8DFCB;
}
.mx-foot-legal a {
  color: #3B4B65;
  font-size: 13.5px;
  transition: color 0.15s;
}
.mx-foot-legal a:hover {
  color: #BF4630;
}

/* .mx-lang is shaped for the BRAND ROW: `margin-left: auto` pushes it off the nav and
   `margin-right: 12px` holds it clear of the hamburger. In the footer the row is already
   `justify-content: space-between`, so that right margin just inset the pill 12px from
   the container edge — the other two properties sit flush with the legal strip above.
   Reset both for the footer instance; the header keeps its own spacing.

   Padding likewise: the shared pill is 6px/14px here against 5px/11px on the other two,
   which made this row 2px taller. Colour is deliberately NOT aligned — this theme drops
   the 0.55 opacity because it composites to 3.58:1, below AA (see the note on
   .mx-lang__pill). That fix should travel to the other two, not be undone here. */
.mx-foot-bottom .mx-lang {
  margin-left: 0;
  margin-right: 0;
}

.mx-foot-hub {
  font-weight: 600;
}
.mx-foot-hub::after {
  content: " →";
}

.mx-foot-brand .logo svg {
  height: 32px;
}
.mx-foot-brand p {
  color: #5C6478;
  font-size: 14px;
  margin-top: 14px;
  max-width: 280px;
  line-height: 1.6;
}

.mx-foot-social {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  margin-left: -8px;
}
.mx-foot-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #3B4B65;
  transition: color 0.15s, background 0.15s, transform 0.15s;
}
.mx-foot-social a:hover {
  color: #BF4630;
  background: #FBDED5;
  transform: translateY(-2px);
  text-decoration: none;
}
.mx-foot-social svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
  display: block;
}

.mx-foot-col {
  /* Pinned, not inherited: this theme's base is 15.5px against marketing's 16px, which
     shortened every row by 0.8px and drifted the column rhythm away from the other two
     properties. Same reason the legal strip pins its own font-size above. */
}
.mx-foot-col h4 {
  font-family: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.6;
  color: #16263F;
  margin-bottom: 16px;
}
.mx-foot-col li {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 10px;
}
.mx-foot-col a {
  color: #3B4B65;
  font-size: 14px;
  transition: color 0.15s;
}
.mx-foot-col a:hover {
  color: #BF4630;
  text-decoration: none;
}

/* "Cookie settings" in the Legal column is a <button>, because it acts on this page
   rather than going anywhere — but it has to sit in a list of links without looking
   like a stray control. `.mx-foot-col a` above only matches anchors, so the button
   restates the same treatment from a full reset. */
.mx-foot-cc {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 13.5px;
  line-height: inherit;
  text-align: left;
  color: #3B4B65;
  cursor: pointer;
  transition: color 0.15s;
}
.mx-foot-cc:hover {
  color: #BF4630;
}

.mx-foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 22px;
  color: #5C6478;
  font-size: 13px;
  line-height: 1.6;
}

/* ---- 15. Responsive ----------------------------------------------------------
   ⚠ Copenhagen's breakpoint mixins are MOBILE-FIRST min-width queries:
     tablet  = min-width 768px
     desktop = min-width 1024px
     mobile  = max-width 768px   (the only max-width one)
   So the base rules below the section headings above must describe the SMALL screen,
   and each mixin widens from there. Writing `@include tablet` as if it meant "tablet
   and below" silently pins every desktop width to the tablet layout. */
.blocks-list,
.section-tree {
  grid-template-columns: 1fr;
}

/* Footer breakpoints are deliberately NOT on Copenhagen's mobile-first ladder.
   The other two properties switch at max-width 1000 and 600; the tablet/desktop mixins
   here switch at min-width 768 and 1024, which left this footer showing two columns
   between 1001 and 1023 where the others showed four, and one column between 601 and 767
   where the others showed two. Written as max-width queries to match them exactly. */
.mx-foot-grid {
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}

@media (max-width: 1000px) {
  .mx-foot-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .mx-foot-brand {
    grid-column: 1/-1;
  }
  .mx-foot-brand p {
    max-width: 460px;
  }
}
@media (max-width: 600px) {
  .mx-foot-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .mx-foot-brand p {
    max-width: none;
  }
  .mx-foot-legal {
    gap: 9px 18px;
  }
  .mx-foot-bottom {
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }
}
@media (min-width: 768px) {
  .blocks-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .section-tree {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .blocks-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  /* The gutter, the row gap and the 28px wordmark that used to live here have moved to
     the hand-written 600px query in section 3. They were the whole reason this property
     rendered a smaller logo, closer to the edge, than the other two: everything below
     768px got the phone treatment here while marketing and the portal only switched at
     600 — and the wordmark shrank to 28px against their 32px at every width below 768.
     The wordmark is now 32px everywhere, as .logo svg already declares. */
  /* The iOS 16px rule that used to live here has moved to the rest-state declarations in
     §5, §8 and §11. It was inert: `.form input` (0,1,1) lost to `.form input[type=text]`
     (0,2,1) and `.search input[type=search]` (0,2,1) lost to
     `.sub-nav .search-container input[type=search]` (0,3,1), so the only field it ever
     reached was the hero search. Fix sizes at source; do not patch them in a media query. */
  /* The 10px/14px "taller pills for thumbs" rule that lived here is retired
     (2026-09-01): it made this property's switcher visibly bigger than the other two.
     The base pill is now the shared 7px/12px, which still clears the 24px minimum
     target size (26.5px tall). */
  /* .hero is full-bleed, so it carries its own gutter and has to track .container:
     28px down to 600, 20px below that. Both steps live here, and the second one is
     nested rather than folded into the 600 query in section 3, because this shorthand
     comes later in the file and would win over a longhand set up there. */
  .hero {
    padding: 40px 28px 44px;
  }
  /* flex: none is the half that matters. §8's `flex: 1 1 240px` is a WIDTH in the desktop
     row, but in this column it is a HEIGHT: on every page with a sub-nav the container was
     240px tall around a 42px form, and .search-icon (absolute, top: 50%) hung ~100px below
     the field with a blank band before the title (2026-09-11, iPhone). Hugging the form puts
     the icon back on the field's centre line. */
}
@media (max-width: 768px) and (max-width: 600px) {
  .hero {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 768px) {
  .mx-hero-title {
    font-size: 26px;
  }
}
@media (max-width: 768px) {
  .article-title {
    font-size: 26px;
  }
}
@media (max-width: 768px) {
  h1 {
    font-size: 26px;
  }
}
@media (max-width: 768px) {
  .sub-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
}
@media (max-width: 768px) {
  .sub-nav .search-container {
    max-width: none;
    flex: none;
  }
}
/* ---- 16. Upstream override gaps -----------------------------------------------
   Every rule here exists to out-specify a specific upstream Copenhagen declaration that
   would otherwise win. They are grouped rather than filed under their components because
   the pattern is the point: a bare component class (0,1,0) loses to upstream's
   container-scoped or pseudo-class-qualified selectors. Each rule names its opponent.
   Found by a systematic sweep after three of these shipped as live bugs. */
/* upstream `.dropdown-menu [role=menuitem]` (0,1,1) + its translucent Zendesk-blue hover */
.dropdown-menu [role=menuitem],
.dropdown-menu [role=menuitemradio] {
  color: #3B4B65;
}

.dropdown-menu [role=menuitem]:hover,
.dropdown-menu [role=menuitem]:focus,
.dropdown-menu [role=menuitemradio]:hover,
.dropdown-menu [role=menuitemradio]:focus {
  background: #F2EBDB;
  color: #BF4630;
  text-decoration: none;
}

/* upstream `.article-list-item a` (0,1,1) sets #16263F, and the base `a:visited`
   (0,1,1) then repaints read articles coral-deep. Both need beating at (0,2,1)+. */
.article-list-item a.article-list-link {
  color: #3B4B65;
}
.article-list-item a.article-list-link:visited {
  color: #3B4B65;
}
.article-list-item a.article-list-link:hover, .article-list-item a.article-list-link:focus, .article-list-item a.article-list-link:active {
  color: #BF4630;
  text-decoration: none;
}

/* upstream `.search-results-sidebar .sidenav-item` (0,2,0) + a hardcoded #e9ebed hover */
.search-results-sidebar .sidenav-item {
  color: #3B4B65;
  border-radius: 6px;
  padding: 8px 12px;
}

.search-results-sidebar .sidenav-item:hover,
.search-results-sidebar .sidenav-item:focus,
.search-results-sidebar .sidenav-item.current {
  background: #F2EBDB;
  color: #A03A25;
}

/* upstream flips `.promoted-articles` to `flex-direction: row` at >=1024px and gives each
   row `width: 33%` + `align-self: flex-end`. Overriding only the direction leaves the
   width and alignment live, which is worse than the original bug. */
@media (min-width: 1024px) {
  .promoted-articles {
    flex-direction: column;
  }
  .promoted-articles-item {
    width: 100%;
    align-self: auto;
  }
}
/* upstream `.promoted-articles-item a` sets its own `border-bottom: 1px solid #ddd`, which
   sits under ours on the <li> — two hairlines in two colours. */
.promoted-articles-item a {
  border-bottom: 0;
}

.promoted-articles-item:last-child a {
  border-bottom: 0;
}

/* `.search-results-column` is the MAIN COLUMN of the search results page, not the
   instant-search dropdown — restyling it as a card wrapped the whole page in a panel.
   The instant-results container is left alone until its real hook is confirmed in the
   rendered DOM. */
[data-search-instant-results] {
  background: #FFFFFF;
  border: 1px solid #D5CAAF;
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(22, 38, 63, 0.04), 0 24px 60px -28px rgba(22, 38, 63, 0.16);
}

/* upstream `.hbs-form select, .search select` (0,1,1) paints the dropdown chevron through
   the `background` SHORTHAND while setting `appearance: none`. Our shorthand wiped the
   arrow and left an unmarked box. Longhand keeps upstream's image. */
.form select,
.hbs-form select {
  background-color: #FFFFFF;
  background-position: right 12px center;
  padding: 12px 34px 12px 14px;
}

/* Autofilled fields otherwise take each engine's own yellow/blue. Upstream ships this for
   the hero search only; the request form is where visitors actually autofill. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset;
  box-shadow: 0 0 0 1000px #FFFFFF inset;
  -webkit-text-fill-color: #16263F;
  caret-color: #16263F;
}

/* The sticky 72px brand row otherwise swallows in-page anchor targets and, per WCAG 2.2
   SC 2.4.11, keyboard focus as you tab down a long article. */
:target,
.article-body h2,
.article-body h3,
.article-body h4 {
  scroll-margin-top: 95px;
}

html {
  scroll-padding-top: 95px;
}

/* Standing brand rule: no italics anywhere. Upstream italicises category and section
   descriptions and blockquotes; the article-body rule in §10 only covers the latter. */
.blocks-item-description,
.page-header-description,
.section-tree-title + p,
.search-result-description em {
  font-style: normal;
}

/* ---- 17. Cookie consent (CookieConsent v3) ----------------------------------
   Ported from the marketing site's `#cc-main` block (app.css), so the banner reads as
   the same control on all three properties.

   Ordering is a non-issue and that is by design: the vendor stylesheet declares its
   defaults on `:root` (0,1,0) while these land on `#cc-main` (1,0,0), so they win
   whether Zendesk injects style.css before or after the asset <link> in
   document_head.hbs.

   Custom properties are NOT parsed by Sass, so every value has to be interpolated —
   a bare `$mx-paper` here would ship as the literal text "$mx-paper" and
   package_theme.py would (correctly) refuse to build.

   The primary button is coral-DEEP on all three properties (the marketing site moved to it
   on 2026-08-31): white on coral #E15D43 is 3.59:1 and fails AA for these small buttons;
   see the accessibility floor in README.md. */
#cc-main {
  --cc-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --cc-bg: #FFFFFF;
  --cc-primary-color: #16263F;
  --cc-secondary-color: #3B4B65;
  --cc-btn-primary-bg: #BF4630;
  --cc-btn-primary-color: #FFFFFF;
  --cc-btn-primary-border-color: #BF4630;
  --cc-btn-primary-hover-bg: #A03A25;
  --cc-btn-primary-hover-border-color: #A03A25;
  --cc-btn-secondary-bg: #F2EBDB;
  --cc-btn-secondary-color: #16263F;
  /* line-strong, not cream-2 (2026-09-12): a cream edge on a cream fill left "Save my
     choice", "Details" and the round × at 1.19:1 against the white modal. Same as www. */
  --cc-btn-secondary-border-color: #D5CAAF;
  --cc-btn-secondary-hover-bg: #E8DFCB;
  --cc-btn-secondary-hover-border-color: #D5CAAF;
  --cc-separator-border-color: #E8DFCB;
  --cc-link-color: #BF4630;
  --cc-cookie-category-block-bg: #FAF6EE;
  /* The vendor reads --cc-cookie-category-block-HOVER-BG, not -bg-hover: the misspelt name
     was never used, so toggle rows hovered vendor blue-grey and expanded with a vendor
     #dee4e9 border (2026-09-12). Same fix as www. */
  --cc-cookie-category-block-hover-bg: #F2EBDB;
  --cc-cookie-category-block-hover-border: #D5CAAF;
  --cc-cookie-category-expanded-block-hover-bg: #E8DFCB;
  --cc-cookie-category-block-border: #E8DFCB;
  --cc-toggle-on-bg: #6B8B7A;
  --cc-toggle-readonly-bg: #D5CAAF;
  /* Vendor :root DERIVES these from other --cc-* values, resolved where declared, so they
     kept the vendor grey/black whatever this block said: consent footer #eaeff2 over a
     #e4eaed rule, pure-black hover text on secondary buttons, a cool read-only check
     icon (2026-09-12). Same as www. */
  --cc-btn-secondary-hover-color: #16263F;
  --cc-toggle-readonly-knob-icon-color: #D5CAAF;
  --cc-footer-bg: #F2EBDB;
  --cc-footer-color: #3B4B65;
  --cc-footer-border-color: #E8DFCB;
  --cc-modal-border-radius: 16px;
  /* 12px, NOT the 999px pill this used to be — the same fix as the marketing site's
     resources/css/app.css, and it has to stay in step with it so the banner does not
     change shape between www and support. Vendor cookieconsent.css spends
     --cc-btn-border-radius on the preferences-modal CONTAINERS as well as the buttons
     (.pm__section, .pm__section--toggle, .pm__section-title and
     .pm__section--toggle .pm__section-desc-wrapper all read it), so a pill radius bowed
     the two untoggled text blocks — "Analytics and ad measurement (always on)" and
     "More information" — out into ovals, worst on a phone where they are tallest.
     The pill moves to the buttons alone, just below. */
  --cc-btn-border-radius: 12px;
}

/* The pill belongs to the buttons and nothing else. Element-qualified (`button.`) so
   each of these outweighs the vendor's own `#cc-main .pm__btn` on SPECIFICITY rather
   than on source order. The note above is only true of the custom properties: `:root`
   (0,1,0) loses to `#cc-main` (1,0,0) wherever Zendesk injects this sheet. A plain
   class rule gets no such help — `#cc-main .pm__btn` here and `#cc-main .pm__btn` in
   the vendor sheet tie, and the loser is whichever Zendesk emits first. The `button`
   qualifier settles it. All three are real <button> elements. */
#cc-main button.cm__btn:not(.cm__btn--close),
#cc-main button.pm__btn,
#cc-main button.pm__close-btn {
  border-radius: 999px;
}

/* :not(.cm__btn--close): that is the consent box's flush corner tab, rendered when
   consentModal.closeIconLabel is set on this 'box' layout — a pill there would float. */
/* An unlinked section between toggle rows sat 32px below the row above but 8px above the
   next, so "Analytics and ad measurement" read as glued to "Live chat". (1,3,0) beats the
   vendor's (1,2,0) whatever the sheet order. Same as www. */
#cc-main .pm__body > .pm__section-toggles + .pm__section {
  margin-top: 0.5em;
}