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

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

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

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

h4 {
  font-size: 16px;
}

a {
  color: #22D3EE;
  text-decoration: none;
}
a:visited {
  color: #22D3EE;
}
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 #050505;
}
.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 #050505;
}
.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 #050505;
}

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

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

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

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

.visibility-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

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

.button-large, .hbs-form input[type=submit] {
  cursor: pointer;
  background-color: #050505;
  border: 0;
  border-radius: 4px;
  color: #F2F4F4;
  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: #F2F4F4;
}
.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: #000;
}
.button-large[disabled], .hbs-form input[type=submit][disabled] {
  background-color: #ddd;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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: #22D3EE;
  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: #22D3EE;
  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: #F2F4F4;
  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: #F2F4F4;
}
.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: #22D3EE;
  border: 1px solid #22D3EE;
  border-radius: 4px;
  color: #F2F4F4;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 6px;
  line-height: 1.4286;
  padding: 6px 14px;
}
.ask-ai:visited {
  color: #F2F4F4;
}
.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: #F2F4F4;
}
.nav-wrapper-desktop .ask-ai:hover, .nav-wrapper-desktop .ask-ai:focus, .nav-wrapper-desktop .ask-ai:active {
  background-color: #5FE3F5;
  border-color: #5FE3F5;
  color: #F2F4F4;
  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: #F2F4F4;
}
.nav-wrapper-mobile .ask-ai:hover, .nav-wrapper-mobile .ask-ai:focus, .nav-wrapper-mobile .ask-ai:active {
  background-color: #5FE3F5;
  border-color: #5FE3F5;
  color: #F2F4F4;
  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: #22D3EE;
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: #22D3EE;
  background-color: transparent;
}
.user-info > button::after {
  color: #22D3EE;
  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: #050505;
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: #F2F4F4;
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 17px;
}

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

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

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

/***** 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: #050505;
}
.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: #050505;
  color: #fff;
}
.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #050505;
}
.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: #050505;
}
[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: #050505;
}

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

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

/***** Hero component *****/
.hero {
  background-image: url(/hc/theming_assets/01M00MZ04KDS5XVFM8TRTK5B5K);
  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 #050505;
  border-radius: 4px;
  box-sizing: border-box;
  color: #050505;
  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: #050505;
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: #F2F4F4;
  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: #F2F4F4;
}
.blocks-item-link {
  color: #050505;
  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 #050505;
  text-decoration: none;
}
.blocks-item-title {
  margin-bottom: 0;
  font-size: 16px;
}
.blocks-item-description {
  margin: 0;
}
.blocks-item-description:not(:empty) {
  margin-top: 10px;
}

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

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

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

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

.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: #F2F4F4;
  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: #22D3EE;
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: #22D3EE;
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: #5FE3F5;
}
.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: #050505;
  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: #F2F4F4;
}
.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: #F2F4F4;
}

.icon-star {
  color: #050505;
  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: #F2F4F4;
  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: #22D3EE;
  text-decoration: underline;
}
.article-body a:visited {
  color: #22D3EE;
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: #5FE3F5;
}
.article-body img {
  height: auto;
  max-width: 100%;
}
.article-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figure.image {
  display: table;
  margin: 0 auto;
}
.article-body figure.image > img {
  display: block;
  width: 100%;
}
.article-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #000;
}
.article-body ul,
.article-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .article-body ul,
[dir=rtl] .article-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.article-body ul > ul,
.article-body ol > ol,
.article-body ol > ul,
.article-body ul > ol,
.article-body li > ul,
.article-body li > ol {
  margin: 0;
}
.article-body ul {
  list-style-type: disc;
}
.article-body :not(pre) > code {
  background: #000;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: #000;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.article-body blockquote {
  border-left: 1px solid #ddd;
  color: #fff;
  font-style: italic;
  padding: 0 15px;
}
.article-body > p:last-child {
  margin-bottom: 0;
}
.article-content {
  line-height: 1.6;
  margin: 40px 0;
  word-wrap: break-word;
}
.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.article-comment-count {
  color: #fff;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: #050505;
  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: #22D3EE;
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: #22D3EE;
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: #5FE3F5;
}
.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: #F2F4F4;
  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: #F2F4F4;
  left: 0;
  position: absolute;
  top: 5px;
}
[dir=rtl] .attachments .attachment-item {
  padding-left: 0;
  padding-right: 20px;
}
[dir=rtl] .attachments .attachment-item .attachment-icon {
  left: auto;
  right: 0;
}

.upload-dropzone span {
  color: #fff;
}

/***** Social share links *****/
.share {
  padding: 0;
  white-space: nowrap;
}

.share li, .share a {
  display: inline-block;
}

.share li {
  height: 25px;
  width: 25px;
}

.share a {
  color: #fff;
}
.share a:hover {
  text-decoration: none;
  color: #050505;
}
.share a svg {
  height: 18px;
  width: 18px;
  display: block;
}

/***** Comments *****/
/* Styles comments inside articles, posts and requests */
.comment {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}
.comment-heading, .recent-articles-title,
.related-articles-title {
  margin-bottom: 5px;
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
}
.comment-overview {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 20px 0;
}
.comment-overview p {
  margin-top: 0;
}
.comment-callout {
  color: #fff;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}
.comment-callout a {
  color: #22D3EE;
  text-decoration: underline;
}
.comment-callout a:visited {
  color: #22D3EE;
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: #5FE3F5;
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: #fff;
  font-size: 13px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid #050505;
  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: #050505;
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  color: #22D3EE;
  text-decoration: underline;
}
.comment-body a:visited {
  color: #22D3EE;
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: #5FE3F5;
}
.comment-body img {
  height: auto;
  max-width: 100%;
}
.comment-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figure.image {
  display: table;
  margin: 0 auto;
}
.comment-body figure.image > img {
  display: block;
  width: 100%;
}
.comment-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #000;
}
.comment-body ul,
.comment-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .comment-body ul,
[dir=rtl] .comment-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.comment-body ul > ul,
.comment-body ol > ol,
.comment-body ol > ul,
.comment-body ul > ol,
.comment-body li > ul,
.comment-body li > ol {
  margin: 0;
}
.comment-body ul {
  list-style-type: disc;
}
.comment-body :not(pre) > code {
  background: #000;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.comment-body pre {
  background: #000;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.comment-body blockquote {
  border-left: 1px solid #ddd;
  color: #fff;
  font-style: italic;
  padding: 0 15px;
}
.comment-mark-as-solved {
  display: inline-block;
}

/***** Vote *****/
/* Used in article comments, post comments and post */
.vote {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.vote a:active, .vote a:hover, .vote a:focus {
  text-decoration: none;
}

.vote-sum {
  color: #fff;
  display: block;
  margin: 3px 0;
}
[dir=rtl] .vote-sum {
  direction: ltr;
  unicode-bidi: bidi-override;
}

.vote-up svg {
  transform: scale(1, -1);
}

.vote-up:hover,
.vote-down:hover {
  color: #050505;
}

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

.vote-voted {
  color: #050505;
}

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

/***** Actions *****/
/* Styles admin and en user actions(edit, delete, change status) in comments and posts */
.actions {
  text-align: center;
  flex-shrink: 0; /*Avoid collapsing elements in Safari*/
}
.actions button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/***** Community *****/
.community-hero {
  background-image: url(/hc/theming_assets/01M00MZ0ETNM549V27FEJA0NFF);
  margin-bottom: 10px;
}
.community-footer {
  padding-top: 50px;
  text-align: center;
}
.community-footer-title {
  font-size: 16px;
  margin-bottom: 20px;
}
.community-featured-posts .title {
  font-size: 18px;
  font-weight: 600;
}
.community-featured-posts, .community-activity {
  padding-top: 40px;
  width: 100%;
}
.community-header {
  margin-bottom: 30px;
}
.community-header .title {
  margin-bottom: 0;
  font-size: 16px;
}

.post-to-community {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .post-to-community {
    margin: 0;
  }
}

/* Community topics grid */
.topics {
  max-width: none;
  width: 100%;
}
.topics-item .meta-group {
  justify-content: center;
  margin-top: 20px;
}

/* Community topic page */
.topic-header {
  border-bottom: 1px solid #ddd;
  font-size: 13px;
}
@media (min-width: 768px) {
  .topic-header {
    padding-bottom: 10px;
  }
}
.topic-header .dropdown {
  display: block;
  border-top: 1px solid #ddd;
  padding: 10px 0;
}
@media (min-width: 768px) {
  .topic-header .dropdown {
    border-top: 0;
    display: inline-block;
    margin-right: 20px;
    padding: 0;
  }
}

.no-posts-with-filter {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Topic, post and user follow button */
.community-follow {
  margin-bottom: 10px;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow {
    margin-bottom: 0;
    width: auto;
  }
}
.community-follow button {
  line-height: 30px;
  padding: 0 10px 0 15px;
  position: relative;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow button {
    width: auto;
  }
}
.community-follow button:hover {
  background-color: #050505;
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: #F2F4F4;
  color: #F2F4F4;
}
.community-follow button[data-selected=true] {
  background-color: #050505;
  color: #F2F4F4;
}
.community-follow button[data-selected=true]::after {
  border-left: 1px solid #F2F4F4;
  color: #F2F4F4;
}
.community-follow button[data-selected=true]:hover {
  background-color: #000;
  border-color: #000;
}
.community-follow button::after {
  border-left: 1px solid #050505;
  content: attr(data-follower-count);
  color: #050505;
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}
@media (min-width: 768px) {
  .community-follow button::after {
    position: static;
  }
}
[dir=rtl] .community-follow button::after {
  border-left: 0;
  border-right: 1px solid #050505;
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
}

/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  padding: 0;
}
.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}
.striped-list-info {
  flex: 2;
}
.striped-list-title {
  color: #22D3EE;
  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: #22D3EE;
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #fff;
  font-size: 13px;
  justify-content: flex-start;
  text-transform: capitalize;
}
@media (min-width: 768px) {
  .striped-list-count {
    display: flex;
    flex: 1;
    justify-content: space-around;
  }
}
.striped-list-count-item::after {
  content: "·";
  display: inline-block;
  padding: 0 5px;
}
@media (min-width: 768px) {
  .striped-list-count-item::after {
    display: none;
  }
}
.striped-list-count-item:last-child::after {
  display: none;
}
.striped-list-number {
  text-align: center;
}
@media (min-width: 768px) {
  .striped-list-number {
    color: #F2F4F4;
    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: #050505;
}
.status-label-official {
  border-radius: 0;
  margin-right: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .status-label-official {
    border-radius: 0 0 4px 4px;
    right: 30px;
    width: auto;
  }
}
[dir=rtl] .status-label-official {
  left: 30px;
  right: auto;
}
.status-label-not-planned, .status-label-closed {
  background-color: #e9ebed;
  color: #fff;
}
.status-label-pending, .status-label-pending-moderation {
  background-color: #1f73b7;
  text-align: center;
}
.status-label-open {
  background-color: #c72a1c;
}
.status-label-solved {
  background-color: #68737d;
}
.status-label-new {
  background-color: #ffb648;
  color: #703b15;
}
.status-label-hold {
  background-color: #000;
}
.status-label-request {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .status-label-request {
    max-width: 150px;
  }
}

/***** Post *****/
/*
* The post grid is defined this way:
* Content | Sidebar
* 70%     | 30%
*/
.post {
  flex: 1;
  margin-bottom: 10px;
}
@media (min-width: 1024px) {
  .post {
    flex: 1 0 70%;
    max-width: 70%;
  }
}
.post-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .post-container {
    flex-direction: row;
  }
}
.post-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .post-header {
    align-items: baseline;
    flex-direction: row;
  }
}
.post-header .status-label {
  vertical-align: super;
}
.post-title {
  margin-bottom: 20px;
  width: 100%;
}
@media (min-width: 768px) {
  .post-title {
    margin-bottom: 0;
    padding-right: 10px;
  }
}
.post-title h1 {
  display: inline;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .post-title h1 {
    margin-right: 5px;
  }
}
.post-author {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}
.post-avatar {
  margin-bottom: 30px;
}
.post-content {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  word-break: break-word;
}
.post-info-container {
  display: flex;
  margin-bottom: 40px;
}
.post-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .post-info {
  padding-right: 0;
  padding-left: 20px;
}
.post-meta {
  display: inline-block;
  flex: 1;
  margin-left: 10px;
  vertical-align: middle;
}
[dir=rtl] .post-meta {
  margin-left: 0;
  margin-right: 10px;
}
.post-body {
  display: flow-root;
}
.post-body a {
  color: #22D3EE;
  text-decoration: underline;
}
.post-body a:visited {
  color: #22D3EE;
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: #5FE3F5;
}
.post-body img {
  height: auto;
  max-width: 100%;
}
.post-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.post-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.post-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.post-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.post-body figure.image {
  display: table;
  margin: 0 auto;
}
.post-body figure.image > img {
  display: block;
  width: 100%;
}
.post-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.post-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.post-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.post-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.post-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #000;
}
.post-body ul,
.post-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .post-body ul,
[dir=rtl] .post-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.post-body ul > ul,
.post-body ol > ol,
.post-body ol > ul,
.post-body ul > ol,
.post-body li > ul,
.post-body li > ol {
  margin: 0;
}
.post-body ul {
  list-style-type: disc;
}
.post-body :not(pre) > code {
  background: #000;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.post-body pre {
  background: #000;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.post-body blockquote {
  border-left: 1px solid #ddd;
  color: #fff;
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: #fff;
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: #050505;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 5px;
  vertical-align: middle;
}
.post-sidebar {
  border-top: 1px solid #ddd;
  flex: 1;
  padding: 30px 0;
  text-align: center;
}
@media (min-width: 1024px) {
  .post-sidebar {
    border: 0;
    flex: 1 0 30%;
    padding: 0 0 0 50px;
    text-align: initial;
  }
  [dir=rtl] .post-sidebar {
    padding: 0 50px 0 0;
  }
}
.post-sidebar-title {
  font-size: 18px;
  font-weight: 600;
}
.post-comments {
  margin-bottom: 20px;
}
@media (min-width: 1024px) {
  .post-comments {
    margin-bottom: 0;
  }
}

/***** Community Badges *****/
/* Styles labels used next to the authors of article comments, community posts, and community comments */
.community-badge-title {
  background-color: #04444d;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 0px 8px;
  vertical-align: top;
  white-space: nowrap;
  display: inline-block;
  line-height: 18px;
  vertical-align: middle;
}

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

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

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

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

.community-badge {
  margin: 2px;
}

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

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

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

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

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

.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 #050505;
}
.collapsible-sidebar-body {
  display: none;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-body {
    display: block;
  }
}
.collapsible-sidebar[aria-expanded=true] {
  max-height: none;
}
.collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-body {
  display: block;
}

/***** My activities *****/
.my-activities-nav {
  background-color: #000;
  margin-bottom: 20px;
}
.my-activities-sub-nav {
  margin-bottom: 30px;
}
.my-activities-table .striped-list-title { /* My activities tables */
  display: block;
  margin-bottom: 10px;
  max-width: 350px;
  white-space: normal;
}
@media (min-width: 1024px) {
  .my-activities-table .striped-list-title {
    margin-bottom: 0;
    max-width: 500px;
    min-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.my-activities-table thead {
  display: none;
}
@media (min-width: 768px) {
  .my-activities-table thead {
    display: table-header-group;
  }
}
.my-activities-table th:first-child,
.my-activities-table td:first-child {
  padding-left: 0;
}
@media (min-width: 1024px) {
  .my-activities-table th:first-child,
  .my-activities-table td:first-child {
    width: 500px;
  }
}
.my-activities-table th:last-child,
.my-activities-table td:last-child {
  padding-right: 0;
}
.my-activities-table td:not(:first-child) {
  display: none;
}
@media (min-width: 768px) {
  .my-activities-table td:not(:first-child) {
    display: table-cell;
  }
}

/* Requests table */
.requests-search {
  width: 100%;
}
.requests-table-toolbar {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .requests-table-toolbar {
    flex-direction: row;
  }
}
.requests-table-toolbar .search {
  flex: 1;
  width: 100%;
}
.requests-table-toolbar .request-table-filter {
  width: 100%;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-table-filter {
    width: auto;
  }
}
.requests-table-toolbar .request-filter {
  display: block;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-filter {
    margin: 0 0 0 30px;
  }
  [dir=rtl] .requests-table-toolbar .request-filter {
    margin: 0 30px 0 0;
  }
}
.requests-table-toolbar .request-filter-label {
  font-size: 13px;
  margin-top: 30px;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-filter-label {
    margin-top: 0;
  }
}
.requests-table-toolbar select {
  max-height: 40px;
  margin-bottom: 30px;
  width: 100%;
}
@media (min-width: 768px) {
  .requests-table-toolbar select {
    margin-bottom: 0;
    max-width: 300px;
    width: auto;
  }
}
@media (min-width: 768px) {
  .requests-table-toolbar .organization-subscribe {
    margin-left: 10px;
  }
  [dir=rtl] .requests-table-toolbar .organization-subscribe {
    margin: 0 10px 0 0;
  }
}
.requests-table-toolbar .organization-subscribe button {
  line-height: 40px;
  max-height: 40px;
  padding: 0 20px;
}
.requests-table-toolbar + .requests-search-info {
  margin-top: 15px;
}
.requests-table-toolbar + .requests-search-info.meta-data::after {
  content: "";
  margin: 0;
}
.requests-table-toolbar + .requests-search-info + .requests {
  margin-top: 20px;
}
.requests-table-toolbar + .requests {
  margin-top: 40px;
}
.requests .requests-table-meta {
  display: block;
}
@media (min-width: 768px) {
  .requests .requests-table-meta {
    display: none;
  }
}
.requests .requests-table thead {
  display: none;
}
@media (min-width: 768px) {
  .requests .requests-table thead {
    display: table-header-group;
  }
}
.requests .requests-table-info {
  display: block;
}
@media (min-width: 768px) {
  .requests .requests-table-info {
    display: table-cell;
    vertical-align: middle;
    width: auto;
  }
}
.requests .requests-table .requests-link {
  position: relative;
}
.requests .requests-table .requests-sort-symbol {
  position: absolute;
  left: calc(100% + 3px);
  bottom: 0;
  font-size: 10px;
}

/* Following table */
@media (min-width: 768px) {
  .subscriptions-subscribe button {
    width: auto;
  }
}
.subscriptions-table td:last-child {
  display: block;
}
@media (min-width: 768px) {
  .subscriptions-table td:last-child {
    display: table-cell;
  }
}
.subscriptions-table td:first-child {
  display: flex;
  align-items: center;
}
.subscriptions-table .user-avatar {
  margin-right: 10px;
}
.subscriptions .striped-list-title {
  display: inline-block;
  vertical-align: middle;
}

/* Contributions table */
.contributions-table td:last-child {
  color: #fff;
  font-size: 13px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: #fff;
}

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

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

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

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

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

.meta-group * {
  display: inline;
}

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

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

.profile-header .container {
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .profile-header .container {
    flex-wrap: nowrap;
  }
}

.profile-header .profile-info {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}

.profile-avatar {
  position: relative;
  line-height: 0;
  align-self: center;
  margin-right: 10px;
}
[dir=rtl] .profile-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.profile-avatar .user-avatar {
  width: 80px;
  height: 80px;
}

.profile-avatar .icon-agent {
  bottom: 0;
  right: 0;
}

.profile-header .basic-info {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}
.profile-header .basic-info .name {
  margin: 0;
  line-height: 25px;
  vertical-align: middle;
  display: inline;
}

.profile-header .options {
  display: flex;
  flex-basis: 100%;
  margin-top: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .profile-header .options {
    flex-wrap: nowrap;
    flex-basis: auto;
    margin-top: 0;
    margin-left: 10px;
  }
  [dir=rtl] .profile-header .options {
    margin-left: 0;
    margin-right: 10px;
  }
  .profile-header .options > :not(:last-child) {
    margin-bottom: 0;
    margin-right: 10px;
  }
  [dir=rtl] .profile-header .options > :not(:last-child) {
    margin-left: 10px;
    margin-right: 0;
  }
}

.user-profile-actions {
  width: 100%;
  margin-bottom: 15px;
}

.profile-header .description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  margin: 15px 0;
  flex-basis: 100%;
}

.profile-stats {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.profile-stats .stat {
  display: flex;
  margin-bottom: 10px;
}

.profile-stats .stat-label {
  color: #fff;
  flex: 0 0 100px;
  margin-right: 10px;
}
[dir=rtl] .profile-stats .stat-label {
  margin-left: 10px;
  margin-right: 0;
}

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

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

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

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

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

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

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

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

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

.profile-private-badge {
  flex-basis: 100%;
  border: solid 1px #050505;
  border-radius: 4px;
  color: #050505;
  padding: 5px 20px;
  font-size: 12px;
  text-align: center;
}
.profile-private-badge .profile-private-icon {
  margin-left: 5px;
  line-height: 15px;
}
@media (min-width: 768px) {
  .profile-private-badge {
    flex-basis: auto;
  }
}

.profile-nav {
  background-color: #000;
  margin-bottom: 37px;
}

.profile-section {
  width: 100%;
}
@media (min-width: 1024px) {
  .profile-section {
    width: calc(100% - 330px);
  }
}

.profile-section-header {
  display: flex;
  flex-wrap: wrap;
}

.profile-section-title {
  flex-basis: 100%;
  margin-bottom: 0;
}

.profile-section-description {
  flex-basis: 100%;
  padding: 10px 0;
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .profile-section-description {
    flex: 1 0 50%;
    padding-bottom: 0;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.profile-activity-contribution {
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background-color: #000;
}
@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: #050505;
  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: #F2F4F4;
}
.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):not(.see-all-filters-item) {
  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: #22D3EE;
}
.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: #22D3EE;
}
.search-results .no-results .action-prompt a:visited {
  color: #22D3EE;
}

.search-result-title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-result-title {
  font-size: 16px;
  margin-bottom: 0;
}
.search-result-votes, .search-result-meta-count {
  color: #fff;
  font-size: 13px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: #050505;
  vertical-align: middle;
  width: 13px;
  height: 13px;
}
[dir=ltr] .search-result-votes, [dir=ltr] .search-result-meta-count {
  margin-left: 20px;
}
[dir=rtl] .search-result-votes, [dir=rtl] .search-result-meta-count {
  margin-right: 20px;
}
.search-result-meta-container {
  color: #666;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .search-result-meta-container {
    flex-direction: row;
    align-items: center;
  }
}
@media (min-width: 1024px) {
  .search-result-meta-container nav {
    flex: 1;
  }
}
@media (min-width: 1024px) {
  [dir=ltr] .search-result-meta-container .meta-data {
    margin-left: 20px;
  }
}
@media (min-width: 1024px) {
  [dir=rtl] .search-result-meta-container .meta-data {
    margin-right: 20px;
  }
}
.search-result-meta-container .meta-data::after {
  content: none;
}
.search-result-breadcrumbs {
  margin: 0;
}
.search-result-description {
  margin-top: 10px;
  margin-bottom: 0;
  word-break: break-word;
}

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

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

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

.notification a {
  color: #158ec2;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.is-service-catalog-preview #navbar-container,
.is-service-catalog-preview .navbar-container,
.is-service-catalog-preview .assembly-bar,
.is-service-catalog-preview [data-garden-id="chrome.subnav"] {
  display: none !important;
}
/* ==========================================================================
   OBSERVIS SUPPORT — v15
   One consolidated override layer on top of stock Copenhagen.
   Replaces the v10–v14 accretion. Dark-committed, no light-mode fork.

   Design system
   -------------
   Palette is derived from the three real Observis surfaces:
     signal cyan   #22D3EE  — from the marketing CTA. Means: you can act on this.
     uplink green  #22C55E  — from the app's connection indicators. Means: healthy.
     fault coral   #DC4F34  — from the logo mark. Means: something is wrong.
   Never mix these roles. Cyan is the only interactive colour.

   Type: Space Grotesk (display) / Inter (body) / JetBrains Mono (instrument
   readouts — IDs, counts, breadcrumbs, status). Mono is the product's own
   vernacular: channel names and device IDs are mono in the app.

   Signature: the connection line. Every navigable row is a node on a pipeline —
   a port dot on the left, a dashed trace that completes on hover. It mirrors
   Pipeline Manager, and it is the only place this theme raises its voice.
   ========================================================================== */

:root {
  /* Surfaces */
  --obs-void:      #050505;
  --obs-panel:     #0B0D0E;
  --obs-panel-hi:  #101314;
  --obs-line:      #1B1F21;
  --obs-line-hi:   #2C3234;

  /* Ink */
  --obs-text:      #F2F4F4;
  --obs-text-2:    #A8B0B2;
  --obs-text-3:    #6E7678;

  /* Semantic accents — one job each */
  --obs-signal:    #22D3EE;
  --obs-signal-dim:rgba(34, 211, 238, 0.14);
  --obs-uplink:    #22C55E;
  --obs-fault:     #DC4F34;

  /* Type */
  --obs-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --obs-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --obs-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Metrics */
  --obs-page-width: 1120px;
  --obs-radius: 6px;

  /* Legacy alias — older rules in this file referenced --obs-accent */
  --obs-accent: var(--obs-signal);
  --obs-bg: var(--obs-void);
  --obs-surface: var(--obs-panel);
  --obs-muted: var(--obs-text-2);
  --obs-border: var(--obs-line);
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

html, body {
  background: var(--obs-void);
  color: var(--obs-text);
}

body {
  font-family: var(--obs-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  font-family: var(--obs-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--obs-text);
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--obs-signal); }

::selection { background: var(--obs-signal); color: #04211F; }

.container { max-width: var(--obs-page-width); }
.container-divider { display: none; }

/* Focus: one visible, consistent ring everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--obs-signal);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   2. The connection line — this theme's signature
   Applied to every navigable list row. Port dot, then a dashed trace that
   completes toward the arrow on hover.
   -------------------------------------------------------------------------- */

.obs-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 0 4px 0 26px;
  color: var(--obs-text-2);
  text-decoration: none;
  transition: color 0.16s ease;
}

/* the port */
.obs-node::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border: 1px solid var(--obs-line-hi);
  border-radius: 50%;
  background: var(--obs-void);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

/* the trace */
.obs-node::after {
  content: "→";
  margin-left: auto;
  padding-left: 20px;
  color: var(--obs-text-3);
  font-size: 14px;
  transform: translateX(-4px);
  opacity: 0.45;
  transition: transform 0.18s ease, opacity 0.18s ease, color 0.18s ease;
}

.obs-node:hover,
.obs-node:focus-visible {
  color: var(--obs-text);
}

.obs-node:hover::before,
.obs-node:focus-visible::before {
  border-color: var(--obs-signal);
  background: var(--obs-signal);
  box-shadow: 0 0 0 4px var(--obs-signal-dim);
}

.obs-node:hover::after,
.obs-node:focus-visible::after {
  color: var(--obs-signal);
  transform: translateX(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .obs-node,
  .obs-node::before,
  .obs-node::after { transition: none; }
}

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */

.observis-header {
  background: var(--obs-void);
  border-bottom: 1px solid var(--obs-line);
  color: var(--obs-text);
  height: auto;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.observis-header-inner {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--obs-page-width);
  min-height: 64px;
  width: 100%;
}

.observis-logo a { align-items: center; color: var(--obs-text); display: flex; text-decoration: none; }
.observis-logo img { display: block; height: 22px; width: auto; }

.header-divider { background: var(--obs-line-hi); height: 22px; margin: 0 16px; width: 1px; }

.support-label {
  color: var(--obs-text-2);
  font-family: var(--obs-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.observis-logo a:hover .support-label { color: var(--obs-signal); }

.nav-wrapper-desktop { align-items: center; display: flex; gap: 8px; }

.user-nav-list {
  align-items: center;
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.user-nav-list a {
  border-radius: var(--obs-radius);
  color: var(--obs-text-2);
  display: block;
  font-size: 13.5px;
  padding: 7px 12px;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.user-nav-list a:hover { background: var(--obs-panel-hi); color: var(--obs-text); }

.user-nav-list .header-knowledge-link { color: var(--obs-text); }

/* Primary action in the header reads as the one cyan thing. */
.user-nav-list .submit-a-request,
.user-nav-list .observis-request-link {
  background: var(--obs-signal);
  color: #04211F !important;
  font-weight: 600;
  margin-left: 8px;
}
.user-nav-list .submit-a-request:hover,
.user-nav-list .observis-request-link:hover {
  background: #5FE3F5;
  color: #04211F !important;
}

.user-info .dropdown-toggle { color: var(--obs-text-2); }
.user-info .dropdown-toggle:hover { color: var(--obs-text); }
.nav-wrapper-mobile { display: none; }

.dropdown-menu {
  background: var(--obs-panel);
  border: 1px solid var(--obs-line-hi);
  border-radius: var(--obs-radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  padding: 5px;
}
.dropdown-menu a,
.dropdown-menu [role="menuitem"] {
  border-radius: 4px;
  color: var(--obs-text-2);
  font-size: 13.5px;
  padding: 8px 10px;
}
.dropdown-menu a:hover,
.dropdown-menu [role="menuitem"]:hover { background: var(--obs-panel-hi); color: var(--obs-text); }
.dropdown-menu .separator { background: var(--obs-line); height: 1px; margin: 5px 0; }

/* --------------------------------------------------------------------------
   4. Hero — ambient node field, kept deliberately quiet
   -------------------------------------------------------------------------- */

.observis-hero {
  background: var(--obs-void);
  border-bottom: 1px solid var(--obs-line);
  height: auto !important;
  margin: 0 !important;
  min-height: 0 !important;
  overflow: hidden;
  padding: 72px 24px 64px !important;
  position: relative;
}

/* Sensor network, faint. Fades out toward the copy so text stays crisp. */
.observis-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='320' viewBox='0 0 560 320'%3E%3Cg stroke='%2322D3EE' stroke-width='1' fill='none' stroke-dasharray='3 5' opacity='0.5'%3E%3Cpath d='M60 250 L170 120 L300 190 L420 70 L520 150'/%3E%3Cpath d='M170 120 L210 40 L420 70'/%3E%3Cpath d='M300 190 L260 290 L440 270 L520 150'/%3E%3C/g%3E%3Cg fill='%2322D3EE'%3E%3Ccircle cx='60' cy='250' r='2.5'/%3E%3Ccircle cx='170' cy='120' r='2.5'/%3E%3Ccircle cx='300' cy='190' r='2.5'/%3E%3Ccircle cx='420' cy='70' r='2.5'/%3E%3Ccircle cx='520' cy='150' r='2.5'/%3E%3Ccircle cx='210' cy='40' r='2.5'/%3E%3Ccircle cx='260' cy='290' r='2.5'/%3E%3Ccircle cx='440' cy='270' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  background-position: right -40px center;
  background-repeat: no-repeat;
  background-size: 700px auto;
  opacity: 0.28;
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 78%);
  mask-image: linear-gradient(100deg, transparent 30%, #000 78%);
  pointer-events: none;
}

.observis-hero-inner {
  align-items: flex-start !important;
  display: block !important;
  height: auto !important;
  margin: 0 auto !important;
  max-width: var(--obs-page-width) !important;
  position: relative;
  transform: none !important;
  width: 100% !important;
  z-index: 1;
}

.hero-copy { margin: 0 0 28px !important; max-width: 640px; }

.hero-copy h2 {
  color: var(--obs-text) !important;
  font-family: var(--obs-display);
  font-size: 46px !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.04 !important;
  margin: 0 !important;
}

.hero-copy p {
  color: var(--obs-text-2) !important;
  font-size: 15.5px !important;
  margin: 14px 0 0 !important;
}

/* Hero search */
.observis-search-wrap { max-width: 620px; position: relative; width: 100%; }

.observis-search-wrap > .search-icon {
  color: var(--obs-text-3);
  left: 16px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.observis-search-wrap .search {
  background: var(--obs-panel) !important;
  border: 1px solid var(--obs-line-hi) !important;
  border-radius: var(--obs-radius) !important;
  box-shadow: none !important;
  overflow: hidden;
}
.observis-search-wrap .search:focus-within {
  border-color: var(--obs-signal) !important;
  box-shadow: 0 0 0 4px var(--obs-signal-dim) !important;
}
.observis-search-wrap .search input[type="search"] {
  background: transparent !important;
  border: 0 !important;
  color: var(--obs-text) !important;
  font-size: 15px !important;
  height: 50px !important;
  outline: 0 !important;
  padding-left: 44px !important;
}
.observis-search-wrap .search input[type="search"]::placeholder { color: var(--obs-text-3) !important; }
.observis-search-wrap .search .clear-button {
  background: transparent !important;
  border: 0 !important;
  color: var(--obs-text-3) !important;
}

/* --------------------------------------------------------------------------
   5. Home — topic nodes
   -------------------------------------------------------------------------- */

.observis-home {
  margin: 0 auto !important;
  max-width: var(--obs-page-width) !important;
  padding: 56px 24px 80px !important;
}
.observis-home .knowledge-base { margin: 0 !important; }

.section-heading-row h2,
.observis-home h2 {
  font-family: var(--obs-display);
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--obs-text-3) !important;
}

.section-heading-row {
  border-bottom: 1px solid var(--obs-line);
  margin-bottom: 6px !important;
  padding-bottom: 14px;
}

.observis-blocks-list {
  display: grid !important;
  gap: 0 40px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

.blocks-item.observis-block {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--obs-line) !important;
  box-shadow: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}
.blocks-item.observis-block:hover,
.blocks-item.observis-block:focus,
.blocks-item.observis-block:active { background: transparent !important; color: inherit !important; }

.observis-block .blocks-item-link {
  align-items: flex-start !important;
  color: var(--obs-text-2) !important;
  display: flex !important;
  gap: 16px;
  padding: 22px 4px 22px 26px !important;
  position: relative;
  text-align: left !important;
  text-decoration: none !important;
  transition: color 0.16s ease;
}

/* port */
.observis-block .blocks-item-link::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 30px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--obs-line-hi);
  border-radius: 50%;
  background: var(--obs-void);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.observis-block .blocks-item-link:hover { background: transparent !important; color: var(--obs-text) !important; }
.observis-block .blocks-item-link:hover::before {
  border-color: var(--obs-signal);
  background: var(--obs-signal);
  box-shadow: 0 0 0 4px var(--obs-signal-dim);
}

.observis-block .block-icon { color: var(--obs-text-3); flex: 0 0 22px; transition: color 0.18s ease; }
.observis-block .block-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.observis-block .blocks-item-title {
  color: var(--obs-text);
  font-family: var(--obs-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.observis-block .blocks-item-description {
  color: var(--obs-text-3);
  font-size: 13.5px;
  line-height: 1.55;
}

.observis-block .block-arrow {
  color: var(--obs-text-3);
  margin-left: auto;
  opacity: 0.45;
  padding-left: 16px;
  transform: translateX(-4px);
  transition: transform 0.18s ease, opacity 0.18s ease, color 0.18s ease;
}
.observis-block .blocks-item-link:hover .block-icon,
.observis-block .blocks-item-link:hover .block-arrow { color: var(--obs-signal) !important; }
.observis-block .blocks-item-link:hover .block-arrow { opacity: 1; transform: translateX(0); }

/* Icon masks (kept from previous version) */
.observis-block .block-icon svg { display: none; }
.observis-block[class*="icon-"] .block-icon::before,
.observis-block .block-icon::before {
  background: currentColor;
  content: "";
  display: block;
  height: 22px;
  width: 22px;
  mask: var(--obs-topic-icon, none) center / contain no-repeat;
  -webkit-mask: var(--obs-topic-icon, none) center / contain no-repeat;
}
.observis-block:not([class*="icon-"]) .block-icon::before { display: none; }
.observis-block:not([class*="icon-"]) .block-icon svg { display: block; }

/* Popular guides */
.observis-featured { margin: 44px 0 0 !important; }
.observis-featured .section-heading-row { margin-bottom: 6px !important; }
.observis-featured .promoted-articles {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}
.observis-featured .promoted-articles-item {
  border-bottom: 1px solid var(--obs-line) !important;
  margin: 0 !important;
  padding: 0 !important;
}
.observis-featured .promoted-articles-item a {
  align-items: center;
  color: var(--obs-text-2) !important;
  display: flex;
  font-size: 14.5px;
  gap: 14px;
  min-height: 52px;
  padding: 0 4px 0 26px;
  position: relative;
  text-decoration: none !important;
  transition: color 0.16s ease;
}
.observis-featured .promoted-articles-item a::before {
  background: var(--obs-void);
  border: 1px solid var(--obs-line-hi);
  border-radius: 50%;
  content: "" !important;
  height: 7px;
  left: 4px;
  margin-top: -3.5px;
  padding: 0 !important;
  position: absolute;
  top: 50%;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  width: 7px;
}
.observis-featured .promoted-articles-item a > span:first-child { margin-right: auto; }
.observis-featured .promoted-articles-item a > span[aria-hidden] {
  color: var(--obs-text-3);
  opacity: 0.45;
  transform: translateX(-4px);
  transition: transform 0.18s ease, opacity 0.18s ease, color 0.18s ease;
}
.observis-featured .promoted-articles-item a:hover {
  background: transparent !important;
  color: var(--obs-text) !important;
}
.observis-featured .promoted-articles-item a:hover::before {
  background: var(--obs-signal);
  border-color: var(--obs-signal);
  box-shadow: 0 0 0 4px var(--obs-signal-dim);
}
.observis-featured .promoted-articles-item a:hover > span[aria-hidden] {
  color: var(--obs-signal);
  opacity: 1;
  transform: translateX(0);
}

/* Home CTA */
.observis-support-cta {
  align-items: center;
  border: 1px solid var(--obs-line);
  border-radius: var(--obs-radius);
  background: var(--obs-panel);
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-top: 56px;
  padding: 26px 28px;
}
.observis-support-cta h2 {
  color: var(--obs-text) !important;
  font-family: var(--obs-display);
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  margin: 0;
  text-transform: none !important;
}
.observis-support-cta p { color: var(--obs-text-2); font-size: 13.5px; margin: 6px 0 0; }

.observis-cta-button {
  background: var(--obs-signal);
  border: 0;
  border-radius: var(--obs-radius);
  color: #04211F !important;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 18px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.observis-cta-button:hover { background: #5FE3F5; color: #04211F !important; }

/* --------------------------------------------------------------------------
   6. Inner pages — shared
   -------------------------------------------------------------------------- */

.sub-nav {
  align-items: center !important;
  border-bottom: 1px solid var(--obs-line) !important;
  gap: 24px !important;
  margin: 0 0 44px !important;
  padding: 20px 0 !important;
}

.breadcrumbs,
.sub-nav .breadcrumbs {
  font-family: var(--obs-mono) !important;
  font-size: 11.5px !important;
  letter-spacing: 0.02em;
}
.breadcrumbs li,
.breadcrumbs li a { color: var(--obs-text-3) !important; }
.breadcrumbs li a:hover { color: var(--obs-signal) !important; }
.breadcrumbs li + li::before { color: var(--obs-line-hi) !important; content: "/" !important; }

.sub-nav .search-container { flex: 0 1 300px !important; max-width: 300px !important; }
.sub-nav .search-container .search {
  background: var(--obs-panel) !important;
  border: 1px solid var(--obs-line-hi) !important;
  border-radius: var(--obs-radius) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.sub-nav .search-container .search:focus-within {
  border-color: var(--obs-signal) !important;
  box-shadow: 0 0 0 4px var(--obs-signal-dim) !important;
}
.sub-nav .search-container .search input[type="search"] {
  background: transparent !important;
  border: 0 !important;
  color: var(--obs-text) !important;
  height: 40px !important;
  outline: 0 !important;
  padding-left: 38px !important;
}
.sub-nav .search-container .search .clear-button {
  background: transparent !important;
  border: 0 !important;
  color: var(--obs-text-3) !important;
}
.sub-nav .search-icon { color: var(--obs-text-3) !important; z-index: 2 !important; }

.page-header h1 {
  font-family: var(--obs-display);
  font-size: 34px !important;
  letter-spacing: -0.03em;
}
.page-header-description {
  color: var(--obs-text-2) !important;
  font-size: 15px !important;
  font-style: normal !important;
  line-height: 1.6 !important;
  max-width: 660px;
}

/* --------------------------------------------------------------------------
   7. Category page
   -------------------------------------------------------------------------- */

.category-container.observis-category-page { display: block !important; }
.observis-category-page .category-content { flex: none !important; max-width: none !important; width: 100% !important; }
.observis-category-page .page-header { display: block !important; margin: 0 0 44px !important; }

.observis-category-title-row { align-items: center; display: flex; gap: 14px; }
.observis-category-title-row h1 {
  color: var(--obs-text) !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em;
  margin: 0 !important;
}
.observis-category-icon { color: var(--obs-signal); display: none; flex: 0 0 26px; height: 26px; width: 26px; }
.observis-category-header[class*="icon-"] .observis-category-icon { display: block; }
.observis-category-icon::before {
  background: currentColor;
  content: "";
  display: block;
  height: 26px;
  mask: var(--obs-topic-icon) center / contain no-repeat;
  -webkit-mask: var(--obs-topic-icon) center / contain no-repeat;
  width: 26px;
}
.observis-category-page .page-header-description { margin: 14px 0 0 !important; }

.observis-category-page .section-tree {
  display: grid !important;
  gap: 8px 48px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.observis-category-page .section-tree .section {
  border-top: 1px solid var(--obs-line) !important;
  flex: none !important;
  margin: 0 !important;
  max-width: none !important;
  padding: 24px 0 10px !important;
}
.observis-category-page .section-tree-title {
  font-family: var(--obs-display);
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em;
  margin: 0 0 8px !important;
}
.observis-category-page .section-tree-title a { color: var(--obs-text) !important; text-decoration: none !important; }
.observis-category-page .section-tree-title a:hover { color: var(--obs-signal) !important; }

.observis-category-page .article-list { list-style: none; margin: 0 !important; padding: 0 !important; }
.observis-category-page .article-list-item {
  border-bottom: 1px solid var(--obs-line);
  font-size: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.observis-category-page .article-list-link {
  align-items: center;
  color: var(--obs-text-2) !important;
  display: flex;
  gap: 14px;
  min-height: 46px;
  padding: 0 4px 0 26px;
  position: relative;
  text-decoration: none !important;
  transition: color 0.16s ease;
}
.observis-category-page .article-list-link::before,
.observis-section-page .article-list-link::before {
  background: var(--obs-void);
  border: 1px solid var(--obs-line-hi);
  border-radius: 50%;
  content: "";
  height: 7px;
  left: 4px;
  margin-top: -3.5px;
  position: absolute;
  top: 50%;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  width: 7px;
}
.observis-category-page .article-list-link::after,
.observis-section-page .article-list-link::after {
  color: var(--obs-text-3);
  content: "→";
  margin-left: auto;
  opacity: 0.45;
  padding-left: 18px;
  transform: translateX(-4px);
  transition: transform 0.18s ease, opacity 0.18s ease, color 0.18s ease;
}
.observis-category-page .article-list-link:hover,
.observis-section-page .article-list-link:hover { color: var(--obs-text) !important; }
.observis-category-page .article-list-link:hover::before,
.observis-section-page .article-list-link:hover::before {
  background: var(--obs-signal);
  border-color: var(--obs-signal);
  box-shadow: 0 0 0 4px var(--obs-signal-dim);
}
.observis-category-page .article-list-link:hover::after,
.observis-section-page .article-list-link:hover::after {
  color: var(--obs-signal);
  opacity: 1;
  transform: translateX(0);
}

.observis-category-page .see-all-articles {
  color: var(--obs-signal) !important;
  font-family: var(--obs-mono);
  font-size: 12px;
  padding: 14px 0 0 26px !important;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   8. Section page
   -------------------------------------------------------------------------- */

.observis-section-page { display: block !important; }
.observis-section-page .section-content { margin: 0 auto !important; max-width: 820px !important; width: 100% !important; }
.observis-section-page .page-header { display: block !important; margin: 0 0 32px !important; }
.observis-section-page .page-header h1 { color: var(--obs-text) !important; font-size: 32px !important; margin: 0 0 12px !important; }
.observis-section-page .page-header-description { margin: 0 !important; }

.observis-section-page > .section-content > .article-list {
  border-top: 1px solid var(--obs-line);
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}
.observis-section-page > .section-content > .article-list .article-list-item {
  border-bottom: 1px solid var(--obs-line);
  margin: 0 !important;
  padding: 0 !important;
}
.observis-section-page .article-list-link {
  align-items: center;
  color: var(--obs-text-2) !important;
  display: flex;
  font-size: 15px;
  gap: 14px;
  min-height: 54px;
  padding: 0 4px 0 26px;
  position: relative;
  text-decoration: none !important;
  transition: color 0.16s ease;
}
.observis-section-page .section-list { border-top: 1px solid var(--obs-line); list-style: none; padding: 0; }
.observis-section-page .section-list-item { border-bottom: 1px solid var(--obs-line) !important; }
.observis-section-page .section-list-item a { color: var(--obs-text) !important; }

/* --------------------------------------------------------------------------
   9. Article page
   -------------------------------------------------------------------------- */

.observis-article-page { align-items: flex-start !important; gap: 56px !important; }
.observis-article-page .article-sidebar { flex: 0 0 224px !important; padding: 0 !important; position: sticky; top: 96px; }
.observis-article-page .article { flex: 1 1 auto !important; max-width: 760px !important; min-width: 0 !important; padding: 0 !important; }

.observis-article-page .article-header { margin: 0 0 32px !important; }
.observis-article-page .article-title {
  color: var(--obs-text) !important;
  font-family: var(--obs-display);
  font-size: 36px !important;
  letter-spacing: -0.032em;
  line-height: 1.12 !important;
  margin: 0 0 16px !important;
}
.observis-article-page .article-author,
.observis-article-page .article-meta,
.observis-article-page .meta-data {
  color: var(--obs-text-3) !important;
  font-family: var(--obs-mono);
  font-size: 11.5px !important;
}
.observis-article-page .article-author a { color: var(--obs-text-2) !important; }

/* Sidebar nav */
.observis-article-page .sidenav-title {
  color: var(--obs-text-3) !important;
  font-family: var(--obs-display);
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.observis-article-page .sidenav-item {
  border-left: 2px solid var(--obs-line);
  color: var(--obs-text-3) !important;
  display: block;
  font-size: 13px !important;
  line-height: 1.4;
  margin: 0 !important;
  padding: 9px 12px !important;
  text-decoration: none !important;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.observis-article-page .sidenav-item:hover { border-left-color: var(--obs-line-hi); color: var(--obs-text) !important; }
.observis-article-page .sidenav-item.current-article {
  border-left-color: var(--obs-signal);
  color: var(--obs-text) !important;
  font-weight: 500;
}

/* Body */
.article-body,
.observis-article-page .article-body {
  color: #D4D8D9 !important;
  font-size: 15.5px !important;
  line-height: 1.75 !important;
}
.article-body p,
.article-body li { color: #D4D8D9 !important; }

.article-body h1, .article-body h2, .article-body h3, .article-body h4 {
  color: var(--obs-text) !important;
  font-family: var(--obs-display);
}
.observis-article-page .article-body h2 {
  border-top: 1px solid var(--obs-line);
  font-size: 24px !important;
  letter-spacing: -0.025em;
  margin-top: 48px !important;
  padding-top: 32px !important;
}
.observis-article-page .article-body h3 { font-size: 18.5px !important; margin-top: 34px !important; }

.article-body a { color: var(--obs-signal) !important; text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { text-decoration-thickness: 2px; }

.article-body pre,
.article-body code {
  background: var(--obs-panel) !important;
  border: 1px solid var(--obs-line) !important;
  border-radius: var(--obs-radius);
  color: #E6EAEB !important;
  font-family: var(--obs-mono) !important;
  font-size: 13px !important;
}
.article-body code { padding: 2px 6px; }
.article-body pre { padding: 16px 18px; }
.article-body pre code { background: transparent !important; border: 0 !important; padding: 0; }

.article-body blockquote {
  border-left: 2px solid var(--obs-signal);
  color: var(--obs-text-2) !important;
  margin-left: 0;
  padding-left: 20px;
}
.article-body img { border: 1px solid var(--obs-line); border-radius: var(--obs-radius); }
.article-body hr { border: 0; border-top: 1px solid var(--obs-line); }

.article-body table { border-collapse: collapse; width: 100%; }
.article-body th,
.article-body td { border: 1px solid var(--obs-line); padding: 10px 12px; }
.article-body th {
  background: var(--obs-panel);
  color: var(--obs-text) !important;
  font-family: var(--obs-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
}

.observis-article-page .article-footer,
.observis-article-page .article-votes,
.observis-article-page .article-more-questions,
.article-relatives,
.article-return-to-top { border-color: var(--obs-line) !important; color: var(--obs-text-2); }

.article-votes .article-vote {
  background: var(--obs-panel);
  border: 1px solid var(--obs-line-hi);
  border-radius: var(--obs-radius);
  color: var(--obs-text-2);
}
.article-votes .article-vote:hover { border-color: var(--obs-signal); color: var(--obs-signal); }
.article-vote-count { color: var(--obs-text-3); font-family: var(--obs-mono); }

/* --------------------------------------------------------------------------
   10. Forms, buttons, tables — previously unthemed Copenhagen surfaces
   -------------------------------------------------------------------------- */

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="url"], input[type="tel"], input[type="date"],
select, textarea, .form-field input, .form-field textarea, .form-field select {
  background: var(--obs-panel) !important;
  border: 1px solid var(--obs-line-hi) !important;
  border-radius: var(--obs-radius) !important;
  box-shadow: none !important;
  color: var(--obs-text) !important;
  font-family: var(--obs-body) !important;
  font-size: 14.5px !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--obs-signal) !important;
  box-shadow: 0 0 0 4px var(--obs-signal-dim) !important;
  outline: 0 !important;
}
::placeholder { color: var(--obs-text-3) !important; }

label, .form-field label, .form-field > .label {
  color: var(--obs-text) !important;
  font-size: 13.5px;
  font-weight: 500;
}
.form-field .description, .form-field .nesty-input { color: var(--obs-text-3) !important; }

.button, button.button, a.button, input[type="submit"], [type="submit"] {
  background: var(--obs-signal) !important;
  border: 1px solid var(--obs-signal) !important;
  border-radius: var(--obs-radius) !important;
  color: #04211F !important;
  font-family: var(--obs-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.button:hover, input[type="submit"]:hover, [type="submit"]:hover {
  background: #5FE3F5 !important;
  border-color: #5FE3F5 !important;
  color: #04211F !important;
}

.button-secondary, .button-large.button-secondary, a.button-secondary {
  background: transparent !important;
  border: 1px solid var(--obs-line-hi) !important;
  color: var(--obs-text) !important;
}
.button-secondary:hover { border-color: var(--obs-signal) !important; color: var(--obs-signal) !important; }

table, .table {
  border-collapse: collapse;
  color: var(--obs-text-2);
}
th {
  border-bottom: 1px solid var(--obs-line-hi) !important;
  color: var(--obs-text-3) !important;
  font-family: var(--obs-mono) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
td { border-bottom: 1px solid var(--obs-line) !important; }
tr:hover td { background: var(--obs-panel-hi); }

/* --------------------------------------------------------------------------
   11. Requests, search results, profile, community
   -------------------------------------------------------------------------- */

.requests-table td a,
.striped-list-title a,
.search-result-link {
  color: var(--obs-text) !important;
}
.requests-table td a:hover,
.search-result-link:hover { color: var(--obs-signal) !important; }

.search-result {
  border-bottom: 1px solid var(--obs-line) !important;
  padding: 22px 0 !important;
}
.search-result-title a { font-family: var(--obs-display); font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.search-result-description, .search-result-body { color: var(--obs-text-2) !important; }
.search-result-meta, .search-result-breadcrumbs, .search-result-votes {
  color: var(--obs-text-3) !important;
  font-family: var(--obs-mono);
  font-size: 11.5px;
}
.search-result-breadcrumbs a { color: var(--obs-text-3) !important; }
.search-results-subheading, .search-results-count { color: var(--obs-text-3) !important; }

/* Status labels — the semantic palette earns its keep here. */
.status-label {
  border: 1px solid transparent;
  border-radius: 3px;
  font-family: var(--obs-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em;
  padding: 3px 8px !important;
  text-transform: uppercase;
}
.status-label-open, .status-label-new {
  background: rgba(34, 211, 238, 0.12) !important;
  border-color: rgba(34, 211, 238, 0.35);
  color: var(--obs-signal) !important;
}
.status-label-solved, .status-label-closed {
  background: rgba(34, 197, 94, 0.12) !important;
  border-color: rgba(34, 197, 94, 0.32);
  color: var(--obs-uplink) !important;
}
.status-label-pending, .status-label-hold, .status-label-answered {
  background: rgba(220, 79, 52, 0.12) !important;
  border-color: rgba(220, 79, 52, 0.32);
  color: #F08163 !important;
}

.striped-list-item, .striped-list li { border-bottom: 1px solid var(--obs-line) !important; background: transparent !important; }
.striped-list-item:hover { background: var(--obs-panel-hi) !important; }

/* Comments */
.comment, .comment-wrapper { border-color: var(--obs-line) !important; }
.comment-header, .comment-meta, .comment-published { color: var(--obs-text-3) !important; font-family: var(--obs-mono); font-size: 11.5px; }
.comment-author a, .comment-author .comment-author-name { color: var(--obs-text) !important; font-family: var(--obs-body); }
.comment-body { color: #D4D8D9 !important; }
.comment-form, .comment-container { border-color: var(--obs-line) !important; }

/* Profile */
.profile-header, .profile-info, .user-profile-header { border-color: var(--obs-line) !important; }
.profile-stats, .profile-stat, .user-stats { color: var(--obs-text-3) !important; font-family: var(--obs-mono); }
.profile-name, .user-name { color: var(--obs-text) !important; font-family: var(--obs-display); }
.avatar, .user-avatar { border-radius: 50%; }

/* Nav / sidenav collapsible */
.collapsible-nav, .collapsible-sidebar { border-color: var(--obs-line) !important; }
.collapsible-nav-list a, .collapsible-sidebar-body a { color: var(--obs-text-2) !important; }
.collapsible-nav-list .current a, .collapsible-nav-list a:hover { color: var(--obs-signal) !important; }

/* Pagination */
.pagination-next, .pagination-prev, .pagination-page {
  color: var(--obs-text-2) !important;
  font-family: var(--obs-mono);
  font-size: 13px;
}
.pagination-current, .pagination-page-current {
  background: var(--obs-panel-hi) !important;
  border-radius: 4px;
  color: var(--obs-signal) !important;
}
.pagination-page a:hover { color: var(--obs-signal) !important; }

/* Notifications */
.notification { border-radius: var(--obs-radius); font-size: 14px; }
.notification-error { background: rgba(220, 79, 52, 0.12); border: 1px solid rgba(220, 79, 52, 0.4); color: #F08163; }
.notification-notice, .notification-success { background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.35); color: var(--obs-uplink); }
.notification-inline { color: var(--obs-fault); }

/* Follow buttons */
.follow-up, .subscribe-button, button[data-auth-action] {
  background: transparent !important;
  border: 1px solid var(--obs-line-hi) !important;
  border-radius: var(--obs-radius) !important;
  color: var(--obs-text) !important;
}
.follow-up:hover, .subscribe-button:hover { border-color: var(--obs-signal) !important; color: var(--obs-signal) !important; }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.observis-footer {
  background: var(--obs-void);
  border-top: 1px solid var(--obs-line);
  color: var(--obs-text-3);
  font-size: 12.5px;
  margin: 0;
  padding: 28px 24px;
}
.observis-footer .footer-inner {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--obs-page-width);
}
.observis-footer-copy { font-family: var(--obs-mono); font-size: 11.5px; letter-spacing: 0.02em; }
.observis-footer .dropdown-toggle { color: var(--obs-text-3); font-size: 12.5px; }
.observis-footer .dropdown-toggle:hover { color: var(--obs-text); }

/* --------------------------------------------------------------------------
   13. Topic icon masks
   -------------------------------------------------------------------------- */

.observis-block.icon-getting-started,
.observis-category-header.icon-getting-started { --obs-topic-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2zM22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.observis-block.icon-dashboards,
.observis-category-header.icon-dashboards { --obs-topic-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='7' height='7' rx='1' fill='none' stroke='black' stroke-width='1.8'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1' fill='none' stroke='black' stroke-width='1.8'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1' fill='none' stroke='black' stroke-width='1.8'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E"); }
.observis-block.icon-pipeline-manager,
.observis-category-header.icon-pipeline-manager { --obs-topic-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='8' height='8' x='3' y='3' rx='2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 11v4a2 2 0 0 0 2 2h4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect width='8' height='8' x='13' y='13' rx='2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.observis-block.icon-virtual-devices,
.observis-category-header.icon-virtual-devices { --obs-topic-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='2' width='16' height='20' rx='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M8 6h8M8 10h2M12 10h2M8 14h2M12 14h2M8 18h2M12 18h2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.observis-block.icon-alarms,
.observis-category-header.icon-alarms { --obs-topic-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M10 21h4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.observis-block.icon-reports,
.observis-category-header.icon-reports { --obs-topic-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='4' width='14' height='18' rx='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M9 4V2h6v2M9 9h6M9 13h6M9 17h4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.observis-block.icon-settings,
.observis-category-header.icon-settings { --obs-topic-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9L17 7M7 17l-2.1 2.1' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .nav-wrapper-desktop { display: none; }
  .nav-wrapper-mobile { display: block; }
  .observis-blocks-list { grid-template-columns: 1fr !important; gap: 0 !important; }
  .observis-article-page { flex-direction: column !important; gap: 32px !important; }
  .observis-article-page .article-sidebar { flex: none !important; position: static; width: 100% !important; }
  .observis-category-page .section-tree { grid-template-columns: 1fr !important; }
}

@media (max-width: 620px) {
  .observis-header, .observis-hero { padding-left: 18px !important; padding-right: 18px !important; }
  .observis-logo img { height: 19px; }
  .header-divider { margin: 0 12px; }
  .support-label { font-size: 11px; }
  .observis-hero { padding-top: 48px !important; padding-bottom: 44px !important; }
  .observis-hero::before { opacity: 0.16; }
  .hero-copy h2 { font-size: 32px !important; }
  .observis-home { padding: 40px 18px 60px !important; }
  .observis-support-cta { align-items: flex-start; flex-direction: column; }
  .observis-category-title-row h1,
  .observis-section-page .page-header h1,
  .observis-article-page .article-title { font-size: 27px !important; }
  .sub-nav { align-items: stretch !important; margin-bottom: 30px !important; }
  .sub-nav .search-container { max-width: none !important; }
  .observis-footer .footer-inner { align-items: flex-start; flex-direction: column; gap: 12px; }
}

/* Hero eyebrow — instrument-readout voice, sets up the headline. */
.hero-eyebrow {
  color: var(--obs-signal) !important;
  font-family: var(--obs-mono) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  margin: 0 0 18px !important;
  text-transform: uppercase;
}
.hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  margin-right: 12px;
  vertical-align: middle;
  background: var(--obs-signal);
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   15. Corrections to stock Copenhagen layout primitives
   Copenhagen centres the hero, stacks block links in a column, and lays
   promoted articles out in three columns. All three fight this design.
   -------------------------------------------------------------------------- */

/* Hero: left-aligned to the same grid as the rest of the page, and no
   background image — the node field is the texture. */
.observis-hero {
  background-image: none !important;
  text-align: left !important;
}
.observis-hero-inner { max-width: var(--obs-page-width) !important; top: auto !important; }

/* Topic blocks: row layout, left aligned, no flex-basis fighting the grid. */
.observis-blocks-list { display: grid !important; }
.blocks-item.observis-block {
  display: block !important;
  flex: none !important;
  max-width: none !important;
  text-align: left !important;
}
.observis-block .blocks-item-link {
  align-items: center !important;
  flex: none !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  padding: 20px 4px 20px 26px !important;
  text-align: left !important;
}
.observis-block .blocks-item-link::before { top: 50%; margin-top: -3.5px; }
.observis-block .block-icon { align-self: flex-start; margin-top: 2px; }
.observis-block .block-copy { flex: 1 1 auto; }
.observis-block .blocks-item-title { margin-bottom: 0 !important; }
.observis-block .blocks-item-description:not(:empty) { margin-top: 5px !important; }
.observis-block .block-arrow { align-self: center; }
.observis-block .blocks-item-link:focus { box-shadow: none !important; }
.observis-block .blocks-item-link:focus-visible { outline: 2px solid var(--obs-signal); outline-offset: -2px; }

/* Popular guides: one column, always. */
.observis-featured .promoted-articles {
  display: block !important;
  flex-direction: column !important;
}
.observis-featured .promoted-articles-item {
  align-self: auto !important;
  flex: none !important;
  padding-right: 0 !important;
  width: auto !important;
}
.observis-featured .promoted-articles-item a { border-bottom: 0 !important; display: flex !important; padding: 0 4px 0 26px !important; }
.observis-featured .promoted-articles-item:last-child a { border: 0 !important; }
.observis-featured .promoted-articles-item:last-child { border-bottom: 0 !important; }

/* Section spacing: Copenhagen's generic .section margin is too loose here. */
.observis-home .section { margin-bottom: 0 !important; }

/* --------------------------------------------------------------------------
   16. Restraint pass
   Topic blocks already carry an icon. A port dot beside it is a second marker
   doing the same job — drop it there and let the connection motif belong to
   the article rows, which have no icon of their own.
   -------------------------------------------------------------------------- */

.observis-block .blocks-item-link::before { display: none !important; }
.observis-block .blocks-item-link { padding-left: 4px !important; }
.observis-block .block-icon { margin-top: 1px; }
.observis-block .blocks-item-link:hover .block-icon { color: var(--obs-signal) !important; }

/* Give the two home sections room to breathe. */
.observis-featured { margin-top: 64px !important; }
.observis-support-cta { margin-top: 64px !important; }

/* Category header icon identifies the page; it isn't interactive, so it
   doesn't get to wear the action colour. */
.observis-category-icon { color: var(--obs-text-2) !important; }

/* ==========================================================================
   17. v16 — fixes
   ========================================================================== */

/* Copenhagen sets `.logo span { color: #050505 }`. brand_color is now
   #050505, which made the Support label black on black. Higher specificity
   than .logo span, so no !important needed. */
.observis-header .logo span.support-label {
  color: var(--obs-text-2);
  margin: 0;
  transition: color 0.15s ease;
}
.observis-header .logo a:hover span.support-label { color: var(--obs-signal); }
.observis-header .logo span.header-divider { margin: 0 16px; }

/* Slightly larger wordmark. */
.observis-logo img { height: 26px; }

/* ---- Home CTA: a real handoff, not a bare box ---- */
.observis-support-cta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  padding: 30px 32px;
}
.observis-support-cta .cta-copy { flex: 1 1 340px; min-width: 0; }
.observis-support-cta .cta-copy p { margin: 8px 0 0; }
.observis-support-cta .cta-meta {
  color: var(--obs-text-3) !important;
  font-family: var(--obs-mono);
  font-size: 11.5px !important;
  letter-spacing: 0.04em;
  margin-top: 14px !important;
}
.observis-support-cta .cta-meta::before {
  background: var(--obs-uplink);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 6px;
  margin-right: 9px;
  vertical-align: middle;
  width: 6px;
}
.observis-support-cta .cta-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 20px;
}
.observis-cta-secondary {
  color: var(--obs-text-2);
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
}
.observis-cta-secondary:hover { color: var(--obs-signal); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 620px) {
  .observis-support-cta { padding: 24px 20px; }
  .observis-support-cta .cta-actions { align-items: flex-start; flex-direction: column; gap: 14px; width: 100%; }
}

/* ---- Icons: settings is a real cogwheel; reports and virtual devices no
   longer share a rounded-rectangle-with-lines silhouette. Reports is an
   open bar chart, virtual devices is a chip with pins. ---- */
.observis-block.icon-settings,
.observis-category-header.icon-settings { --obs-topic-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E"); }

.observis-block.icon-reports,
.observis-category-header.icon-reports { --obs-topic-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='M8 17V11'/%3E%3Cpath d='M13 17V6'/%3E%3Cpath d='M18 17v-4'/%3E%3C/svg%3E"); }

.observis-block.icon-virtual-devices,
.observis-category-header.icon-virtual-devices { --obs-topic-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='14' height='14' rx='2'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1'/%3E%3Cpath d='M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3'/%3E%3C/svg%3E"); }

/* ==========================================================================
   18. LIGHT MODE
   The dark theme is the identity and stays the default. Light is an opt-in
   the visitor chooses; the choice is remembered.

   Because everything above is tokenized, light is mostly a retokenization.
   What it isn't: the accents. #22D3EE on white is roughly 1.9:1 — unreadable.
   Light gets a deeper cyan that keeps the same hue but passes contrast.
   ========================================================================== */

:root { --obs-on-signal: #04211F; }

html[data-theme="light"] {
  --obs-void:      #FFFFFF;
  --obs-panel:     #F5F8F8;
  --obs-panel-hi:  #EDF1F2;
  --obs-line:      #E3E8E9;
  --obs-line-hi:   #C7D0D2;

  --obs-text:      #0B0F10;
  --obs-text-2:    #4B5455;
  --obs-text-3:    #798385;

  --obs-signal:    #0E8FAC;
  --obs-signal-dim: rgba(14, 143, 172, 0.16);
  --obs-uplink:    #157F3C;
  --obs-fault:     #B33A20;
  --obs-on-signal: #FFFFFF;

  color-scheme: light;
}

/* Buttons and chips read their foreground from a token so both modes work. */
.user-nav-list .submit-a-request,
.user-nav-list .observis-request-link,
.observis-cta-button,
.button, button.button, a.button,
input[type="submit"], [type="submit"] { color: var(--obs-on-signal) !important; }

.user-nav-list .submit-a-request:hover,
.user-nav-list .observis-request-link:hover,
.observis-cta-button:hover,
.button:hover, input[type="submit"]:hover, [type="submit"]:hover { color: var(--obs-on-signal) !important; }

html[data-theme="light"] .user-nav-list .submit-a-request:hover,
html[data-theme="light"] .user-nav-list .observis-request-link:hover,
html[data-theme="light"] .observis-cta-button:hover,
html[data-theme="light"] .button:hover,
html[data-theme="light"] input[type="submit"]:hover,
html[data-theme="light"] [type="submit"]:hover {
  background: #0A7288 !important;
  border-color: #0A7288 !important;
}

/* Hardcoded body greys become tokens in light. */
html[data-theme="light"] .article-body,
html[data-theme="light"] .article-body p,
html[data-theme="light"] .article-body li,
html[data-theme="light"] .comment-body,
html[data-theme="light"] .observis-article-page .article-body,
html[data-theme="light"] .observis-article-page .article-body p,
html[data-theme="light"] .observis-article-page .article-body li { color: #2B3233 !important; }

html[data-theme="light"] .article-body pre,
html[data-theme="light"] .article-body code { color: #161C1D !important; }

/* Logo: swap to the black wordmark. Both are in the DOM; CSS picks one. */
.observis-logo .logo-dark { display: block; }
.observis-logo .logo-light { display: none; }
html[data-theme="light"] .observis-logo .logo-dark { display: none; }
html[data-theme="light"] .observis-logo .logo-light { display: block; }

/* Hero node field: restroke for the light background. */
html[data-theme="light"] .observis-hero::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='320' viewBox='0 0 560 320'%3E%3Cg stroke='%230E8FAC' stroke-width='1' fill='none' stroke-dasharray='3 5' opacity='0.5'%3E%3Cpath d='M60 250 L170 120 L300 190 L420 70 L520 150'/%3E%3Cpath d='M170 120 L210 40 L420 70'/%3E%3Cpath d='M300 190 L260 290 L440 270 L520 150'/%3E%3C/g%3E%3Cg fill='%230E8FAC'%3E%3Ccircle cx='60' cy='250' r='2.5'/%3E%3Ccircle cx='170' cy='120' r='2.5'/%3E%3Ccircle cx='300' cy='190' r='2.5'/%3E%3Ccircle cx='420' cy='70' r='2.5'/%3E%3Ccircle cx='520' cy='150' r='2.5'/%3E%3Ccircle cx='210' cy='40' r='2.5'/%3E%3Ccircle cx='260' cy='290' r='2.5'/%3E%3Ccircle cx='440' cy='270' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.55;
}

/* Status chips: same three meanings, retinted for a light ground. */
html[data-theme="light"] .status-label-open,
html[data-theme="light"] .status-label-new {
  background: rgba(14, 143, 172, 0.1) !important;
  border-color: rgba(14, 143, 172, 0.35);
  color: #0A6D83 !important;
}
html[data-theme="light"] .status-label-solved,
html[data-theme="light"] .status-label-closed {
  background: rgba(21, 127, 60, 0.1) !important;
  border-color: rgba(21, 127, 60, 0.32);
  color: #136B34 !important;
}
html[data-theme="light"] .status-label-pending,
html[data-theme="light"] .status-label-hold,
html[data-theme="light"] .status-label-answered {
  background: rgba(179, 58, 32, 0.1) !important;
  border-color: rgba(179, 58, 32, 0.3);
  color: #9C3219 !important;
}

html[data-theme="light"] .notification-error { background: rgba(179,58,32,.1); border-color: rgba(179,58,32,.35); color: #9C3219; }
html[data-theme="light"] .notification-notice,
html[data-theme="light"] .notification-success { background: rgba(21,127,60,.1); border-color: rgba(21,127,60,.32); color: #136B34; }

html[data-theme="light"] .dropdown-menu { box-shadow: 0 12px 32px rgba(11, 15, 16, 0.12); }
html[data-theme="light"] ::selection { background: var(--obs-signal); color: #fff; }
html[data-theme="light"] .observis-header { background: var(--obs-void); }
html[data-theme="light"] .observis-hero { background: var(--obs-void) !important; }
html[data-theme="light"] .observis-footer { background: var(--obs-panel); }
html[data-theme="light"] .observis-block .blocks-item-link:hover .block-icon { color: var(--obs-signal) !important; }

/* ---- The toggle ---- */
.theme-toggle {
  align-items: center;
  background: transparent;
  border: 1px solid var(--obs-line-hi);
  border-radius: var(--obs-radius);
  color: var(--obs-text-2);
  cursor: pointer;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  margin-left: 4px;
  padding: 0;
  transition: color 0.15s ease, border-color 0.15s ease;
  width: 34px;
}
.theme-toggle:hover { border-color: var(--obs-signal); color: var(--obs-signal); }
.theme-toggle svg { height: 16px; width: 16px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html[data-theme="light"] .theme-toggle .icon-sun { display: block; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }

.menu-list-mobile .theme-toggle { height: auto; margin: 0; padding: 10px 0; width: auto; border: 0; gap: 10px; }
.menu-list-mobile .theme-toggle::after { content: attr(data-label); font-size: 14px; }

/* ==========================================================================
   19. v17 — Lucide icon set, matched to the app's own navigation
   Exact Lucide paths so support icons read as the same family as the
   product. stroke-linecap="round" is load-bearing here: Lucide draws small
   details as zero-length paths ("M8 10h.01"), which render as nothing at
   all with butt caps. Every icon below carries round caps and joins.
   ========================================================================== */

.observis-logo img { height: 30px; }

/* Icons get a little more room so interior detail resolves at list size. */
.observis-block .block-icon { flex: 0 0 24px; height: 24px; width: 24px; }
.observis-block .block-icon::before { height: 24px; width: 24px; }

/* book-open */
.observis-block.icon-getting-started,
.observis-category-header.icon-getting-started { --obs-topic-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E"); }

/* layout-grid */
.observis-block.icon-dashboards,
.observis-category-header.icon-dashboards { --obs-topic-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3C/svg%3E"); }

/* workflow */
.observis-block.icon-pipeline-manager,
.observis-category-header.icon-pipeline-manager { --obs-topic-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='8' x='3' y='3' rx='2'/%3E%3Cpath d='M7 11v4a2 2 0 0 0 2 2h4'/%3E%3Crect width='8' height='8' x='13' y='13' rx='2'/%3E%3C/svg%3E") !important; }

/* bell */
.observis-block.icon-alarms,
.observis-category-header.icon-alarms { --obs-topic-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.268 21a2 2 0 0 0 3.464 0'/%3E%3Cpath d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/%3E%3C/svg%3E"); }

/* settings */
.observis-block.icon-settings,
.observis-category-header.icon-settings { --obs-topic-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }

/* clipboard-list — Reports */
.observis-block.icon-reports,
.observis-category-header.icon-reports { --obs-topic-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M12 11h4'/%3E%3Cpath d='M12 16h4'/%3E%3Cpath d='M8 11h.01'/%3E%3Cpath d='M8 16h.01'/%3E%3C/svg%3E"); }

/* calculator — Virtual devices */
.observis-block.icon-virtual-devices,
.observis-category-header.icon-virtual-devices { --obs-topic-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3Cpath d='M8 6h8'/%3E%3Cpath d='M16 14v4'/%3E%3Cpath d='M16 10h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3C/svg%3E"); }

/* ==========================================================================
   20. Icon rendering
   Tested at 24 and 26px across stroke weights 1.4–2.0. At weight 2 the
   calculator's keypad dots merge into solid bars and it collapses toward the
   clipboard's silhouette. At 1.6/26px the 3-column dot grid stays open and
   reads clearly against the clipboard's tab-and-two-lines. Both glyphs are
   unmodified Lucide; only size and weight are tuned.
   ========================================================================== */

.observis-block .block-icon { flex: 0 0 26px; height: 26px; width: 26px; }
.observis-block .block-icon::before { height: 26px; width: 26px; }

/* Lift icons off the faintest grey so interior detail survives at this size. */
.observis-block .block-icon { color: var(--obs-text-2); }

/* The wordmark grew from 22px to 30px; give the bar room so it isn't crowded. */
.observis-header-inner { min-height: 72px; }
@media (max-width: 620px) { .observis-logo img { height: 24px; } }

/* If the status line is a link to a status page, it should look clickable and
   carry the arrow. The dot still comes from .cta-meta. */
.observis-support-cta a.cta-meta-link { display: inline-block; text-decoration: none; }
.observis-support-cta a.cta-meta-link::after { content: " →"; }
.observis-support-cta a.cta-meta-link:hover { color: var(--obs-uplink) !important; }

/* ==========================================================================
   ARTICLE BODY — layout additions
   Append to section 9 (Article page) of style.css. Tokens only, so light mode
   comes along for free.
   ========================================================================== */

/* Lede: the first paragraph of an article carries the definition. Give it a
   step up in size so the reader knows where the answer is. */
.article-body .article-lede,
.observis-article-page .article-body .article-lede {
  color: var(--obs-text) !important;
  font-size: 18.5px !important;
  letter-spacing: -0.012em;
  line-height: 1.6 !important;
  margin-bottom: 22px !important;
}

/* Area tables: the left column is a label, not prose. Keep it off the wrap and
   let the description column take the slack. */
.article-body .obs-area-table table { margin: 4px 0 28px; }
.article-body .obs-area-table table td:first-child {
  color: var(--obs-text) !important;
  font-weight: 500;
  white-space: nowrap;
  width: 1%;
}
.article-body .obs-area-table table td:first-child a { text-decoration: none !important; }
.article-body .obs-area-table table td:first-child a:hover { text-decoration: underline !important; }
.article-body .obs-area-table table tbody tr:hover td { background: var(--obs-panel); }

/* On narrow screens a two-column table stops being a table. Stack it: the label
   becomes a heading over its description. */
@media (max-width: 620px) {
  .article-body .obs-area-table table,
  .article-body .obs-area-table table tbody,
  .article-body .obs-area-table table tr,
  .article-body .obs-area-table table td { display: block; width: auto !important; }
  .article-body .obs-area-table table thead { display: none; }
  .article-body .obs-area-table table tr {
    border: 1px solid var(--obs-line);
    border-radius: var(--obs-radius);
    margin-bottom: 10px;
    padding: 4px 0;
  }
  .article-body .obs-area-table table td { border: 0 !important; padding: 4px 14px !important; }
  .article-body .obs-area-table table td:first-child { white-space: normal; }
}

/* Article-body lists: inherit the node-dot marker used on category and section
   pages so bullets read as part of the same system. */
.article-body ul {
  list-style: none;
  margin-left: 0;   /* cancels Copenhagen's 20px left margin on .article-body ul */
  padding-left: 0;
}
.article-body ul > li {
  padding-left: 26px;
  position: relative;
}
.article-body ul > li::before {
  background: var(--obs-void);
  border: 1px solid var(--obs-line-hi);
  border-radius: 50%;
  content: "";
  height: 7px;
  left: 4px;
  position: absolute;
  top: 0.72em;
  width: 7px;
}
.article-body ul > li:has(> a:hover)::before,
.article-body ul > li > a:hover ~ ::before {
  background: var(--obs-signal);
  border-color: var(--obs-signal);
}
.article-body ol { padding-left: 24px; }
.article-body ol > li::marker { color: var(--obs-text-3); font-family: var(--obs-mono); font-size: 0.9em; }

/* Blockquote is the note/callout in this theme (2px signal rule, already
   defined). Tighten it inside article bodies so it reads as an aside rather
   than a pull quote. */
.article-body blockquote {
  font-size: 14.5px !important;
  font-style: normal;   /* it's a note callout, not a pull quote */
  margin: 26px 0 !important;
}

/* ==========================================================================
   REQUEST FORM — dark mode
   Append to the end of style.css, in both themes.

   The submit-a-request page does not use Handlebars markup. It is rendered by
   Zendesk's React module (`new-request-form`) using Garden components, so none
   of the theme's `.form-field` rules reach it and the inputs fall back to
   Garden's default light palette — white boxes on the dark page.

   Garden components carry `data-garden-id` attributes, which is what these
   rules hook onto, with element selectors as a fallback in case the ids
   change. Everything is tokenised, so both brands pick up their own accent.

   Note: Garden renders dropdown menus and tooltips in a portal attached to
   <body>, outside the form container. Those rules are therefore global rather
   than scoped, which is deliberate.
   ========================================================================== */

/* Native controls, scrollbars and autofill follow the OS scheme unless told
   otherwise. This one line fixes a surprising amount on its own. */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* --- container ---------------------------------------------------------- */

#new-request-form,
#main-content.form {
  color: var(--obs-text) !important;
}

#new-request-form h1,
#new-request-form h2,
#new-request-form legend {
  color: var(--obs-text) !important;
}

/* --- labels, hints, errors ---------------------------------------------- */

#new-request-form label,
#new-request-form [data-garden-id="forms.input_label"],
#new-request-form [data-garden-id="forms.checkbox_label"],
#new-request-form [data-garden-id="forms.radio_label"] {
  color: var(--obs-text) !important;
  font-weight: 500;
}

#new-request-form [data-garden-id="forms.hint"],
#new-request-form [data-garden-id="forms.checkbox_hint"],
#new-request-form .form-field .hint {
  color: var(--obs-text-3) !important;
}

#new-request-form [data-garden-id="forms.input_message"] {
  color: var(--obs-text-2) !important;
}
#new-request-form [data-garden-id="forms.input_message"][class*="error"],
#new-request-form [aria-invalid="true"] ~ [data-garden-id="forms.input_message"] {
  color: var(--obs-fault, #F87171) !important;
}

/* --- text inputs, textareas, selects ------------------------------------ */

#new-request-form input[type="text"],
#new-request-form input[type="email"],
#new-request-form input[type="number"],
#new-request-form input[type="tel"],
#new-request-form input[type="url"],
#new-request-form input[type="date"],
#new-request-form input[type="search"],
#new-request-form textarea,
#new-request-form select,
#new-request-form [data-garden-id="forms.input"],
#new-request-form [data-garden-id="forms.textarea"],
#new-request-form [data-garden-id="forms.select"],
#new-request-form [data-garden-id="forms.faux_input"],
#new-request-form [data-garden-id="dropdowns.select"] {
  background-color: var(--obs-panel) !important;
  border: 1px solid var(--obs-line-hi) !important;
  border-radius: var(--obs-radius) !important;
  box-shadow: none !important;
  color: var(--obs-text) !important;
}

#new-request-form input::placeholder,
#new-request-form textarea::placeholder {
  color: var(--obs-text-3) !important;
  opacity: 1;
}

#new-request-form input:focus,
#new-request-form textarea:focus,
#new-request-form select:focus,
#new-request-form [data-garden-id="forms.input"]:focus,
#new-request-form [data-garden-id="forms.textarea"]:focus,
#new-request-form [data-garden-id="forms.faux_input"]:focus-within,
#new-request-form [data-garden-id="dropdowns.select"]:focus {
  border-color: var(--obs-signal) !important;
  box-shadow: 0 0 0 1px var(--obs-signal) !important;
  outline: none !important;
}

/* Chrome's autofill paints its own background. This is the only way to stop it. */
#new-request-form input:-webkit-autofill,
#new-request-form input:-webkit-autofill:hover,
#new-request-form input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--obs-panel) inset !important;
  -webkit-text-fill-color: var(--obs-text) !important;
}

/* --- the rich text editor ----------------------------------------------- */
/* `wysiwyg: true` in the template means the description field is a ProseMirror
   editor, which is usually the largest white box on the page. */

#new-request-form .ProseMirror,
#new-request-form [contenteditable="true"],
#new-request-form [data-garden-id="forms.fake_input"],
#new-request-form [role="textbox"] {
  background-color: var(--obs-panel) !important;
  border-color: var(--obs-line-hi) !important;
  color: var(--obs-text) !important;
}

#new-request-form .ProseMirror a { color: var(--obs-signal) !important; }
#new-request-form .ProseMirror p.is-editor-empty:first-child::before {
  color: var(--obs-text-3) !important;
}

/* Editor toolbar, if present */
#new-request-form [class*="toolbar"],
#new-request-form [role="toolbar"] {
  background-color: var(--obs-panel-hi, var(--obs-panel)) !important;
  border-color: var(--obs-line) !important;
}
#new-request-form [role="toolbar"] button { color: var(--obs-text-2) !important; }
#new-request-form [role="toolbar"] button:hover {
  background-color: var(--obs-line) !important;
  color: var(--obs-text) !important;
}

/* --- checkboxes and radios ---------------------------------------------- */

#new-request-form [data-garden-id="forms.checkbox"] + label::before,
#new-request-form [data-garden-id="forms.radio"] + label::before {
  background-color: var(--obs-panel) !important;
  border-color: var(--obs-line-hi) !important;
}
#new-request-form input[type="checkbox"]:checked + label::before,
#new-request-form input[type="radio"]:checked + label::before {
  background-color: var(--obs-signal) !important;
  border-color: var(--obs-signal) !important;
}

/* --- dropdown menus (portaled to body, so unscoped) --------------------- */

[data-garden-id="dropdowns.menu"],
[data-garden-id="dropdowns.menu_view"],
[data-garden-id="modals.tooltip_modal"] {
  background-color: var(--obs-panel) !important;
  border: 1px solid var(--obs-line-hi) !important;
  border-radius: var(--obs-radius) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
  color: var(--obs-text) !important;
}

[data-garden-id="dropdowns.item"],
[data-garden-id="dropdowns.menu"] li {
  color: var(--obs-text) !important;
}
[data-garden-id="dropdowns.item"]:hover,
[data-garden-id="dropdowns.item"][aria-selected="true"],
[data-garden-id="dropdowns.item"][data-garden-focus-visible="true"] {
  background-color: var(--obs-line) !important;
  color: var(--obs-text) !important;
}

/* --- file attachments --------------------------------------------------- */

#new-request-form [data-garden-id="forms.file_upload"],
#new-request-form .dropzone,
#new-request-form [class*="dropzone" i] {
  background-color: var(--obs-panel) !important;
  border: 1px dashed var(--obs-line-hi) !important;
  border-radius: var(--obs-radius) !important;
  color: var(--obs-text-2) !important;
}
#new-request-form [data-garden-id="forms.file"],
#new-request-form [data-garden-id="forms.file_list_item"] {
  background-color: var(--obs-panel) !important;
  border-color: var(--obs-line-hi) !important;
  color: var(--obs-text) !important;
}

/* --- submit button ------------------------------------------------------ */

#new-request-form button[type="submit"],
#new-request-form input[type="submit"],
#new-request-form [data-garden-id="buttons.button"][class*="primary"] {
  background-color: var(--obs-signal) !important;
  border: 1px solid var(--obs-signal) !important;
  border-radius: var(--obs-radius) !important;
  color: var(--obs-void) !important;
  font-weight: 600 !important;
}
#new-request-form button[type="submit"]:hover,
#new-request-form [data-garden-id="buttons.button"][class*="primary"]:hover {
  background-color: var(--obs-signal-dim, var(--obs-signal)) !important;
  filter: brightness(1.08);
}

/* Secondary / default buttons */
#new-request-form [data-garden-id="buttons.button"]:not([class*="primary"]) {
  background-color: transparent !important;
  border: 1px solid var(--obs-line-hi) !important;
  color: var(--obs-text) !important;
}
#new-request-form [data-garden-id="buttons.button"]:not([class*="primary"]):hover {
  background-color: var(--obs-panel) !important;
}

/* --- suggested articles panel ------------------------------------------- */

#new-request-form [class*="suggest" i],
#new-request-form [class*="Suggest"] {
  background-color: transparent !important;
  color: var(--obs-text-2) !important;
}
#new-request-form [class*="suggest" i] a { color: var(--obs-signal) !important; }

/* --- existing-request pages, same treatment ----------------------------- */

.request-container input,
.request-container textarea,
.request-container select,
.comment-form input,
.comment-form textarea {
  background-color: var(--obs-panel) !important;
  border: 1px solid var(--obs-line-hi) !important;
  border-radius: var(--obs-radius) !important;
  color: var(--obs-text) !important;
}

.request-table,
.requests-table {
  color: var(--obs-text) !important;
}
.request-table th,
.requests-table th {
  background: var(--obs-panel) !important;
  color: var(--obs-text-3) !important;
}
.request-table td,
.requests-table td { border-color: var(--obs-line) !important; }

/* ==========================================================================
   ARTICLE IMAGES — presentation in both themes
   Append to the end of style.css, after the layout additions block.

   Problem this solves: every screenshot in the KB is of a dark UI. The theme
   has a visitor-facing light/dark toggle, and light mode does nothing to
   images — so a visitor who switches to light gets dark rectangles punched
   into a white page, separated from it by a 1px near-white border. They read
   as holes rather than as embedded panels.

   Fix: give every screenshot a deliberate tray — padding, a panel-coloured
   surface behind it, and a border with enough contrast to hold an edge in
   both modes. In dark the tray is barely visible and the screenshot merges
   into the page as it does now. In light the tray reads as an inset panel,
   which is what a screenshot of another application should look like.
   ========================================================================== */

.article-body img,
.observis-article-page .article-body img {
  background: var(--obs-panel);
  border: 1px solid var(--obs-line-hi);
  border-radius: var(--obs-radius);
  display: block;
  height: auto;
  margin: 22px 0;
  max-width: 100%;
  padding: 6px;
}

/* Light mode needs more than a hairline. A dark screenshot on white has a
   hard edge of its own, so the border's job is to separate the tray from the
   page, and a small shadow does the rest. */
html[data-theme="light"] .article-body img,
html[data-theme="light"] .observis-article-page .article-body img {
  border-color: #C7D0D2;
  box-shadow: 0 1px 3px rgba(11, 15, 16, 0.10);
}

/* Screenshots narrower than the column sit left, aligned with the text rather
   than floating in the middle of it. Anything at or above the column width
   fills it. Both are already true from max-width; this just stops a future
   editor centring them and breaking the reading edge. */
.article-body img { margin-left: 0; margin-right: auto; }

/* An image immediately after a paragraph belongs to that paragraph. Tighten
   the gap so the pairing is visible. */
.article-body p + img,
.article-body p + p > img:only-child { margin-top: 12px; }

/* Figures, if the editor ever produces them, get the same treatment and no
   double frame. */
.article-body figure.image { margin: 22px 0; }
.article-body figure.image > img { margin: 0; }
.article-body figure.image figcaption {
  color: var(--obs-text-3) !important;
  font-size: 13px;
  margin-top: 8px;
}

/* ==========================================================================
   LANGUAGE SWITCHER
   Sits beside the theme toggle in the header. The markup is guarded by
   {{#if alternative_locales}}, so it renders only once additional languages
   are enabled in Guide — nothing appears on a single-language help centre.
   ========================================================================== */

.obs-lang { position: relative; }

.obs-lang .obs-lang-toggle {
  align-items: center;
  background: transparent;
  border: 1px solid var(--obs-line);
  border-radius: var(--obs-radius);
  color: var(--obs-text-2);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--obs-mono);
  font-size: 11px;
  gap: 6px;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  text-transform: uppercase;
  transition: border-color .15s ease, color .15s ease;
}
.obs-lang .obs-lang-toggle:hover,
.obs-lang .obs-lang-toggle[aria-expanded="true"] {
  border-color: var(--obs-signal);
  color: var(--obs-text);
}
.obs-lang .obs-lang-toggle svg { height: 14px; width: 14px; }

/* The locale name Zendesk returns can be long ("Português (Brasil)").
   Keep the control compact in the header. */
.obs-lang .obs-lang-code {
  display: inline-block;
  max-width: 104px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obs-lang .dropdown-menu {
  background: var(--obs-panel);
  border: 1px solid var(--obs-line-hi);
  border-radius: var(--obs-radius);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  min-width: 180px;
  padding: 6px;
}
.obs-lang .dropdown-menu a {
  border-radius: calc(var(--obs-radius) - 2px);
  color: var(--obs-text) !important;
  display: block;
  font-size: 13.5px;
  padding: 8px 10px;
  text-decoration: none !important;
}
.obs-lang .dropdown-menu a:hover,
.obs-lang .dropdown-menu a:focus {
  background: var(--obs-line);
  color: var(--obs-text) !important;
}

html[data-theme="light"] .obs-lang .dropdown-menu {
  box-shadow: 0 12px 30px rgba(11, 15, 16, 0.14);
}

/* Mobile nav: the control is a row in the menu rather than a chip. */
.nav-wrapper-mobile .obs-lang .obs-lang-toggle,
li.item.obs-lang .obs-lang-toggle {
  border: 0;
  justify-content: flex-start;
  padding: 10px 0;
  width: 100%;
}
li.item.obs-lang .obs-lang-code { max-width: none; }

@media (max-width: 620px) {
  .obs-lang .obs-lang-code { display: none; }
  .obs-lang .obs-lang-toggle { padding: 6px 8px; }
  li.item.obs-lang .obs-lang-code { display: inline-block; }
}