@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;
  color: #f7921d
}

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: #FFFFFF;
  color: rgba(5, 5, 5, 1);
  font-family: Arial, 'Helvetica Neue', Helvetica, 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: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  margin-top: 0;
}

h1 {
  font-size: 32px;
  color: #f7921d
}

h2 {
  font-size: 22px;
}

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

h4 {
  font-size: 16px;
}

a {
  color: rgba(0, 156, 220, 1);
  text-decoration: none;
}

a:visited {
  color: rgba(153, 51, 204, 1);
}

a:hover, a:active, a:focus {
  text-decoration: underline;
}

input,
textarea {
  color: #000;
  font-size: 14px;
}

input {
  max-width: 100%;
  box-sizing: border-box;
  transition: border 0.12s ease-in-out;
}

input:not([type="checkbox"]) {
  outline: none;
}

input:not([type="checkbox"]):focus {
  border: 1px solid rgba(0, 156, 220, 1);
}

input[disabled] {
  background-color: #ddd;
}

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 #87929D;
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: #555;
  width: 100%;
}

select:focus {
  border: 1px solid rgba(0, 156, 220, 1);
}

select::-ms-expand {
  display: none;
}

textarea {
  border: 1px solid #87929D;
  border-radius: 2px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}

textarea:focus {
  border: 1px solid rgba(0, 156, 220, 1);
}

.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, .split-button button, .section-subscribe button, .article-subscribe button, .community-follow button, .requests-table-toolbar .organization-subscribe button, .subscriptions-subscribe button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link {
  background-color: transparent;
  border: 1px solid rgba(0, 156, 220, 1);
  border-radius: 4px;
  color: rgba(0, 156, 220, 1);
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  line-height: 2.34;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  transition: background-color .12s ease-in-out, border-color .12s ease-in-out, color .15s ease-in-out;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  -webkit-touch-callout: none;
}

@media (min-width: 768px) {
  .button, .split-button button, .section-subscribe button, .article-subscribe button, .community-follow button, .requests-table-toolbar .organization-subscribe button, .subscriptions-subscribe button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link {
    width: auto;
  }
}

.button:visited, .split-button button:visited, .section-subscribe button:visited, .article-subscribe button:visited, .community-follow button:visited, .requests-table-toolbar .organization-subscribe button:visited, .subscriptions-subscribe button:visited, .pagination-next-link:visited, .pagination-prev-link:visited, .pagination-first-link:visited, .pagination-last-link:visited {
  color: rgba(0, 156, 220, 1);
}

.button:hover, .split-button button:hover, .section-subscribe button:hover, .article-subscribe button:hover, .community-follow button:hover, .requests-table-toolbar .organization-subscribe button:hover, .subscriptions-subscribe button:hover, .pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover, .button:active, .split-button button:active, .section-subscribe button:active, .article-subscribe button:active, .community-follow button:active, .requests-table-toolbar .organization-subscribe button:active, .subscriptions-subscribe button:active, .pagination-next-link:active, .pagination-prev-link:active, .pagination-first-link:active, .pagination-last-link:active, .button:focus, .split-button button:focus, .section-subscribe button:focus, .article-subscribe button:focus, .community-follow button:focus, .requests-table-toolbar .organization-subscribe button:focus, .subscriptions-subscribe button:focus, .pagination-next-link:focus, .pagination-prev-link:focus, .pagination-first-link:focus, .pagination-last-link:focus, .button.button-primary, .split-button button.button-primary, .section-subscribe button.button-primary, .section-subscribe button[data-selected="true"], .article-subscribe button.button-primary, .article-subscribe button[data-selected="true"], .community-follow button.button-primary, .requests-table-toolbar .organization-subscribe button.button-primary, .requests-table-toolbar .organization-subscribe button[data-selected="true"], .subscriptions-subscribe button.button-primary, .subscriptions-subscribe button[data-selected="true"], .button-primary.pagination-next-link, .button-primary.pagination-prev-link, .button-primary.pagination-first-link, .button-primary.pagination-last-link {
  background-color: rgba(0, 156, 220, 1);
  color: #FFFFFF;
  text-decoration: none;
}

.button.button-primary:hover, .split-button button:hover, .section-subscribe button.button-primary:hover, .section-subscribe button:hover[data-selected="true"], .article-subscribe button.button-primary:hover, .article-subscribe button:hover[data-selected="true"], .community-follow button.button-primary:hover, .requests-table-toolbar .organization-subscribe button.button-primary:hover, .requests-table-toolbar .organization-subscribe button:hover[data-selected="true"], .subscriptions-subscribe button.button-primary:hover, .subscriptions-subscribe button:hover[data-selected="true"], .button-primary.pagination-next-link:hover, .button-primary.pagination-prev-link:hover, .button-primary.pagination-first-link:hover, .button-primary.pagination-last-link:hover, .button.button-primary:focus, .split-button button.button-primary:focus, .section-subscribe button.button-primary:focus, .section-subscribe button:focus[data-selected="true"], .article-subscribe button.button-primary:focus, .article-subscribe button:focus[data-selected="true"], .community-follow button.button-primary:focus, .requests-table-toolbar .organization-subscribe button.button-primary:focus, .requests-table-toolbar .organization-subscribe button:focus[data-selected="true"], .subscriptions-subscribe button.button-primary:focus, .subscriptions-subscribe button:focus[data-selected="true"], .button-primary.pagination-next-link:focus, .button-primary.pagination-prev-link:focus, .button-primary.pagination-first-link:focus, .button-primary.pagination-last-link:focus, .button.button-primary:active, .split-button button.button-primary:active, .section-subscribe button.button-primary:active, .section-subscribe button:active[data-selected="true"], .article-subscribe button.button-primary:active, .article-subscribe button:active[data-selected="true"], .community-follow button.button-primary:active, .requests-table-toolbar .organization-subscribe button.button-primary:active, .requests-table-toolbar .organization-subscribe button:active[data-selected="true"], .subscriptions-subscribe button.button-primary:active, .subscriptions-subscribe button:active[data-selected="true"], .button-primary.pagination-next-link:active, .button-primary.pagination-prev-link:active, .button-primary.pagination-first-link:active, .button-primary.pagination-last-link:active {
  background-color: #005476;
  border-color: #005476;
}

.button[data-disabled], .split-button button[data-disabled], .section-subscribe button[data-disabled], .article-subscribe button[data-disabled], .community-follow button[data-disabled], .requests-table-toolbar .organization-subscribe button[data-disabled], .subscriptions-subscribe button[data-disabled], .pagination-next-link[data-disabled], .pagination-prev-link[data-disabled], .pagination-first-link[data-disabled], .pagination-last-link[data-disabled] {
  cursor: default;
}

.button-large, input[type="submit"] {
  cursor: pointer;
  background-color: rgba(0, 156, 220, 1);
  border: 0;
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 14px;
  line-height: 2.72;
  min-width: 190px;
  padding: 0 1.9286em;
  width: 100%;
}

@media (min-width: 768px) {
  .button-large, input[type="submit"] {
    width: auto;
  }
}

.button-large:visited, input[type="submit"]:visited {
  color: #FFFFFF;
}

.button-large:hover, .button-large:active, .button-large:focus, input[type="submit"]:hover, input[type="submit"]:active, input[type="submit"]:focus {
  background-color: #005476;
}

.button-large[disabled], input[type="submit"][disabled] {
  background-color: #ddd;
}

.button-secondary {
  color: #383838;
  border: 1px solid #87929D;
  background-color: transparent;
}

.button-secondary:visited {
  color: #383838;
}

.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: rgba(5, 5, 5, 1);
  border: 1px solid #87929D;
  background-color: #f7f7f7;
}

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

.split-button button {
  background-color: rgba(0, 156, 220, 1);
  border: 0;
  color: #FFFFFF;
  height: 32px;
  line-height: 16px;
  outline-color: rgba(0, 156, 220, 1);
}

[dir="rtl"] .split-button button:not(:only-child):first-child {
  border-left: 1px solid #FFFFFF;
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}

[dir="ltr"] .split-button button:not(:only-child):first-child {
  border-right: 1px solid #FFFFFF;
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}

.split-button button:not(:only-child):last-child {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  min-width: 26px;
  max-width: 26px;
  padding: 0;
}

[dir="rtl"] .split-button button:not(:only-child):last-child {
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}

[dir="ltr"] .split-button button:not(:only-child):last-child {
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}

/***** Tables *****/
.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}

@media (min-width: 768px) {
  .table {
    table-layout: auto;
  }
}

.table th,
.table th a {
  color: #383838;
  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 #87929D;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}

.form-field input:focus {
  border: 1px solid rgba(0, 156, 220, 1);
}

.form-field input[type="text"] {
  border: 1px solid #87929D;
  border-radius: 4px;
}

.form-field input[type="text"]:focus {
  border: 1px solid rgba(0, 156, 220, 1);
}

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

.form-field .nesty-input {
  border-radius: 4px;
  border: 1px solid #87929D;
  height: 40px;
  line-height: 40px;
  outline: none;
  vertical-align: middle;
}

.form-field .nesty-input:focus {
  border: 1px solid rgba(0, 156, 220, 1);
  text-decoration: none;
}

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

.form-field .hc-multiselect-toggle:focus {
  outline: none;
  border: 1px solid rgba(0, 156, 220, 1);
  text-decoration: none;
}

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

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

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

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

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

.form footer a {
  color: #383838;
  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: rgba(153, 51, 204, 1);
}

/***** 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: rgba(0, 156, 220, 1);
}

.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: rgba(0, 156, 220, 1);
  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: rgba(0, 156, 220, 1);
  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: rgba(5, 5, 5, 1);
  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: rgba(5, 5, 5, 1);
}

.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;
}

/***** 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: rgba(0, 156, 220, 1);
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}

.user-info > button:hover, .user-info > button:focus {
  color: rgba(0, 156, 220, 1);
  background-color: transparent;
}

.user-info > button::after {
  color: rgba(0, 156, 220, 1);
  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: rgba(0, 156, 220, 1);
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: #FFFFFF;
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 17px;
}

/***** Footer *****/
/* AIWFM-FTR-001 START: dark responsive legal and social footer (Kean) */
.footer {
  box-sizing: border-box;
  margin-top: 0;
  color: var(--aiwfm-color-surface, #fff);
  background: var(--aiwfm-color-neutral-dark, #323439);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.footer a,
.footer a:visited {
  color: var(--aiwfm-color-surface, #fff);
}

.footer-inner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: var(--aiwfm-content-max-width, 1400px);
  margin: 0 auto;
  padding: 40px 80px;
}

.footer-top,
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.footer-home-link {
  flex: 0 0 auto;
  text-decoration: none;
}

.footer-legal-list,
.footer-social-list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-legal-list {
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 8px;
}

.footer-legal-list li {
  display: flex;
  align-items: center;
}

.footer-legal-list li + li::before {
  margin: 0 12px;
  color: rgb(255 255 255 / 45%);
  content: "|";
}

.footer-legal-link,
.footer-home-link {
  text-underline-offset: 3px;
}

.footer-legal-link:hover,
.footer-home-link:hover {
  text-decoration: underline;
}

.footer-divider {
  width: 100%;
  border-top: 1px solid rgb(255 255 255 / 16%);
}

.footer-social-list {
  gap: 20px;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  background: rgb(255 255 255 / 10%);
  border-radius: 50%;
  transition: background-color 160ms ease, transform 160ms ease;
}

.footer-social-link:hover {
  background: rgb(255 255 255 / 20%);
  transform: translateY(-1px);
}

.footer-social-link:active {
  background: rgb(255 255 255 / 26%);
  transform: translateY(0);
}

.footer-social-icon {
  display: block;
  flex: 0 0 auto;
  max-width: 18px;
  max-height: 18px;
  object-fit: contain;
}

.footer a:focus-visible {
  outline: 2px solid var(--aiwfm-color-surface, #fff);
  outline-offset: 4px;
  border-radius: 4px;
}

.footer-social-link:focus-visible {
  border-radius: 50%;
}

.footer-copyright {
  flex: 0 0 auto;
  margin: 0;
  color: var(--aiwfm-color-surface, #fff);
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .footer-inner {
    padding: 36px 48px;
  }

  .footer-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  .footer-legal-list {
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  .footer-inner {
    gap: 24px;
    padding: 32px var(--aiwfm-page-gutter-mobile, 20px);
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
  }

  .footer-legal-list {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .footer-legal-list li + li::before {
    content: none;
  }

  .footer-social-list {
    flex-wrap: wrap;
    gap: 12px;
  }

  .footer-copyright {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-social-link {
    transition: none;
  }
}
/* AIWFM-FTR-001 END (Kean) */

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

/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
}

@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}

.breadcrumbs li {
  color: #383838;
  display: inline;
  font-size: 13px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumbs li + li::before {
  content: ">";
  margin: 0 4px;
}

.breadcrumbs li a:visited {
  color: rgba(0, 156, 220, 1);
}

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

.search {
  border-color: #87929D;
  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: rgba(0, 156, 220, 1);
}

.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: rgba(0, 156, 220, 1);
  color: #fff;
}

/* AIWFM-QA-FIX-009: dropped the box-shadow ring here. The `.search` wrapper
   already grows a blue border via `.search:focus-within` whenever any child,
   including this button, is focused - so this box-shadow was a second,
   independent ring drawn around the clear button's own (asymmetric, one
   squared corner) shape, on top of the wrapper's border. Together they
   looked like two mismatched rings instead of one. The wrapper's border is
   kept as the sole focus indicator. */
.search .clear-button:focus {
  outline: 0;
}

.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: rgba(0, 156, 220, 1);
}

[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: rgba(0, 156, 220, 1);
}

[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: rgba(0, 156, 220, 1);
}

[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: rgba(0, 156, 220, 1);
}

.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;
  display: none;
}

[dir="rtl"] .search-icon {
  left: auto;
  right: 15px;
}

/***** Hero component *****/
.hero {
  background-image: url(/hc/theming_assets/01KG84F5H6QFNCCKMCG0FYD0YG);
  background-position: center;
  background-size: cover;
  height: 300px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}

.hero-inner {
  position: relative;
  top: 40%;
  transform: translateY(-50%);
  max-width: 850px;
  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;
    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;
  color: #0089d7; 
}

.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 rgba(0, 156, 220, 1);
  border-radius: 4px;
  box-sizing: border-box;
  color:  rgba(0, 156, 220, 1);
  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: rgba(0, 156, 220, 1);
}

.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: #FFFFFF;
  text-decoration: none;
}

.blocks-item-internal {
 /* background-color: transparent; */
  background-color: #fff0e6;
  border: 1px solid #ddd;
}

.blocks-item-internal .icon-lock {
  height: 15px;
  width: 15px;
  bottom: 5px;
  position: relative;
}

.blocks-item-internal a {
  color: rgba(5, 5, 5, 1);
}

.blocks-item-link {
  color: rgba(0, 156, 220, 1);
  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 rgba(0, 156, 220, 1);
  text-decoration: none;
}

.blocks-item-title {
  margin-bottom: 0;
  font-size: 16px;
  font-weight:bold;
}

.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/01KG0N3NAY7XEG6XZ98FQVSJ0S);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}

.community a {
  color: rgba(0, 156, 220, 1);
  text-decoration: underline;
}

.community a:visited {
  color: rgba(153, 51, 204, 1);
}

.community a:hover, .community a:active, .community a:focus {
  color: #0F3554;
}

.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-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;
}

.recent-activity-item-meta {
  color: rgba(5, 5, 5, 1);
  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: rgba(0, 156, 220, 1);
  text-decoration: underline;
}

.recent-activity-controls a:visited {
  color: rgba(153, 51, 204, 1);
}

.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: #0F3554;
}

.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: rgba(0, 156, 220, 1);
  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;
}

@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;
}

@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: #f7921e;
}

.section-tree .see-all-articles {
  display: block;
  padding: 15px 0;
}

.article-list-item {
  font-size: 16px;
  padding: 15px 0;
}

.article-list-item a {
  color: #0089d7;
}

.icon-star {
  color: rgba(0, 156, 220, 1);
  font-size: 18px;
}

/***** Section pages *****/
.section-container {
  display: flex;
  justify-content: flex-end;
}


.section-content {
  flex: 1;
}

@media (min-width: 1024px) {
  .section-content {
    flex: 1;
    min-width: 0;
  }
}

.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: rgba(5, 5, 5, 1);
  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;
    gap: var(--aiwfm-space-24);
  }
}

.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;
}

@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;
}

/* AIWFM-QA-FIX-026: some article bodies contain Word-import artifacts -
   `<a name="_Toc...">` bookmark anchors with no `href` at all, used
   internally by Word's own table-of-contents feature, left behind when the
   content was pasted in. They were never real, clickable links, but the
   bare `a` selector below styled them blue/underlined anyway, making
   section headings like "Licensing & Activation" or "Devices" look
   interactive when clicking them does nothing. Scoping to `a[href]` excludes
   these href-less anchors, letting them render as plain inherited text,
   while real links elsewhere in article bodies are unaffected. */
.article-body a[href] {
  color: rgba(0, 156, 220, 1);
  text-decoration: underline;
}

.article-body a[href]:visited {
  color: rgba(153, 51, 204, 1);
}

.article-body a[href]:hover, .article-body a[href]:active, .article-body a[href]:focus {
  color: #0F3554;
}

/* AIWFM-QA-FIX-026 (correction): scoping the rules above to `a[href]` only
   stopped the underline, but the base theme's own global `a { color:
   rgba(0, 156, 220, 1); }` rule (style.css, ~line 233) is unconditional - it matches
   every anchor tag on the site, including these href-less bookmarks - so
   the text stayed blue. Resetting color to `inherit` here, at higher
   specificity than the global rule, lets these headings pick up their
   normal heading text color instead. */
.article-body a:not([href]) {
  color: inherit;
  text-decoration: none;
}

.article-body img {
  height: auto;
  max-width: 100%;
}

/* AIWFM-ARTICLE-001 START -----------------------------------------------------
   Article body: constrain embedded iframes/videos so fixed-width embeds (a
   representative article has a hardcoded 640px iframe) do not cause
   horizontal overflow at narrow widths. Tracked as a known defect under
   AIWFM-RESP-001/AIWFM-ARTICLE-001 in ../ZENDESK_DESIGN_UPDATE_CHECKLIST.md.
   The full Figma visual redesign for this page has not started; this is a
   narrow responsiveness fix only.
   Figma reference: WFM Support site, "Article Page" (WFM Responsive flow)
   Audit/checklist: ../ZENDESK_UPDATE_LOG.md
   -------------------------------------------------------------------------- */
.article-body iframe,
.article-body embed,
.article-body video {
  max-width: 100%;
}
/* AIWFM-ARTICLE-001 END ------------------------------------------------------- */

/* AIWFM-ARTICLE-001 START -----------------------------------------------------
   Article header: title + beige metadata/follow row (slice 1 of the full
   AIWFM-ARTICLE-001 scope; body/sidebar/footer styling follow separately).
   Desktop only for now — tablet/mobile frames for this block not yet read.
   Figma reference: WFM Support site, node 8104:17566 ("Title / Info")
   Audit/checklist: ../ZENDESK_UPDATE_LOG.md
   -------------------------------------------------------------------------- */
.aiwfm-article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--aiwfm-space-16);
  justify-content: flex-start;
}

.aiwfm-article-title {
  color: var(--aiwfm-color-text);
  flex-basis: auto;
  font-family: var(--aiwfm-font-family-base);
  font-size: 32px;
  font-weight: var(--aiwfm-font-weight-semibold);
  letter-spacing: var(--aiwfm-letter-spacing-tight);
  line-height: 48px;
  margin: 0;
}

.aiwfm-article-info-buttons {
  align-items: center;
  align-self: stretch;
  background: var(--aiwfm-color-surface-beige);
  border-radius: var(--aiwfm-radius-card);
  display: flex;
  flex-wrap: wrap;
  gap: var(--aiwfm-space-16);
  justify-content: space-between;
  padding: var(--aiwfm-space-16) var(--aiwfm-space-20);
}

.aiwfm-article-meta-group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--aiwfm-space-24);
  list-style: none;
  margin: 0;
  padding: 0;
}

.aiwfm-article-meta-item {
  align-items: center;
  color: #323439;
  display: flex;
  flex-shrink: 0;
  font-family: var(--aiwfm-font-family-base);
  font-size: 15px;
  font-weight: 500;
  gap: 8px;
  line-height: 20px;
  white-space: nowrap;
}

.aiwfm-article-meta-icon {
  flex-shrink: 0;
  height: 17px;
  width: 17px;
}

/* AIWFM-QA-FIX-012: extended to .section-subscribe so section_page.hbs's
   Follow button (now sharing this same wrapper, see below) gets the same
   bordered-pill treatment as the article page's, instead of the browser
   default button styling. */
.aiwfm-article-info-buttons .article-subscribe button,
.aiwfm-article-info-buttons .section-subscribe button {
  background: transparent;
  border: 1px solid var(--aiwfm-color-border);
  border-radius: 8px;
  color: rgba(0, 156, 220, 1);
  display: flex;
  gap: var(--aiwfm-space-4);
  height: 36px;
  justify-content: center;
  align-items: center;
  min-width: 60px;
  padding: 0 var(--aiwfm-space-16);
}

/* AIWFM-QA-FIX-001: the baseline shared subscribe-button rule (around line 385)
   sets color: #FFFFFF (white) whenever this button matches :focus,
   :hover, :active, or [data-selected="true"] - intended for baseline's
   filled-blue "selected" look. This card's background stays transparent at
   every state above, so that white text becomes invisible once the button
   regains focus after a Follow -> Unfollow toggle (Zendesk's subscribe widget
   never blurs the button once its AJAX toggle completes, so :focus keeps
   matching after the click). Re-assert the readable brand color at matching
   specificity for every one of those states so the label never goes
   white-on-transparent. */
.aiwfm-article-info-buttons .article-subscribe button:focus,
.aiwfm-article-info-buttons .article-subscribe button:hover,
.aiwfm-article-info-buttons .article-subscribe button:active,
.aiwfm-article-info-buttons .article-subscribe button[data-selected="true"],
.aiwfm-article-info-buttons .section-subscribe button:focus,
.aiwfm-article-info-buttons .section-subscribe button:hover,
.aiwfm-article-info-buttons .section-subscribe button:active,
.aiwfm-article-info-buttons .section-subscribe button[data-selected="true"] {
  color: rgba(0, 156, 220, 1);
}
/* AIWFM-ARTICLE-001 END ------------------------------------------------------- */

/* AIWFM-QA-FIX-012 (correction): section_page.hbs's .aiwfm-category-header is
   `display: block` with no gap between children, unlike article_page.hbs's
   .aiwfm-article-header (`display: flex; gap: var(--aiwfm-space-16)`), which
   is what actually supplies the space below the H1 there. Reusing the
   .aiwfm-article-info-buttons wrapper class alone does not carry that gap
   over, so the Follow button still sat flush against the H1 on section pages
   even after the wrapper was added. The template already carries a second,
   section-specific class for this exact purpose (aiwfm-section-info-buttons)
   with no rule defined for it yet - adding the missing spacing here, scoped
   to section pages only, so .aiwfm-category-header's shared block layout
   (also used by category_page.hbs) is left untouched. */
.aiwfm-section-info-buttons {
  margin-top: var(--aiwfm-space-16);
}

/* AIWFM-ARTICLE-001 START -----------------------------------------------------
   Article body: heading/paragraph typography + "Was this article helpful?"
   survey box (slice 2 of the full AIWFM-ARTICLE-001 scope; sidebar/footer
   still to follow separately). Desktop only for now.
   Figma reference: WFM Support site, Article Page body content + "Survey"
   node dev-mode CSS export (logged in ../ZENDESK_UPDATE_LOG.md).
   Audit/checklist: ../ZENDESK_UPDATE_LOG.md
   -------------------------------------------------------------------------- */
.article-body h2 {
  color: var(--aiwfm-color-text);
  font-family: var(--aiwfm-font-family-base);
  font-size: 20px;
  font-weight: var(--aiwfm-font-weight-semibold);
  letter-spacing: var(--aiwfm-letter-spacing-tight);
  line-height: 32px;
}

@media (min-width: 768px) {
  .article-body h2 {
    font-size: 24px;
  }
}

.article-body h3 {
  color: var(--aiwfm-color-text);
  font-family: var(--aiwfm-font-family-base);
  font-size: 18px;
  font-weight: var(--aiwfm-font-weight-semibold);
  letter-spacing: var(--aiwfm-letter-spacing-tight);
  line-height: 32px;
}

@media (min-width: 768px) {
  .article-body h3 {
    font-size: 22px;
  }
}

.article-body h4 {
  color: var(--aiwfm-color-text);
  font-family: var(--aiwfm-font-family-base);
  font-size: 18px;
  font-weight: var(--aiwfm-font-weight-semibold);
  letter-spacing: var(--aiwfm-letter-spacing-tight);
  line-height: 32px;
}

.article-body p {
  color: var(--aiwfm-color-text);
  font-family: var(--aiwfm-font-family-base);
  font-size: 16px;
  font-weight: var(--aiwfm-font-weight-regular);
  line-height: 24px;
}

.article-body strong,
.article-body b {
  font-weight: var(--aiwfm-font-weight-semibold);
}

.article-votes {
  align-items: center;
  background: var(--aiwfm-color-surface-beige);
  border-radius: var(--aiwfm-radius-card);
  border-top: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: var(--aiwfm-space-20);
  text-align: left;
}

.article-votes-question {
  color: var(--aiwfm-color-text);
  flex: 1 1 auto;
  font-family: var(--aiwfm-font-family-base);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  min-width: 160px;
}

@media (min-width: 768px) {
  .article-votes-question {
    font-size: 16px;
    line-height: 24px;
  }
}

.article-votes-controls {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: var(--aiwfm-space-16);
}

.article-votes-controls .article-vote {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  color: #000;
  display: flex;
  font-family: var(--aiwfm-font-family-base);
  font-size: 14px;
  font-weight: 500;
  gap: 8px;
  height: 36px;
  justify-content: center;
  line-height: 20px;
  margin: 0;
  min-width: 60px;
  padding: 0 18px;
}

@media (min-width: 768px) {
  .article-votes-controls .article-vote {
    font-size: 15px;
    padding: 0 var(--aiwfm-space-16);
  }
}

.article-votes-controls .article-vote::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  height: 20px;
  width: 20px;
}

.article-votes-controls .article-vote-up::before {
  background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M17.6469 8.00732C17.2752 7.49065 16.4994 6.87567 14.9202 6.87567H12.2902V4.80317C12.2902 3.75651 11.7701 2.78484 10.8993 2.20318C10.4018 1.87151 9.7902 1.78649 9.22186 1.96982C8.65186 2.15315 8.20513 2.57899 7.98763 3.16316L6.21436 8.54234H3.75098C2.71764 8.54234 1.87598 9.38317 1.87598 10.4173V16.2507C1.87598 17.2848 2.71764 18.1257 3.75098 18.1257H13.2544C15.3344 18.1257 15.8435 17.1148 16.2193 15.989L17.8852 10.989C18.2744 9.81898 18.1894 8.75982 17.6469 8.00732ZM3.12516 16.2507V10.4173C3.12516 10.0723 3.406 9.79234 3.75016 9.79234H5.41683V16.8757H3.75016C3.406 16.8757 3.12516 16.5957 3.12516 16.2507ZM16.6977 10.5932L15.0318 15.5932C14.736 16.4823 14.5502 16.8757 13.2535 16.8757H6.66683V9.79234C6.93683 9.79234 7.17521 9.61899 7.25938 9.36316L9.1652 3.57901C9.24103 3.37818 9.40018 3.22569 9.60435 3.15985C9.80852 3.09319 10.0268 3.12483 10.2051 3.24317C10.7276 3.5915 11.0393 4.17484 11.0393 4.80317V7.50067C11.0393 7.84567 11.3193 8.12567 11.6643 8.12567H14.9193C15.4993 8.12567 16.2676 8.23149 16.6326 8.73816C16.9293 9.14983 16.9543 9.82651 16.6977 10.5932Z' fill='%23000000'/%3E %3C/svg%3E") no-repeat center / 20px 20px;
}

.article-votes-controls .article-vote-down::before {
  background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M16.2496 1.875H6.74623C4.66623 1.875 4.15708 2.88585 3.78125 4.01169L2.1154 9.01169C1.7254 10.1817 1.81042 11.2409 2.35292 11.9934C2.72459 12.51 3.5004 13.125 5.07957 13.125H7.70957V15.1975C7.70957 16.2442 8.22963 17.2159 9.10046 17.7975C9.42546 18.0142 9.7996 18.1258 10.1779 18.1258C10.3788 18.1258 10.5804 18.0941 10.7779 18.0308C11.3479 17.8475 11.7946 17.4216 12.0121 16.8375L13.7854 11.4583H16.2488C17.2821 11.4583 18.1238 10.6175 18.1238 9.58333V3.75C18.1246 2.71583 17.2829 1.875 16.2496 1.875ZM12.7404 10.6375L10.8346 16.4217C10.7587 16.6225 10.5996 16.775 10.3954 16.8408C10.1904 16.9067 9.97213 16.8758 9.79463 16.7575C9.27213 16.4092 8.96049 15.8258 8.96049 15.1975V12.5C8.96049 12.155 8.68049 11.875 8.33549 11.875H5.08048C4.50048 11.875 3.73212 11.7692 3.36712 11.2625C3.07046 10.85 3.04546 10.1742 3.30212 9.40669L4.96798 4.40669C5.26381 3.51752 5.44957 3.12419 6.74623 3.12419H13.3329V10.2075C13.0629 10.2092 12.8246 10.3817 12.7404 10.6375ZM16.8746 9.58333C16.8746 9.92833 16.5938 10.2083 16.2496 10.2083H14.5829V3.125H16.2496C16.5938 3.125 16.8746 3.405 16.8746 3.75V9.58333Z' fill='%23000000'/%3E %3C/svg%3E") no-repeat center / 20px 20px;
}

.article-votes-count {
  display: none;
}
/* AIWFM-ARTICLE-001 END ------------------------------------------------------- */

.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: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}

.article-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}

.article-body blockquote {
  border-left: 1px solid #ddd;
  color: #383838;
  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: #383838;
}

.article-comment-count:hover {
  text-decoration: none;
}

.article-comment-count-icon {
  vertical-align: middle;
  color: rgba(0, 156, 220, 1);
  width: 18px;
  height: 18px;
}

.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;
  }
}

/* AIWFM-QA-FIX-011: this was the pre-redesign baseline `.article-votes`/
   `.article-vote` block, left in place below the AIWFM-ARTICLE-001 survey
   box rules (~line 2226). Both target the exact same `.article-votes` /
   `.article-vote` classes still used in article_page.hbs, at equal
   specificity - so this later, unrelated block silently won and undid the
   redesign: `text-align: center` overrode the redesign's `text-align: left`
   (centering the flex-grow question text and leaving a large empty gap
   before it), and `padding: 30px 0` overrode the redesign's all-sides
   padding (leaving the buttons flush against the box's left/right edges).
   Removed as dead/superseded rules rather than reordered, since nothing
   else depends on this exact block. */

.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}

.article-more-questions a {
  color: rgba(0, 156, 220, 1);
  text-decoration: underline;
}

.article-more-questions a:visited {
  color: rgba(153, 51, 204, 1);
}

.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: #0F3554;
}

.article-return-to-top {
  border-top: 1px solid #87929D;
}

@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}

.article-return-to-top a {
  color: rgba(5, 5, 5, 1);
  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;
}

.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: rgba(5, 5, 5, 1);
  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: #383838;
}

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

.share a:hover {
  text-decoration: none;
  color: rgba(0, 156, 220, 1);
}

.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: #383838;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}

.comment-callout a {
  color: rgba(0, 156, 220, 1);
  text-decoration: underline;
}

.comment-callout a:visited {
  color: rgba(153, 51, 204, 1);
}

.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: #0F3554;
}

.comment-sorter {
  display: inline-block;
  float: right;
}

.comment-sorter .dropdown-toggle {
  color: #383838;
  font-size: 13px;
}

[dir="rtl"] .comment-sorter {
  float: left;
}

.comment-wrapper {
  display: flex;
  position: relative;
}

.comment-wrapper.comment-official {
  border: 1px solid rgba(0, 156, 220, 1);
  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 0 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: rgba(0, 156, 220, 1);
}

.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}

.comment-body a {
  color: rgba(0, 156, 220, 1);
  text-decoration: underline;
}

.comment-body a:visited {
  color: rgba(153, 51, 204, 1);
}

.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: #0F3554;
}

.comment-body img {
  height: auto;
  max-width: 100%;
}

.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: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}

.comment-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}

.comment-body blockquote {
  border-left: 1px solid #ddd;
  color: #383838;
  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: #383838;
  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: rgba(0, 156, 220, 1);
}

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

.vote-voted {
  color: rgba(0, 156, 220, 1);
}

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

/***** 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/01KG0N3MXBYTKVVPJNM2J0RT6S);
  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: rgba(0, 156, 220, 1);
}

.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.community-follow button[data-selected="true"] {
  background-color: rgba(0, 156, 220, 1);
  color: #FFFFFF;
}

.community-follow button[data-selected="true"]::after {
  border-left: 1px solid #FFFFFF;
  color: #FFFFFF;
}

.community-follow button[data-selected="true"]:hover {
  background-color: #005476;
  border-color: #005476;
}

.community-follow button::after {
  border-left: 1px solid rgba(0, 156, 220, 1);
  content: attr(data-follower-count);
  color: rgba(0, 156, 220, 1);
  display: inline-block;
  font-family: Arial, 'Helvetica Neue', Helvetica, 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 rgba(0, 156, 220, 1);
  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: rgba(0, 156, 220, 1);
  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: rgba(153, 51, 204, 1);
}

.striped-list .meta-group {
  margin: 5px 0;
}

.striped-list-count {
  color: #383838;
  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: rgba(5, 5, 5, 1);
    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: rgba(0, 156, 220, 1);
}

.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: #383838;
}

.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: Arial, 'Helvetica Neue', Helvetica, 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 a {
  color: rgba(0, 156, 220, 1);
  text-decoration: underline;
}

.post-body a:visited {
  color: rgba(153, 51, 204, 1);
}

.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: #0F3554;
}

.post-body img {
  height: auto;
  max-width: 100%;
}

.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: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}

.post-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}

.post-body blockquote {
  border-left: 1px solid #ddd;
  color: #383838;
  font-style: italic;
  padding: 0 15px;
}

.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}

.post-comment-count {
  color: #383838;
}

.post-comment-count:hover {
  text-decoration: none;
}

.post-comment-count .icon-comments {
  color: rgba(0, 156, 220, 1);
  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-flex;
  line-height: 18px;
  vertical-align: middle;
}

.profile-info .community-badge-title {
  padding: 2px 8px;
  line-height: 20px;
}

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

.community-badge-container-achievements > .community-badge-titles {
  margin-left: calc(28px - 0.5em);
}

[dir="rtl"] .community-badge-container-achievements > .community-badge-titles {
  margin-right: calc(28px - 0.5em);
}

.community-name-and-title-badges {
  display: flex;
  flex-wrap: wrap;
}

.community-badge {
  margin: 2px;
}

.community-badge-achievements {
  display: block;
  height: 16px;
  white-space: nowrap;
  width: 16px;
}

.profile-info .community-badge-achievements {
  height: 40px;
  width: 40px;
}

.community-title-badges {
  flex-basis: 100%;
  margin-top: 15px;
}

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

.community-badge-achievements img {
  width: 100%;
  height: 100%;
}

.community-badge-titles img {
  width: 20px;
  height: 20px;
}

.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: calc(45px / 2);
  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 rgba(0, 156, 220, 1);
}

.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}

.collapsible-nav-list li {
  color: rgba(5, 5, 5, 1);
  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: rgba(5, 5, 5, 1);
  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 rgba(0, 156, 220, 1);
    order: 1;
  }
}

.collapsible-nav-list li[aria-selected="true"] a,
.collapsible-nav-list li.current a {
  color: rgba(5, 5, 5, 1);
}

.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: calc(45px / 2);
  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 rgba(0, 156, 220, 1);
}

.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: #f2f2f2;
  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: #383838;
  font-size: 13px;
}

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

.no-activities {
  color: #383838;
}

/***** Request *****/
.request-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .request-container {
    align-items: flex-start;
    flex-direction: row;
  }
}

.request-container .comment-container {
  min-width: 0;
}

.request-breadcrumbs {
  margin-bottom: 40px;
}

@media (min-width: 1024px) {
  .request-breadcrumbs {
    margin-bottom: 60px;
  }
}

.request-main {
  flex: 1 0 auto;
  order: 1;
}

.request-main .comment-fields, .request-main .request-submit-comment {
  display: none;
}

.request-main .comment-fields.shown {
  display: block;
}

.request-main .request-submit-comment.shown {
  display: inline;
}

@media (min-width: 1024px) {
  .request-main {
    flex: 0 0 66%;
    order: 0;
    min-width: 0;
  }
}

.request-main .comment-form-controls {
  display: block;
}

.request-main .comment-ccs {
  display: block;
}

.request-main .comment-show-container {
  border-radius: 2px;
  border: 1px solid #ddd;
  color: #383838;
  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 rgba(0, 156, 220, 1);
}

.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 rgba(0, 156, 220, 1);
}

.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: #f7f7f7;
    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%;
}

.request-details dd::after {
  content: "\A";
  white-space: pre;
}

.request-details dt {
  color: #383838;
  width: 40%;
}

.request-details .request-collaborators {
  display: inline-block;
}

.request-attachments dt, .request-attachments dd {
  width: 100%;
}

.request-attachments dd {
  margin: 10px 0 0 0;
}

.request-form textarea {
  min-height: 120px;
}

.request-follow-up {
  padding-top: 20px;
}

/***** Pagination *****/
.pagination {
  margin: 20px 0;
  text-align: center;
}

.pagination-next, .pagination-prev, .pagination-first, .pagination-last {
  display: inline-block;
}

.pagination-first-link, .pagination-last-link {
  padding: 0 10px;
}

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

.pagination-next-link {
  padding-right: 10px;
}

.pagination-next-text {
  margin-right: 10px;
}

[dir="rtl"] .pagination-next-link {
  padding-left: 10px;
}

[dir="rtl"] .pagination-next-text {
  margin-left: 10px;
}

.pagination-prev-link {
  padding-left: 10px;
}

.pagination-prev-text {
  margin-left: 10px;
}

[dir="rtl"] .pagination-prev-link {
  padding-right: 10px;
}

[dir="rtl"] .pagination-prev-text {
  margin-right: 10px;
}

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

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

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

.meta-group * {
  display: inline;
}

.meta-data {
  color: #383838;
  font-size: 13px;
}

.meta-data:not(:last-child)::after {
  content: "\00B7";
  margin: 0 5px;
}

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

.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;
}

.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: #383838;
  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 rgba(0, 156, 220, 1);
  border-radius: 4px;
  color: rgba(0, 156, 220, 1);
  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: #f2f2f2;
  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: #383838;
  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: #383838;
  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: #f7f7f7;
}

@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: #FFFFFF;
  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: rgba(5, 5, 5, 1);
}

.search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current {
  background-color: #e9ebed;
  text-decoration: none;
}

.search-results-sidebar .sidenav-subitem {
  unicode-bidi: embed;
}

.search-results-sidebar .sidenav-tag {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-grow: 0;
}

.search-results-sidebar .sidenav-tag .content-tag {
  background: #E9EBED;
  border-radius: 4px;
  padding: 4px 12px;
  text-decoration: none;
}

.search-results-sidebar .sidenav-tag .content-tag .label {
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  letter-spacing: -0.000427656px;
  color: #49545C;
  flex-grow: 0;
  vertical-align: middle;
  display: inline-block;
}

.search-results-sidebar .sidenav-tag .content-tag .close-icon {
  color: #555555;
  vertical-align: middle;
  display: inline-block;
}

.search-results-sidebar .collapsible-sidebar {
  margin-bottom: 30px;
}

.search-results-sidebar .collapsible-sidebar[aria-expanded="false"] .multibrand-filter-list {
  display: none;
}

@media (min-width: 1024px) {
  .search-results-sidebar .collapsible-sidebar[aria-expanded="false"] .multibrand-filter-list {
    display: block;
  }
}

.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n + 6) {
  display: none;
}

.search-results-sidebar .multibrand-filter-list .doc-count {
  color: #666;
}

.search-results-sidebar .see-all-filters {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  padding: 10px;
  color: rgba(0, 156, 220, 1);
}

.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: ' \2304';
  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-list > li h2 {
  margin-bottom: 0;
}

.search-results .meta-group {
  display: block;
  align-items: center;
  clear: both;
  color: #666;
}

@media (min-width: 1024px) {
  .search-results .meta-group {
    display: flex;
  }
}

.search-results .meta-group > li {
  display: block;
}

@media (min-width: 1024px) {
  .search-results .meta-group > li {
    display: inline;
  }
}

@media (min-width: 1024px) {
  .search-results .meta-group li:first-child {
    flex: 1;
  }
}

.search-results .meta-group .meta-data {
  color: inherit;
}

[dir="ltr"] .search-results .meta-group .meta-data:not(:last-child) {
  margin-right: 20px;
}

[dir="rtl"] .search-results .meta-group .meta-data:not(:last-child) {
  margin-left: 20px;
}

.search-results .meta-group .meta-data::after {
  content: none;
}

.search-results-description {
  margin-top: 10px;
  word-break: break-word;
}

.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: #1F73B7;
}

.search-results .no-results .action-prompt a:visited {
  color: #1F73B7;
}

.search-result-title {
  font-size: 16px;
  display: inline-block;
}

[dir="ltr"] .search-result-icons {
  float: right;
}

[dir="rtl"] .search-result-icons {
  float: left;
}

.search-result-votes, .search-result-meta-count {
  color: #383838;
  display: inline-block;
  font-size: 13px;
  padding: 4px 5px;
  position: relative;
}

.search-result-votes-icon, .search-result-meta-count-icon {
  color: rgba(0, 156, 220, 1);
  vertical-align: middle;
  width: 13px;
  height: 13px;
}

[dir="ltr"] .search-result-votes, [dir="ltr"] .search-result-meta-count {
  margin-left: 5px;
}

[dir="ltr"] .search-result-votes::before, [dir="ltr"] .search-result-meta-count::before {
  margin-right: 3px;
}

[dir="rtl"] .search-result-votes, [dir="rtl"] .search-result-meta-count {
  margin-right: 5px;
}

[dir="rtl"] .search-result-votes::before, [dir="rtl"] .search-result-meta-count::before {
  margin-left: 3px;
}

.search-result .meta-group {
  align-items: center;
}

.search-result-breadcrumbs {
  margin: 0;
}

@media (min-width: 1024px) {
  .search-result-breadcrumbs {
    display: table-row;
  }
}

@media (min-width: 1024px) {
  .search-result-breadcrumbs li {
    display: table-cell;
  }
}

/* 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 .2s;
  width: 100%;
  color: #555;
}

.notification a {
  color: #158ec2;
}

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

.notification-icon, .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: .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-menu {
  background: #fff;
  border: 1px solid #87929D;
  border-radius: 3px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  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[aria-expanded="true"] {
  display: block;
}

.dropdown-menu [role="separator"] {
  border-bottom: 1px solid #e9ebed;
  margin: 4px 0;
}

.dropdown-menu [role="menuitem"] {
  color: #333;
  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"] {
  padding: 7px 20px 7px 40px;
}

.dropdown-menu [role="menuitem"]:hover, .dropdown-menu [role="menuitem"]:focus {
  background: #f3f3f3;
  text-decoration: none;
  color: #333;
}

.dropdown-menu [role="menuitem"][aria-selected="true"] {
  cursor: default;
}

.dropdown-menu [role="menuitem"][aria-selected="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 {
  margin-left: 0;
  margin-right: 10px;
  float: left;
}

.dropdown-menu [role="menuitem"][hidden], .dropdown-menu [role="menuitem"][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 #87929D;
}

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

/***** Custom Header Text Code by Matt *****/

.abvs-headtext {
  color: #FFFFFF;
}

.abvs-headtext h1 {
  font-size: 32px;
  color: #000000;
  margin: 0px 0px 24px 0px;
 /* text-shadow: 1px 1px 1px black, 0 0 0.01em #0089d7, 0 0 0.01em #0089d7; */
}

/* AIWFM-HERO-001 START: remove unintended mobile heading shadow */
@media (max-width: 768px) {
  .abvs-headtext h1 {
    margin: 0 0 10px;
    color: #000000;
    font-size: 24px;
    text-shadow: none;
  }
}
/* AIWFM-HERO-001 END */

.abvs-subtext {
  color: #ffffff;
}

.abvs-subtext h3 {
  font-size: 14px;
  color: #000000;
  margin: 84px 0px 0px 0px; 
  font-style:italic;
 /* text-shadow: 1px 1px 2px black, 0 0 0.01em #0089d7, 0 0 0.01em #0089d7; */
}

@media (max-width: 768px) {
.abvs-subtext h3 {
  font-size: 12px;
  color: #ffffff;
  margin: 112px 0px 10px 0px; 
  font-style:italic;
  text-shadow: 1px 1px 2px black, 0 0 0.01em #0089d7, 0 0 0.01em #0089d7;
	}
}
/*MW-Notificaiton Banner CSS */
/* Common, default styles for the notification box */

/* change the background color by editing "background"  */
/* change the text color by editing "color"  */
.ns-box {
	position: relative;
	background: rgba(153, 51, 204,0.85);
	padding: 5px 1px 1px 20px;
	line-height: 1.4;
	z-index: 1000;
	pointer-events: none;
	color: rgba(250,251,255,0.95);
	font-size: 85%;
  border-bottom: 1px solid #DDD;
}

.ns-box.ns-show {
	pointer-events: auto;
}

.ns-box a {
	color: inherit;
  opacity: 0.7;
	font-weight: 700;
}

.ns-box a:hover,
.ns-box a:focus {
	opacity: 1;
}

.ns-box p {
    margin: 0;
}

.ns-box.ns-show,
.ns-box.ns-visible {
	pointer-events: auto;
}

.ns-close {
	width: 20px;
	height: 20px;
	position: absolute;
	right: 4px;
	top: 4px;
	overflow: hidden;
	text-indent: 100%;
	cursor: pointer;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.ns-close:hover,
.ns-close:focus {
	outline: none;
}

.ns-close::before,
.ns-close::after {
	content: '';
	position: absolute;
	width: 3px;
	height: 60%;
	top: 50%;
	left: 50%;
	background: #6e6e6e;
}

.ns-close:hover::before,
.ns-close:hover::after {
	background: #fff;
}

.ns-close::before {
	-webkit-transform: translate(-50%,-50%) rotate(45deg);
	transform: translate(-50%,-50%) rotate(45deg);
}

.ns-close::after {
	-webkit-transform: translate(-50%,-50%) rotate(-45deg);
	transform: translate(-50%,-50%) rotate(-45deg);
}

.ns-box-inner i {
    color: #fff;
    font-size: 3.8em;
}

.megaphone:before {
  content:'\1F4E3';
  font-family: "entypo";
  font-size: 2.2em;
}

/* Top bar notifications */
.ns-box.ns-bar {
	top: 0;
	left: 0;
	width: 100%;
}

.ns-bar .ns-close {
	background: transparent;
	margin-top: 15px;
	right: 20px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.ns-bar .ns-close::before,
.ns-bar .ns-close::after {
	background: #b7b5b3;
}

[class^="ns-effect-"].ns-bar.ns-hide,
[class*=" ns-effect-"].ns-bar.ns-hide {
	-webkit-animation-direction: reverse;
	animation-direction: reverse;
}



/* Slide on top */
.ns-effect-slidetop {
	box-shadow: inset 5.4em 0 rgba(0,0,0,0.1);
}

.ns-effect-slidetop .icon {
	position: absolute;
	display: block;
	font-size: 109%;
	top: 50%;
	left: 1em;
	-webkit-transform: translate3d(0,-20%,0);
	transform: translate3d(0,-20%,0);
}

.ns-effect-slidetop p {
	padding: 0 3.2em;
	font-size: 1.2em;
	display: inline-block;
}

.ns-effect-slidetop .ns-close::before,
.ns-effect-slidetop .ns-close::after {
	width: 2px;
	background: #fff;
}

.ns-effect-slidetop .ns-close:hover::before,
.ns-effect-slidetop .ns-close:hover::after {
	background: #fff;
}

.ns-effect-slidetop.ns-show .icon,
.ns-effect-slidetop.ns-show p {
	-webkit-animation-name: animScaleUp;
	animation-name: animScaleUp;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.ns-effect-slidetop.ns-show p {
	-webkit-animation-name: animFade;
	animation-name: animFade;
}

@-webkit-keyframes animScaleUp {
	0% { opacity: 0; -webkit-transform: translate3d(0,-50%,0) scale3d(0,0,1); }
	100% { opacity: 1; -webkit-transform: translate3d(0,-50%,0) scale3d(1,1,1); }
}

@keyframes animScaleUp {
	0% { opacity: 0; -webkit-transform: translate3d(0,-50%,0) scale3d(0,0,1); transform: translate3d(0,-50%,0) scale3d(0,0,1); }
	100% { opacity: 1; -webkit-transform: translate3d(0,-50%,0) scale3d(1,1,1); transform: translate3d(0,-50%,0) scale3d(1,1,1); }
}

.ns-effect-slidetop.ns-show,
.ns-effect-slidetop.ns-hide {
	-webkit-animation-name: animSlideTop;
	animation-name: animSlideTop;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
}

@-webkit-keyframes animSlideTop {
	0% { -webkit-transform: translate3d(0,-100%,0); }
	100% { -webkit-transform: translate3d(0,0,0); }
}

@keyframes animSlideTop {
	0% { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
	100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
}

/* AIWFM-TOK-001 START: shared design tokens */
:root {
  /* Colors */
  --aiwfm-color-primary: #0040dd;
  --aiwfm-color-neutral-dark: #323439;
  --aiwfm-color-text: #000;
  --aiwfm-color-text-muted: #72757a;
  --aiwfm-color-border: #dddfe5;
  --aiwfm-color-surface: #fff;
  --aiwfm-color-icon-background: #fff3eb;
  --aiwfm-color-focus: #0040dd;
  --aiwfm-color-accent: #ff6600;
  --aiwfm-color-surface-beige: #f8f6f3; /* AIWFM-CATEGORY-001: Figma "Beige BG" */
  --aiwfm-color-section-active-bg: #f9f8f5; /* AIWFM-CATNAV-001: active section row background */

  /* Typography */
  --aiwfm-font-family-base: Inter, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --aiwfm-font-size-heading: 24px;
  --aiwfm-font-size-body: 16px;
  --aiwfm-font-size-small: 14px;
  --aiwfm-font-weight-regular: 400;
  --aiwfm-font-weight-semibold: 600;
  --aiwfm-line-height-heading: 32px;
  --aiwfm-line-height-body: 24px;
  --aiwfm-line-height-small: 20px;
  --aiwfm-letter-spacing-tight: -0.2px;

  /* Layout */
  --aiwfm-content-max-width: 1400px;
  --aiwfm-page-gutter-desktop: 36px;
  --aiwfm-page-gutter-mobile: 20px;

  /* Shared spacing */
  --aiwfm-space-4: 4px;
  --aiwfm-space-8: 8px;
  --aiwfm-space-12: 12px;
  --aiwfm-space-16: 16px;
  --aiwfm-space-20: 20px;
  --aiwfm-space-24: 24px;
  --aiwfm-space-32: 32px;
  --aiwfm-space-40: 40px;

  /* Shape */
  --aiwfm-radius-card: 16px;
  --aiwfm-radius-control: 999px;

  /* Effects */
  --aiwfm-shadow-card-hover: 0 10px 10px rgb(0 0 0 / 10%);

  /* Gradients */
  /* AIWFM-CATEGORY-001: Figma "Header Gradient [02]" colour stops, shared by the
     home hero and the category search band. Only the angle differs between the
     two (home 83.72deg, category 88.88deg), so the stops live here and each
     page supplies its own angle:
       background: linear-gradient(88.88deg, var(--aiwfm-gradient-header-stops)); */
  --aiwfm-gradient-header-stops: #fee3ce 0%, #ffe3d5 15.93%, #ffe4dd 28.34%,
    #ffe1e6 38.38%, #fedfdc 48.38%, #ffd6ca 58.17%, #ffd2b5 67.59%,
    #ffc7a2 77.77%, #fec085 87.84%, #ffc778 100%;
}
/* AIWFM-TOK-001 END */

/* AIWFM-CAT-001 START --------------------------------------------------------
   Home page: category cards
   Figma reference: WFM Support site, node 8118:2210
   Audit/checklist: ../ZENDESK_UPDATE_LOG.md
   -------------------------------------------------------------------------- */

.categories {
  box-sizing: border-box;
  /* AIWFM-RESP-001: --aiwfm-scrollbar-width is measured live in script.js
     and replaces the old hardcoded 16px guess, which caused ~1px horizontal
     overflow on browsers/platforms with a different scrollbar width (or
     none at all, e.g. mobile). Falls back to the original 16px assumption
     before script.js runs or if JS is unavailable. */
  width: calc(100vw - var(--aiwfm-scrollbar-width, 16px));
  max-width: var(--aiwfm-content-max-width);
  margin-left: 50%;
  padding: var(--aiwfm-space-40) var(--aiwfm-page-gutter-desktop);
  font-family: var(--aiwfm-font-family-base);
  transform: translateX(-50%);
}

.categories-heading {
  margin: 0 0 var(--aiwfm-space-24);
  color: var(--aiwfm-color-text);
  font-size: var(--aiwfm-font-size-heading);
  font-weight: var(--aiwfm-font-weight-semibold);
  line-height: var(--aiwfm-line-height-heading);
  letter-spacing: var(--aiwfm-letter-spacing-tight);
  text-align: center;
}

.categories .blocks-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 38px var(--aiwfm-space-40);
  margin: 0;
  padding: 0;
  list-style: none;
}

.categories .blocks-item {
  width: auto;
  height: 108px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--aiwfm-color-surface);
  border: 1px solid var(--aiwfm-color-border);
  border-radius: var(--aiwfm-radius-card);
  transition: border-color 160ms ease, box-shadow 160ms ease,
    transform 160ms ease;
}

/* AIWFM-QA-FIX-013: border-color: transparent here dropped the top edge
   entirely on hover/focus, since --aiwfm-shadow-card-hover only casts a
   downward shadow with no top-side coverage - card blended into the white
   page background with no delineation. Keep the existing border color so
   the top edge stays visible while the elevated hover shadow still applies. */
.categories .blocks-item:hover,
.categories .blocks-item:focus-within {
  border-color: var(--aiwfm-color-border);
  box-shadow: var(--aiwfm-shadow-card-hover);
  transform: translateY(-1px);
}

.categories .blocks-item-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--aiwfm-space-24);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: var(--aiwfm-space-20);
  color: var(--aiwfm-color-text);
  text-align: left;
  text-decoration: none;
}

.categories .blocks-item-link:focus-visible {
  outline: 2px solid var(--aiwfm-color-focus);
  outline-offset: -3px;
}

.blocks-item-icon {
  position: relative;
  display: none;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  background: var(--aiwfm-color-icon-background);
  border-radius: 50%;
  transition: background-color 160ms ease;
}

.blocks-item-icon::before {
  position: absolute;
  inset: 14px;
  content: "";
  background-color: var(--aiwfm-color-neutral-dark);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 160ms ease;
}

.blocks-item[data-category-id="45752484277140"] .blocks-item-icon,
.blocks-item[data-category-id="45752857536916"] .blocks-item-icon,
.blocks-item[data-category-id="45752888253972"] .blocks-item-icon,
.blocks-item[data-category-id="45756927880340"] .blocks-item-icon,
.blocks-item[data-category-id="45757332766228"] .blocks-item-icon,
.blocks-item[data-category-id="45758578168724"] .blocks-item-icon,
.blocks-item[data-category-id="45758970385940"] .blocks-item-icon,
.blocks-item[data-category-id="53901156238100"] .blocks-item-icon {
  display: block;
}

.blocks-item[data-category-id="45752484277140"] .blocks-item-icon::before {
  -webkit-mask-image: url(/hc/theming_assets/01M00V9S56GFETVF2D50FBW3M9);
  mask-image: url(/hc/theming_assets/01M00V9S56GFETVF2D50FBW3M9);
}

.blocks-item[data-category-id="45752857536916"] .blocks-item-icon::before {
  -webkit-mask-image: url(/hc/theming_assets/01M00V9QCT4YDPVVN509E8CGY8);
  mask-image: url(/hc/theming_assets/01M00V9QCT4YDPVVN509E8CGY8);
}

.blocks-item[data-category-id="45752888253972"] .blocks-item-icon::before {
  -webkit-mask-image: url(/hc/theming_assets/01M00V9SZ34BWVJBC0AAZ7FXBX);
  mask-image: url(/hc/theming_assets/01M00V9SZ34BWVJBC0AAZ7FXBX);
}

.blocks-item[data-category-id="45756927880340"] .blocks-item-icon::before {
  -webkit-mask-image: url(/hc/theming_assets/01M00V9NHXNN1GMEAB7PS08N1J);
  mask-image: url(/hc/theming_assets/01M00V9NHXNN1GMEAB7PS08N1J);
}

.blocks-item[data-category-id="45757332766228"] .blocks-item-icon::before {
  -webkit-mask-image: url(/hc/theming_assets/01M00V9PF9XQWNCHB3RQMB19CT);
  mask-image: url(/hc/theming_assets/01M00V9PF9XQWNCHB3RQMB19CT);
}

.blocks-item[data-category-id="45758578168724"] .blocks-item-icon::before {
  -webkit-mask-image: url(/hc/theming_assets/01M00V9R8YFXM7Q4Q9FCEW1R9T);
  mask-image: url(/hc/theming_assets/01M00V9R8YFXM7Q4Q9FCEW1R9T);
}

.blocks-item[data-category-id="45758970385940"] .blocks-item-icon::before {
  -webkit-mask-image: url(/hc/theming_assets/01M3QJPQM1T5BZVRRWBV9VPS4T);
  mask-image: url(/hc/theming_assets/01M3QJPQM1T5BZVRRWBV9VPS4T);
}

.blocks-item[data-category-id="53901156238100"] .blocks-item-icon::before {
  -webkit-mask-image: url(/hc/theming_assets/01M3QJPP0228FN0AVNAXH89JH5);
  mask-image: url(/hc/theming_assets/01M3QJPP0228FN0AVNAXH89JH5);
}

.categories .blocks-item:hover .blocks-item-icon,
.categories .blocks-item:focus-within .blocks-item-icon {
  background-color: var(--aiwfm-color-accent);
}

.categories .blocks-item:hover .blocks-item-icon::before,
.categories .blocks-item:focus-within .blocks-item-icon::before {
  background-color: var(--aiwfm-color-surface);
}

.blocks-item-content {
  min-width: 0;
}

.categories .blocks-item-title,
.categories .blocks-item-description {
  display: block;
  color: var(--aiwfm-color-text);
  text-transform: none;
}

.categories .blocks-item-title {
  margin: 0 0 var(--aiwfm-space-4);
  font-size: var(--aiwfm-font-size-body);
  font-weight: var(--aiwfm-font-weight-semibold);
  line-height: var(--aiwfm-line-height-body);
  letter-spacing: var(--aiwfm-letter-spacing-tight);
}

.categories .blocks-item-description {
  margin: 0;
  font-size: var(--aiwfm-font-size-small);
  font-weight: var(--aiwfm-font-weight-regular);
  line-height: var(--aiwfm-line-height-small);
}

/* AIWFM-QA-FIX-030: Figma's tablet frame (~782px) shows these category
   cards as a single, full-width column - not the 2-column desktop grid.
   Previously the only breakpoint here was max-width: 767px (mobile), so
   tablet widths (768-1023px) fell through to the same 2-column grid as
   desktop. Card-internal layout (icon + text side by side) is unchanged;
   only the outer grid's column count drops to 1 across the whole
   tablet+mobile range. */
@media (max-width: 1023px) {
  .categories .blocks-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .categories {
    padding: var(--aiwfm-space-32) var(--aiwfm-page-gutter-mobile);
  }

  .categories .blocks-list {
    grid-template-columns: 1fr;
    gap: var(--aiwfm-space-16);
  }

  .categories .blocks-item {
    height: auto;
    min-height: 108px;
  }

  .categories .blocks-item-link {
    gap: var(--aiwfm-space-16);
  }
}

/* AIWFM-CAT-001 END ---------------------------------------------------------- (Added by Nino) */

/* AIWFM-HDR-001 START --------------------------------------------------------
   Shared announcement bar and header
   Figma reference: WFM Support site, nodes 8118:2186 and 8118:2192
   Audit/checklist: ../ZENDESK_UPDATE_LOG.md
   -------------------------------------------------------------------------- */

.aiwfm-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.aiwfm-announcement-region:empty {
  display: none;
}

.aiwfm-announcement-region .ns-box {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: var(--aiwfm-space-16) 80px;
  border: 0;
  background: #ffe0cc;
  box-shadow: none;
  color: var(--aiwfm-color-text);
  font-family: var(--aiwfm-font-family-base);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  pointer-events: auto;
}

.aiwfm-announcement-region .ns-box-inner {
  display: flex;
  align-items: center;
  min-width: 0;
}

.aiwfm-announcement-region .megaphone {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  background: center / 20px 20px no-repeat
    url(/hc/theming_assets/01M0G9SCXWA1YSTHBZ34H3ZC33);
}

.aiwfm-announcement-region .megaphone::before {
  content: none;
}

.aiwfm-announcement-region .ns-box p,
.aiwfm-announcement-region .ns-effect-slidetop p {
  min-width: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  overflow-wrap: anywhere;
}

.aiwfm-announcement-region .ns-box p > :first-child {
  margin-top: 0;
}

.aiwfm-announcement-region .ns-box p > :last-child {
  margin-bottom: 0;
}

.aiwfm-announcement-region .ns-box a {
  color: inherit;
  font-weight: 700;
  opacity: 1;
  text-decoration: none;
}

.aiwfm-announcement-region .ns-box a:hover,
.aiwfm-announcement-region .ns-box a:focus {
  color: inherit;
  opacity: 1;
  text-decoration: underline;
}

.aiwfm-announcement-region .ns-close,
.aiwfm-announcement-region .ns-bar .ns-close {
  position: relative;
  top: auto;
  right: auto;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin: 0 0 0 var(--aiwfm-space-16);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: var(--aiwfm-radius-control);
  background: center / 16px 16px no-repeat url(/hc/theming_assets/01M0G9SGATMC3113BPSAE42V1T);
  color: var(--aiwfm-color-text);
  cursor: pointer;
  text-indent: -9999px;
  transform: none;
}

.aiwfm-announcement-region .ns-close::before,
.aiwfm-announcement-region .ns-close::after {
  content: none;
}

.aiwfm-announcement-region .ns-close:hover {
  background-color: rgb(0 0 0 / 5%);
}

.aiwfm-announcement-region .ns-close:focus-visible {
  outline: 2px solid var(--aiwfm-color-focus);
  outline-offset: 2px;
}

.aiwfm-header.header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: none;
  height: 68px;
  margin: 0;
  padding: 0 80px;
  border-bottom: 1px solid rgb(0 0 0 / 5%);
  background: var(--aiwfm-color-surface);
  color: var(--aiwfm-color-text);
  font-family: var(--aiwfm-font-family-base);
}

.aiwfm-header-brand {
  min-width: 0;
}

.aiwfm-header .aiwfm-header-brand-link,
.aiwfm-header .aiwfm-header-brand-link:hover,
.aiwfm-header .aiwfm-header-brand-link:focus,
.aiwfm-header .aiwfm-header-brand-link:active {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--aiwfm-color-text);
  text-decoration: none;
}

.aiwfm-header .aiwfm-header-brand-link:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--aiwfm-color-focus);
  outline-offset: 4px;
}

.aiwfm-header .aiwfm-header-brand-link img {
  display: block;
  width: 226px;
  max-width: 100%;
  height: auto;
  max-height: 22px;
}

.aiwfm-header-actions,
.aiwfm-header .nav-wrapper-desktop {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.aiwfm-header .aiwfm-language-toggle,
.aiwfm-header .aiwfm-user-control {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  margin: 0;
  border: 0;
  border-radius: 10px;
  color: var(--aiwfm-color-surface);
  cursor: pointer;
  text-decoration: none;
}

.aiwfm-header .aiwfm-language-toggle {
  width: 50px;
  min-width: 50px;
  padding: 9px;
  color: #000;
  background: transparent;
}

.aiwfm-header .aiwfm-user-control {
  width: 52px;
  min-width: 52px;
  padding: 9px 10px;
  background: #066fac;
}

.aiwfm-header .aiwfm-user-menu .aiwfm-user-control {
  width: 52px;
}

/* AIWFM-HDR-002: both header controls share the same grey hover/active
   background (#f5f6f9), matching the Figma spec. The profile icon
   (header-user.svg) is a fixed-white asset, so its own hover/active state
   also darkens the icon via filter so it stays visible on the light
   background, mirroring the language icon's already-dark default fill.
   AIWFM-QA-FIX-008: also applied on :focus. Without it, the base theme's
   `.user-info > button:focus { background-color: transparent; }` rule
   (style.css, "User info in header" section) was the only rule matching a
   keyboard-focused, non-hovered profile button - e.g. right after closing
   its dropdown with Escape while focus remains on the toggle - so the
   control rendered with no background at all. */
.aiwfm-header .aiwfm-language-toggle:hover,
.aiwfm-header .aiwfm-language-toggle:active,
.aiwfm-header .aiwfm-language-toggle:focus,
.aiwfm-header .aiwfm-user-control:hover,
.aiwfm-header .aiwfm-user-control:active,
.aiwfm-header .aiwfm-user-control:focus,
.aiwfm-header .user-info > .aiwfm-user-control:hover,
.aiwfm-header .user-info > .aiwfm-user-control:active,
.aiwfm-header .user-info > .aiwfm-user-control:focus {
  color: #000;
  background: #f5f6f9;
  text-decoration: none;
}

.aiwfm-header .aiwfm-user-control:hover .aiwfm-header-control-icon,
.aiwfm-header .aiwfm-user-control:active .aiwfm-header-control-icon,
.aiwfm-header .aiwfm-user-control:focus .aiwfm-header-control-icon {
  filter: brightness(0);
}

.aiwfm-header .aiwfm-language-toggle:focus-visible,
.aiwfm-header .aiwfm-user-control:focus-visible,
.aiwfm-header .menu-button-mobile:focus-visible {
  outline: 2px solid var(--aiwfm-color-focus);
  outline-offset: 2px;
}

.aiwfm-header-control-icon,
.aiwfm-header-chevron {
  display: block;
}

.aiwfm-header .aiwfm-language-toggle .aiwfm-header-control-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

.aiwfm-header .aiwfm-user-control .aiwfm-header-control-icon {
  flex: 0 0 14px;
  width: 14px;
  height: 18px;
}

.aiwfm-header .aiwfm-header-chevron {
  flex: 0 0 8px;
  width: 8px;
  height: 6px;
  margin-left: 6px;
}

.aiwfm-header .aiwfm-user-control .aiwfm-header-chevron {
  margin-left: 10px;
}

.aiwfm-header .aiwfm-language-selector:has(.aiwfm-language-menu[aria-expanded="true"])
  .aiwfm-header-chevron,
.aiwfm-header .aiwfm-user-menu:has(.dropdown-menu[aria-expanded="true"])
  .aiwfm-header-chevron {
  transform: rotate(180deg);
}

/* AIWFM-HDR-002 START: header controls turn dark charcoal only while open,
   matching the Figma "Language Selector" and "User Profile" component spec
   (background #323439 when expanded). The profile control keeps its default
   blue (#066fac, set on the base .aiwfm-user-control rule above) at rest -
   only the open/expanded state changes to charcoal, same as the language
   control. An earlier pass incorrectly made the profile control charcoal
   unconditionally; corrected per owner review. */
.aiwfm-header
  .aiwfm-language-selector:has(.aiwfm-language-menu[aria-expanded="true"])
  .aiwfm-language-toggle {
  background: #323439;
  color: #fff;
}

.aiwfm-header
  .aiwfm-language-selector:has(.aiwfm-language-menu[aria-expanded="true"])
  .aiwfm-language-toggle
  img {
  filter: brightness(0) invert(1);
}

.aiwfm-header .aiwfm-user-menu:has(.dropdown-menu[aria-expanded="true"])
  .aiwfm-user-control {
  background: #323439;
}

/* The hover/active rule below darkens the icon (filter: brightness(0)) so it
   reads against the light grey hover background. That filter must not carry
   over while the dropdown is open, since the open state's charcoal
   background needs the icon to stay its natural white - a real conflict
   when the pointer is still over the button right after opening it. This
   selector out-specifies the hover rule (5 class-levels vs. 4) so it always
   wins regardless of source order. */
.aiwfm-header .aiwfm-user-menu:has(.dropdown-menu[aria-expanded="true"])
  .aiwfm-user-control
  .aiwfm-header-control-icon {
  filter: none;
}
/* AIWFM-HDR-002 END */

.aiwfm-header .aiwfm-language-menu {
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  z-index: 1000;
  box-sizing: border-box;
  width: 240px;
  min-width: 240px;
  margin: 0;
  padding: var(--aiwfm-space-20);
  overflow: hidden;
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: var(--aiwfm-radius-card);
  background: var(--aiwfm-color-surface);
  box-shadow: 0 10px 20px -10px rgb(0 0 0 / 20%);
}

.aiwfm-header .aiwfm-language-menu .aiwfm-language-option {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--aiwfm-color-neutral-dark);
  font-size: var(--aiwfm-font-size-small);
  font-weight: 500;
  line-height: var(--aiwfm-line-height-small);
  white-space: normal;
}

.aiwfm-header .aiwfm-language-menu .aiwfm-language-option:hover,
.aiwfm-header .aiwfm-language-menu .aiwfm-language-option:focus {
  background: #f5f6f9;
  color: var(--aiwfm-color-primary);
  text-decoration: none;
}

.aiwfm-header .aiwfm-language-menu .aiwfm-language-option.is-current {
  background: #f5f6f9;
  color: var(--aiwfm-color-primary);
  font-weight: var(--aiwfm-font-weight-semibold);
  cursor: default;
}

.aiwfm-header .user-info {
  display: inline-flex;
}

.aiwfm-header .user-info > .aiwfm-user-control {
  min-width: 52px;
  padding: 9px 10px;
  color: var(--aiwfm-color-surface);
  /* AIWFM-HDR-002: background intentionally omitted here — this selector's
     higher specificity (.user-info > .aiwfm-user-control) was silently
     overriding the charcoal background set below at
     .aiwfm-header .aiwfm-user-control, regardless of source order. */
}

.aiwfm-header .user-info > .aiwfm-user-control::after {
  content: none;
}

/* AIWFM-HDR-003 START: profile dropdown item styling to match Figma
   "Menu / My Account / User" component (200x36 items, 10px item radius,
   Inter 500 15px/20px black text, 8px gap, rgba divider, #0040DD CTA button
   for Sign in / Sign out). Previously these items fell back to Zendesk's
   unstyled dropdown-menu defaults. Figma reference: node 8027:784. */
.aiwfm-header .user-info > .dropdown-menu {
  display: none;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  z-index: 1000;
  flex-direction: column;
  gap: var(--aiwfm-space-8);
  width: max-content;
  min-width: 200px;
  margin: 0;
  padding: var(--aiwfm-space-20);
  border-color: rgb(0 0 0 / 10%);
  border-radius: var(--aiwfm-radius-card);
  box-shadow: 0 10px 20px -10px rgb(0 0 0 / 20%);
}

.aiwfm-header .user-info > .dropdown-menu[aria-expanded="true"] {
  display: flex;
}

.aiwfm-header .user-info > .dropdown-menu [role="menuitem"] {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--aiwfm-color-text);
  font-family: var(--aiwfm-font-family-base);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

.aiwfm-header .user-info > .dropdown-menu [role="menuitem"]:hover,
.aiwfm-header .user-info > .dropdown-menu [role="menuitem"]:focus {
  background: #f5f6f9;
  color: var(--aiwfm-color-primary);
  text-decoration: none;
}

.aiwfm-header .user-info > .dropdown-menu [role="separator"] {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: rgb(0 0 0 / 10%);
}

.aiwfm-header .user-info > .dropdown-menu .aiwfm-header-menu-cta {
  justify-content: center;
  background: var(--aiwfm-color-primary);
  color: #fff;
}

.aiwfm-header .user-info > .dropdown-menu .aiwfm-header-menu-cta:hover,
.aiwfm-header .user-info > .dropdown-menu .aiwfm-header-menu-cta:focus {
  background: var(--aiwfm-color-primary);
  filter: brightness(0.9);
  color: #fff;
  text-decoration: none;
}

/* AIWFM-QA-FIX-029: "Submit a request" in the signed-out menu had no
   trailing arrow. Reuses the same rotated-chevron pattern already used for
   the home page's "See more" recent-activity link (AIWFM-ACT-001). Scoped
   to this specific class (not the general [role="menuitem"] selector) so
   the signed-in menu's plain items (Profile, Requests, etc.) are
   unaffected. */
.aiwfm-header .user-info > .dropdown-menu .aiwfm-header-menu-arrow {
  justify-content: space-between;
}

.aiwfm-header .user-info > .dropdown-menu .aiwfm-header-menu-arrow::after {
  width: 8px;
  height: 6px;
  content: "";
  background-color: currentColor;
  -webkit-mask-image: url(/hc/theming_assets/01M0JTDQPWSH7GXBHGJP467G3Q);
  mask-image: url(/hc/theming_assets/01M0JTDQPWSH7GXBHGJP467G3Q);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  transform: rotate(-90deg);
}
/* AIWFM-HDR-003 END */

.aiwfm-header .nav-wrapper-mobile {
  display: none;
}

[dir="rtl"] .aiwfm-announcement-region .megaphone {
  margin-right: 0;
  margin-left: 8px;
}

[dir="rtl"] .aiwfm-announcement-region .ns-close,
[dir="rtl"] .aiwfm-announcement-region .ns-bar .ns-close {
  margin-right: var(--aiwfm-space-16);
  margin-left: 0;
}

[dir="rtl"] .aiwfm-header .aiwfm-language-menu,
[dir="rtl"] .aiwfm-header .user-info > .dropdown-menu {
  right: auto;
  left: 0;
}

@media (max-width: 1199px) {
  .aiwfm-announcement-region .ns-box,
  .aiwfm-header.header {
    padding-right: var(--aiwfm-page-gutter-desktop);
    padding-left: var(--aiwfm-page-gutter-desktop);
  }
}

@media (max-width: 1023px) {
  .aiwfm-header .nav-wrapper-desktop {
    display: none;
  }

  .aiwfm-header .nav-wrapper-mobile {
    display: block;
  }

  .aiwfm-header .nav-wrapper-mobile .menu-button-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
    color: var(--aiwfm-color-neutral-dark);
  }

  .aiwfm-header .nav-wrapper-mobile .menu-button-mobile .icon-menu {
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    padding: 8px;
    border-radius: 10px;
  }

  .aiwfm-header .nav-wrapper-mobile .menu-list-mobile {
    top: 68px;
    z-index: 1000;
    border-color: var(--aiwfm-color-border);
    font-family: var(--aiwfm-font-family-base);
  }
}

@media (max-width: 767px) {
  .aiwfm-announcement-region .ns-box {
    align-items: flex-start;
    min-height: 48px;
    padding: 12px var(--aiwfm-page-gutter-mobile);
    font-size: var(--aiwfm-font-size-small);
  }

  .aiwfm-announcement-region .ns-box-inner {
    align-items: flex-start;
  }

  .aiwfm-announcement-region .megaphone {
    margin-top: 1px;
  }

  .aiwfm-announcement-region .ns-close,
  .aiwfm-announcement-region .ns-bar .ns-close {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
    margin-left: 8px;
  }

  [dir="rtl"] .aiwfm-announcement-region .ns-close,
  [dir="rtl"] .aiwfm-announcement-region .ns-bar .ns-close {
    margin-right: 8px;
    margin-left: 0;
  }

  .aiwfm-header.header {
    height: 64px;
    padding-right: var(--aiwfm-page-gutter-mobile);
    padding-left: var(--aiwfm-page-gutter-mobile);
  }

  .aiwfm-header .aiwfm-header-brand-link {
    gap: 8px;
  }

  .aiwfm-header .aiwfm-header-brand-link img {
    width: 194px;
    max-height: 22px;
  }

  .aiwfm-header-actions {
    gap: 8px;
  }

  .aiwfm-header .nav-wrapper-mobile .menu-list-mobile {
    top: 64px;
  }
}

@media (max-width: 479px) {
  .aiwfm-header .aiwfm-header-brand-link img {
    width: 160px;
  }
}

@media (max-width: 359px) {
  .aiwfm-header .aiwfm-header-brand-link img {
    width: 145px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aiwfm-announcement-region .ns-box,
  .aiwfm-announcement-region .ns-box * {
    animation: none !important;
    transition: none !important;
  }
}

/* AIWFM-HDR-001 END ---------------------------------------------------------- */

/* AIWFM-CATNAV-001 START ------------------------------------------------------
   Shared "Left Navigation" category-tree sidebar, used identically on the
   category and article pages (not the section page). Figma reference:
   "Left Navigation" component, WFM Support site (320px sidebar, "AI WFM"
   title, category accordion, #0040DD current-section state). The markup
   skeleton is duplicated identically in category_page.hbs and
   article_page.hbs (Curlybars has no shared-partial mechanism); the
   AIWFM-CATNAV-001 block in script.js fills it in via the Help Center API,
   since neither template context exposes the full categories collection
   needed to render the list server-side. Hidden below 1024px, matching the
   tablet/mobile Figma frames that collapse this sidebar.
   Audit/checklist: ../ZENDESK_UPDATE_LOG.md
   -------------------------------------------------------------------------- */

/* AIWFM-QA-FIX-001: below 1024px the sidebar was simply display:none with no
   way to reach it at all (QA defect #6, most visible at the 768px tablet
   breakpoint). Below, a "Categories" toggle button (markup added in
   category_page.hbs / section_page.hbs / article_page.hbs) is shown instead,
   and the sidebar becomes an off-canvas drawer driven by the same
   [aria-expanded] attribute pattern already used for
   .nav-wrapper-mobile .menu-list-mobile (see ~line 833) via the existing
   toggleNavigation()/closeNavigation() helpers in script.js. */
.aiwfm-left-nav-toggle {
  display: none;
}

@media (max-width: 1023px) {
  .aiwfm-left-nav-toggle {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--aiwfm-space-8);
    width: 100%;
    margin: 0 0 var(--aiwfm-space-16);
    padding: 10px var(--aiwfm-space-16);
    border: 1px solid var(--aiwfm-color-border);
    border-radius: var(--aiwfm-radius-control);
    background: var(--aiwfm-color-surface, #fff);
    color: var(--aiwfm-color-text);
    font-family: var(--aiwfm-font-family-base);
    font-size: 14px;
    font-weight: var(--aiwfm-font-weight-semibold);
    cursor: pointer;
  }

  .aiwfm-left-nav[aria-expanded="false"] {
    display: none;
  }

  .aiwfm-left-nav[aria-expanded="true"] {
    display: block;
    width: 100%;
    margin: 0 0 var(--aiwfm-space-24);
    font-family: var(--aiwfm-font-family-base);
  }
}

/* AIWFM-QA-FIX-001: this used to be gated behind `@media (min-width: 1024px)`,
   which meant the entire sidebar's inner styling (title, category list,
   buttons, section links, etc.) only ever existed above 1024px - there was no
   way to style the mobile/tablet off-canvas drawer added above without
   duplicating all of it. Making these rules unconditional is safe: below
   1024px the top-level .aiwfm-left-nav[aria-expanded="false"] rule above
   still wins on specificity (attribute selector beats plain class) and hides
   the whole subtree, and when the drawer is opened
   (.aiwfm-left-nav[aria-expanded="true"]) these same rules now apply,
   matching the desktop styling used inside the sidebar. */
.aiwfm-left-nav {
  display: block;
  flex: 0 0 320px;
  width: 320px;
  font-family: var(--aiwfm-font-family-base);
}

.aiwfm-left-nav-title {
    margin: 0 0 var(--aiwfm-space-16);
    color: var(--aiwfm-color-text);
    font-size: 16px;
    font-weight: var(--aiwfm-font-weight-semibold);
    line-height: 24px;
  }

  .aiwfm-left-nav-group-title {
    margin: 0 0 var(--aiwfm-space-16);
    color: var(--aiwfm-color-text-muted);
    font-size: 12px;
    font-weight: var(--aiwfm-font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .aiwfm-left-nav-categories {
    display: flex;
    flex-direction: column;
    gap: var(--aiwfm-space-8);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* AIWFM-QA-FIX-034: the sidebar's <ul> ships empty and is filled by JS
     only after two network round trips (categories.json plus the home
     page fetch that getVisibleCategoryIds parses for permission
     scoping), so it sat visibly blank on first paint. These placeholder
     rows are inserted by script.js for the duration of that wait. */
  .aiwfm-left-nav-category-skeleton {
    height: 40px;
    border-radius: var(--aiwfm-radius-control);
    background: linear-gradient(
        90deg,
        var(--aiwfm-color-surface-beige) 0%,
        var(--aiwfm-color-border) 50%,
        var(--aiwfm-color-surface-beige) 100%
      )
      0 0 / 200% 100%;
    animation: aiwfm-left-nav-skeleton-shimmer 1.2s ease-in-out infinite;
  }

  @keyframes aiwfm-left-nav-skeleton-shimmer {
    from {
      background-position: 200% 0;
    }
    to {
      background-position: -200% 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .aiwfm-left-nav-category-skeleton {
      animation: none;
    }
  }

  .aiwfm-left-nav-category-button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--aiwfm-space-12);
    width: 100%;
    padding: 10px var(--aiwfm-space-16);
    border-radius: var(--aiwfm-radius-control);
    background: var(--aiwfm-color-surface);
    color: var(--aiwfm-color-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
  }

  /* Theme's global "a:visited { color: rgba(153, 51, 204, 1); }" (style.css
     line ~238) beats the single-class selector above, so every category
     link turns the browser's visited-purple once clicked. Re-assert our
     color explicitly for :visited to cancel that out. */
  .aiwfm-left-nav-category-button:visited {
    color: var(--aiwfm-color-text);
  }

  .aiwfm-left-nav-category-button:hover,
  .aiwfm-left-nav-category-button:focus {
    text-decoration: none;
  }

  .aiwfm-left-nav-category-icon {
    position: relative;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
  }

  /* AIWFM-QA-FIX-001: no default background-color here. Only the 6 mapped
     category IDs below get a background-color (paired with their
     mask-image), so a category ID with no icon mapping renders no icon at
     all instead of a solid dark square - matching the documented intent in
     ZENDESK_UPDATE_LOG.md ("unmapped private categories remain functional
     and render without a decorative icon"). Previously this base rule set
     background-color unconditionally, so any unmapped ID (e.g. "Internal
     Doc Translations", "Pre-5.0 Documents", "Community Internal Support")
     painted a solid square because mask-image stayed at its initial value
     of none, which does not clip the background at all. */
  .aiwfm-left-nav-category-icon::before {
    position: absolute;
    inset: 0;
    content: "";
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  .aiwfm-left-nav-category-name {
    flex: 1;
    min-width: 0;
  }

  .aiwfm-left-nav-chevron {
    flex: 0 0 16px;
    color: var(--aiwfm-color-text-muted);
    transition: transform 160ms ease;
  }

  /* Driven by the button's own aria-expanded attribute (script.js keeps this
     in sync with the actual open/closed state), not the is-current/
     is-expanded classes: those classes don't get removed when a current
     category is manually collapsed again, which previously left the caret
     stuck pointing up even after the row closed. Since the chevron is a
     direct child of its own button, this naturally can't leak into a
     nested section button's caret either. */
  .aiwfm-left-nav-category-button[aria-expanded="true"] .aiwfm-left-nav-chevron {
    transform: rotate(180deg);
  }

  /* Non-current category the user manually toggled open: subtle card,
     default text color, beige background by default (Figma: article/section
     pages). Category pages override this to white just below, since
     .aiwfm-category-page is the only page-type wrapper class that exists
     for this purpose (article_page.hbs/section_page.hbs have no such
     wrapper, so beige is the correct shared default for both). */
  .aiwfm-left-nav-category.is-expanded {
    border-radius: var(--aiwfm-radius-card);
    background: var(--aiwfm-color-surface-beige);
    box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
  }

  /* Category & section page override: expanded (non-current) category card
     is white, per Figma category-page spec (section pages follow the same
     style). Article page has no page-wrapper class and keeps the beige
     default above. */
  .aiwfm-category-page .aiwfm-left-nav-category.is-expanded,
  .aiwfm-section-page .aiwfm-left-nav-category.is-expanded {
    background: var(--aiwfm-color-surface);
  }

  /* AIWFM-QA-FIX-010: the base .aiwfm-left-nav-category-button rule
     unconditionally paints its own white (--aiwfm-color-surface) background
     so a collapsed row reads as a card floating on the page's beige content
     background. When a category is merely expanded (not current), its
     .is-expanded wrapper above supplies its own card background/shadow -
     leaving the button's own white background in place on top of it
     produced a visible white rectangle nested inside the wrapper's card, a
     "card within a card" seam. Clearing it to transparent here lets the
     button show the wrapper's background instead. This must stay above the
     .is-current rule below in source order, since that rule's blue
     background needs to keep winning for the true current category (both
     rules share the same specificity, so source order decides). */
  .aiwfm-left-nav-category.is-expanded .aiwfm-left-nav-category-button,
  .aiwfm-left-nav-category.is-expanded .aiwfm-left-nav-category-button:visited {
    padding: 10px var(--aiwfm-space-16);
    background: transparent;
    font-weight: var(--aiwfm-font-weight-semibold);
  }

  .aiwfm-left-nav-category.is-expanded .aiwfm-left-nav-sections {
    padding: 0 var(--aiwfm-space-12) var(--aiwfm-space-12);
  }

  /* The true current category (Figma: solid blue header, with the
     sections list sitting directly beneath in a beige panel, both
     joined into one seamless rounded card). */
  .aiwfm-left-nav-category.is-current {
    --aiwfm-left-nav-current-panel: var(--aiwfm-color-surface-beige);

    /* Confines the button's negative-z-index corner-fill layer (see below) to
       this card, so it can't be covered by a background on any ancestor. */
    isolation: isolate;

    border-radius: var(--aiwfm-radius-card);
    box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
    overflow: hidden;
  }

  /* Matches the sections-panel colour override further below. */
  .aiwfm-category-page .aiwfm-left-nav-category.is-current,
  .aiwfm-section-page .aiwfm-left-nav-category.is-current {
    --aiwfm-left-nav-current-panel: var(--aiwfm-color-surface);
  }

  /* AIWFM-QA-FIX-035: the button's blue is clipped to its own 999px pill, so
     all four corners let whatever is behind it show through. The page
     background is right at the top, but at the bottom it left a two-tone
     notch against the sections panel directly beneath. This layer sits in the
     button's full (unclipped) rectangle and fills only its lower half in the
     panel's colour. A 999px radius always resolves to half the row's height,
     so the top and bottom corner arcs meet exactly at the 50% stop - which
     keeps this correct for two-line category titles, where the row is 60px
     rather than the single-line 40px. It must stay a child of the button:
     painting the same gradient on the .is-current wrapper instead would put
     it in a later paint step than a negative-z-index layer and cover it. */
  .aiwfm-left-nav-category.is-current .aiwfm-left-nav-category-button::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(
      to bottom,
      transparent 50%,
      var(--aiwfm-left-nav-current-panel) 50%
    );
  }

  .aiwfm-left-nav-category.is-current .aiwfm-left-nav-category-button,
  .aiwfm-left-nav-category.is-current .aiwfm-left-nav-category-button:visited {
    position: relative;
    padding: 10px var(--aiwfm-space-16);
    background: var(--aiwfm-color-primary);
    color: var(--aiwfm-color-surface);
    font-weight: var(--aiwfm-font-weight-semibold);
  }

  /* AIWFM-QA-FIX-005 correction #2: this rule used to unconditionally set
     background-color: white here, for ANY current category's icon - mapped
     or not. That is the actual root cause of the "white box on categories
     without icons" bug (e.g. "Internal Doc Translations" when expanded),
     since AIWFM-QA-FIX-001 deliberately gives unmapped categories no
     background-color at all (see comment near line 6874) and this rule was
     overriding that with white regardless. The scoped, higher-specificity
     rule below (search AIWFM-QA-FIX-005, ~line 7169) already sets white for
     the 6 mapped category IDs when current, so this rule must NOT set any
     background-color - leave it empty of that declaration entirely. */
  .aiwfm-left-nav-category.is-current > .aiwfm-left-nav-category-button .aiwfm-left-nav-chevron {
    color: var(--aiwfm-color-surface);
  }

  .aiwfm-left-nav-category.is-current .aiwfm-left-nav-sections {
    margin: 0;
    padding: var(--aiwfm-space-12);
    background: var(--aiwfm-color-surface-beige);
  }

  /* Category & section pages: the current category's auto-open sections
     panel should be white (matches the manually-expanded white card look).
     Article page has no page-wrapper class and keeps the beige default
     above, which is the desired look there. */
  .aiwfm-category-page .aiwfm-left-nav-category.is-current .aiwfm-left-nav-sections,
  .aiwfm-section-page .aiwfm-left-nav-category.is-current .aiwfm-left-nav-sections {
    background: var(--aiwfm-color-surface);
  }

  .aiwfm-left-nav-sections {
    display: flex;
    flex-direction: column;
    gap: var(--aiwfm-space-4);
    margin: var(--aiwfm-space-8) 0 0;
    padding: 0;
    list-style: none;
  }

  .aiwfm-left-nav-sections[hidden] {
    display: none;
  }

  /* Section rows: same toggle pattern as category rows (button + chevron,
     whole row expands/collapses in place; the row itself never
     navigates). */
  .aiwfm-left-nav-section-button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--aiwfm-space-12);
    width: 100%;
    padding: 8px var(--aiwfm-space-12);
    /* Left corners intentionally square (0), not var(--aiwfm-radius-control):
       rounding the left corners of an element that also carries a colored
       border-left indicator makes the browser paint the corner arcs in the
       border-left color, producing a stray blue "crescent" sliver above/below
       the indicator bar instead of a clean straight bar. Right corners keep
       the normal control radius for the hover/focus affordance. */
    border-radius: 0 var(--aiwfm-radius-control) var(--aiwfm-radius-control) 0;
    border-left: 3px solid transparent;
    color: var(--aiwfm-color-text);
    font-size: 13px;
    line-height: 18px;
    text-decoration: none;
  }

  .aiwfm-left-nav-section-button:visited {
    color: var(--aiwfm-color-text);
  }

  /* No visible focus ring on click: the row's own background/left-border
     states already communicate current/expanded, so the browser's default
     blue focus outline just reads as a stray box. */
  .aiwfm-left-nav-section-button:focus,
  .aiwfm-left-nav-section-button:focus-visible {
    outline: none;
  }

  .aiwfm-left-nav-section-name {
    flex: 1;
    min-width: 0;
  }

  .aiwfm-left-nav-section-button .aiwfm-left-nav-chevron {
    flex: 0 0 16px;
  }

  /* Same aria-expanded-driven approach as the category chevron rule above:
     reflects the row's actual open/closed state (including after a current
     section is manually collapsed), instead of getting stuck via a
     permanent is-current/is-expanded class. */
  .aiwfm-left-nav-section-button[aria-expanded="true"] .aiwfm-left-nav-chevron {
    transform: rotate(180deg);
  }

  /* Bold text only for the current section, per Figma — no blue left-border
     bar. (border-left itself stays defined at 3px transparent above so
     spacing/alignment doesn't shift; it's just never given a color.) */
  .aiwfm-left-nav-section.is-current .aiwfm-left-nav-section-button,
  .aiwfm-left-nav-section.is-current .aiwfm-left-nav-section-button:visited {
    font-weight: var(--aiwfm-font-weight-semibold);
  }

  .aiwfm-left-nav-articles {
    display: flex;
    flex-direction: column;
    gap: var(--aiwfm-space-4);
    margin: 0;
    padding: 0 0 0 var(--aiwfm-space-16);
    list-style: none;
  }

  .aiwfm-left-nav-articles[hidden] {
    display: none;
  }

  .aiwfm-left-nav-articles a {
    display: block;
    padding: 8px var(--aiwfm-space-12);
    border-radius: var(--aiwfm-radius-control);
    color: var(--aiwfm-color-text);
    font-size: 13px;
    line-height: 18px;
    text-decoration: none;
  }

  .aiwfm-left-nav-articles a:visited {
    color: var(--aiwfm-color-text);
  }

  .aiwfm-left-nav-articles li.is-current a,
  .aiwfm-left-nav-articles li.is-current a:visited {
    color: var(--aiwfm-color-primary);
    font-weight: var(--aiwfm-font-weight-semibold);
    text-decoration: underline;
  }

  /* Category page only: sections render as a flat, non-expandable list
     (Figma: category page). Kept as a distinct class/selector so it never
     collides with the expandable .aiwfm-left-nav-section styling above,
     which is used on article/section pages instead. */
  .aiwfm-left-nav-section-flat > a {
    display: block;
    padding: 8px var(--aiwfm-space-12);
    border-radius: var(--aiwfm-radius-control);
    color: var(--aiwfm-color-text);
    font-size: 13px;
    line-height: 18px;
    text-decoration: none;
  }

  .aiwfm-left-nav-section-flat > a:visited {
    color: var(--aiwfm-color-text);
  }

  .aiwfm-left-nav-section-flat.is-current > a,
  .aiwfm-left-nav-section-flat.is-current > a:visited {
    font-weight: var(--aiwfm-font-weight-semibold);
  }

/* Icon mapping shared with the home page's category blocks (AIWFM-CAT-001) */
/* AIWFM-QA-FIX-001: background-color now lives here (paired with the mask-image
   below) instead of unconditionally on the base .aiwfm-left-nav-category-icon::before
   rule above, so only these 8 mapped category IDs actually paint an icon. */
.aiwfm-left-nav-category[data-category-id="45752484277140"] .aiwfm-left-nav-category-icon::before,
.aiwfm-left-nav-category[data-category-id="45752857536916"] .aiwfm-left-nav-category-icon::before,
.aiwfm-left-nav-category[data-category-id="45752888253972"] .aiwfm-left-nav-category-icon::before,
.aiwfm-left-nav-category[data-category-id="45756927880340"] .aiwfm-left-nav-category-icon::before,
.aiwfm-left-nav-category[data-category-id="45757332766228"] .aiwfm-left-nav-category-icon::before,
.aiwfm-left-nav-category[data-category-id="45758578168724"] .aiwfm-left-nav-category-icon::before,
.aiwfm-left-nav-category[data-category-id="45758970385940"] .aiwfm-left-nav-category-icon::before,
.aiwfm-left-nav-category[data-category-id="53901156238100"] .aiwfm-left-nav-category-icon::before {
  background-color: var(--aiwfm-color-neutral-dark);
}

.aiwfm-left-nav-category[data-category-id="45752484277140"] .aiwfm-left-nav-category-icon::before {
  -webkit-mask-image: url(/hc/theming_assets/01M00V9S56GFETVF2D50FBW3M9);
  mask-image: url(/hc/theming_assets/01M00V9S56GFETVF2D50FBW3M9);
}

.aiwfm-left-nav-category[data-category-id="45752857536916"] .aiwfm-left-nav-category-icon::before {
  -webkit-mask-image: url(/hc/theming_assets/01M00V9QCT4YDPVVN509E8CGY8);
  mask-image: url(/hc/theming_assets/01M00V9QCT4YDPVVN509E8CGY8);
}

.aiwfm-left-nav-category[data-category-id="45752888253972"] .aiwfm-left-nav-category-icon::before {
  -webkit-mask-image: url(/hc/theming_assets/01M00V9SZ34BWVJBC0AAZ7FXBX);
  mask-image: url(/hc/theming_assets/01M00V9SZ34BWVJBC0AAZ7FXBX);
}

.aiwfm-left-nav-category[data-category-id="45756927880340"] .aiwfm-left-nav-category-icon::before {
  -webkit-mask-image: url(/hc/theming_assets/01M00V9NHXNN1GMEAB7PS08N1J);
  mask-image: url(/hc/theming_assets/01M00V9NHXNN1GMEAB7PS08N1J);
}

.aiwfm-left-nav-category[data-category-id="45757332766228"] .aiwfm-left-nav-category-icon::before {
  -webkit-mask-image: url(/hc/theming_assets/01M00V9PF9XQWNCHB3RQMB19CT);
  mask-image: url(/hc/theming_assets/01M00V9PF9XQWNCHB3RQMB19CT);
}

.aiwfm-left-nav-category[data-category-id="45758578168724"] .aiwfm-left-nav-category-icon::before {
  -webkit-mask-image: url(/hc/theming_assets/01M00V9R8YFXM7Q4Q9FCEW1R9T);
  mask-image: url(/hc/theming_assets/01M00V9R8YFXM7Q4Q9FCEW1R9T);
}

.aiwfm-left-nav-category[data-category-id="45758970385940"] .aiwfm-left-nav-category-icon::before {
  -webkit-mask-image: url(/hc/theming_assets/01M3QJPQM1T5BZVRRWBV9VPS4T);
  mask-image: url(/hc/theming_assets/01M3QJPQM1T5BZVRRWBV9VPS4T);
}

.aiwfm-left-nav-category[data-category-id="53901156238100"] .aiwfm-left-nav-category-icon::before {
  -webkit-mask-image: url(/hc/theming_assets/01M3QJPP0228FN0AVNAXH89JH5);
  mask-image: url(/hc/theming_assets/01M3QJPP0228FN0AVNAXH89JH5);
}

/* AIWFM-QA-FIX-005: the per-category-ID rules above (background-color:
   var(--aiwfm-color-neutral-dark)) and the .is-current white-icon rule
   above them (line ~6956) share the same specificity (3 classes/attrs + 1
   pseudo-element each), so source order alone decided the winner - the
   per-category rules come later in the file, so the icon stayed dark
   charcoal even when its category was expanded/current against the solid
   blue background (reported: "Announcements" icon nearly invisible once
   highlighted). The fix must repeat the same 8 mapped category IDs (rather
   than matching any [data-category-id], which every category has) - an
   earlier draft of this fix used a bare [data-category-id] selector, which
   painted a white square on unmapped categories too (e.g. "Internal Doc
   Translations") since AIWFM-QA-FIX-001 deliberately gives those no
   background-color at all. Listing the 6 IDs explicitly keeps this scoped
   to only the categories that actually have an icon, while still winning
   on specificity (4 classes/attrs vs. the dark rule's 3) regardless of
   source order. */
.aiwfm-left-nav-category.is-current[data-category-id="45752484277140"] .aiwfm-left-nav-category-icon::before,
.aiwfm-left-nav-category.is-current[data-category-id="45752857536916"] .aiwfm-left-nav-category-icon::before,
.aiwfm-left-nav-category.is-current[data-category-id="45752888253972"] .aiwfm-left-nav-category-icon::before,
.aiwfm-left-nav-category.is-current[data-category-id="45756927880340"] .aiwfm-left-nav-category-icon::before,
.aiwfm-left-nav-category.is-current[data-category-id="45757332766228"] .aiwfm-left-nav-category-icon::before,
.aiwfm-left-nav-category.is-current[data-category-id="45758578168724"] .aiwfm-left-nav-category-icon::before,
.aiwfm-left-nav-category.is-current[data-category-id="45758970385940"] .aiwfm-left-nav-category-icon::before,
.aiwfm-left-nav-category.is-current[data-category-id="53901156238100"] .aiwfm-left-nav-category-icon::before {
  background-color: var(--aiwfm-color-surface);
}

/* AIWFM-CATNAV-001 END --------------------------------------------------------- */

/* AIWFM-CATEGORY-001 START ---------------------------------------------------
   Category page: gradient search band, breadcrumb row, and stacked section
   cards built from the real category, sections, and articles Zendesk supplies.
   Figma reference: WFM Support site, node 8007-7644 ("Landing Page / Category")
   Audit/checklist: ../ZENDESK_UPDATE_LOG.md
   -------------------------------------------------------------------------- */

.aiwfm-category-page {
  font-family: var(--aiwfm-font-family-base);
}

/* Figma lays the page out as full-bleed bands with 80px gutters over a 1280px
   content column; the shared baseline .container caps at 1160px, so it is
   re-capped here rather than changed globally. */
.aiwfm-category-page .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

/* Search band -------------------------------------------------------------- */

.aiwfm-category-search-band {
  padding: var(--aiwfm-space-32) 80px;
  background: linear-gradient(88.88deg, var(--aiwfm-gradient-header-stops));
}

.aiwfm-category-search-inner {
  box-sizing: border-box;
}

.aiwfm-category-search {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  filter: drop-shadow(0 1px 4px rgb(0 0 0 / 4%));
}

.aiwfm-category-search .search-icon {
  left: var(--aiwfm-space-16);
  width: 16px;
  height: 16px;
  color: var(--aiwfm-color-neutral-dark);
}

.aiwfm-category-search input[type="search"] {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding-block: 0;
  padding-inline: 40px var(--aiwfm-space-16);
  border: 0;
  border-radius: var(--aiwfm-radius-control);
  background: var(--aiwfm-color-surface);
  font-size: var(--aiwfm-font-size-small);
  line-height: var(--aiwfm-line-height-small);
}

.aiwfm-category-search input[type="search"]::placeholder {
  color: var(--aiwfm-color-text-muted);
}

/* Breadcrumb row ----------------------------------------------------------- */

.aiwfm-category-breadcrumb-row {
  padding: 0 80px;
  background: var(--aiwfm-color-surface);
  border-bottom: 1px solid rgb(0 0 0 / 10%);
}

/* AIWFM-QA-FIX-016 (correction): this nav also carries the base theme's
   .sub-nav class, which sets justify-content: space-between unconditionally.
   At >=768px .sub-nav switches to flex-direction: row, and since this nav
   only ever has one child (no paired search box), space-between degenerates
   to the same effect as flex-start - left-aligned, not centered. The
   original mobile-only (max-width: 767px) fix never touched this range, so
   breadcrumbs stayed left-aligned on tablets and narrow desktop windows.
   Setting justify-content: center unconditionally here (same specificity as
   .sub-nav, later in source order) fixes every width in one place; the
   .aiwfm-category-breadcrumbs { justify-content: center; } block previously
   added inside the mobile media query is now redundant and removed. */
.aiwfm-category-breadcrumbs {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  margin-bottom: 0;
}

.aiwfm-category-breadcrumbs .breadcrumbs {
  margin: 0;
  font-size: var(--aiwfm-font-size-small);
  line-height: var(--aiwfm-line-height-small);
}

/* Content region ----------------------------------------------------------- */

.aiwfm-category-content-bg {
  padding: var(--aiwfm-space-40) 80px;
  background: var(--aiwfm-color-surface-beige);
}

.aiwfm-category-page .category-container {
  display: block;
}

.aiwfm-category-page .category-content {
  flex: none;
  width: 100%;
}

/* The left-nav sidebar (AIWFM-CATNAV-001) is hidden below 1024px, so the
   category-container only needs to become a flex row once it's visible. */
@media (min-width: 1024px) {
  .aiwfm-category-page .category-container {
    display: flex;
    align-items: flex-start;
    gap: var(--aiwfm-space-24);
  }

  .aiwfm-category-page .category-content {
    flex: 1;
    width: auto;
    min-width: 0;
  }
}

.aiwfm-category-header {
  display: block;
  margin: 0 0 var(--aiwfm-space-24);
}

.aiwfm-category-header h1 {
  margin: 0;
  color: var(--aiwfm-color-text);
  font-size: 20px;
  font-weight: var(--aiwfm-font-weight-semibold);
  line-height: 28px;
  letter-spacing: var(--aiwfm-letter-spacing-tight);
}

.aiwfm-category-header .page-header-description {
  margin: var(--aiwfm-space-4) 0 0;
  color: var(--aiwfm-color-text);
  font-size: var(--aiwfm-font-size-body);
  line-height: var(--aiwfm-line-height-body);
}

/* Section cards ------------------------------------------------------------ */

.aiwfm-category-page .section-tree {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--aiwfm-space-24);
}

.aiwfm-category-page .section-tree .section {
  box-sizing: border-box;
  flex: initial;
  width: 100%;
  margin: 0;
  padding: var(--aiwfm-space-16) var(--aiwfm-space-20) var(--aiwfm-space-20);
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: var(--aiwfm-radius-card);
  background: var(--aiwfm-color-surface);
}

@media (min-width: 768px) {
  .aiwfm-category-page .section-tree {
    flex-direction: row;
  }

  .aiwfm-category-page .section-tree .section {
    flex: 1 1 calc(50% - var(--aiwfm-space-24) / 2);
    width: auto;
  }
}

.aiwfm-category-page .section-tree-title {
  margin: 0 0 var(--aiwfm-space-16);
  padding-bottom: 12px;
  border-bottom: 1px solid rgb(0 0 0 / 10%);
  font-size: var(--aiwfm-font-size-body);
  font-weight: var(--aiwfm-font-weight-semibold);
  line-height: var(--aiwfm-line-height-body);
  letter-spacing: var(--aiwfm-letter-spacing-tight);
}

.aiwfm-category-page .section-tree-title a {
  color: var(--aiwfm-color-text);
}

.aiwfm-category-page .article-list {
  display: flex;
  flex-direction: column;
  gap: var(--aiwfm-space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.aiwfm-category-page .article-list-item {
  padding: 0;
  border: 0;
  font-size: var(--aiwfm-font-size-body);
  line-height: var(--aiwfm-line-height-body);
}

.aiwfm-category-page .article-list-item a {
  color: var(--aiwfm-color-primary);
  font-weight: var(--aiwfm-font-weight-regular);
}

.aiwfm-category-page .see-all-articles {
  display: inline-block;
  margin-top: var(--aiwfm-space-16);
  color: var(--aiwfm-color-primary);
  font-size: var(--aiwfm-font-size-body);
  line-height: var(--aiwfm-line-height-body);
}

.aiwfm-category-page .section-tree .section-empty {
  display: block;
  color: var(--aiwfm-color-text-muted);
  font-size: var(--aiwfm-font-size-body);
  line-height: var(--aiwfm-line-height-body);
}

.aiwfm-category-page .category-empty {
  display: block;
  padding: var(--aiwfm-space-40);
  color: var(--aiwfm-color-text-muted);
  text-align: center;
}

/* Responsive: Figma's "WFM Responsive" flow defines tablet (~782px) and
   mobile (375px) frames for this page too — both keep the search band,
   breadcrumb row, and content background full-width, they just shrink the
   80px desktop gutter. The tablet/mobile frames also collapse the left
   category-nav sidebar; that's now handled by AIWFM-CATNAV-001's own
   `display: none` below 1024px, so only the gutter step is reproduced here. */
@media (max-width: 1199px) {
  .aiwfm-category-search-band {
    padding: var(--aiwfm-space-24) var(--aiwfm-page-gutter-desktop);
  }

  .aiwfm-category-breadcrumb-row {
    padding: 0 var(--aiwfm-page-gutter-desktop);
  }

  .aiwfm-category-content-bg {
    padding: var(--aiwfm-space-32) var(--aiwfm-page-gutter-desktop);
  }
}

@media (max-width: 767px) {
  .aiwfm-category-search-band {
    padding: var(--aiwfm-space-24) var(--aiwfm-page-gutter-mobile);
  }

  .aiwfm-category-breadcrumb-row {
    padding: 0 var(--aiwfm-page-gutter-mobile);
  }

  .aiwfm-category-content-bg {
    padding: var(--aiwfm-space-32) var(--aiwfm-page-gutter-mobile);
  }
}

/* AIWFM-CATEGORY-001 END ------------------------------------------------------ */

/* AIWFM-REQUEST-001 START -----------------------------------------------------
   Request pages (new-request form, request list, request detail): no dedicated
   Figma frames exist for these pages, so this block applies the same shared
   tokens and beige-content/breadcrumb-row pattern used on the category,
   section, and article pages for visual consistency. No Handlebars helpers,
   form fields, or JS behavior are changed — style only.
   Audit/checklist: ../ZENDESK_UPDATE_LOG.md, ../ZENDESK_DESIGN_UPDATE_CHECKLIST.md
   -------------------------------------------------------------------------- */

.aiwfm-request-page {
  font-family: var(--aiwfm-font-family-base);
}

.aiwfm-request-breadcrumb-row {
  padding: 0 var(--aiwfm-page-gutter-desktop);
  background: var(--aiwfm-color-surface);
  border-bottom: 1px solid rgb(0 0 0 / 10%);
}

.aiwfm-request-breadcrumbs {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: 60px;
  margin-bottom: 0;
}

.aiwfm-request-breadcrumbs .breadcrumbs {
  margin: 0;
  font-size: var(--aiwfm-font-size-small);
  line-height: var(--aiwfm-line-height-small);
}

.aiwfm-request-breadcrumbs .sub-nav {
  width: 100%;
  margin-bottom: 0;
}

.aiwfm-request-content-bg {
  padding: var(--aiwfm-space-40) var(--aiwfm-page-gutter-desktop);
  background: var(--aiwfm-color-surface-beige);
}

.aiwfm-request-heading {
  margin: 0 0 var(--aiwfm-space-24);
  color: var(--aiwfm-color-text);
  font-size: var(--aiwfm-font-size-heading);
  font-weight: var(--aiwfm-font-weight-semibold);
  line-height: var(--aiwfm-line-height-heading);
  letter-spacing: var(--aiwfm-letter-spacing-tight);
}

.aiwfm-request-content-bg .my-activities-header {
  margin-bottom: var(--aiwfm-space-24);
}

.aiwfm-request-content-bg .requests-table-toolbar,
.aiwfm-request-content-bg .requests,
.aiwfm-request-content-bg .request-container,
.aiwfm-request-content-bg .form {
  background: var(--aiwfm-color-surface);
  border-radius: var(--aiwfm-radius-card);
}

.aiwfm-request-content-bg .requests-table-toolbar {
  padding: var(--aiwfm-space-16) var(--aiwfm-space-20);
}

.aiwfm-request-content-bg .requests-table-toolbar + .requests {
  margin-top: var(--aiwfm-space-16);
}

.aiwfm-request-content-bg .requests-table thead th {
  color: var(--aiwfm-color-text-muted);
  font-size: var(--aiwfm-font-size-small);
}

.aiwfm-request-content-bg .requests-table td,
.aiwfm-request-content-bg .requests-table th {
  padding-inline: var(--aiwfm-space-20);
}

.aiwfm-request-content-bg .form,
.aiwfm-request-content-bg .request-container {
  padding: var(--aiwfm-space-24) var(--aiwfm-space-20);
}

@media (min-width: 1024px) {
  .aiwfm-request-content-bg .request-main {
    padding-right: var(--aiwfm-space-24);
  }

  .aiwfm-request-content-bg .request-sidebar {
    padding-left: var(--aiwfm-space-24);
    border-left: 1px solid rgb(0 0 0 / 10%);
  }
}

.aiwfm-request-content-bg .request-details dt {
  color: var(--aiwfm-color-text-muted);
  font-size: var(--aiwfm-font-size-small);
}

@media (max-width: 767px) {
  .aiwfm-request-breadcrumb-row {
    padding: 0 var(--aiwfm-page-gutter-mobile);
  }

  .aiwfm-request-content-bg {
    padding: var(--aiwfm-space-32) var(--aiwfm-page-gutter-mobile);
  }

  .aiwfm-request-content-bg .form,
  .aiwfm-request-content-bg .request-container {
    padding: var(--aiwfm-space-20) var(--aiwfm-space-16);
  }
}

/* AIWFM-REQUEST-001 END ------------------------------------------------------- */

/* AIWFM-HOME-001 START: approved Figma home-page search hero */

#main-content.hero {
  box-sizing: border-box;
  height: 248px;
  margin-bottom: 4px;
  padding: 32px 80px;
  /* AIWFM-HOME-002: reuse the shared Figma "Header Gradient [02]" stop list
     (see AIWFM-CATEGORY-001's --aiwfm-gradient-header-stops token) instead of
     a duplicated, slightly-differently-rounded stop list. Visually equivalent. */
  background-image: linear-gradient(83.72deg, var(--aiwfm-gradient-header-stops));
  background-position: center;
  background-size: cover;
  text-align: center;
}

#main-content .hero-inner {
  position: relative;
  top: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 48px;
  row-gap: 24px;
  align-items: center;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  transform: none;
}

#main-content .abvs-headtext {
  grid-row: 1;
  color: var(--aiwfm-color-text, #000);
}

#main-content .abvs-headtext h1 {
  margin: 0;
  color: var(--aiwfm-color-text, #000);
  font-family: var(--aiwfm-font-family-base);
  font-size: 32px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -0.2px;
  text-shadow: none;
}

#main-content .search {
  grid-row: 2;
  grid-column: 1;
  justify-self: center;
  box-sizing: border-box;
  width: min(800px, 100%);
  height: 48px;
  margin: 0;
  overflow: hidden;
  background: var(--aiwfm-color-surface, #fff);
  border: 0;
  border-radius: var(--aiwfm-radius-control, 999px);
  box-shadow:
    0 1px 1.5px rgb(0 0 0 / 10%),
    0 1px 1px rgb(0 0 0 / 10%);
}

#main-content .search:focus-within {
  box-shadow:
    0 1px 1.5px rgb(0 0 0 / 10%),
    0 1px 1px rgb(0 0 0 / 10%),
    0 0 0 2px var(--aiwfm-color-focus, #0040dd);
}

#main-content .search input[type="search"] {
  height: 48px;
  padding-block: 0;
  padding-inline: 40px 16px;
  color: var(--aiwfm-color-text, #000);
  font-family: var(--aiwfm-font-family-base);
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}

#main-content .search input[type="search"]::placeholder {
  color: var(--aiwfm-color-text-muted, #72757a);
  opacity: 1;
}

#main-content .search-icon {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  z-index: 1;
  grid-row: 2;
  grid-column: 1;
  align-self: center;
  justify-self: start;
  display: block;
  width: 16px;
  height: 16px;
  margin-inline-start: max(16px, calc((100% - 800px) / 2 + 16px));
  color: var(--aiwfm-color-text-muted, #72757a);
  transform: none;
  pointer-events: none;
}

#main-content .abvs-subtext {
  width: min(666px, 100%);
  margin: 24px auto 0;
  color: var(--aiwfm-color-text, #000);
}

#main-content .abvs-subtext p {
  margin: 0;
  color: var(--aiwfm-color-text, #000);
  font-family: var(--aiwfm-font-family-base);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  text-align: center;
}

@media (max-width: 767px) {
  #main-content.hero {
    height: auto;
    min-height: 248px;
    padding: 32px var(--aiwfm-page-gutter-mobile, 20px);
  }

  #main-content .abvs-headtext h1 {
    font-size: 24px;
    line-height: 32px;
  }
}

/* AIWFM-HOME-001 END */

/* AIWFM-ACT-001 START: approved Figma recent-activity section */

.home-section.activity {
  box-sizing: border-box;
  /* AIWFM-RESP-001: see the matching comment on .categories above - same
     full-bleed scrollbar-width fix applied here. */
  width: calc(100vw - var(--aiwfm-scrollbar-width, 16px));
  max-width: var(--aiwfm-content-max-width, 1400px);
  margin: 0 0 0 50%;
  padding: var(--aiwfm-space-40, 40px)
    var(--aiwfm-page-gutter-desktop, 36px);
  background: #f8f6f3;
  border-top: 0;
  font-family: var(--aiwfm-font-family-base);
  transform: translateX(-50%);
}

.home-section.activity .recent-activity-header {
  margin: 0 0 var(--aiwfm-space-24, 24px);
  color: var(--aiwfm-color-text, #000);
  font-size: var(--aiwfm-font-size-heading, 24px);
  font-weight: var(--aiwfm-font-weight-semibold, 600);
  line-height: var(--aiwfm-line-height-heading, 32px);
  letter-spacing: var(--aiwfm-letter-spacing-tight, -0.2px);
  text-align: center;
}

.home-section.activity .recent-activity-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-section.activity .recent-activity-item {
  display: grid;
  grid-template-areas:
    "parent parent"
    "link meta";
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px var(--aiwfm-space-24, 24px);
  align-items: center;
  box-sizing: border-box;
  min-height: 97px;
  padding: var(--aiwfm-space-24, 24px) 0;
  overflow: visible;
  border-bottom: 1px solid rgb(0 0 0 / 10%);
}

.home-section.activity .recent-activity-item-parent {
  grid-area: parent;
  width: auto;
  margin: 0;
  color: var(--aiwfm-color-primary, #0040dd);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.home-section.activity .recent-activity-item-parent a {
  color: inherit;
  text-decoration: none;
}

.home-section.activity .recent-activity-item-link {
  grid-area: link;
  width: auto;
  min-width: 0;
  margin: 0;
  color: var(--aiwfm-color-text, #000);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.home-section.activity .recent-activity-item-link:hover,
.home-section.activity .recent-activity-item-link:active,
.home-section.activity .recent-activity-item-link:focus {
  color: var(--aiwfm-color-primary, #0040dd);
}

.home-section.activity .recent-activity-item-meta {
  grid-area: meta;
  float: none;
  margin: 0;
  color: var(--aiwfm-color-text-muted, #72757a);
  font-size: 14px;
  line-height: 21px;
  white-space: nowrap;
}

.home-section.activity .recent-activity-item-time,
.home-section.activity .recent-activity-item-comment {
  font-size: inherit;
  line-height: inherit;
}

.home-section.activity .recent-activity-item-comment {
  padding-left: 8px;
}

[dir="rtl"] .home-section.activity .recent-activity-item-comment {
  padding-right: 8px;
  padding-left: 0;
}

.home-section.activity .recent-activity-comment-icon svg {
  width: 16px;
  height: 16px;
  color: currentColor;
}

.home-section.activity .recent-activity-controls {
  padding-top: var(--aiwfm-space-24, 24px);
}

.home-section.activity .recent-activity-controls a,
.home-section.activity .recent-activity-controls a:visited {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  color: var(--aiwfm-color-primary, #0040dd);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}

.home-section.activity .recent-activity-controls a:hover,
.home-section.activity .recent-activity-controls a:active,
.home-section.activity .recent-activity-controls a:focus {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.home-section.activity .recent-activity-controls a::after {
  width: 8px;
  height: 6px;
  margin-left: 12px;
  content: "";
  background-color: currentColor;
  -webkit-mask-image: url(/hc/theming_assets/01M0JTDQPWSH7GXBHGJP467G3Q);
  mask-image: url(/hc/theming_assets/01M0JTDQPWSH7GXBHGJP467G3Q);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  transform: rotate(-90deg);
}

[dir="rtl"] .home-section.activity .recent-activity-controls a::after {
  margin-right: 12px;
  margin-left: 0;
  transform: rotate(90deg);
}

.home-section.activity a:focus-visible {
  outline: 2px solid var(--aiwfm-color-focus, #0040dd);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .home-section.activity {
    padding: var(--aiwfm-space-32, 32px)
      var(--aiwfm-page-gutter-mobile, 20px);
  }

  .home-section.activity .recent-activity-item {
    grid-template-areas:
      "parent"
      "link"
      "meta";
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    min-height: 0;
    padding: var(--aiwfm-space-20, 20px) 0;
  }

  .home-section.activity .recent-activity-item-meta {
    white-space: normal;
  }
}

/* AIWFM-ACT-001 END */

/* AIWFM-SECTION-001 START ----------------------------------------------------
   Section page: header, subsections, and article list. Reuses
   AIWFM-CATEGORY-001's gradient search band, breadcrumb row, and beige
   content background (unscoped classes shared across the page) for visual
   consistency across the category/section page family. No dedicated Figma
   frame exists for a sidebar-less section list (see ZENDESK_UPDATE_LOG.md);
   scoped only to data section_page.hbs actually exposes.
   Audit/checklist: ../ZENDESK_UPDATE_LOG.md
   -------------------------------------------------------------------------- */

.aiwfm-section-page {
  font-family: var(--aiwfm-font-family-base);
}

.aiwfm-section-page .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

.aiwfm-section-page .section-container {
  display: block;
}

.aiwfm-section-page .section-content {
  width: 100%;
}

/* The left-nav sidebar (AIWFM-CATNAV-001) is hidden below 1024px, so the
   section-container only needs to become a flex row once it's visible. */
@media (min-width: 1024px) {
  .aiwfm-section-page .section-container {
    display: flex;
    align-items: flex-start;
    gap: var(--aiwfm-space-24);
  }

  .aiwfm-section-page .section-content {
    flex: 1;
    width: auto;
    min-width: 0;
  }
}

.aiwfm-section-page .section-list {
  display: flex;
  flex-direction: column;
  gap: var(--aiwfm-space-16);
  margin: 0 0 var(--aiwfm-space-24);
  padding: 0;
  list-style: none;
}

.aiwfm-section-page .section-list-item {
  padding: 0;
  border: 0;
  font-size: var(--aiwfm-font-size-body);
  line-height: var(--aiwfm-line-height-body);
}

.aiwfm-section-page .section-list-item a {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--aiwfm-space-16) var(--aiwfm-space-20);
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: var(--aiwfm-radius-card);
  background: var(--aiwfm-color-surface);
  color: var(--aiwfm-color-text);
  font-size: var(--aiwfm-font-size-body);
  font-weight: var(--aiwfm-font-weight-semibold);
  line-height: var(--aiwfm-line-height-body);
  text-decoration: none;
}

.aiwfm-section-page .section-list-item a:hover,
.aiwfm-section-page .section-list-item a:focus {
  border-color: var(--aiwfm-color-primary);
}

.aiwfm-section-page .section-list-item a svg {
  flex-shrink: 0;
  color: var(--aiwfm-color-text-muted);
}

.aiwfm-section-page .article-list {
  display: flex;
  flex-direction: column;
  gap: var(--aiwfm-space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.aiwfm-section-page .article-list-item {
  padding: 0;
  border: 0;
  font-size: var(--aiwfm-font-size-body);
  line-height: var(--aiwfm-line-height-body);
}

.aiwfm-section-page .article-list-item a {
  color: var(--aiwfm-color-primary);
  font-weight: var(--aiwfm-font-weight-regular);
}

.aiwfm-section-page .section-empty {
  display: block;
  padding: var(--aiwfm-space-40);
  color: var(--aiwfm-color-text-muted);
  text-align: center;
}

.aiwfm-section-page a:focus-visible {
  outline: 2px solid var(--aiwfm-color-focus, #0040dd);
  outline-offset: 3px;
}

/* AIWFM-SECTION-001 END ------------------------------------------------------- */

/* AIWFM-SEARCH-001 START -----------------------------------------------------
   Search results page: header, filter sidebar, and result list. Reuses
   AIWFM-CATEGORY-001's gradient search band, breadcrumb row, and beige
   content background (unscoped classes shared across the page) for visual
   consistency across the page family. No dedicated Figma frame exists for
   this page (see ZENDESK_UPDATE_LOG.md); scoped only to data
   search_results.hbs actually exposes. Layout ratios (sidebar/column flex
   split, mobile stacking) and all collapsible-filter/toggle behavior are
   untouched - only visual skin (color, spacing, borders) is added here.
   Audit/checklist: ../ZENDESK_UPDATE_LOG.md
   -------------------------------------------------------------------------- */

.aiwfm-search-page {
  font-family: var(--aiwfm-font-family-base);
}

.aiwfm-search-page .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

.aiwfm-search-page .search-results {
  gap: var(--aiwfm-space-24);
}

.aiwfm-search-page .search-results-column {
  min-width: 0;
}

/* Filter sidebar ------------------------------------------------------------ */

.aiwfm-search-page .search-results-sidebar {
  border-top: 0;
  margin-bottom: 0;
}

.aiwfm-search-page .filters-in-section {
  margin-bottom: var(--aiwfm-space-16);
  padding: var(--aiwfm-space-16) var(--aiwfm-space-20);
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: var(--aiwfm-radius-card);
  background: var(--aiwfm-color-surface);
}

.aiwfm-search-page .collapsible-sidebar-title {
  margin: 0 0 var(--aiwfm-space-12);
  color: var(--aiwfm-color-text);
  font-size: var(--aiwfm-font-size-body);
  font-weight: var(--aiwfm-font-weight-semibold);
  line-height: var(--aiwfm-line-height-body);
}

.aiwfm-search-page .sidenav-item {
  color: var(--aiwfm-color-text);
  font-size: var(--aiwfm-font-size-small);
  line-height: var(--aiwfm-line-height-small);
}

.aiwfm-search-page .sidenav-item:hover,
.aiwfm-search-page .sidenav-item.current {
  background-color: var(--aiwfm-color-surface-beige);
}

.aiwfm-search-page .doc-count {
  color: var(--aiwfm-color-text-muted);
}

.aiwfm-search-page .see-all-filters {
  color: var(--aiwfm-color-primary);
}

/* AIWFM-QA-FIX-017: the collapsed filter section's own label (e.g. "Type")
   renders as a rounded pill below 1024px (matching the base theme's own
   .collapsible-sidebar/.collapsible-sidebar-toggle collapse breakpoint),
   but the label text itself stayed left-aligned inside that pill instead of
   centered. Scoped to .aiwfm-search-page since .collapsible-sidebar-title
   is a shared base-theme class also used on community/topic pages. */
@media (max-width: 1023px) {
  .aiwfm-search-page .collapsible-sidebar-title {
    text-align: center;
  }
}

.aiwfm-search-page .sidenav-tag .content-tag {
  background: var(--aiwfm-color-surface-beige);
}

/* Result list ---------------------------------------------------------------- */

.aiwfm-search-page .search-results-list {
  display: flex;
  flex-direction: column;
  gap: var(--aiwfm-space-16);
  margin: 0 0 var(--aiwfm-space-24);
}

.aiwfm-search-page .search-results-list > li {
  padding: var(--aiwfm-space-16) var(--aiwfm-space-20);
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: var(--aiwfm-radius-card);
  background: var(--aiwfm-color-surface);
}

.aiwfm-search-page .search-result-title {
  font-size: var(--aiwfm-font-size-body);
  font-weight: var(--aiwfm-font-weight-semibold);
}

.aiwfm-search-page .results-list-item-link {
  color: var(--aiwfm-color-primary);
  text-decoration: none;
}

.aiwfm-search-page .results-list-item-link:hover,
.aiwfm-search-page .results-list-item-link:focus {
  text-decoration: underline;
}

.aiwfm-search-page .search-results .meta-group {
  color: var(--aiwfm-color-text-muted);
  font-size: var(--aiwfm-font-size-small);
  line-height: var(--aiwfm-line-height-small);
}

.aiwfm-search-page .search-results-description {
  color: var(--aiwfm-color-text);
  font-size: var(--aiwfm-font-size-small);
  line-height: var(--aiwfm-line-height-small);
}

/* Empty state ----------------------------------------------------------------- */

.aiwfm-search-page .no-results {
  padding: var(--aiwfm-space-40) 0;
}

.aiwfm-search-page .no-results .headline {
  color: var(--aiwfm-color-text);
  font-size: var(--aiwfm-font-size-body);
  font-weight: var(--aiwfm-font-weight-semibold);
  letter-spacing: normal;
}

.aiwfm-search-page .no-results .action-prompt {
  color: var(--aiwfm-color-text-muted);
  font-size: var(--aiwfm-font-size-small);
  letter-spacing: normal;
}

.aiwfm-search-page .no-results .action-prompt a {
  color: var(--aiwfm-color-primary);
}

.aiwfm-search-page a:focus-visible,
.aiwfm-search-page button:focus-visible {
  outline: 2px solid var(--aiwfm-color-focus, #0040dd);
  outline-offset: 3px;
}

/* AIWFM-SEARCH-001 END --------------------------------------------------------- */