@charset "UTF-8";
/***** Normalize.css *****/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/***** Base *****/
* {
  box-sizing: border-box;
}

body {
  background-color: #FFFFFF;
  color: #333333;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

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

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

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

h4 {
  font-size: 16px;
}

a {
  color: #2A6B85;
  text-decoration: none;
}
a:visited {
  color: #194554;
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}

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

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

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

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

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

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

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

.button-large, .hbs-form input[type=submit] {
  cursor: pointer;
  background-color: #194554;
  border: 0;
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 14px;
  line-height: 2.72;
  min-width: 190px;
  padding: 0 1.9286em;
  width: 100%;
}
@media (min-width: 768px) {
  .button-large, .hbs-form input[type=submit] {
    width: auto;
  }
}
.button-large:visited, .hbs-form input[type=submit]:visited {
  color: #FFFFFF;
}
.button-large:hover, .button-large:active, .button-large:focus, .hbs-form input[type=submit]:hover, .hbs-form input[type=submit]:active, .hbs-form input[type=submit]:focus {
  background-color: #020405;
}
.button-large[disabled], .hbs-form input[type=submit][disabled] {
  background-color: #ddd;
}

.button-secondary {
  color: #666;
  border: 1px solid #848F99;
  background-color: transparent;
}
.button-secondary:visited {
  color: #666;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: #333333;
  border: 1px solid #848F99;
  background-color: #f7f7f7;
}

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

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

[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: #666;
  font-size: 13px;
  text-align: left;
}
[dir=rtl] .table th,
[dir=rtl] .table th a {
  text-align: right;
}
.table tr {
  border-bottom: 1px solid #ddd;
  display: block;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .table tr {
    display: table-row;
  }
}
.table td {
  display: block;
}
@media (min-width: 768px) {
  .table td {
    display: table-cell;
  }
}
@media (min-width: 1024px) {
  .table td, .table th {
    padding: 20px 30px;
  }
}
@media (min-width: 768px) {
  .table td, .table th {
    padding: 10px 20px;
    height: 60px;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.form footer a {
  color: #666;
  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: #194554;
}

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

.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: #2A6B85;
  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: #2A6B85;
  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: #333333;
  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: #333333;
}
.nav-wrapper-mobile .menu-list-mobile-items a:active, .nav-wrapper-mobile .menu-list-mobile-items a:focus, .nav-wrapper-mobile .menu-list-mobile-items a:hover {
  background-color: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile {
  display: flex;
  line-height: 1.5;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile .my-profile-tooltip {
  font-size: 12px;
  color: #68737D;
}
.nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  margin-top: 1px;
}
[dir=rtl] .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  margin-right: 0;
  margin-left: 8px;
}

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

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

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

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

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

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

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

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

/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}
.breadcrumbs li {
  display: inline-block;
  color: #666;
  font-size: 13px;
  max-width: 450px;
  overflow-wrap: anywhere;
}
.breadcrumbs li + li::before {
  content: ">"/"";
  margin: 0 4px;
}
.breadcrumbs li a:visited {
  color: #2A6B85;
}

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

.search {
  border-color: #848F99;
  border-radius: 30px;
  border-style: solid;
  border-width: 1px;
  display: flex;
  position: relative;
  transition: border 0.12s ease-in-out;
}
.search:focus-within {
  border-color: #194554;
}
.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: #194554;
  color: #fff;
}
.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #194554;
}
.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: #194554;
}
[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: #194554;
}

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

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

/***** Hero component *****/
.hero {
  background-image: url(/hc/theming_assets/01M61KXFBB3WK48B3E8TNZ366V);
  background-position: center;
  background-size: cover;
  height: 300px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}
.hero-inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-width: 610px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 10px 0;
}
@media (min-width: 768px) {
  .page-header {
    align-items: baseline;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
  }
}
.page-header .section-subscribe {
  flex-shrink: 0;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .page-header .section-subscribe {
    margin-bottom: 0;
  }
}
.page-header h1 {
  flex-grow: 1;
  margin-bottom: 10px;
}
.page-header-description {
  font-style: italic;
  margin: 0 0 30px 0;
  word-break: break-word;
}
@media (min-width: 1024px) {
  .page-header-description {
    flex-basis: 100%;
  }
}
.page-header .icon-lock {
  height: 20px;
  width: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

.sub-nav {
  align-items: baseline;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 15px 30px;
  justify-content: space-between;
  margin-bottom: 55px;
}
@media (min-width: 768px) {
  .sub-nav {
    flex-direction: row;
  }
}
.sub-nav .breadcrumbs {
  margin: 0;
}
.sub-nav .search-container {
  max-width: 300px;
  width: 100%;
}
@media (min-width: 768px) {
  .sub-nav .search-container {
    flex: 0 1 300px;
  }
}
.sub-nav input[type=search]::after {
  font-size: 15px;
}

/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
}
@media (min-width: 768px) {
  .blocks-list {
    margin: 0 -15px;
  }
}
.blocks-item {
  border: 1px solid #194554;
  border-radius: 4px;
  box-sizing: border-box;
  color: #194554;
  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: #194554;
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: #FFFFFF;
  text-decoration: none;
}
.blocks-item-internal {
  background-color: transparent;
  border: 1px solid #ddd;
}
.blocks-item-internal .icon-lock {
  height: 15px;
  width: 15px;
  bottom: 5px;
  position: relative;
}
.blocks-item-internal a {
  color: #333333;
}
.blocks-item-link {
  color: #194554;
  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 #194554;
  text-decoration: none;
}
.blocks-item-title {
  margin-bottom: 0;
  font-size: 16px;
}
.blocks-item-description {
  margin: 0;
}
.blocks-item-description:not(:empty) {
  margin-top: 10px;
}

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

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

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

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

.community,
.activity {
  border-top: 1px solid #ddd;
  padding: 30px 0;
}

/***** Recent activity *****/
.recent-activity-header {
  margin-bottom: 10px;
  text-align: center;
}
.recent-activity-list {
  padding: 0;
}
.recent-activity-item {
  border-bottom: 1px solid #ddd;
  overflow: auto;
  padding: 20px 0;
}
.recent-activity-item h3 {
  margin: 0;
}
.recent-activity-item-parent {
  font-size: 16px;
  font-weight: 600;
}
.recent-activity-item-parent, .recent-activity-item-link {
  margin: 6px 0;
  display: inline-block;
  width: 100%;
}
@media (min-width: 768px) {
  .recent-activity-item-parent, .recent-activity-item-link {
    width: 70%;
    margin: 0;
  }
}
.recent-activity-item-link {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-activity-item-meta {
  color: #333333;
  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: #2A6B85;
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: #194554;
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: #194554;
}
.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: #194554;
  width: 16px;
  height: 16px;
}
.recent-activity-comment-icon:after {
  content: attr(data-comment-count);
  margin-left: 3px;
}
[dir=rtl] .recent-activity-comment-icon:after {
  margin-left: 0;
  margin-right: 3px;
}

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

.section-tree {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .section-tree {
    flex-direction: row;
  }
}
.section-tree .section {
  flex: initial;
  max-width: 100%;
}
@media (min-width: 768px) {
  .section-tree .section {
    flex: 0 0 45%; /* Two columns for tablet and desktop. Leaving 5% separation between columns */
  }
}
.section-tree-title {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 600;
}
.section-tree-title a {
  color: #333333;
}
.section-tree .see-all-articles {
  display: block;
  padding: 15px 0;
}

.article-list-item {
  font-size: 16px;
  padding: 15px 0;
  text-overflow: ellipsis;
  overflow: hidden;
}
.article-list-item a {
  color: #333333;
}

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

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

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

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

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

.sidenav-title {
  font-size: 15px;
  position: relative;
  font-weight: 600;
}
.sidenav-item {
  display: block;
  margin-top: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-articles li,
.related-articles li {
  margin-bottom: 15px;
}

/***** Attachments *****/
/* Styles attachments inside posts, articles and comments */
.attachments .attachment-item {
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}
.attachments .attachment-item:last-child {
  margin-bottom: 0;
}
.attachments .attachment-item .attachment-icon {
  color: #333333;
  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: #666;
}

/***** 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: #666;
}
.share a:hover {
  text-decoration: none;
  color: #194554;
}
.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: #666;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}
.comment-callout a {
  color: #2A6B85;
  text-decoration: underline;
}
.comment-callout a:visited {
  color: #194554;
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: #194554;
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: #666;
  font-size: 13px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid #194554;
  padding: 40px 20px 20px;
}
@media (min-width: 768px) {
  .comment-wrapper.comment-official {
    padding-top: 20px;
  }
}
.comment-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .comment-info {
  padding-right: 0;
  padding-left: 20px;
}
.comment-author {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .comment-author {
    justify-content: space-between;
  }
}
.comment-avatar {
  margin-right: 10px;
}
[dir=rtl] .comment-avatar {
  margin-left: 10px;
  margin-right: 0;
}
.comment-meta {
  flex: 1 1 auto;
}
.comment-labels {
  flex-basis: 100%;
}
@media (min-width: 768px) {
  .comment-labels {
    flex-basis: auto;
  }
}
.comment .status-label:not(.status-label-official) {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .comment .status-label:not(.status-label-official) {
    margin-top: 0;
  }
}
.comment-form {
  display: flex;
  padding-top: 30px;
  word-wrap: break-word;
}
.comment-container {
  width: 100%;
}
.comment-form-controls {
  display: none;
  margin-top: 10px;
  text-align: left;
}
@media (min-width: 768px) {
  [dir=ltr] .comment-form-controls {
    text-align: right;
  }
}
.comment-form-controls input[type=submit] {
  margin-top: 15px;
}
@media (min-width: 1024px) {
  .comment-form-controls input[type=submit] {
    margin-left: 15px;
  }
  [dir=rtl] .comment-form-controls input[type=submit] {
    margin-left: 0;
    margin-right: 15px;
  }
}
.comment-form-controls input[type=checkbox] {
  margin-right: 5px;
}
.comment-form-controls input[type=checkbox] [dir=rtl] {
  margin-left: 5px;
}
.comment-ccs {
  display: none;
}
.comment-ccs + textarea {
  margin-top: 10px;
}
.comment-attachments {
  margin-top: 10px;
}
.comment-attachments a {
  color: #194554;
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  color: #2A6B85;
  text-decoration: underline;
}
.comment-body a:visited {
  color: #194554;
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: #194554;
}
.comment-body img {
  height: auto;
  max-width: 100%;
}
.comment-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figure.image {
  display: table;
  margin: 0 auto;
}
.comment-body figure.image > img {
  display: block;
  width: 100%;
}
.comment-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.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;
  direction: ltr;
}
.comment-body blockquote {
  border-left: 1px solid #ddd;
  color: #666;
  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: #666;
  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: #194554;
}

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

.vote-voted {
  color: #194554;
}

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

/***** 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/01M61KXFQKCMFQ3EA60HRGV3MQ);
  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: #194554;
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: #FFFFFF;
  color: #FFFFFF;
}
.community-follow button[data-selected=true] {
  background-color: #194554;
  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: #020405;
  border-color: #020405;
}
.community-follow button::after {
  border-left: 1px solid #194554;
  content: attr(data-follower-count);
  color: #194554;
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}
@media (min-width: 768px) {
  .community-follow button::after {
    position: static;
  }
}
[dir=rtl] .community-follow button::after {
  border-left: 0;
  border-right: 1px solid #194554;
  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: #2A6B85;
  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: #194554;
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #666;
  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: #333333;
    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: #194554;
}
.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: #666;
}
.status-label-pending, .status-label-pending-moderation {
  background-color: #1f73b7;
  text-align: center;
}
.status-label-open {
  background-color: #c72a1c;
}
.status-label-solved {
  background-color: #68737d;
}
.status-label-new {
  background-color: #ffb648;
  color: #703b15;
}
.status-label-hold {
  background-color: #000;
}
.status-label-request {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .status-label-request {
    max-width: 150px;
  }
}

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

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

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

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

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

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

.community-badge {
  margin: 2px;
}

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

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

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

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

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

.collapsible-nav.expanded li:not([aria-selected=true]),
.collapsible-nav.expanded li:not(.current) {
  display: block;
}

/* Sidebar navigation that collapses on mobile */
.collapsible-sidebar {
  flex: 1;
  max-height: 45px;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
}
@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 0;
  }
}
.collapsible-sidebar-title {
  margin-top: 0;
}
.collapsible-sidebar-toggle {
  position: absolute;
  top: 22.5px;
  transform: translateY(-50%);
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-toggle {
    display: none;
  }
}
[dir=rtl] .collapsible-sidebar-toggle {
  left: 0;
  right: auto;
}
.collapsible-sidebar-toggle-icon {
  display: none;
}
.collapsible-sidebar-toggle[aria-expanded=false] .chevron-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle[aria-expanded=true] .x-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle:focus {
  outline: none;
  border: 1px solid #194554;
}
.collapsible-sidebar-body {
  display: none;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-body {
    display: block;
  }
}
.collapsible-sidebar.expanded {
  max-height: none;
}
.collapsible-sidebar.expanded .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: #666;
  font-size: 13px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: #666;
}

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

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

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

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

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

.meta-group * {
  display: inline;
}

.meta-data {
  color: #666;
  font-size: 13px;
}
.meta-data:not(:last-child)::after {
  content: "·";
  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;
  vertical-align: middle;
  display: inline;
}

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

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

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

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

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

.profile-stats .stat-label {
  color: #666;
  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 #194554;
  border-radius: 4px;
  color: #194554;
  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: #666;
  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: #666;
  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: #333333;
}
.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:not(.expanded) .multibrand-filter-list {
  display: none;
}
@media (min-width: 1024px) {
  .search-results-sidebar .collapsible-sidebar:not(.expanded) .multibrand-filter-list {
    display: block;
  }
}
.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n+6):not(.see-all-filters-item) {
  display: none;
}
.search-results-sidebar .multibrand-filter-list .doc-count {
  color: #666;
}
.search-results-sidebar .see-all-filters {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  padding: 10px;
  color: #2A6B85;
}
.search-results-sidebar .see-all-filters[aria-hidden=true] {
  display: none;
}
.search-results-sidebar .see-all-filters:hover {
  text-decoration: underline;
}
.search-results-sidebar .see-all-filters::after {
  content: " ⌄";
  font-weight: bold;
}
.search-results-subheading {
  font-size: 18px;
  font-weight: 600;
}
.search-results-list {
  margin-bottom: 25px;
}
.search-results-list > li {
  padding: 20px 0;
}
.search-results-list > li:first-child {
  border-top: 1px solid #ddd;
}
.search-results .no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rem;
}
.search-results .no-results .headline {
  color: #2F3941;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.45px;
}
.search-results .no-results .action-prompt {
  color: #68737D;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.154px;
}
.search-results .no-results .action-prompt a {
  color: #2A6B85;
}
.search-results .no-results .action-prompt a:visited {
  color: #2A6B85;
}

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

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

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

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

.notification a {
  color: #158ec2;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.is-service-catalog-preview #navbar-container,
.is-service-catalog-preview .navbar-container,
.is-service-catalog-preview .assembly-bar,
.is-service-catalog-preview [data-garden-id="chrome.subnav"] {
  display: none !important;
}

/* ==========================================================================
   Easy Song brand alignment (proposal 2026-10-28, not live).
   Appended after the theme's style.css. Every value is a token from
   "Easy Song Master Style Guide/easysong-style.css", customer tier, or a
   live easysong.com value; nothing here is invented.
   ========================================================================== */
:root {
  --es-blue: #3EB0D5;
  --es-blue-strong: #2A89AD;
  --es-navy: #194554;
  --es-navy-2: #2A6B85;
  --es-taupe: #88746B;
  --es-copyright: #5E524B;
  --blue-50: #EEF9FD;
  --blue-100: #D7F1FB;
  --blue-200: #B8E8F8;
  --es-success: #3C763D;
  --text: #333333;
  --text-2: #5C6670;
  --border: rgba(0,0,0,.125);
  --surface-2: #F8FAFB;
  --accent-hover: #2A9DC2;
  /* Body-text links: navy-2 passes WCAG AA on white (5.9:1); brand blue (2.5:1) does not. */
  --link: var(--es-navy-2);
  /* Motion: the style guide's curve and three durations, shared by every transition and animation
     (and read by es-help.js), so all movement feels like one hand. */
  --es-ease: cubic-bezier(.25, 0, .2, 1);
  --es-dur-fast: .15s;  /* hovers and colour changes */
  --es-dur: .25s;       /* opening and closing, pop-ups, page fades */
  --es-dur-slow: .4s;   /* content settling into place */
  --fs-sm: .875rem; --fs-base: 1rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 1.75rem; --fs-display: 2.65rem;
}

/* 1. Type: Raleway everywhere, #333 text, legacy line heights */
body { font-family: 'Raleway', Arial, Helvetica, sans-serif; color: var(--text); line-height: 1.6; background: #fff; }
h1, h2, h3, h4, h5, h6, .blocks-item-title, .sidenav-title { font-family: 'Raleway', Arial, sans-serif; color: var(--text); }
a { color: var(--link); }
a:hover, a:active, a:focus { color: var(--es-navy); }
:is(a, button, input):focus-visible { outline: 2px solid var(--es-blue); outline-offset: 2px; }

/* 2. Shared button used by the header and the "Still have questions?" band. */
.es-hc-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: .5rem 1.1rem; border-radius: .25rem;
  background: var(--es-blue); color: #fff; font-weight: 600; border: 1px solid var(--es-blue); white-space: nowrap;
  transition: background-color var(--es-dur-fast) var(--es-ease), border-color var(--es-dur-fast) var(--es-ease); }
.es-hc-btn:hover, .es-hc-btn:focus { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; text-decoration: none; }
.es-hc-btn.outlined { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.es-hc-btn.outlined:hover { background: rgba(255,255,255,.12); }

/* 2a. Help Center header: distinct from the easysong.com header on purpose (no service menus).
   Light blue tint bar. The logo (to easysong.com) and "Help Center" (to the Help Center home) are two
   separate links with the same quiet hover cue (a small colour/opacity change, no movement), the common
   pattern on support sites; the logo's tooltip says where it goes. */
.es-own { position: sticky; top: 0; z-index: 50; background: var(--blue-50); border-bottom: 1px solid #B8E8F8; }
.es-own-inner { max-width: 1140px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 16px; min-height: 64px; }
.es-own-brand { display: flex; align-items: center; gap: 14px; flex: 1; }
.es-own-logo { display: inline-block; transition: opacity var(--es-dur-fast) var(--es-ease); }
.es-own-logo:hover, .es-own-logo:focus-visible { opacity: .75; }
.es-own-logo img { width: 160px; display: block; }
.es-own-divider { width: 1px; align-self: stretch; margin: 6px 0; background: var(--border); }
.es-own-label { font-size: var(--fs-lg); font-weight: 600; color: var(--es-navy); line-height: 1.2; white-space: nowrap; transition: color var(--es-dur-fast) var(--es-ease); }
.es-own-label:hover, .es-own-label:focus-visible { color: var(--es-blue-strong); text-decoration: none; }
.es-own-contact { color: var(--link); white-space: nowrap; transition: color var(--es-dur-fast) var(--es-ease); }
.es-own-contact:hover, .es-own-contact:focus-visible { color: var(--es-navy); text-decoration: none; }
@media (max-width: 479.98px) {
  .es-own-inner { padding: 10px 16px; gap: 10px; }
  .es-own-logo img { width: 112px; }
  .es-own-label { font-size: var(--fs-base); }
  .es-own-brand { gap: 10px; }
}

/* 3. Hero: the style guide's navy customer hero, bigger search */
.hero { background: linear-gradient(150deg, var(--es-navy) 0%, var(--es-navy-2) 100%); height: auto; padding: 56px 20px 60px; }
.hero-inner { top: auto; transform: none; max-width: 720px; }
h1.es-home-header-text { font-size: var(--fs-display); font-weight: 700; color: #fff; text-shadow: none; margin: 0 0 8px; }
.es-hc-lede { color: #fff; opacity: .92; font-size: var(--fs-lg); font-weight: 300; margin: 0 0 24px; }
.es-hc-search { display: flex; gap: 8px; }
.es-hc-search input[type="search"] { flex: 1 1 auto; min-width: 0; height: 52px; border: 1px solid #fff; border-radius: .25rem; padding: 0 16px;
  font: inherit; font-size: var(--fs-base); color: var(--text); }
.es-hc-search input[type="search"]:focus { outline: none; box-shadow: 0 0 0 .2rem rgba(62,176,213,.45); }
.es-hc-search button { min-height: 52px; padding: 0 22px; border-radius: .25rem; border: 0; background: var(--es-blue); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer; }
.es-hc-search button:hover { background: var(--accent-hover); }
@media (max-width: 991.98px) { h1.es-home-header-text { font-size: 1.855rem; } }

/* 5. Category cards: the style guide's service card (colour bar, left aligned, 4px corners) */
.container { max-width: 1140px; padding: 0 20px; }
.knowledge-base .section, .section.knowledge-base { margin-top: 32px; }
.blocks-list { margin: 0 -10px; }
.blocks-item { border: 1px solid var(--border); border-radius: .25rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); margin: 0 10px 20px;
  text-align: left; overflow: hidden; border-top: 5px solid var(--es-blue); color: var(--text);
  transition: transform var(--es-dur-fast) var(--es-ease), box-shadow var(--es-dur-fast) var(--es-ease); }
.blocks-item:hover, .blocks-item:focus-within { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(15,42,51,.12); background: #fff; }
.blocks-item:hover *, .blocks-item:focus-within * { color: inherit; }
.blocks-item-link { padding: 22px 24px; color: var(--text); display: flex; flex-direction: column; gap: 8px; height: 100%; }
.blocks-item-link:hover { text-decoration: none; }
.blocks-item-title { font-size: var(--fs-lg); font-weight: 700; color: var(--text) !important; margin: 0; }
.blocks-item-description { color: var(--text-2) !important; font-size: var(--fs-base); line-height: 1.6; margin: 0; flex: 1; font-weight: 400; }
.es-hc-browse { color: var(--link) !important; font-weight: 600; font-size: var(--fs-sm); }
@media (max-width: 767.98px) { .blocks-item { margin: 0 10px 14px; } }

/* 6. Popular articles: two calm columns of rows */
.articles h2, .es-hc-section-title { font-size: var(--fs-2xl); font-weight: 700; text-transform: none; margin: 40px 0 12px; color: var(--text); }
.promoted-articles { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.promoted-articles-item { width: auto !important; padding: 0 !important; }
.promoted-articles-item a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #EDF2F7;
  color: var(--link); font-size: var(--fs-base); line-height: 1.5; }
.promoted-articles-item a::after { content: "\203A"; color: var(--es-blue); font-size: 1.3em; line-height: 1; }
.promoted-articles-item:last-child a { border-bottom: 1px solid #EDF2F7; }
@media (max-width: 767.98px) { .promoted-articles { grid-template-columns: 1fr; } }

/* 7. "Still have questions?" band, closes every page with a way to a person */
.es-hc-help { background: var(--surface-2); border-top: 1px solid #EDF2F7; margin-top: 56px; padding: 40px 20px; text-align: center; }
.es-hc-help h2 { font-size: var(--fs-2xl); font-weight: 700; margin: 0 0 6px; }
.es-hc-help p { color: var(--text-2); margin: 0 auto 20px; max-width: 60ch; }
.es-hc-help .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.es-hc-help .es-hc-btn.outlined { color: var(--es-blue-strong); border-color: var(--es-blue); }
.es-hc-help .es-hc-btn.outlined:hover { background: var(--blue-50); }

/* 8. Footer: the easysong.com taupe footer */
.es-hc-footer { background: var(--es-taupe); color: #fff; padding: 40px 0 32px; }
.es-hc-footer-inner { max-width: 1140px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.es-hc-footer h3 { color: #fff; font-size: var(--fs-base); font-weight: 700; margin: 0 0 10px; }
.es-hc-footer a { color: rgba(255,255,255,.88); display: block; padding: 3px 0; }
.es-hc-footer a:hover { color: #fff; }
.es-hc-footer .label { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: 14px; }
.es-hc-footer .meta { color: #fff; font-size: var(--fs-sm); line-height: 1.6; }
.es-hc-social { display: flex; gap: 14px; }
.es-hc-social a { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(255,255,255,.15); padding: 0; }
.es-hc-social a:hover { background: rgba(255,255,255,.28); }
.es-hc-social svg { width: 18px; height: 18px; fill: #fff; }
.es-hc-legal { background: #fff; padding: 16px 0; font-size: var(--fs-sm); }
.es-hc-legal-inner { max-width: 1140px; margin: 0 auto; padding: 0 20px; display: flex; gap: 20px; flex-wrap: wrap; color: var(--text-2); }
.es-hc-legal a { color: var(--text-2); }
@media (max-width: 767.98px) { .es-hc-footer-inner { grid-template-columns: 1fr 1fr; } }

/* 9. Article page: a navy title band like easysong.com's inner pages, readable body */
.es-hc-band { background: linear-gradient(150deg, var(--es-navy) 0%, var(--es-navy-2) 100%); color: #fff; padding: 28px 20px 36px; }
.es-hc-band-inner { max-width: 1140px; margin: 0 auto; }
.es-hc-band .breadcrumbs { margin: 0 0 14px; padding: 0; }
.es-hc-band .breadcrumbs li, .es-hc-band .breadcrumbs li a { color: rgba(255,255,255,.85); font-size: var(--fs-sm); }
.es-hc-band .breadcrumbs li + li::before { color: rgba(255,255,255,.6); }
.es-hc-band h1 { color: #fff; font-size: var(--fs-display); font-weight: 700; line-height: 1.2; margin: 0; max-width: 24ch; }
.es-hc-band .es-hc-updated { color: rgba(255,255,255,.8); font-size: var(--fs-sm); margin-top: 10px; }
@media (max-width: 991.98px) { .es-hc-band h1 { font-size: 1.855rem; } }
.article-container { margin-top: 36px; }
.article-sidebar { border: 0; }
.sidenav-title { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.sidenav-item { color: var(--text); border-left: 3px solid transparent; border-radius: 0; padding: 8px 12px; font-size: var(--fs-sm); line-height: 1.5; }
.sidenav-item:hover { background: var(--surface-2); text-decoration: none; }
.sidenav-item.current-article, .sidenav-item.current-article:hover { background: var(--blue-50); color: var(--es-navy); border-left-color: var(--es-blue); font-weight: 700; }
.article-body { font-size: var(--fs-base); line-height: 1.85; max-width: 75ch; color: var(--text); }
.article-body h2, .article-body h3 { font-weight: 700; margin-top: 1.6em; }
.article-body a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
/* Many article bodies carry inline styles pasted from the old theme (system font, #635a55 text,
   #026a93 links, white backgrounds). Neutralise them so articles follow the theme. */
.article-body [style]:not(.es-fill) { font-family: inherit !important; color: inherit !important; }
/* Pasted white backgrounds sit on text elements; table cells keep the shading editors give them. */
.article-body :is(p, span, div, li, a, strong, b, em, i, h1, h2, h3, h4, h5, h6)[style]:not(.es-fill) { background-color: transparent !important; }
.article-body a[style] { color: var(--link) !important; }
.article-body iframe { border-radius: .25rem; }

/* 10. Mobile and tablet article reading.
   Below 1024px the theme stacks the sidebar above the article, where it collapses to a bare
   "Articles in this section" label. Move it below the article as a short "more in this section"
   list instead, so the answer comes first. */
@media (max-width: 1023.98px) {
  .article-container { margin-top: 20px; }
  .article { order: 1; }
  .article-sidebar { order: 2; border: 0; border-top: 1px solid #EDF2F7; margin: 32px 0 0; padding-top: 20px; }
  .collapsible-sidebar { max-height: none; overflow: visible; padding: 0; }
  .collapsible-sidebar-toggle { display: none; }
  .article-sidebar .collapsible-sidebar-body { display: block; }
  .article-sidebar li:has(.current-article), .article-sidebar li:nth-child(n+7) { display: none; }
  .sidenav-item { padding: 10px 12px; }
}
/* Article tables and media never force sideways scrolling. */
.article-body img, .article-body iframe, .article-body video { max-width: 100%; height: auto; }
.article-body iframe { aspect-ratio: 16 / 9; }
/* Tables fill the article width; es-help.js wraps each one in .es-table-wrap so a table too wide for
   a phone scrolls sideways inside its wrapper instead of pushing the page. */
.article-body table { display: table; width: 100%; }
.es-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1em; }
.es-table-wrap > table { margin: 0; }
/* Zendesk's editor wraps tables in <figure class="wysiwyg-table" style="width: 100%">; the browser's
   default 40px figure indent made it wider than the article and pushed phones sideways. */
.article-body figure.wysiwyg-table { margin: 0 0 1em; max-width: 100%; }
/* "On this page" jump list, added by script.js to articles with 3+ headings. */
.es-toc { border: 1px solid #B8E8F8; background: var(--blue-50); border-radius: .25rem; margin: 0 0 20px; max-width: 75ch; }
.es-toc summary { cursor: pointer; padding: 12px 16px; font-weight: 700; color: var(--es-navy); min-height: 44px; }
.es-toc ol { margin: 0; padding: 0 16px 12px 36px; }
.es-toc li { padding: 4px 0; line-height: 1.4; }
@media (max-width: 767.98px) {
  /* Shorter title band: just the parent section as a back link, smaller title. */
  .es-hc-band { padding: 14px 16px 18px; }
  .es-hc-band .breadcrumbs { margin-bottom: 8px; }
  .es-hc-band .breadcrumbs li { display: none; }
  .es-hc-band .breadcrumbs li:last-child { display: inline; }
  .es-hc-band .breadcrumbs li:last-child::before { content: "\2039\00a0"; color: rgba(255,255,255,.85); margin: 0; }
  .es-hc-band h1 { font-size: var(--fs-xl); }
  .es-hc-band .es-hc-updated { margin-top: 6px; }
  .container { padding: 0 16px; }
  /* Denser body text: the guide's 1.6 body line height instead of the 1.85 long-form one. */
  .article-content { margin: 0 0 24px; }
  .article-body { line-height: 1.6; }
  .article-body p { margin: 0 0 .75em; }
  .article-body h2, .article-body h3, .article-body h4 { margin: 1.25em 0 .4em; line-height: 1.3; }
  .article-body > :first-child { margin-top: 0; }
  .article-body hr { margin: 16px 0; }
  .article-body ul, .article-body ol { padding-left: 1.25em; }
  .es-hc-help { margin-top: 32px; padding: 28px 16px; }
  /* Footer: link groups two-up instead of one long column. */
  .es-hc-footer { padding: 28px 0 24px; }
  .es-hc-footer-inner { grid-template-columns: 1fr 1fr; gap: 20px 16px; padding: 0 16px; }
  .es-hc-footer h3 { margin-bottom: 6px; }
  .es-hc-footer .label { margin-top: 10px; }
  .es-hc-legal-inner { padding: 0 16px; }
}
@media (max-width: 359.98px) {
  .es-own-inner { padding: 10px 12px; }
  .es-own-brand { gap: 8px; }
  .es-own-logo img { width: 92px; }
  .es-own-label, .es-own-contact { font-size: var(--fs-sm); }
}

/* 11. Compact homepage on phones: about 6 screens of scrolling down to about 3.
   Categories become a list (colour bar on the left), popular articles show the top 5 with a
   "Show all" button, and the hero is slimmer. Desktop is unchanged. */
.es-hc-more { display: none; }
@media (max-width: 767.98px) {
  .hero { padding: 28px 16px 30px; }
  h1.es-home-header-text { font-size: var(--fs-xl); margin-bottom: 14px; }
  .es-hc-lede { display: none; }
  .es-hc-search input[type="search"], .es-hc-search button { height: 48px; min-height: 48px; }
  .es-hc-search button { padding: 0 16px; }
  .section.knowledge-base { margin-top: 16px; }
  .blocks-list { margin: 0; display: block; border: 1px solid var(--border); border-radius: .25rem; overflow: hidden; }
  .blocks-item { margin: 0; border: 0; border-radius: 0; border-left: 4px solid var(--es-blue); box-shadow: none; }
  .blocks-item + .blocks-item { border-top: 1px solid #EDF2F7; }
  .blocks-item:hover, .blocks-item:focus-within { transform: none; box-shadow: none; background: var(--surface-2); }
  .blocks-item-link { padding: 12px 36px 12px 14px; gap: 2px; position: relative; }
  .blocks-item-link::after { content: "\203A"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--es-blue); font-size: 1.5em; }
  .blocks-item-title { font-size: var(--fs-base); }
  .blocks-item-description { font-size: var(--fs-sm); line-height: 1.45; }
  .es-hc-browse { display: none; }
  .articles h2 { font-size: var(--fs-xl); margin: 28px 0 4px; }
  .promoted-articles:not(.show-all) .promoted-articles-item:nth-child(n+6) { display: none; }
  .promoted-articles-item a { padding: 11px 0; }
  .es-hc-more { display: block; width: 100%; min-height: 44px; margin-top: 12px; background: #fff; border: 1px solid var(--es-blue);
    border-radius: .25rem; color: var(--es-navy); font: inherit; font-weight: 600; cursor: pointer; }
  .es-hc-more:hover { background: var(--blue-50); }
  .es-hc-more[hidden] { display: none; }
}

/* Header: Contact Us sits on the right on desktop; on phones it joins the group after a divider. */
@media (min-width: 768px) {
  .es-own-contact { margin-left: auto; }
  .es-own-divider.before-contact { display: none; }
}

/* 12. Engagement features (proposal 2026-10-28). Each block matches a function in es-help.js
   or a template change; all values are style guide tokens. */

/* 12a. Homepage "What are you trying to do?" chooser */
.es-goals { max-width: 1140px; margin: 32px auto 0; padding: 0 20px; }
.es-goals h2 { font-size: var(--fs-2xl); font-weight: 700; margin: 0 0 14px; }
.es-goal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.es-goal { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 12px 16px;
  background: #fff; border: 1px solid var(--border); border-radius: .25rem; font: inherit; font-weight: 600; color: var(--text);
  text-align: left; cursor: pointer; transition: border-color var(--es-dur-fast) var(--es-ease), background-color var(--es-dur-fast) var(--es-ease); }
.es-goal:hover { border-color: var(--es-blue); background: var(--blue-50); }
.es-goal::after { content: "\203A"; color: var(--es-blue); font-size: 1.4em; line-height: 1; transition: transform var(--es-dur-fast) var(--es-ease); }
.es-goal[aria-expanded="true"] { border-color: var(--es-blue); background: var(--blue-50); color: var(--es-navy); }
.es-goal[aria-expanded="true"]::after { transform: rotate(90deg); }
.es-goal-panel { margin-top: 12px; background: var(--blue-50); border: 1px solid #B8E8F8; border-radius: .25rem; padding: 18px 20px;
  display: flex; gap: 24px; align-items: center; }
.es-goal-panel[hidden] { display: none; }
.es-goal-panel ul { list-style: none; margin: 0; padding: 0; flex: 1; }
.es-goal-panel li a { display: block; padding: 6px 0; color: var(--link); }
.es-goal-panel .es-hc-btn { flex-shrink: 0; }
.es-glossary-hint { margin: 14px 0 0; color: rgba(255,255,255,.85); font-size: var(--fs-sm); }
.es-glossary-hint a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 991.98px) { .es-goal-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767.98px) {
  .es-goals { margin-top: 20px; padding: 0 16px; }
  .es-goals h2 { font-size: var(--fs-xl); margin-bottom: 10px; }
  .es-goal-grid { gap: 8px; }
  .es-goal { min-height: 52px; padding: 10px 12px; font-size: var(--fs-sm); }
  .es-goal-panel { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; }
  .es-goal-panel .es-hc-btn { justify-content: center; }
}

/* 12b. Glossary term buttons and their pop-up */
.es-term { display: inline; font: inherit; line-height: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0;
  cursor: help; text-align: inherit; text-decoration: underline dotted var(--es-blue); text-decoration-thickness: 2px;
  text-underline-offset: 3px; }
.es-term:hover, .es-term[aria-expanded="true"] { color: var(--es-navy); text-decoration-style: solid; }
.es-term-pop { position: absolute; z-index: 60; background: #fff; border: 1px solid var(--border); border-radius: .25rem;
  box-shadow: 0 10px 30px rgba(15,42,51,.12); padding: 14px 16px; font-size: var(--fs-sm); line-height: 1.5; }
.es-term-pop strong { display: block; color: var(--es-navy); font-size: var(--fs-base); margin-bottom: 4px; }
.es-term-pop p { margin: 0 0 10px; color: var(--text); }
.es-term-links { display: flex; gap: 16px; }
.es-term-links a { color: var(--link); font-weight: 600; }

/* 12c. Step checklists (<ol class="es-steps">) */
.es-steps-status { display: flex; align-items: center; gap: 12px; margin: 8px 0 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--es-navy); }
.es-steps-bar { flex: 1; max-width: 220px; height: 6px; background: #EDF2F7; border-radius: 999px; overflow: hidden; }
.es-steps-bar .es-fill { display: block; height: 100%; width: 0; background: var(--es-success); transition: width var(--es-dur) var(--es-ease); }
.es-steps-reset { background: none; border: 0; padding: 4px; font: inherit; font-weight: 400; color: var(--link); cursor: pointer; text-decoration: underline; }
.article-body ol.es-steps-ready { list-style: none; padding-left: 0; counter-reset: es-step; }
.article-body ol.es-steps-ready > li { position: relative; padding: 10px 12px 10px 44px; border: 1px solid #EDF2F7; border-radius: .25rem; margin-bottom: 8px;
  counter-increment: es-step; transition: background-color var(--es-dur-fast) var(--es-ease); }
.article-body ol.es-steps-ready > li::before { content: "Step " counter(es-step); display: block; font-size: .75rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.es-step-box { position: absolute; left: 12px; top: 13px; width: 22px; height: 22px; margin: 0; accent-color: var(--es-success); cursor: pointer; }
.article-body ol.es-steps-ready > li.is-done { background: #E8F2E8; border-color: #CFE3CF; }
.article-body ol.es-steps-ready > li.is-done::before { content: "Step " counter(es-step) " \2713  done"; color: var(--es-success); }

/* 12d. Next step box at the end of an article */
.es-next { display: flex; align-items: center; gap: 20px; max-width: 75ch; margin: 28px 0 8px; padding: 18px 20px;
  background: var(--blue-50); border: 1px solid #B8E8F8; border-left: 5px solid var(--es-blue); border-radius: .25rem; }
.es-next div { flex: 1; }
.es-next strong { display: block; color: var(--es-navy); font-size: var(--fs-lg); line-height: 1.3; }
.es-next p { margin: 4px 0 0; color: var(--text-2); }
@media (max-width: 575.98px) { .es-next { flex-direction: column; align-items: stretch; } .es-next .es-hc-btn { justify-content: center; } }

/* 12e. "Was this article helpful?" (Zendesk's vote buttons, restyled) and the follow-up */
.article-votes { max-width: 75ch; margin: 24px 0 0; padding: 18px 0 0; border-top: 1px solid #EDF2F7; text-align: left; }
.article-votes-question { font-weight: 700; font-size: var(--fs-base); margin: 0 0 10px; }
.article-votes-controls { display: flex; gap: 10px; }
.article-vote { min-height: 44px; min-width: 88px; padding: 0 18px; border: 1px solid var(--es-blue); border-radius: .25rem; background: #fff;
  color: var(--es-navy); font: inherit; font-weight: 600; cursor: pointer; }
.article-vote:hover, .article-vote.button-primary { background: var(--blue-50); }
.article-vote-label { display: block; margin-top: 8px; font-size: var(--fs-sm); color: var(--text-2); }
.es-vote-follow { margin-top: 14px; padding: 14px 16px; background: var(--surface-2); border: 1px solid #EDF2F7; border-radius: .25rem; }
.es-vote-follow[hidden], .es-vote-follow [hidden] { display: none; }
.es-vote-follow p { margin: 0 0 10px; }
.es-vote-follow form { display: flex; gap: 8px; margin-bottom: 10px; }
.es-vote-follow input[type="search"] { flex: 1; min-width: 0; min-height: 44px; border: 1px solid #CED4DA; border-radius: .25rem; padding: 0 12px; font: inherit; }
.es-vote-follow button { min-height: 44px; padding: 0 16px; border: 0; border-radius: .25rem; background: var(--es-blue); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }

/* 12f. Glossary article: A-Z jump bar and definition list */
.article-body ul.es-az { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; }
.article-body ul.es-az li { list-style: none; margin: 0; padding: 0; }
.article-body ul.es-az li::before, .article-body ul.es-az li::after { content: none; display: none; }
.es-az a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; border: 1px solid #B8E8F8;
  border-radius: .25rem; background: var(--blue-50); color: var(--es-navy); font-weight: 700; text-decoration: none; }
.es-az a:hover { border-color: var(--es-blue); }
.article-body dl.es-glossary { margin: 0; }
.article-body .es-glossary dt { font-weight: 700; font-size: var(--fs-lg); color: var(--es-navy); margin-top: 18px; scroll-margin-top: 90px; }
.article-body .es-glossary dt.es-letter { font-size: var(--fs-2xl); color: var(--es-blue); border-bottom: 1px solid #EDF2F7; margin-top: 28px; padding-bottom: 4px; }
.article-body .es-glossary dd { margin: 4px 0 0; }
.article-body .es-glossary dd .es-aka { display: block; font-size: var(--fs-sm); color: var(--text-2); }
.article-body .es-glossary dt:target { background: var(--blue-50); }

/* 12g. Section and category pages: summaries, "Recommended", counts */
.es-list-page { max-width: 1140px; margin: 0 auto; padding: 28px 20px 0; }
.es-list-page .es-intro { color: var(--text-2); max-width: 75ch; margin: 0 0 20px; }
.es-start { background: var(--blue-50); border: 1px solid #B8E8F8; border-left: 5px solid var(--es-blue); border-radius: .25rem; padding: 14px 18px; margin: 0 0 20px; }
.es-start .label { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--es-navy); }
.es-start ul { list-style: none; margin: 6px 0 0; padding: 0; }
.es-start li a { display: block; padding: 6px 0; font-weight: 600; color: var(--link); }
.es-art-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #EDF2F7; }
.es-art-list li { border-bottom: 1px solid #EDF2F7; }
.es-art-list a { display: block; padding: 14px 0; color: var(--text); text-decoration: none; }
.es-art-list a:hover .t { color: var(--es-navy); text-decoration: underline; }
.es-art-list .t { display: block; color: var(--link); font-weight: 600; }
.es-art-list .s { display: block; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; margin-top: 2px; }
.es-section-block { margin: 0 0 32px; }
.es-section-block h2 { font-size: var(--fs-xl); font-weight: 700; margin: 0; }
.es-section-block h2 a { color: var(--text); }
.es-section-block .meta { color: var(--text-2); font-size: var(--fs-sm); margin: 2px 0 10px; }
.es-see-all { display: inline-block; margin-top: 10px; font-weight: 600; color: var(--link); }
@media (min-width: 992px) { .es-section-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; } }
@media (max-width: 767.98px) { .es-list-page { padding: 18px 16px 0; } .es-art-list a { padding: 12px 0; } }

/* 12h. Search with no results */
.es-noresults { max-width: 75ch; }
.es-noresults h2 { font-size: var(--fs-xl); margin: 0 0 6px; }
.es-noresults .tips { color: var(--text-2); margin: 0 0 20px; }
.es-noresults h3 { font-size: var(--fs-lg); margin: 24px 0 8px; }
.es-search-band .es-hc-search { max-width: 640px; margin-top: 12px; }

/* 12i. "On this page": a list in the right-hand column on desktop (stays in view and marks the
   section being read), a compact toggle in the title band below 1024px. Replaces the in-body box. */
.es-toc-rail { display: none; }
.es-toc-title { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin: 0 0 8px; }
.es-toc-rail ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid #EDF2F7; }
.es-toc-rail li a { display: block; padding: 6px 0 6px 12px; margin-left: -2px; border-left: 2px solid transparent; font-size: var(--fs-sm); line-height: 1.4; color: var(--text-2); }
.es-toc-rail li a:hover { color: var(--es-navy); text-decoration: none; }
.es-toc-rail li a.is-current { color: var(--es-navy); font-weight: 700; border-left-color: var(--es-blue); }
@media (min-width: 1024px) {
  .es-toc-rail:not([hidden]) { display: block; flex: 0 0 17%; align-self: flex-start; position: sticky; top: 88px;
    padding: 4px 0 0 24px; max-height: calc(100vh - 110px); overflow: auto; }
  .es-toc-slot { display: none; }
}
.es-toc-slot .es-toc { margin: 12px 0 0; border: 0; background: none; max-width: none; }
.es-toc-slot .es-toc summary { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px;
  border: 1px solid rgba(255,255,255,.4); border-radius: .25rem; color: #fff; font-size: var(--fs-sm); font-weight: 600; list-style: none; }
.es-toc-slot .es-toc summary::-webkit-details-marker { display: none; }
.es-toc-slot .es-toc summary::after { content: "\203A"; display: inline-block; transform: rotate(90deg); font-size: 1.2em; line-height: 1; }
.es-toc-slot .es-toc[open] summary::after { transform: rotate(-90deg); }
.es-toc-slot .es-toc ol { margin: 10px 0 0; padding: 0 0 0 20px; }
.es-toc-slot .es-toc li { padding: 4px 0; }
.es-toc-slot .es-toc li a { color: #fff; }

/* 12j. In-page jumps ("On this page", glossary letters) land below the sticky header, not under it. */
.article-body [id], .article-body h2, .article-body h3 { scroll-margin-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* 12k. Visible "Browse by topic" heading over the category cards, matching "What are you trying to do?". */
.knowledge-base .es-home-h2 { font-size: var(--fs-2xl); font-weight: 700; margin: 8px 0 14px; color: var(--text); }
@media (max-width: 767.98px) { .knowledge-base .es-home-h2 { font-size: var(--fs-xl); margin: 4px 0 10px; } }

/* ==========================================================================
   Easy Song theme glue (2026-10-28). Appended after brand-alignment.css.
   Not new design: it adapts the approved CSS above to the markup that
   Zendesk's helpers and Copenhagen v4 actually render, which the static
   mockups did not have.
   ========================================================================== */

/* {{search submit=true}} renders <input type="submit">, not the mockup's <button>. Same look. */
.es-hc-search input[type="submit"] { min-height: 52px; padding: 0 22px; border-radius: .25rem; border: 0; background: var(--es-blue); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer; -webkit-appearance: none; appearance: none; }
.es-hc-search input[type="submit"]:hover { background: var(--accent-hover); }
@media (max-width: 767.98px) {
  .es-hc-search input[type="submit"] { height: 48px; min-height: 48px; padding: 0 16px; }
}
.es-vote-follow input[type="submit"] { min-height: 44px; padding: 0 16px; border: 0; border-radius: .25rem; background: var(--es-blue); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer; -webkit-appearance: none; appearance: none; }
.es-vote-follow input[type="submit"]:hover { background: var(--accent-hover); }

/* Copenhagen's script.js appends a clear (x) <button> to every search form. These forms have a
   Search button instead, and the brand rule ".es-hc-search button" would paint it blue. */
.es-hc-search .clear-button, .es-vote-search .clear-button { display: none !important; }

/* If the helper keeps its default "search" class next to ours, undo Copenhagen's pill styling. */
form.es-hc-search, form.es-vote-search { border: 0; border-radius: 0; }
[dir] .es-hc-search input[type="search"] { padding: 0 16px; border-radius: .25rem; }
[dir] .es-vote-follow input[type="search"] { padding: 0 12px; border-radius: .25rem; }

/* Section page "Follow" button (kept from Copenhagen), above the list. */
.es-list-page > .section-subscribe { display: flex; justify-content: flex-end; margin: 0 0 12px; }

/* Language selector (kept from Copenhagen) sits at the end of the legal strip. */
.es-hc-legal .footer-language-selector { margin-left: auto; }

/* Lock icon on internal articles inside the redesigned lists. */
.es-art-list .icon-lock, .es-start .icon-lock { margin-left: 6px; vertical-align: -2px; }

/* Search results: space between the title band and the filters/results so they don't sit on the band. */
.es-search-body { padding-top: 32px !important; }
@media (max-width: 767.98px) { .es-search-body { padding-top: 20px !important; } }

/* Search matches in result snippets: highlighted like the previous theme, not italic. */
.search-result-description em, .search-results-description em {
  font-style: normal; font-weight: 600; color: #194554;
  background-color: rgba(84, 192, 232, 0.12); padding: 2px 4px; border-radius: 3px;
}

/* Articles start level with the sidebar heading: the title now lives in the band, so drop Copenhagen's
   40px gap above the content and the first block's own top margin (.article-body is a flow-root). */
.article-content { margin-top: 0; }
.article-body > :first-child { margin-top: 0 !important; }

/* Desktop article layout: the side headings ("Articles in this section", "On this page") sit one line
   above the article's first line, so the side lists start level with the body and read as navigation. */
@media (min-width: 1024px) {
  .article-container { margin-top: 36px; } /* Copenhagen adds ~23px above this; together: headings ~25px, body ~65px below the band */
  .article-sidebar .sidenav-title, .es-toc-rail .es-toc-title { display: block; height: 20px; line-height: 20px; margin: -34px 0 14px; }
  .es-toc-rail:not([hidden]) { top: 122px; max-height: calc(100vh - 144px); overflow: visible; }
}

/* "Articles in this section" styled like "On this page": a thin grey line, the current article marked
   with a blue segment and bold text. The article body is then the only column without a line. */
.article-sidebar .collapsible-sidebar-body ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid #EDF2F7; }
.article-sidebar .sidenav-item { margin-left: -2px; border-left: 2px solid transparent; border-radius: 0; background: none;
  padding: 6px 0 6px 12px; font-size: var(--fs-sm); line-height: 1.4; color: var(--text-2); }
.article-sidebar .sidenav-item:hover { background: none; color: var(--es-navy); text-decoration: none; }
.article-sidebar .sidenav-item.current-article, .article-sidebar .sidenav-item.current-article:hover {
  background: none; color: var(--es-navy); font-weight: 700; border-left-color: var(--es-blue); }
.article-sidebar .article-sidebar-item { display: inline-block; margin: 10px 0 0 14px; font-size: var(--fs-sm); }
@media (min-width: 1024px) {
  /* Copenhagen clips the sidebar (overflow: hidden), which hid the raised heading. */
  .article-sidebar .collapsible-sidebar { overflow: visible; }
  /* Headings a little lower (closer to their lists), body where it was. */
  .article-container { margin-top: 40px; }
  .article-sidebar .sidenav-title, .es-toc-rail .es-toc-title { margin: -26px 0 6px; }
}

/* Side headings a little further from the band (body moves with them so the lists stay level with it),
   and both headings on the same line (the rail had 4px of extra top padding). */
@media (min-width: 1024px) {
  .article-container { margin-top: 48px; }
  .es-toc-rail:not([hidden]) { padding-top: 0; }
}

/* Desktop: "Articles in this section" stays in view while scrolling, like "On this page", at the same
   height. Each list scrolls on its own if it is taller than the window (the raised headings stay visible). */
@media (min-width: 1024px) {
  .article-sidebar { position: sticky; top: 122px; align-self: flex-start; }
  .article-sidebar .collapsible-sidebar-body ul, .es-toc-rail ol { max-height: calc(100vh - 190px); overflow-y: auto; overscroll-behavior: contain; }
}

/* "Was this article helpful?": question, Yes/No buttons, count and the follow-up all centred. */
.article-votes, .article-votes-question, .article-votes-count { text-align: center; }
.article-votes-controls { justify-content: center; }
.es-vote-follow { max-width: 560px; margin-left: auto; margin-right: auto; text-align: center; }
.es-vote-follow form { justify-content: center; }

/* Desktop: all three columns start on one line (side headings level with the article's first line;
   the grey lines now set the side lists apart). Replaces the raised-heading offset above. */
@media (min-width: 1024px) {
  .article-container { margin-top: 22px; }
  .article-sidebar .sidenav-title, .es-toc-rail .es-toc-title { margin: 0 0 6px; }
  .article-sidebar, .es-toc-rail:not([hidden]) { top: 96px; }
  .article-sidebar .collapsible-sidebar-body ul, .es-toc-rail ol { max-height: calc(100vh - 160px); }
}

/* Desktop: equal space above and below the band's bottom edge (~45px each side). */
@media (min-width: 1024px) { .article-container { margin-top: 37px; } }

/* Header search: a field by "Contact Us" on desktop; on phones a magnifier opens it as a full-width row.
   Shown on every page (Adam, 2026-10-29), including the homepage and search page. */
.es-own-search form { position: relative; display: flex; margin: 0; }
.es-own-search input[type="search"] { width: 240px; height: 38px; margin: 0; padding: 0 12px 0 36px; border: 1px solid #B8E8F8;
  border-radius: .25rem; font: inherit; font-size: var(--fs-sm); color: var(--text); -webkit-appearance: none; appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235C6670' d='M10 2a8 8 0 0 1 6.3 12.9l5.4 5.4-1.4 1.4-5.4-5.4A8 8 0 1 1 10 2zm0 2.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11z'/%3E%3C/svg%3E") no-repeat 12px center / 15px 15px; }
.es-own-search input[type="search"]:focus { outline: none; border-color: var(--es-blue); box-shadow: 0 0 0 .2rem rgba(62,176,213,.25); }
.es-own-search .clear-button, .es-own-search input[type="submit"] { display: none; }
.es-own-search-toggle { display: none; }
@media (min-width: 768px) {
  .es-own-search { margin-left: auto; }
  .es-own-brand .es-own-search ~ .es-own-contact { margin-left: 20px; }
}
@media (min-width: 768px) and (max-width: 991.98px) { .es-own-search input[type="search"] { width: 180px; } }
@media (max-width: 767.98px) {
  .es-own-brand { flex-wrap: wrap; }
  .es-own-search { display: none; order: 10; flex-basis: 100%; margin-top: 8px; }
  .es-own.search-open .es-own-search { display: block; }
  .es-own-search input[type="search"] { width: 100%; height: 44px; font-size: 16px; }
  .es-own-search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: auto;
    padding: 0; border: 0; border-radius: .25rem; background: none; color: var(--es-navy); cursor: pointer; }
  .es-own.search-open .es-own-search-toggle { background: #fff; }
}
@media (max-width: 479.98px) { .es-own-logo img { width: 100px; } .es-own-brand { gap: 8px; } }
@media (max-width: 359.98px) { .es-own-logo img { width: 78px; } .es-own-brand { gap: 6px; } .es-own-divider.before-contact { display: none; } .es-own-search-toggle { width: 30px; } }

/* Desktop: header search collapsed to the magnifier; it slides open (leftwards) on hover or keyboard
   focus and stays open while it has text, so it doesn't close mid-typing. Phones unchanged. */
@media (min-width: 768px) {
  .es-own-search input[type="search"] { width: 40px; padding-right: 0; border-color: transparent; background-color: transparent; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23194554' d='M10 2a8 8 0 0 1 6.3 12.9l5.4 5.4-1.4 1.4-5.4-5.4A8 8 0 1 1 10 2zm0 2.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11z'/%3E%3C/svg%3E");
    background-position: 11px center; background-size: 18px 18px;
    transition: width var(--es-dur) var(--es-ease), border-color var(--es-dur) var(--es-ease), background-color var(--es-dur) var(--es-ease), padding var(--es-dur) var(--es-ease); }
  .es-own-search input[type="search"]::placeholder { color: transparent; }
  .es-own-search:hover input[type="search"], .es-own-search:focus-within input[type="search"], .es-own-search input[type="search"]:not(:placeholder-shown) {
    width: 240px; padding-right: 12px; border-color: #B8E8F8; background-color: #fff; cursor: text; }
  .es-own-search:hover input[type="search"]::placeholder, .es-own-search:focus-within input[type="search"]::placeholder { color: var(--hint); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .es-own-search:hover input[type="search"], .es-own-search:focus-within input[type="search"], .es-own-search input[type="search"]:not(:placeholder-shown) { width: 180px; }
}

/* Link-buttons keep their text colour after the link has been visited (Copenhagen's a:visited is more
   specific than .es-hc-btn, so visited buttons turned navy). */
a.es-hc-btn:visited, a.es-hc-btn:visited:hover { color: #fff; }
.es-hc-help a.es-hc-btn.outlined:visited { color: var(--es-blue-strong); }

/* Side lists ("Articles in this section", "On this page"): their scrollbar is thin and only shows while
   the pointer is over that list (or keyboard focus is in it), instead of a permanent grey bar. */
@media (min-width: 1024px) {
  .article-sidebar .collapsible-sidebar-body ul, .es-toc-rail ol { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  .article-sidebar .collapsible-sidebar-body ul:hover, .article-sidebar .collapsible-sidebar-body ul:focus-within,
  .es-toc-rail ol:hover, .es-toc-rail ol:focus-within { scrollbar-color: #C2C8CC transparent; }
  .article-sidebar .collapsible-sidebar-body ul::-webkit-scrollbar, .es-toc-rail ol::-webkit-scrollbar { width: 6px; }
  .article-sidebar .collapsible-sidebar-body ul::-webkit-scrollbar-thumb, .es-toc-rail ol::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
  .article-sidebar .collapsible-sidebar-body ul:hover::-webkit-scrollbar-thumb, .es-toc-rail ol:hover::-webkit-scrollbar-thumb { background: #C2C8CC; }
}

/* "More below" fade at the foot of a scrolling side list, shown only while es-help.js finds hidden
   content below (class has-overflow-below); same look as the Agent site's request details panes. */
@media (min-width: 1024px) {
  .es-scroll-pane.has-overflow-below::after { content: ""; display: block; position: sticky; bottom: 0; height: 24px; margin-top: -24px;
    pointer-events: none; background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0)); }
}

/* Article title in the header: past the title band, the logo, divider and "Help Center" give way to the
   article title (shortened with an ellipsis); search and Contact Us stay. Same header height, no movement. */
.es-own-brand { min-width: 0; } /* lets the group shrink so a long title truncates instead of overflowing */
.es-own-title { display: none; flex: 1 1 0%; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-weight: 700; font-size: var(--fs-lg); line-height: 1.2; color: var(--es-navy); }
.es-own--titled .es-own-logo, .es-own--titled .es-own-label, .es-own--titled .es-own-divider { display: none; }
.es-own--titled .es-own-title { display: block; animation: es-own-title-in var(--es-dur) var(--es-ease); }
@keyframes es-own-title-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Slimmer header while the title shows (64px -> 44px); the 20px goes to margin-bottom so the page below
   doesn't move. Both animate together, so the total stays 64px throughout. */
.es-own { transition: margin-bottom var(--es-dur) var(--es-ease); }
.es-own-inner { transition: min-height var(--es-dur) var(--es-ease), padding var(--es-dur) var(--es-ease); }
.es-own--titled { margin-bottom: 20px; }
.es-own--titled .es-own-inner { min-height: 44px; padding-top: 3px; padding-bottom: 3px; }
.es-own--titled .es-own-title { font-size: 1rem; }
@media (min-width: 768px) { .es-own--titled .es-own-search { margin-left: 24px; } }
@media (max-width: 767.98px) { .es-own-title { font-size: var(--fs-base); } }
/* Header height never changes now: pinned side columns and in-page jumps sit just below it. */
/* The slim 44px header is what's on screen while reading: pinned side columns and jumps sit below it. */
.article-body [id], .article-body h2, .article-body h3 { scroll-margin-top: 68px; }
@media (min-width: 1024px) {
  .article-sidebar, .es-toc-rail:not([hidden]) { top: 76px; }
  .article-sidebar .collapsible-sidebar-body ul, .es-toc-rail ol { max-height: calc(100vh - 140px); }
}
@media (max-width: 767.98px) { .article-body [id], .article-body h2, .article-body h3 { scroll-margin-top: 60px; } }

/* Instant search suggestions: es-help.js swaps the path line for the article's summary; at most two lines. */
.es-ac-summary { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  white-space: normal !important; text-overflow: clip !important; line-height: 1.45; }
/* No scroll box inside the suggestion list: Zendesk caps it at 50vh (inline style), which the summaries
   overflow. Let it grow to fit; on short screens the page itself scrolls. */
zd-autocomplete { max-height: none !important; overflow-y: visible !important; }
/* Smooth swap: the path line is hidden from the start (loading dots shown), then the summary (or, if none
   arrives within four seconds, the original path) fades in. */
/* While a summary loads, the path text is hidden and three pulsing dots show in its place. */
.es-ac-pending { position: relative; color: transparent !important; }
.es-ac-pending::after { content: "\2022\2022\2022"; position: absolute; left: 0; top: 0; color: #9AA5B1; letter-spacing: 3px;
  animation: es-ac-dots 1.1s ease-in-out infinite; }
@keyframes es-ac-dots { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.es-ac-summary, .es-ac-reveal { animation: es-ac-in var(--es-dur) var(--es-ease) both; }
@keyframes es-ac-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
/* A summary already shown once appears instantly when Zendesk redraws the suggestion on hover. */
.es-ac-summary.es-ac-seen { animation: none; }

/* Desktop: "Articles in this section" has its line on the right edge (facing the article, mirroring
   "On this page"), text flush left under its heading, and a wider gap before the article body. */
@media (min-width: 1024px) {
  /* The line is drawn on each item (not the scrolling list, which would clip the current marker). */
  .article-sidebar .collapsible-sidebar-body ul { border-left: 0; }
  .article-sidebar .collapsible-sidebar-body li { margin: 0; }
  .article-sidebar .sidenav-item { margin: 0; border-left: 0; border-right: 2px solid #EDF2F7; padding: 6px 14px 6px 0; }
  .article-sidebar .sidenav-item.current-article, .article-sidebar .sidenav-item.current-article:hover { border-right-color: var(--es-blue); }
  .article-sidebar .article-sidebar-item { margin-left: 0; }
  .article-container .article { padding-left: 44px; }
}

/* "On this page": draw the grey line on each item too, so the current heading's blue segment isn't
   clipped by the scrolling list (same fix as "Articles in this section"). */
.es-toc-rail ol { border-left: 0; }
.es-toc-rail li { margin: 0; }
.es-toc-rail li a { margin-left: 0; border-left: 2px solid #EDF2F7; }
.es-toc-rail li a.is-current { border-left-color: var(--es-blue); }

/* Active heading is bold again, without jitter: each item stacks its text over an invisible bold copy
   (grid, same cell), so its size is already the bold size and bolding changes nothing around it. */
.es-toc-rail li a { display: grid; }
.es-toc-rail li a > span, .es-toc-rail li a::after { grid-area: 1 / 1; }
.es-toc-rail li a::after { content: attr(data-label); font-weight: 700; visibility: hidden; pointer-events: none; }
.es-toc-rail li a.is-current { font-weight: 700; }

/* Article page side lists: the previous theme's hover, restored (Adam): the title slides 4px right with a
   light background and turns navy. Only the text moves, so the divider lines stay straight. */
.article-sidebar .sidenav-item > span, .es-toc-rail li a > span { display: block; transition: transform var(--es-dur) var(--es-ease); }
.article-sidebar .sidenav-item, .es-toc-rail li a { transition: background-color var(--es-dur) var(--es-ease), color var(--es-dur) var(--es-ease); }
.article-sidebar .sidenav-item:hover, .es-toc-rail li a:hover { background-color: #F5F7F9; color: var(--es-navy); text-decoration: none; }
.article-sidebar .sidenav-item:hover > span, .es-toc-rail li a:hover > span { transform: translateX(4px); }
/* Side lists never scroll sideways (the 4px hover slide made long titles overflow by a few pixels);
   "On this page" items keep a little right padding so the slide never clips letters. */
.article-sidebar .collapsible-sidebar-body ul, .es-toc-rail ol { overflow-x: hidden; }
.es-toc-rail li a { padding-right: 6px; }

/* ==========================================================================
   Motion (2026-10-29): calm, fluid movement across the Help Center.
   Rule: motion only explains a change (where something came from, where you
   are now). Nothing moves just to decorate. Timings and the curve are the
   --es-dur-* and --es-ease tokens in brand-alignment.css; es-help.js reads
   the same tokens for the movements it drives (panels, pop-ups, lists).
   Appended after theme-glue.css.
   ========================================================================== */

/* 1. Page to page: the browser cross-fades the old page into the new one instead of a white flash
      (cross-document View Transitions: Chrome, Edge and Safari; other browsers load pages as before).
      The header is its own layer, so it holds still while the content changes. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.es-own { view-transition-name: es-header; }
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
  animation-duration: var(--es-dur); animation-timing-function: var(--es-ease); }

/* 2. No sideways jump: room for the scrollbar is always kept, so moving between short pages (no
      scrollbar) and long ones doesn't shift the whole layout left and right. */
html { scrollbar-gutter: stable; }

/* 3. Opening and closing. Panels, the vote follow-up, the phone "On this page" list and glossary
      pop-ups unfold in es-help.js; these are the matching small touches. */
.es-toc-slot .es-toc summary::after { transition: transform var(--es-dur) var(--es-ease); }
.es-toc-slot .es-toc.is-folding summary::after { transform: rotate(90deg); }

/* 4. "You landed here": after a jump to a heading ("On this page", a link to #something, the glossary
      A-Z bar), the heading gets a pale blue wash that fades out, so the eye finds the spot. */
@keyframes es-arrive {
  0%, 35% { background-color: var(--blue-100); box-shadow: 0 0 0 6px var(--blue-100); }
  100% { background-color: rgba(215, 241, 251, 0); box-shadow: 0 0 0 6px rgba(215, 241, 251, 0); }
}
.es-arrived { animation: es-arrive 1.8s var(--es-ease) both; border-radius: 2px; }

/* 5. Reading progress: a thin brand-blue line along the bottom of the slim title header, filling as the
      article is read. Where supported it is driven by the scroll position itself (a CSS scroll-driven
      animation, which the browser runs apart from page scripts), so it moves exactly with the page;
      elsewhere es-help.js sets --es-read on scroll. */
.es-own-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--es-blue);
  transform-origin: 0 50%; transform: scaleX(var(--es-read, 0)); opacity: 0; pointer-events: none;
  transition: opacity var(--es-dur) var(--es-ease); }
.es-own--titled .es-own-progress { opacity: 1; }
@supports (animation-timeline: view()) {
  body { timeline-scope: --es-read; }
  .article-body { view-timeline: --es-read block; view-timeline-inset: 68px 0; }
  .es-own-progress { animation: es-read linear both; animation-timeline: --es-read; animation-range: contain 0% contain 100%; }
  @keyframes es-read { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* 6. Loading without jumps: placeholder lines (the style guide's skeleton) hold the space until content
      arrives, then it fades in. Glossary underlines fade in rather than pop. */
@keyframes es-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.es-skel { display: block; height: 10px; border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 25%, #F1F5F9 50%, var(--surface-2) 75%);
  background-size: 200% 100%; animation: es-shimmer 1.4s linear infinite; }
.es-goal-panel .es-skel-row { display: flex; align-items: center; min-height: calc(1.6em + 12px); }
.es-goal-panel .es-skel { background-image: linear-gradient(90deg, var(--blue-100) 25%, var(--blue-50) 50%, var(--blue-100) 75%); }
.es-art-list .s.es-skel-line { display: flex; align-items: center; height: 1.5em; }
.es-art-list li { background: #fff; } /* a row gliding down covers the line appearing above it */
@keyframes es-fade-in { from { opacity: 0; } }
.es-in { animation: es-fade-in var(--es-dur-slow) var(--es-ease) backwards; }
@keyframes es-underline-in { from { text-decoration-color: transparent; } }
.es-term { animation: es-underline-in .6s var(--es-ease) backwards; }

/* Visitors who ask their device to reduce motion get none of the movement (style guide rule). The
   landing highlight stays: it only changes colour, and it helps the most when the page jumps. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .es-arrived { animation-duration: 1.8s !important; }
}