@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. */
/* ---- 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`. Once .mx-lang
   took `margin-left: auto` (to pin the right-hand cluster now that the centre nav can be
   hidden), 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. */
.header {
  height: 72px;
  gap: 28px;
}

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

/* 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;
  gap: 26px;
}
@media (min-width: 1024px) {
  .mx-nav {
    display: flex;
  }
}
.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. */
.nav-wrapper-desktop {
  align-items: center;
  gap: 10px;
  /* tablet (>=768), not desktop (>=1024). Upstream hides this wrapper AND shows the
     hamburger between 769 and 1023, which left ~500px of empty brand row with no CTA at
     all on iPad portrait and small laptops. Showing the CTA cluster from 768 up fills it
     and keeps every link reachable, because the hamburger stays visible until 1024 — the
     naive fix (hiding the hamburger at tablet) would strand the nav links, since .mx-nav
     is still gated at 1024. */
  /* ⚠ 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. */
  /* ⚠ 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--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 header clone, so all three brand rows carry an identical control. */
.mx-lang {
  margin-left: auto;
  margin-right: 12px;
  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;
}

/* Padding is 6px 14px, not the marketing partial's 5px 11px. The capsule is
   border-radius: 999px with overflow: hidden, so its corner curve has a radius of half
   the pill height. At 11px horizontal padding on a 22px-tall pill the curve is ~11px and
   clips the outer edge of the first and last labels ("RU" visibly cut). 14px clears the
   curve. The marketing site gets away with 11px because its brand row renders the pill
   at a smaller effective height. */
.mx-lang__pill {
  display: inline-block;
  padding: 6px 14px;
  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;
}

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

/* Instant-search results panel */
.search-results-column,
[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);
}

/* ---- 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 ------------------------------------------------------- */
.article-container {
  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;
}

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

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

.mx-foot-brand .logo svg {
  height: 30px;
}
.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 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;
  color: #16263F;
  margin-bottom: 16px;
}
.mx-foot-col li {
  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;
}

.mx-foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-top: 1px solid #E8DFCB;
  padding-top: 24px;
  color: #5C6478;
  font-size: 13px;
}

/* ---- 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,
.mx-foot-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .blocks-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .section-tree {
    grid-template-columns: repeat(2, 1fr);
  }
  .mx-foot-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .mx-foot-brand {
    grid-column: 1/-1;
  }
}
@media (min-width: 1024px) {
  .blocks-list {
    grid-template-columns: repeat(3, 1fr);
  }
  .mx-foot-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
  }
  .mx-foot-brand {
    grid-column: auto;
  }
}
@media (max-width: 768px) {
  .container,
  .header {
    padding-left: 20px;
    padding-right: 20px;
  }
  /* At 375px the brand row must fit logo + language pills + hamburger inside a 335px
     content box. At the desktop sizes that is 149 + 93 + 71 + 2x28 gap = 369px, i.e. 34px
     of overflow pushing the hamburger off the right edge. Trimming the gap and the
     wordmark brings it to ~318px with room to spare. */
  .header {
    gap: 12px;
  }
  .logo svg {
    height: 28px;
  }
  /* 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. */
  /* Taller pills for thumbs. 46x25 clears WCAG 2.2 AA (24x24) but is mean on a phone;
     height only, so the row stays within the width budget above. */
  .mx-lang__pill {
    padding: 10px 14px;
  }
  .hero {
    padding: 40px 20px 44px;
  }
  .mx-hero-title {
    font-size: 26px;
  }
  .article-title {
    font-size: 26px;
  }
  h1 {
    font-size: 26px;
  }
  .sub-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .sub-nav .search-container {
    max-width: none;
  }
  .mx-foot-grid {
    gap: 28px;
  }
  .mx-foot-inner {
    padding: 0 20px;
  }
}
/* ---- 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: 88px;
}

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

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