/* Height of the sticky app header. Used by the header itself and by
   everything that has to sit below it. */
$kb_header_height: 72px;

/* Article callout colours, one row per variant: text and icon, background,
   outline. Used by the .wysiwyg-callout rules near the end of this file. */
/* Tint used behind image captions. */
$caption_background_color: #EDF5FD;

$callout_info_text: #415468;
$callout_info_background: #EDF5FD;
$callout_info_outline: #1F83FF;

$callout_warning_text: #8D5F00;
$callout_warning_background: #FFF7EC;
$callout_warning_outline: #F0AE42;

$callout_error_text: #BC0747;
$callout_error_background: #FFF2F3;
$callout_error_outline: #DA355E;

$callout_tip_text: #006F30;
$callout_tip_background: #DEFFE3;
$callout_tip_outline: #00873C;

@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: rgba(248, 252, 255, 1);
  color: rgba(39, 55, 71, 1);
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Helvetica Neue', Arial, Helvetica, 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: rgba(0, 102, 93, 1);
  text-decoration: none;
}
a:visited {
  color: rgba(0, 102, 93, 1);
}
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 rgba(60, 166, 153, 1);
}
.hbs-form input[disabled], .search input[disabled] {
  background-color: rgba(219, 231, 243, 1);
}
.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 rgba(60, 166, 153, 1);
}
.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 rgba(60, 166, 153, 1);
}

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

.container-divider {
  border-top: 1px solid rgba(219, 231, 243, 1);
  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 rgba(60, 166, 153, 1);
  border-radius: 4px;
  color: rgba(60, 166, 153, 1);
  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: rgba(60, 166, 153, 1);
}
.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: rgba(60, 166, 153, 1);
  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: #215b54;
  border-color: #215b54;
}
.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: rgba(60, 166, 153, 1);
  border: 0;
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 14px;
  line-height: 2.72;
  min-width: 190px;
  padding: 0 1.9286em;
  width: 100%;
}
@media (min-width: 768px) {
  .button-large, .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: #215b54;
}
.button-large[disabled], .hbs-form input[type=submit][disabled] {
  background-color: rgba(219, 231, 243, 1);
}

.button-secondary {
  color: rgba(81, 101, 121, 1);
  border: 1px solid #848F99;
  background-color: transparent;
}
.button-secondary:visited {
  color: rgba(81, 101, 121, 1);
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: rgba(39, 55, 71, 1);
  border: 1px solid #848F99;
  background-color: #e9f5ff;
}

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

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

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

/***** Tables *****/
.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
@media (min-width: 768px) {
  .table {
    table-layout: auto;
  }
}
.table th,
.table th a {
  color: rgba(81, 101, 121, 1);
  font-size: 13px;
  text-align: left;
}
[dir=rtl] .table th,
[dir=rtl] .table th a {
  text-align: right;
}
.table tr {
  border-bottom: 1px solid rgba(219, 231, 243, 1);
  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 rgba(60, 166, 153, 1);
}

.form-field input[type=text] {
  border: 1px solid #848F99;
  border-radius: 4px;
}
.form-field input[type=text]:focus {
  border: 1px solid rgba(60, 166, 153, 1);
}

.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 rgba(60, 166, 153, 1);
  text-decoration: none;
}

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

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

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

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

.form-field .optional {
  color: rgba(81, 101, 121, 1);
  margin-left: 4px;
}

.form-field p {
  color: rgba(81, 101, 121, 1);
  font-size: 12px;
  margin: 5px 0;
}

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

.form footer a {
  color: rgba(81, 101, 121, 1);
  cursor: pointer;
  margin-right: 15px;
}

.form .suggestion-list {
  font-size: 13px;
  margin-top: 30px;
}
.form .suggestion-list label {
  border-bottom: 1px solid rgba(219, 231, 243, 1);
  display: block;
  padding-bottom: 5px;
}
.form .suggestion-list li {
  padding: 10px 0;
}
.form .suggestion-list li a:visited {
  color: rgba(0, 102, 93, 1);
}

/***** Header *****/
.header {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  max-width: none;
  padding: 14px 24px;
  min-height: $kb_header_height;
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) minmax(0, 520px) minmax(max-content, 1fr);
  align-items: center;
  gap: 12px 24px;
  background-color: rgba(29, 42, 54, 1);
}

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

.logo span {
  margin: 0 10px;
  color: rgba(60, 166, 153, 1);
}

.logo a {
  display: inline-block;
}

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

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

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

@media (max-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: inline-block;
  }
}
.nav-wrapper-desktop a {
  border: 0;
  color: rgba(0, 102, 93, 1);
  display: none;
  font-size: 14px;
  padding: 0 20px 0 0;
  width: auto;
}
@media (min-width: 768px) {
  .nav-wrapper-desktop a {
    display: inline-block;
  }
}
[dir=rtl] .nav-wrapper-desktop a {
  padding: 0 0 0 20px;
}
.nav-wrapper-desktop a:hover, .nav-wrapper-desktop a:focus, .nav-wrapper-desktop a:active {
  background-color: transparent;
  color: rgba(0, 102, 93, 1);
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .nav-wrapper-mobile {
    display: none;
  }
}
.nav-wrapper-mobile .menu-button-mobile {
  background: none;
  border: 0;
  width: auto;
  min-width: 71px;
  cursor: pointer;
}
.nav-wrapper-mobile .menu-button-mobile .icon-menu {
  padding: 7px;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
  background: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile {
  position: absolute;
  background-color: rgba(248, 252, 255, 1);
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  border-top: solid 1px rgba(219, 231, 243, 1);
  border-bottom: solid 1px rgba(219, 231, 243, 1);
  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 rgba(219, 231, 243, 1);
  padding: 0;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider:last-child {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items button {
  background: none;
  border: none;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: rgba(39, 55, 71, 1);
  cursor: pointer;
  text-align: start;
}
.nav-wrapper-mobile .menu-list-mobile-items button:active, .nav-wrapper-mobile .menu-list-mobile-items button:focus, .nav-wrapper-mobile .menu-list-mobile-items button:hover {
  background-color: #f3f3f3;
  text-decoration: underline;
}
.nav-wrapper-mobile .menu-list-mobile-items a {
  display: block;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: rgba(39, 55, 71, 1);
}
.nav-wrapper-mobile .menu-list-mobile-items a:active, .nav-wrapper-mobile .menu-list-mobile-items a:focus, .nav-wrapper-mobile .menu-list-mobile-items a:hover {
  background-color: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile {
  display: flex;
  line-height: 1.5;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile .my-profile-tooltip {
  font-size: 12px;
  color: #68737D;
}
.nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  margin-top: 1px;
}
[dir=rtl] .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  margin-right: 0;
  margin-left: 8px;
}

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

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

.ask-ai {
  align-items: center;
  background-color: rgba(0, 102, 93, 1);
  border: 1px solid rgba(0, 102, 93, 1);
  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: rgba(0, 74, 67, 1);
  border-color: rgba(0, 74, 67, 1);
  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: rgba(0, 74, 67, 1);
  border-color: rgba(0, 74, 67, 1);
  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: rgba(0, 102, 93, 1);
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: rgba(0, 102, 93, 1);
  background-color: transparent;
}
.user-info > button::after {
  color: rgba(0, 102, 93, 1);
  padding-right: 15px;
}
[dir=rtl] .user-info > button::after {
  padding-left: 15px;
  padding-right: 0;
}

#user #user-name {
  display: none;
  font-size: 14px;
}
@media (min-width: 768px) {
  #user #user-name {
    display: inline-block;
  }
}
#user #user-name:hover {
  text-decoration: underline;
}

/***** User avatar *****/
.user-avatar {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}

.avatar {
  display: inline-block;
  position: relative;
}
.avatar img {
  height: 40px;
  width: 40px;
}
.avatar .icon-agent {
  color: rgba(60, 166, 153, 1);
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: #FFFFFF;
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 17px;
}

/***** Footer *****/
.footer {
  border-top: 1px solid rgba(219, 231, 243, 1);
  margin-top: 60px;
  padding: 30px 0;
}
.footer a {
  color: rgba(81, 101, 121, 1);
}
.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: rgba(81, 101, 121, 1);
  display: inline-block;
}

.powered-by-zendesk a,
.powered-by-zendesk a:visited {
  color: rgba(81, 101, 121, 1);
}

/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
  display: flex;
}
@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}
.breadcrumbs li {
  display: inline-block;
  color: rgba(81, 101, 121, 1);
  font-size: 13px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.breadcrumbs li + li::before {
  content: "/";
  margin: 0 8px;
  color: rgba(81, 101, 121, 1);
}
.breadcrumbs li a:visited {
  color: rgba(0, 102, 93, 1);
}

/***** 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: rgba(60, 166, 153, 1);
}
.search input[type=search],
.search .clear-button {
  background-color: #fff;
  border-radius: 30px;
  border: none;
}
.search-full input[type=search], .search-full .clear-button {
  border-color: #fff;
}
.search input[type=search] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  color: #666;
  flex: 1 1 auto;
  height: 40px;
  width: 100%;
}
.search input[type=search]:focus {
  color: #555;
}
.search input[type=search]::-webkit-search-decoration, .search input[type=search]::-webkit-search-cancel-button, .search input[type=search]::-webkit-search-results-button, .search input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
.search input[type=search]:-webkit-autofill, .search input[type=search]:-webkit-autofill:hover, .search input[type=search]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
.search .clear-button {
  align-items: center;
  box-sizing: border-box;
  color: #777;
  cursor: pointer;
  display: none;
  flex: none;
  justify-content: center;
  padding: 0 15px;
}
.search .clear-button:hover {
  background-color: rgba(60, 166, 153, 1);
  color: #fff;
}
.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(60, 166, 153, 1);
}
.search-has-value .clear-button {
  display: flex;
}

[dir=ltr] .search input[type=search] {
  padding-left: 40px;
  padding-right: 20px;
}
[dir=ltr] .search-has-value input[type=search] {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}
[dir=ltr] .search-has-value input[type=search]:focus {
  border-right-color: rgba(60, 166, 153, 1);
}
[dir=ltr] .search .clear-button {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}
[dir=ltr] .search .clear-button:focus {
  border-left-color: rgba(60, 166, 153, 1);
}

[dir=rtl] .search input[type=search] {
  padding-left: 20px;
  padding-right: 40px;
}
[dir=rtl] .search-has-value input[type=search] {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}
[dir=rtl] .search-has-value input[type=search]:focus {
  border-left-color: rgba(60, 166, 153, 1);
}
[dir=rtl] .search .clear-button {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}
[dir=rtl] .search .clear-button:focus {
  border-right-color: rgba(60, 166, 153, 1);
}

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

/***** Hero component *****/
.hero {
  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: 24px;
}
@media (min-width: 768px) {
  .sub-nav {
    flex-direction: row;
  }
}
.sub-nav .breadcrumbs {
  margin: 0;
}
.sub-nav .search-container {
  max-width: 300px;
  width: 100%;
}
.sub-nav input[type=search]::after {
  font-size: 15px;
}

/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
/* Three across at desktop sizes; auto-fit was packing in a fourth and
   squeezing the descriptions. */
.blocks-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  list-style: none;
  padding: 0;
}
@media (min-width: 640px) {
  .blocks-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .blocks-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 768px) {
  .blocks-list {
    margin: 0 -15px;
  }
}
.blocks-item {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  max-width: 100%;
  padding: 20px 22px 22px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: 6px;
  color: rgba(39, 55, 71, 1);
  text-align: left;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
@media (min-width: 768px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}
.blocks-item:hover, .blocks-item:focus-within {
  border-color: rgba(60, 166, 153, 1);
  background-color: rgba(237, 245, 253, 1);
}
.blocks-item-internal {
  background-color: transparent;
  border: 1px solid rgba(219, 231, 243, 1);
}
.blocks-item-internal .icon-lock {
  height: 15px;
  width: 15px;
  bottom: 5px;
  position: relative;
}
.blocks-item-internal a {
  color: rgba(39, 55, 71, 1);
}
.blocks-item-link,
.blocks-item-link:visited {
  color: rgba(39, 55, 71, 1);
}
.blocks-item-link:hover {
  text-decoration: none;
}
/* Stretches the category link over the whole card. */
.blocks-item-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.blocks-item-link:focus-visible::after {
  outline: 2px solid rgba(60, 166, 153, 1);
  outline-offset: 2px;
}
.blocks-item-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.blocks-item-description {
  display: block;
  margin: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.5;
  color: rgba(81, 101, 121, 1);
}

/* Section shortcuts sit above the card-wide link so they stay clickable. */
.blocks-item-sections {
  position: relative;
  z-index: 1;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.blocks-item-sections a {
  display: block;
  padding: 3px 0;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(0, 102, 93, 1);
}
.blocks-item-sections a:hover {
  color: rgba(0, 74, 67, 1);
}
.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 rgba(219, 231, 243, 1);
  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 rgba(219, 231, 243, 1);
  }
}

/***** Community section in homepage *****/
.community {
  text-align: center;
}
.community-image {
  min-height: 300px;
  margin-top: 32px;
  background-image: url(/hc/theming_assets/01M2SB6DXHZF3GQ1SRTHRKRT9P);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}
.community a {
  color: rgba(0, 102, 93, 1);
  text-decoration: underline;
}
.community a:visited {
  color: rgba(0, 102, 93, 1);
}
.community a:hover, .community a:active, .community a:focus {
  color: rgba(0, 74, 67, 1);
}

.community,
.activity {
  border-top: 1px solid rgba(219, 231, 243, 1);
  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 rgba(219, 231, 243, 1);
  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: rgba(39, 55, 71, 1);
  margin: 15px 0 0 0;
  float: none;
}
@media (min-width: 768px) {
  .recent-activity-item-meta {
    margin: 0;
    float: right;
  }
  [dir=rtl] .recent-activity-item-meta {
    float: left;
  }
}
.recent-activity-item-time, .recent-activity-item-comment {
  display: inline-block;
  font-size: 13px;
}
.recent-activity-item-comment {
  padding-left: 5px;
}
[dir=rtl] .recent-activity-item-comment {
  padding: 0 5px 0 0;
}
.recent-activity-item-comment::before {
  display: inline-block;
}
.recent-activity-controls {
  padding-top: 15px;
}
.recent-activity-controls a {
  color: rgba(0, 102, 93, 1);
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: rgba(0, 102, 93, 1);
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: rgba(0, 74, 67, 1);
}
.recent-activity-accessibility-label {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.recent-activity-comment-icon svg {
  vertical-align: middle;
  color: rgba(60, 166, 153, 1);
  width: 16px;
  height: 16px;
}
.recent-activity-comment-icon:after {
  content: attr(data-comment-count);
  margin-left: 3px;
}
[dir=rtl] .recent-activity-comment-icon:after {
  margin-left: 0;
  margin-right: 3px;
}

/***** Category pages *****/
.category-container {
  display: flex;
  justify-content: flex-end;
}
.category-content {
  flex: 1;
  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: rgba(39, 55, 71, 1);
}
.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,
.promoted-articles-item a,
.article-sidebar-item {
  color: rgba(39, 55, 71, 1);
}
.article-list-item a:hover,
.promoted-articles-item a:hover,
.article-sidebar-item:hover,
.section-tree-title a:hover,
.section-list-item a:hover {
  color: rgba(0, 102, 93, 1);
}

.icon-star {
  color: rgba(60, 166, 153, 1);
  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 rgba(219, 231, 243, 1);
  font-size: 16px;
  padding: 15px 0;
}
.section-list-item:first-child {
  border-top: 1px solid rgba(219, 231, 243, 1);
}
.section-list-item a {
  align-items: center;
  color: rgba(39, 55, 71, 1);
  display: flex;
  justify-content: space-between;
}

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

/***** Article *****/
.article {
  /*
  * The article grid is defined this way to optimize readability:
  * Sidebar | Content | Free space
  * 17%     | 66%     | 17%
  */
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .article {
    flex: 1 0 66%;
    max-width: 66%;
    min-width: 640px;
    padding: 0 30px;
  }
}
.article-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .article-container {
    flex-direction: row;
  }
}
.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
  margin-top: 16px;
}
@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}
.article-avatar {
  margin-right: 10px;
}
.article-author {
  margin-bottom: 10px;
}
.article-title {
  margin-bottom: 0;
  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: rgba(0, 102, 93, 1);
  text-decoration: underline;
}
.article-body a:visited {
  color: rgba(0, 102, 93, 1);
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: rgba(0, 74, 67, 1);
}
.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 12px;
  font-size: 12px;
  text-align: center;
  color: rgba(81, 101, 121, 1);
  background-color: $caption_background_color;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.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: #e9f5ff;
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: #e9f5ff;
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.article-body blockquote {
  border-left: 1px solid rgba(219, 231, 243, 1);
  color: rgba(81, 101, 121, 1);
  font-style: italic;
  padding: 0 15px;
}
.article-body > p:last-child {
  margin-bottom: 0;
}
.article-content {
  line-height: 1.6;
  margin: 0 0 40px;
  word-wrap: break-word;
}
.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.article-comment-count {
  color: rgba(81, 101, 121, 1);
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: rgba(60, 166, 153, 1);
  width: 18px;
  height: 18px;
}
.article-sidebar {
  border-bottom: 1px solid rgba(219, 231, 243, 1);
  border-top: 1px solid rgba(219, 231, 243, 1);
  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 rgba(219, 231, 243, 1);
  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 rgba(219, 231, 243, 1);
  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: rgba(0, 102, 93, 1);
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: rgba(0, 102, 93, 1);
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: rgba(0, 74, 67, 1);
}
.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: rgba(39, 55, 71, 1);
  display: block;
  padding: 20px 0;
}
.article-return-to-top a:hover, .article-return-to-top a:focus {
  text-decoration: none;
}
.article-return-to-top-icon {
  transform: rotate(0.5turn);
}
.article td > p:first-child,
.article th > p:first-child {
  margin-top: 0;
}
.article td > p:last-child,
.article th > p:last-child {
  margin-bottom: 0;
}

.sidenav-title {
  font-size: 15px;
  position: relative;
  font-weight: 600;
}
.sidenav-item {
  display: block;
  margin-top: 10px;
  margin-bottom: 16px;
  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: rgba(39, 55, 71, 1);
  left: 0;
  position: absolute;
  top: 5px;
}
[dir=rtl] .attachments .attachment-item {
  padding-left: 0;
  padding-right: 20px;
}
[dir=rtl] .attachments .attachment-item .attachment-icon {
  left: auto;
  right: 0;
}

.upload-dropzone span {
  color: rgba(81, 101, 121, 1);
}

/***** 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: rgba(81, 101, 121, 1);
}
.share a:hover {
  text-decoration: none;
  color: rgba(60, 166, 153, 1);
}
.share a svg {
  height: 18px;
  width: 18px;
  display: block;
}

/***** Comments *****/
/* Styles comments inside articles, posts and requests */
.comment {
  border-bottom: 1px solid rgba(219, 231, 243, 1);
  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 rgba(219, 231, 243, 1);
  border-top: 1px solid rgba(219, 231, 243, 1);
  padding: 20px 0;
}
.comment-overview p {
  margin-top: 0;
}
.comment-callout {
  color: rgba(81, 101, 121, 1);
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}
.comment-callout a {
  color: rgba(0, 102, 93, 1);
  text-decoration: underline;
}
.comment-callout a:visited {
  color: rgba(0, 102, 93, 1);
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: rgba(0, 74, 67, 1);
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: rgba(81, 101, 121, 1);
  font-size: 13px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid rgba(60, 166, 153, 1);
  padding: 40px 20px 20px;
}
@media (min-width: 768px) {
  .comment-wrapper.comment-official {
    padding-top: 20px;
  }
}
.comment-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .comment-info {
  padding-right: 0;
  padding-left: 20px;
}
.comment-author {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .comment-author {
    justify-content: space-between;
  }
}
.comment-avatar {
  margin-right: 10px;
}
[dir=rtl] .comment-avatar {
  margin-left: 10px;
  margin-right: 0;
}
.comment-meta {
  flex: 1 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: rgba(60, 166, 153, 1);
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  color: rgba(0, 102, 93, 1);
  text-decoration: underline;
}
.comment-body a:visited {
  color: rgba(0, 102, 93, 1);
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: rgba(0, 74, 67, 1);
}
.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: #dff1ff;
}
.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: #e9f5ff;
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.comment-body pre {
  background: #e9f5ff;
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.comment-body blockquote {
  border-left: 1px solid rgba(219, 231, 243, 1);
  color: rgba(81, 101, 121, 1);
  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: rgba(81, 101, 121, 1);
  display: block;
  margin: 3px 0;
}
[dir=rtl] .vote-sum {
  direction: ltr;
  unicode-bidi: bidi-override;
}

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

.vote-up:hover,
.vote-down:hover {
  color: rgba(60, 166, 153, 1);
}

.vote-up, .vote-down {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  color: rgba(81, 101, 121, 1);
  cursor: pointer;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vote-voted {
  color: rgba(60, 166, 153, 1);
}

.vote-voted:hover {
  color: #215b54;
}

/***** 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/01M2SB6DKMYFX4MV6P5J5TJRZ3);
  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 rgba(219, 231, 243, 1);
  font-size: 13px;
}
@media (min-width: 768px) {
  .topic-header {
    padding-bottom: 10px;
  }
}
.topic-header .dropdown {
  display: block;
  border-top: 1px solid rgba(219, 231, 243, 1);
  padding: 10px 0;
}
@media (min-width: 768px) {
  .topic-header .dropdown {
    border-top: 0;
    display: inline-block;
    margin-right: 20px;
    padding: 0;
  }
}

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

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

/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  padding: 0;
}
.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid rgba(219, 231, 243, 1);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}
.striped-list-info {
  flex: 2;
}
.striped-list-title {
  color: rgba(0, 102, 93, 1);
  margin-bottom: 10px;
  margin-right: 5px;
}
.striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active {
  text-decoration: underline;
}
.striped-list-title:visited {
  color: rgba(0, 102, 93, 1);
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: rgba(81, 101, 121, 1);
  font-size: 13px;
  justify-content: flex-start;
  text-transform: capitalize;
}
@media (min-width: 768px) {
  .striped-list-count {
    display: flex;
    flex: 1;
    justify-content: space-around;
  }
}
.striped-list-count-item::after {
  content: "·";
  display: inline-block;
  padding: 0 5px;
}
@media (min-width: 768px) {
  .striped-list-count-item::after {
    display: none;
  }
}
.striped-list-count-item:last-child::after {
  display: none;
}
.striped-list-number {
  text-align: center;
}
@media (min-width: 768px) {
  .striped-list-number {
    color: rgba(39, 55, 71, 1);
    display: block;
  }
}

/***** Status labels *****/
/* Styles labels used in posts, articles and requests */
.status-label {
  background-color: #038153;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  margin-right: 2px;
  padding: 3px 10px;
  vertical-align: middle;
  white-space: nowrap;
  display: inline-block;
}
.status-label:hover, .status-label:active, .status-label:focus {
  text-decoration: none;
}
.status-label-pinned, .status-label-featured, .status-label-official {
  background-color: rgba(60, 166, 153, 1);
}
.status-label-official {
  border-radius: 0;
  margin-right: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .status-label-official {
    border-radius: 0 0 4px 4px;
    right: 30px;
    width: auto;
  }
}
[dir=rtl] .status-label-official {
  left: 30px;
  right: auto;
}
.status-label-not-planned, .status-label-closed {
  background-color: #e9ebed;
  color: rgba(81, 101, 121, 1);
}
.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: 'Helvetica Neue', Arial, Helvetica, sans-serif;
  line-height: 1.6;
  word-break: break-word;
}
.post-info-container {
  display: flex;
  margin-bottom: 40px;
}
.post-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .post-info {
  padding-right: 0;
  padding-left: 20px;
}
.post-meta {
  display: inline-block;
  flex: 1;
  margin-left: 10px;
  vertical-align: middle;
}
[dir=rtl] .post-meta {
  margin-left: 0;
  margin-right: 10px;
}
.post-body {
  display: flow-root;
}
.post-body a {
  color: rgba(0, 102, 93, 1);
  text-decoration: underline;
}
.post-body a:visited {
  color: rgba(0, 102, 93, 1);
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: rgba(0, 74, 67, 1);
}
.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: #dff1ff;
}
.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: #e9f5ff;
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.post-body pre {
  background: #e9f5ff;
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.post-body blockquote {
  border-left: 1px solid rgba(219, 231, 243, 1);
  color: rgba(81, 101, 121, 1);
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: rgba(81, 101, 121, 1);
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: rgba(60, 166, 153, 1);
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 5px;
  vertical-align: middle;
}
.post-sidebar {
  border-top: 1px solid rgba(219, 231, 243, 1);
  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 rgba(219, 231, 243, 1);
  border-top: 1px solid rgba(219, 231, 243, 1);
}
@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 rgba(60, 166, 153, 1);
}

.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}
.collapsible-nav-list li {
  color: rgba(39, 55, 71, 1);
  line-height: 45px;
  order: 1;
}
@media (min-width: 768px) {
  .collapsible-nav-list li {
    line-height: normal;
    margin-right: 30px;
  }
  [dir=rtl] .collapsible-nav-list li {
    margin-left: 30px;
    margin-right: 0;
  }
  .collapsible-nav-list li a {
    text-decoration: none;
    padding: 15px 0;
  }
}
.collapsible-nav-list li a {
  color: rgba(39, 55, 71, 1);
  display: block;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:hover {
    border-bottom: 4px solid rgba(219, 231, 243, 1);
  }
  .collapsible-nav-list li:hover a:not([aria-current=page]) {
    padding: 15px 0 11px 0;
    text-decoration: none;
  }
}
.collapsible-nav-list li:not([aria-selected=true]),
.collapsible-nav-list li:not(.current) {
  display: none;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:not([aria-selected=true]),
  .collapsible-nav-list li:not(.current) {
    display: block;
  }
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true] {
    padding: 15px 0 11px 0;
  }
}
.collapsible-nav-list li[aria-selected=true],
.collapsible-nav-list li.current {
  order: 0;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true],
  .collapsible-nav-list li.current {
    border-bottom: 4px solid rgba(60, 166, 153, 1);
    order: 1;
  }
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
  color: rgba(39, 55, 71, 1);
}

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

/* Sidebar navigation that collapses on mobile */
.collapsible-sidebar {
  flex: 1;
  max-height: 45px;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
}
@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 0;
  }
}
.collapsible-sidebar-title {
  margin-top: 0;
}
.collapsible-sidebar-toggle {
  position: absolute;
  top: 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 rgba(60, 166, 153, 1);
}
.collapsible-sidebar-body {
  display: none;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-body {
    display: block;
  }
}
.collapsible-sidebar[aria-expanded=true] {
  max-height: none;
}
.collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-body {
  display: block;
}

/***** My activities *****/
.my-activities-nav {
  background-color: #dff1ff;
  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: rgba(81, 101, 121, 1);
  font-size: 13px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: rgba(81, 101, 121, 1);
}

/***** 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 rgba(219, 231, 243, 1);
  color: rgba(81, 101, 121, 1);
  text-align: inherit;
  padding: 8px 25px;
  width: 100%;
}
.request-main .comment-show-container.hidden {
  display: none;
}
.request-main .form-field.comment-ccs > ul {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.request-main .form-field.comment-ccs > ul[data-hc-focus=true] {
  border: 1px solid rgba(60, 166, 153, 1);
}
.request-main .form-field.comment-ccs > input[type=text] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.request-main .comment-ccs + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}
.request-main .comment-ccs + textarea:focus {
  border-top: 1px solid rgba(60, 166, 153, 1);
}
.request-main input#mark_as_solved {
  display: none;
}
.request-title {
  width: 100%;
}
@media (min-width: 1024px) {
  .request-title {
    border-bottom: 1px solid rgba(219, 231, 243, 1);
    margin-bottom: 0;
    max-width: 66%;
    padding-bottom: 20px;
  }
}
.request-sidebar {
  border-bottom: 1px solid rgba(219, 231, 243, 1);
  border-top: 1px solid rgba(219, 231, 243, 1);
  flex: 1 0 auto;
  order: 0;
}
@media (min-width: 1024px) {
  .request-sidebar {
    background-color: #e9f5ff;
    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 rgba(219, 231, 243, 1);
  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: rgba(81, 101, 121, 1);
  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: rgba(81, 101, 121, 1);
  font-size: 13px;
}
.meta-data:not(:last-child)::after {
  content: "·";
  margin: 0 5px;
}

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

.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: rgba(81, 101, 121, 1);
  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 rgba(219, 231, 243, 1);
  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 rgba(219, 231, 243, 1);
}
@media (min-width: 768px) {
  .profile-stats-counters {
    flex: 0 0 200px;
    border-bottom: 0;
    margin-left: 40px;
  }
  [dir=rtl] .profile-stats-counters {
    margin-left: 0;
    margin-right: 40px;
  }
}
@media (min-width: 1024px) {
  .profile-stats-counters {
    flex: 0 0 270px;
    margin-left: 60px;
  }
  [dir=rtl] .profile-stats-counters {
    margin-right: 60px;
    margin-left: 0;
  }
}

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

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

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

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

.profile-nav {
  background-color: #dff1ff;
  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: rgba(81, 101, 121, 1);
  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 rgba(219, 231, 243, 1);
  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: rgba(81, 101, 121, 1);
  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 rgba(219, 231, 243, 1);
  }
  [dir=rtl] .profile-activity:not(:last-child) {
    border-left: 0;
    border-right: 1px solid rgba(219, 231, 243, 1);
  }
}

.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: #e9f5ff;
}
@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: rgba(248, 252, 255, 1);
  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 rgba(219, 231, 243, 1);
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .search-results-sidebar {
    border: 0;
    flex: 0 0 20%;
    height: auto;
  }
}
.search-results-sidebar .sidenav-item {
  border-radius: 4px;
  padding: 10px 36px;
  margin-bottom: 4px;
  color: rgba(39, 55, 71, 1);
}
.search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current {
  background-color: #e9ebed;
  text-decoration: none;
}
.search-results-sidebar .sidenav-subitem {
  unicode-bidi: embed;
}
.search-results-sidebar .sidenav-tag {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-grow: 0;
}
.search-results-sidebar .sidenav-tag .content-tag {
  background: #E9EBED;
  border-radius: 4px;
  padding: 4px 12px;
  text-decoration: none;
}
.search-results-sidebar .sidenav-tag .content-tag .label {
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  letter-spacing: -0.000427656px;
  color: #49545C;
  flex-grow: 0;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .sidenav-tag .content-tag .close-icon {
  color: #555555;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .collapsible-sidebar {
  margin-bottom: 30px;
}
.search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
  display: none;
}
@media (min-width: 1024px) {
  .search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
    display: block;
  }
}
.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n+6):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: rgba(0, 102, 93, 1);
}
.search-results-sidebar .see-all-filters[aria-hidden=true] {
  display: none;
}
.search-results-sidebar .see-all-filters:hover {
  text-decoration: underline;
}
.search-results-sidebar .see-all-filters::after {
  content: " ⌄";
  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 rgba(219, 231, 243, 1);
}
.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: rgba(0, 102, 93, 1);
}
.search-results .no-results .action-prompt a:visited {
  color: rgba(0, 102, 93, 1);
}

.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: rgba(81, 101, 121, 1);
  font-size: 13px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: rgba(60, 166, 153, 1);
  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: rgba(248, 252, 255, 1);
  border: 1px solid rgba(219, 231, 243, 1);
  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: rgba(39, 55, 71, 1);
  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(237, 245, 253, 1);
  text-decoration: none;
  color: rgba(39, 55, 71, 1);
}
.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/01M2SB6E7TBYMJP4H0PYNP6R9H);
  margin-bottom: 10px;
  height: 320px;
}
.service-catalog-description {
  display: flow-root;
}
.service-catalog-description a {
  color: rgba(0, 102, 93, 1);
  text-decoration: underline;
}
.service-catalog-description a:visited {
  color: rgba(0, 102, 93, 1);
}
.service-catalog-description a:hover, .service-catalog-description a:active, .service-catalog-description a:focus {
  color: rgba(0, 74, 67, 1);
}
.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: #dff1ff;
}
.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: #e9f5ff;
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.service-catalog-description pre {
  background: #e9f5ff;
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.service-catalog-description blockquote {
  border-left: 1px solid rgba(219, 231, 243, 1);
  color: rgba(81, 101, 121, 1);
  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;
}

/* =========================================================================
 * Page shell
 *
 * header.hbs opens .page-shell and footer.hbs closes it, so the knowledge
 * base rail and the "On this page" rail are siblings of the page content and
 * can pin to the edges of the viewport on every page.
 *
 *   < 1024px   rail, on-this-page, then content, stacked
 *   >= 1024px  rail | content | on-this-page
 * ========================================================================= */
.page-shell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.page-main {
  order: 3;
  width: 100%;
  min-width: 0;
}

.kb-rail {
  order: 1;
}

.toc-rail {
  order: 2;
}

@media (min-width: 1024px) {
  .page-shell {
    flex-direction: row;
    align-items: flex-start;
  }
  .kb-rail {
    order: 1;
  }
  .page-main {
    order: 2;
    flex: 1 1 auto;
  }
  .toc-rail {
    order: 3;
  }
}

/* Content column: centred between the rails, held to a readable width.
   These are descendant selectors on purpose - Zendesk wraps the page template
   in its own <main> element, so .container is not a child of .page-main. */
.page-main {
  padding-top: 28px;
}

.page-main .container,
.page-main .error-page {
  box-sizing: border-box;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 767px) {
  .page-main {
    padding-top: 20px;
  }
  .page-main .container,
  .page-main .error-page {
    padding: 0 20px;
  }
}

/* The header now carries its own bottom border, so the rule each page used to
   draw under it is a duplicate. */
.container-divider {
  display: none;
}

/***** App header *****/
.logo {
  justify-self: start;
  min-width: 0;
}

.nav-wrapper-desktop {
  justify-self: end;
}

.header-search {
  position: relative;
  justify-self: center;
  width: 100%;
  min-width: 0;
}

.header-search .search {
  background-color: rgba(248, 252, 255, 1);
}

.header-search input[type=search] {
  height: 36px;
}

@media (max-width: 767px) {
  .header {
    grid-template-columns: auto auto;
    padding: 12px 20px 14px;
  }
  .logo {
    grid-column: 1;
    grid-row: 1;
  }
  .nav-wrapper-mobile {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .header-search {
    grid-column: 1/-1;
    grid-row: 2;
    max-width: none;
  }
}

/***** Knowledge base rail *****/
/*
 * The rail is chrome rather than content, so it sits on its own surface:
 * white panel, hairline edge, and it scrolls independently of the page.
 */
.kb-rail,
.search-rail {
  box-sizing: border-box;
  background-color: rgba(248, 252, 255, 1);
  border-bottom: 1px solid rgba(219, 231, 243, 1);
  padding: 0 20px;
}

.search-rail {
  padding: 20px;
}

.kb-rail[hidden],
.search-rail[hidden] {
  display: none;
}

.kb-tree-fallback-link {
  display: inline-block;
  margin-top: 4px;
  color: rgba(0, 102, 93, 1);
}

/* App shell: from 1024px up the page itself does not scroll. The header is
   fixed in place and each of the three columns scrolls inside its own pane,
   so scrolling the article never moves the rails, and hovering a rail scrolls
   only that rail. Below 1024px this all reverts to ordinary page scrolling. */
@media (min-width: 1024px) {
  .header {
    height: $kb_header_height;
  }
  .page-shell {
    display: block;
    min-height: 0;
  }
  /* The base rule sets width:100%, which would make the column 100% wide
     *plus* the rail gutters and slide it under the right rail. */
  .page-main {
    width: auto;
  }
  /* All three rails are pinned to the viewport, so scrolling the article
     never moves them, and each scrolls on its own when it outgrows the
     screen. The search page's filter rail is one of them. */
  .kb-rail,
  .search-rail,
  .toc-rail {
    position: fixed;
    top: var(--kb-header-height, #{$kb_header_height});
    height: calc(100vh - var(--kb-header-height, #{$kb_header_height}));
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 10;
  }
  .page-main {
    margin-left: 280px;
    margin-right: 220px;
  }
  [dir=rtl] .page-main {
    margin-left: 220px;
    margin-right: 280px;
  }
  /* No left rail at all (setting off, or the API was unreachable): reclaim
     the gutter rather than leaving a hole. */
  .page-shell:not(:has(.kb-rail, .search-rail)) .page-main {
    margin-left: 0;
    margin-right: 0;
  }
  /* The home page drops the rail entirely - the cards already are the
     category navigation - so the grid sits in the middle of the page. */
  .page-shell:has(.kb-home-marker) .kb-rail {
    display: none;
  }
  .page-shell:has(.kb-home-marker) .page-main {
    margin-left: 0;
    margin-right: 0;
  }
  .page-shell:has(.kb-home-marker) .page-main .container {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1024px) {
  .kb-rail,
  .search-rail {
    left: 0;
    width: 280px;
    background-color: rgba(248, 252, 255, 1);
    border-bottom: 0;
    padding: 24px 12px 32px 24px;
  }
  [dir=rtl] .kb-rail,
  [dir=rtl] .search-rail {
    left: auto;
    right: 0;
    padding: 24px 24px 32px 12px;
  }
}

@media (min-width: 1280px) {
  .kb-rail,
  .search-rail {
    width: 320px;
  }
  .page-main {
    margin-left: 320px;
    margin-right: 260px;
  }
  [dir=rtl] .page-main {
    margin-left: 260px;
    margin-right: 320px;
  }
  .page-shell:not(:has(.kb-rail, .search-rail)) .page-main {
    margin-left: 0;
    margin-right: 0;
  }
}

/***** On this page rail *****/
.toc-rail {
  box-sizing: border-box;
  padding: 20px;
}

.toc-rail[hidden] {
  display: none;
}

@media (min-width: 1024px) {
  .toc-rail {
    right: 0;
    width: 220px;
    background-color: rgba(248, 252, 255, 1);
    padding: 28px 24px 32px 8px;
  }
  [dir=rtl] .toc-rail {
    right: auto;
    left: 0;
  }
  [dir=rtl] .toc-rail {
    padding: 28px 8px 32px 24px;
  }
}

@media (min-width: 1280px) {
  .toc-rail {
    width: 260px;
  }
}

/***** Single-column page bodies, now that the rails have moved out *****/
.article-container,
.category-container,
.section-container {
  display: block;
}

.page-main .article,
.page-main .category-content,
.page-main .section-content {
  flex: none;
  min-width: 0;
  max-width: none;
  padding: 0;
}

/***** Knowledge base tree *****/
.kb-tree {
  position: relative;
  font-size: 15px;
}

/* On small screens the rail collapses behind its toggle, so cap how far it
   can push the page down when opened. */
.collapsible-sidebar[aria-expanded=true] .kb-tree {
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (min-width: 1024px) {
  .collapsible-sidebar[aria-expanded=true] .kb-tree {
    max-height: none;
    overflow-y: visible;
  }
}

.kb-tree-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-tree-children {
  margin-left: 9px;
  padding-left: 5px;
  border-left: 1px solid rgba(219, 231, 243, 1);
}

[dir=rtl] .kb-tree-children {
  margin-left: 0;
  margin-right: 9px;
  padding-left: 0;
  padding-right: 5px;
  border-left: 0;
  border-right: 1px solid rgba(219, 231, 243, 1);
}

.kb-tree-row {
  display: flex;
  align-items: flex-start;
}

.kb-tree-toggle {
  flex: 0 0 20px;
  width: 20px;
  height: 26px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  color: rgba(81, 101, 121, 1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kb-tree-toggle:hover {
  color: rgba(60, 166, 153, 1);
  background-color: #e4f3ff;
}

.kb-tree-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(60, 166, 153, 1);
}

.kb-tree-toggle-empty {
  cursor: default;
}

.kb-tree-chevron {
  transform: rotate(-90deg);
  transition: transform 0.15s ease;
}

[dir=rtl] .kb-tree-chevron {
  transform: rotate(90deg);
}

.kb-tree-toggle[aria-expanded=true] .kb-tree-chevron {
  transform: rotate(0deg);
}

.kb-tree-link {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 6px;
  border-radius: 4px;
  color: rgba(39, 55, 71, 1);
  line-height: 1.35;
  overflow-wrap: break-word;
}

.kb-tree-link:hover,
.kb-tree-link:focus {
  color: rgba(0, 102, 93, 1);
  background-color: #e4f3ff;
  text-decoration: none;
}

.kb-tree-node-category > .kb-tree-row > .kb-tree-link {
  font-weight: 600;
}

.kb-tree-node-section > .kb-tree-row > .kb-tree-link {
  font-weight: 500;
}

.kb-tree-node-article > .kb-tree-row > .kb-tree-link {
  color: rgba(81, 101, 121, 1);
  font-size: 14.5px;
}

.kb-tree-node.is-current-section > .kb-tree-row > .kb-tree-link,
.kb-tree-node.is-current-category > .kb-tree-row > .kb-tree-link {
  color: rgba(60, 166, 153, 1);
}

.kb-tree-node.is-current > .kb-tree-row > .kb-tree-link {
  color: rgba(60, 166, 153, 1);
  font-weight: 600;
  background-color: #dff1ff;
}

.kb-tree-status {
  margin: 0;
  padding: 6px;
  font-size: 13px;
  color: rgba(81, 101, 121, 1);
}

.kb-tree-fallback[hidden] {
  display: none;
}

/***** On this page list *****/
.article-toc-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(81, 101, 121, 1);
}

.article-toc-nav {
  position: relative;
}

.article-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.article-toc-link {
  display: block;
  padding: 5px 0 5px 14px;
  border-left: 2px solid rgba(219, 231, 243, 1);
  color: rgba(81, 101, 121, 1);
  font-size: 15px;
  line-height: 1.45;
}

[dir=rtl] .article-toc-link {
  padding: 5px 14px 5px 0;
  border-left: 0;
  border-right: 2px solid rgba(219, 231, 243, 1);
}

.article-toc-link:hover {
  color: rgba(0, 102, 93, 1);
  border-left-color: rgba(81, 101, 121, 1);
  text-decoration: none;
}

[dir=rtl] .article-toc-link:hover {
  border-right-color: rgba(81, 101, 121, 1);
}

.article-toc-link.is-active {
  color: rgba(60, 166, 153, 1);
  border-left-color: rgba(60, 166, 153, 1);
  font-weight: 600;
}

[dir=rtl] .article-toc-link.is-active {
  border-right-color: rgba(60, 166, 153, 1);
}

.article-toc-item-h3 .article-toc-link {
  padding-left: 26px;
  font-size: 14px;
}

[dir=rtl] .article-toc-item-h3 .article-toc-link {
  padding-left: 0;
  padding-right: 26px;
}

/* Clear the sticky header when the page jumps to a heading. script.js reads
   the header's real height, so these stay in step automatically. */
.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4 {
  scroll-margin-top: calc(#{$kb_header_height} + 24px);
}


/* Smooth scrolling stays on the document only. Chrome mis-lands upward
   fragment jumps when the scroll container itself has scroll-behavior:smooth,
   so the table of contents does its own scrolling in script.js instead. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/***** Section and category descriptions in listings *****/
/* Guide stores descriptions as plain text, so honour any line breaks the
   author typed rather than collapsing them into one paragraph. */
.page-header-description,
.section-tree-description,
.section-list-item-description,
.blocks-item-description {
  white-space: pre-line;
}

.section-tree-description {
  margin: 6px 0 0;
  color: rgba(81, 101, 121, 1);
  font-size: 14px;
  line-height: 1.5;
  max-width: 60ch;
}

.section-tree .section {
  margin-bottom: 28px;
}

.section-list-item-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-right: 20px;
}

[dir=rtl] .section-list-item-text {
  padding-right: 0;
  padding-left: 20px;
}

.section-list-item-name {
  font-weight: 600;
}

.section-list-item-description {
  color: rgba(81, 101, 121, 1);
  font-size: 14px;
  line-height: 1.5;
  font-weight: normal;
}

.section-list-item a {
  align-items: flex-start;
}

.section-list-item a svg {
  flex: 0 0 16px;
  margin-top: 4px;
}

@media print {
  .kb-rail,
  .toc-rail,
  .header-search {
    display: none;
  }
  .header {
    position: static;
  }
}

/* =========================================================================
 * Search suggestions (instant search)
 *
 * The suggestion dropdown is injected by Zendesk at runtime as a set of
 * <zd-autocomplete-*> custom elements, not by this theme, so these are
 * element selectors rather than classes and need !important to land.
 * Zendesk renamed these when unified search shipped, so both the current
 * (-multibrand) and the legacy names are covered.
 * ========================================================================= */
zd-autocomplete,
zd-autocomplete-multibrand,
zd-autocomplete-header {
  background-color: rgba(248, 252, 255, 1) !important;
  border: 1px solid rgba(219, 231, 243, 1) !important;
}

zd-autocomplete a,
zd-autocomplete-option,
zd-autocomplete-title-multibrand {
  color: rgba(0, 102, 93, 1) !important;
}

zd-autocomplete-breadcrumbs-multibrand {
  color: rgba(81, 101, 121, 1) !important;
}

zd-autocomplete a:hover,
zd-autocomplete a:focus,
zd-autocomplete li:hover,
zd-autocomplete-option:hover,
zd-autocomplete-option:focus,
zd-autocomplete-multibrand:hover,
zd-autocomplete-multibrand:focus-within {
  background-color: rgba(237, 245, 253, 1) !important;
  color: rgba(39, 55, 71, 1) !important;
}

/* =========================================================================
 * In-page navigation
 *
 * script.js swaps only .page-main when you follow a knowledge base link, so
 * the header and the rail are never re-rendered. The fade covers the fetch.
 * ========================================================================= */
.page-main {
  transition: opacity 0.12s ease-out;
}

body.is-navigating .page-main {
  opacity: 0.45;
}

.page-main:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .page-main {
    transition: none;
  }
  body.is-navigating .page-main {
    opacity: 1;
  }
}

/***** Header foreground, now that the bar has its own dark background *****/
.header .logo span {
  color: rgba(255, 255, 255, 1);
}

.nav-wrapper-desktop a:not(.ask-ai),
.nav-wrapper-desktop a:not(.ask-ai):visited,
.nav-wrapper-desktop a:not(.ask-ai):hover,
.nav-wrapper-desktop a:not(.ask-ai):focus,
.nav-wrapper-desktop a:not(.ask-ai):active {
  color: rgba(255, 255, 255, 1);
}

.user-info > button,
.user-info > button:hover,
.user-info > button:focus,
.user-info > button::after {
  color: rgba(255, 255, 255, 1);
}

.nav-wrapper-mobile .menu-button-mobile {
  color: rgba(255, 255, 255, 1);
}

.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
  background: rgba(255, 255, 255, 0.15);
}

/* The mobile menus drop out of the dark bar onto the page surface. */
.user-nav[aria-expanded=true] {
  background-color: rgba(248, 252, 255, 1);
  border-color: rgba(219, 231, 243, 1);
}

/* Headings get focus when you jump to them from "On this page". A mouse click
   should not leave a box behind; keyboard users still get a visible ring. */
.article-body h1:focus,
.article-body h2:focus,
.article-body h3:focus,
.article-body h4:focus {
  outline: none;
}

.article-body h1:focus-visible,
.article-body h2:focus-visible,
.article-body h3:focus-visible,
.article-body h4:focus-visible {
  outline: 2px solid rgba(60, 166, 153, 1);
  outline-offset: 4px;
  border-radius: 3px;
}

/* =========================================================================
 * Article callouts
 *
 * Inserted by the Zendesk article editor as
 * <div class="wysiwyg-callout wysiwyg-callout-{info|warning|error|tip}">.
 * Zendesk exposes --zd-wysiwyg-* custom properties for the background and
 * icon; text and outline colours are not among them, so those are set on the
 * class directly. Both are declared, so the colours land either way.
 * ========================================================================= */
:root {
  --zd-wysiwyg-callout-info-bg: #{$callout_info_background};
  --zd-wysiwyg-callout-info-icon-color: #{$callout_info_text};
  --zd-wysiwyg-callout-warning-bg: #{$callout_warning_background};
  --zd-wysiwyg-callout-warning-icon-color: #{$callout_warning_text};
  --zd-wysiwyg-callout-error-bg: #{$callout_error_background};
  --zd-wysiwyg-callout-error-icon-color: #{$callout_error_text};
  --zd-wysiwyg-callout-tip-bg: #{$callout_tip_background};
  --zd-wysiwyg-callout-tip-icon-color: #{$callout_tip_text};
}

.wysiwyg-callout {
  border: 1px solid transparent;
  border-radius: 6px;
}

.wysiwyg-callout-info {
  color: $callout_info_text;
  background-color: $callout_info_background;
  border-color: $callout_info_outline;
}

.wysiwyg-callout-info svg {
  color: $callout_info_text;
  fill: $callout_info_text;
}

.wysiwyg-callout-warning {
  color: $callout_warning_text;
  background-color: $callout_warning_background;
  border-color: $callout_warning_outline;
}

.wysiwyg-callout-warning svg {
  color: $callout_warning_text;
  fill: $callout_warning_text;
}

.wysiwyg-callout-error {
  color: $callout_error_text;
  background-color: $callout_error_background;
  border-color: $callout_error_outline;
}

.wysiwyg-callout-error svg {
  color: $callout_error_text;
  fill: $callout_error_text;
}

.wysiwyg-callout-tip {
  color: $callout_tip_text;
  background-color: $callout_tip_background;
  border-color: $callout_tip_outline;
}

.wysiwyg-callout-tip svg {
  color: $callout_tip_text;
  fill: $callout_tip_text;
}

/* Links inside a callout inherit the callout's own text colour so they stay
   legible against the tinted background. */
.wysiwyg-callout a,
.wysiwyg-callout a:visited,
.wysiwyg-callout a:hover {
  color: inherit;
  text-decoration: underline;
}

/***** Rail heading *****/
/*
 * On desktop the tree speaks for itself, so the heading is hidden visually but
 * kept for the aside's aria-labelledby. On mobile it is the only label on the
 * collapsed bar, so it stays visible there.
 */
@media (min-width: 1024px) {
  .kb-rail .collapsible-sidebar,
  .search-rail .collapsible-sidebar {
    overflow: visible;
    max-height: none;
  }
  .kb-rail .collapsible-sidebar-title {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
  }
  .kb-rail .collapsible-sidebar-body {
    margin-top: 0;
  }
}

/***** Image corners *****/
img {
  border-radius: 4px;
}

/* Avatars stay circular. */
.user-avatar,
.avatar img,
.avatar .icon-agent {
  border-radius: 50%;
}

/***** Search results page *****/
/*
 * The knowledge base rail is not useful next to a result list, so it is
 * dropped here and the result filters take its place at the edge of the page.
 * script.js moves the <aside> into the shell; this hides the rail up front so
 * there is no flash before that happens.
 */
.page-shell:has(.search-results) .kb-rail {
  display: none;
}


/* With the filters lifted out, the results are the only column left. */
.search-results {
  display: block;
}

.page-main .search-results-column {
  flex: none;
  max-width: none;
}


/***** Listing rows *****/
/*
 * Sections and articles share one row pattern on category and section pages.
 * The whole row is the link, so the click target is the full width of the
 * column rather than just the words.
 */
.section-list-item,
.article-list-item {
  border-bottom: 1px solid rgba(219, 231, 243, 1);
  padding: 0;
  font-size: 16px;
  overflow: visible;
}

.section-list-item:first-child,
.article-list:first-child .article-list-item:first-child {
  border-top: 1px solid rgba(219, 231, 243, 1);
}

.section-list-item > a,
.article-list-item > .article-list-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 12px;
  margin: 0 -12px;
  border-radius: 4px;
  color: rgba(39, 55, 71, 1);
}

.section-list-item > a:hover,
.article-list-item > .article-list-link:hover,
.section-list-item > a:focus-visible,
.article-list-item > .article-list-link:focus-visible {
  background-color: rgba(237, 245, 253, 1);
  color: rgba(39, 55, 71, 1);
  text-decoration: none;
}

.list-row-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.list-row-name {
  font-weight: 600;
  line-height: 1.4;
}

.list-row-description {
  color: rgba(81, 101, 121, 1);
  font-size: 14px;
  font-weight: normal;
  line-height: 1.5;
  white-space: pre-line;
}

.list-row-chevron {
  flex: 0 0 16px;
  color: rgba(81, 101, 121, 1);
}

[dir=rtl] .list-row-chevron {
  transform: scaleX(-1);
}

.list-row-name .icon-star,
.list-row-name .icon-lock {
  vertical-align: baseline;
  margin-right: 4px;
}

.section-list,
.article-list {
  margin: 24px 0;
}

/***** Avatar menu contrast *****/
/*
 * The header gives every link in .nav-wrapper-desktop the header text colour
 * (white on the dark bar). That selector is more specific than the generic
 * .dropdown-menu rule, so the items in the user menu inherited white on a
 * near-white panel. Scoping by .header wins it back.
 */
.header .dropdown-menu [role=menuitem],
.header .dropdown-menu [role=menuitemradio],
.header .dropdown-menu a {
  color: rgba(39, 55, 71, 1);
}

.header .dropdown-menu [role=menuitem]:hover,
.header .dropdown-menu [role=menuitem]:focus,
.header .dropdown-menu [role=menuitemradio]:hover,
.header .dropdown-menu [role=menuitemradio]:focus,
.header .dropdown-menu a:hover,
.header .dropdown-menu a:focus {
  color: rgba(39, 55, 71, 1);
  background-color: rgba(237, 245, 253, 1);
  text-decoration: none;
}

/* Same story for the mobile menu, which also drops out of the dark bar. */
.nav-wrapper-mobile .menu-list-mobile a {
  color: rgba(39, 55, 71, 1);
}

.nav-wrapper-mobile .menu-list-mobile a:hover,
.nav-wrapper-mobile .menu-list-mobile a:focus {
  background-color: rgba(237, 245, 253, 1);
  color: rgba(39, 55, 71, 1);
}

/* =========================================================================
 * Amplify 2026 redesign (November 2026)
 *
 * Everything below this banner is the redesign layer. It sits after the
 * original rules on purpose, so it wins on equal specificity and the layer
 * can be read (or removed) as one block.
 *
 * Colours come from the Amplify Design System in Figma ("Colour Palette").
 * Where a colour is also a theme setting, the setting is used (rgba(0, 102, 93, 1)
 * etc.) so it can still be changed in Guide > Customize design. The rest are
 * the custom properties below.
 *
 * Contrast notes (WCAG 2.1 AA, normal text needs 4.5:1):
 *  - Primary 500 #3CA699 is ~3:1 on white, so it is used for accents only
 *    (logo, focus rings, active markers, borders), never for body text.
 *  - Links and filled buttons use Primary 700 #00665D (6.9:1 with white).
 *  - Secondary text uses Secondary 500 #516579 (6.2:1), not Text Muted
 *    #778BA0 (3.5:1).
 * ========================================================================= */
:root {
  --amp-chrome: #1d2a36;          /* surface-chrome */
  --amp-chrome-line: #334557;     /* secondary/700 */
  --amp-chrome-hover: #516579;    /* surface-chrome-hover */
  --amp-text: #273747;            /* text-primary */
  --amp-text-2: #415468;          /* secondary/600 */
  --amp-text-3: #516579;          /* secondary/500 */
  --amp-on-dark: #c2d2e3;         /* secondary/200 */
  --amp-border: #dbe7f3;          /* border-default */
  --amp-border-strong: #c2d2e3;   /* border-strong */
  --amp-divider: #edf5fd;         /* border-subtle */
  --amp-sunken: #edf5fd;          /* surface-sunken */
  --amp-page: #f8fcff;            /* surface-page */
  --amp-teal: #3ca699;            /* primary/500, action-primary */
  --amp-teal-300: #86dccf;        /* primary/300, highlight */
  --amp-teal-200: #a9eee3;        /* primary/200 */
  --amp-teal-100: #c9f8f0;        /* primary/100 */
  --amp-teal-50: #defef9;         /* primary/50 */
  --amp-teal-25: #f0fffc;         /* primary/25, surface-subtle */
  --amp-link: #00665d;            /* primary/700, action-primary-active */
  --amp-link-hover: #004a43;      /* primary/800 */
  --amp-warning-text: #8d5f00;    /* status-warning-text */
  --amp-code-text: #dbe7f3;       /* secondary/100 (11.7:1 on chrome) */
  --amp-code-key: #86dccf;        /* primary/300 (9.2:1): keys, keywords */
  --amp-code-string: #ffd69c;     /* warning/300 (10.7:1) */
  --amp-code-number: #9ec6ff;     /* info/300 (8.3:1) */
  --amp-code-literal: #fdaaf2;    /* data-timesheet/300 (8.5:1): true, false, null */
  --amp-code-muted: #a0b4c7;      /* secondary/300 (6.9:1): punctuation, comments */
  --amp-radius-sm: 8px;
  --amp-radius: 12px;
  --amp-radius-lg: 16px;
  --amp-radius-xl: 20px;
  --amp-shadow-hover: 0 14px 32px rgba(29, 42, 54, 0.1);
  --amp-shadow-pop: 0 18px 40px rgba(29, 42, 54, 0.18);
}

/***** Base *****/
body {
  background-color: rgba(248, 252, 255, 1);
  color: rgba(39, 55, 71, 1);
}

h1, h2, h3, h4, h5, h6 {
  color: rgba(39, 55, 71, 1);
}

a:visited {
  color: rgba(0, 102, 93, 1);
}

a:hover {
  color: rgba(0, 74, 67, 1);
}

/* One visible focus ring everywhere, for keyboard users only. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid rgba(60, 166, 153, 1);
  outline-offset: 2px;
}

.amp-icon {
  display: inline-block;
  flex: none;
  vertical-align: middle;
}

/***** Buttons *****/
.amp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--amp-radius-sm);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.amp-btn:hover,
.amp-btn:focus {
  text-decoration: none;
}

.amp-btn-primary,
.amp-btn-primary:visited {
  background-color: var(--amp-link);
  border-color: var(--amp-link);
  color: #fff;
}

.amp-btn-primary:hover,
.amp-btn-primary:active {
  background-color: var(--amp-link-hover);
  border-color: var(--amp-link-hover);
  color: #fff;
}

.amp-btn-secondary,
.amp-btn-secondary:visited {
  background-color: #fff;
  border-color: var(--amp-border-strong);
  color: rgba(39, 55, 71, 1);
}

.amp-btn-secondary:hover,
.amp-btn-secondary:active {
  background-color: var(--amp-text-2);
  border-color: var(--amp-text-2);
  color: #fff;
}

/* Theme-wide primary buttons (comment forms, request forms, pagination)
   move off Primary 500, which fails contrast with white text. */
.button.button-primary,
.button-large,
.hbs-form input[type=submit] {
  background-color: var(--amp-link);
  border-color: var(--amp-link);
  color: #fff;
}

.button.button-primary:hover,
.button-large:hover,
.hbs-form input[type=submit]:hover {
  background-color: var(--amp-link-hover);
  border-color: var(--amp-link-hover);
  color: #fff;
}

.amp-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(0, 102, 93, 1);
}

.amp-link-arrow:visited {
  color: rgba(0, 102, 93, 1);
}

.amp-link-arrow .amp-icon {
  transition: transform 0.15s ease;
}

.amp-link-arrow:hover .amp-icon {
  transform: translateX(2px);
}

/***** Badges, chips and icon tiles *****/
.amp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.amp-badge-new {
  background-color: var(--amp-teal-50);
  color: var(--amp-link);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.amp-badge-neutral {
  background-color: var(--amp-sunken);
  color: var(--amp-text-2);
}

.amp-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background-color: var(--amp-teal-50);
  color: var(--amp-link);
}

.amp-icon-tile-dark {
  background-color: var(--amp-chrome);
  color: var(--amp-teal);
}

.amp-icon-tile-lg {
  width: 72px;
  height: 72px;
  border-radius: var(--amp-radius-xl);
}

.amp-lock {
  display: inline-flex;
  flex: none;
  color: var(--amp-text-3);
}

/***** App header *****/
.header {
  background-color: rgba(29, 42, 54, 1);
  border-bottom: 1px solid var(--amp-chrome-line);
}

.logo img {
  max-height: 34px;
}

.header-search .search {
  background-color: var(--amp-sunken);
  border: 1px solid var(--amp-sunken);
  border-radius: var(--amp-radius-sm);
  transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.header-search .search:hover {
  background-color: #fff;
}

.header-search .search:focus-within {
  background-color: #fff;
  border-color: rgba(60, 166, 153, 1);
  box-shadow: 0 0 0 3px rgba(60, 166, 153, 0.4);
}

.header-search .search input[type=search],
.header-search .search .clear-button {
  background-color: transparent;
  border-radius: var(--amp-radius-sm);
}

.header-search .search input[type=search] {
  height: 38px;
  color: rgba(39, 55, 71, 1);
  font-size: 15px;
}

.header-search .search input[type=search]::placeholder {
  color: var(--amp-text-3);
}

.header-search .search-icon {
  left: 13px;
  width: 16px;
  height: 16px;
  color: var(--amp-text-3);
}

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

[dir=ltr] .header-search .search input[type=search] {
  padding-left: 38px;
}

[dir=rtl] .header-search .search input[type=search] {
  padding-right: 38px;
}

.search .clear-button {
  color: var(--amp-text-2);
}

.search .clear-button:hover {
  background-color: var(--amp-sunken);
  color: rgba(39, 55, 71, 1);
}

.search .clear-button:focus {
  box-shadow: 0 0 0 2px rgba(60, 166, 153, 1);
}

/* The home page has its own search in the hero, so the header one steps
   aside. visibility keeps the header grid from shifting on wide screens. */
body:has(.kb-home-marker) .header-search {
  visibility: hidden;
}

@media (max-width: 767px) {
  body:has(.kb-home-marker) .header-search {
    display: none;
  }
}

.user-info > button {
  border-radius: var(--amp-radius-sm);
  padding: 8px 10px;
  min-height: 44px;
}

.user-info > button:hover,
.user-info > button:focus-visible {
  background-color: var(--amp-chrome-hover);
}

/***** Search suggestions (instant search) *****/
zd-autocomplete,
zd-autocomplete-multibrand,
zd-autocomplete-header {
  background-color: #fff !important;
  border: 1px solid var(--amp-border) !important;
  border-radius: var(--amp-radius) !important;
  box-shadow: var(--amp-shadow-pop) !important;
  overflow: hidden;
}

zd-autocomplete-option,
zd-autocomplete-multibrand {
  border-top: 1px solid var(--amp-divider) !important;
  padding: 12px 16px !important;
}

zd-autocomplete-option:first-child,
zd-autocomplete-multibrand:first-child {
  border-top: 0 !important;
}

zd-autocomplete a,
zd-autocomplete-option,
zd-autocomplete-title-multibrand {
  color: rgba(0, 102, 93, 1) !important;
  font-size: 15px;
  line-height: 1.4;
}

zd-autocomplete-breadcrumbs-multibrand {
  color: var(--amp-text-3) !important;
  font-size: 13px;
}

zd-autocomplete em,
zd-autocomplete b,
zd-autocomplete strong,
zd-autocomplete-multibrand em,
zd-autocomplete-multibrand b,
zd-autocomplete-multibrand strong {
  font-style: normal;
  font-weight: 700;
}

zd-autocomplete a:hover,
zd-autocomplete a:focus,
zd-autocomplete li:hover,
zd-autocomplete-option:hover,
zd-autocomplete-option:focus,
zd-autocomplete-option[aria-selected=true],
zd-autocomplete-multibrand:hover,
zd-autocomplete-multibrand:focus-within,
zd-autocomplete-multibrand[aria-selected=true] {
  background-color: var(--amp-teal-25) !important;
  box-shadow: inset 3px 0 0 var(--amp-teal) !important;
  color: rgba(39, 55, 71, 1) !important;
}

/***** Home page *****/
.page-shell:has(.kb-home-marker) .page-main {
  padding-top: 0;
}

/* The category cards are the navigation on the home page, so the rail
   (and its collapsed "Browse" bar on small screens) is not shown there. */
.page-shell:has(.kb-home-marker) .kb-rail {
  display: none;
}

.amp-hero {
  position: relative;
  overflow: hidden;
  padding: 64px 24px 152px;
  background-color: rgba(29, 42, 54, 1);
}

.amp-hero-cube {
  position: absolute;
  color: rgba(60, 166, 153, 1);
  pointer-events: none;
}

.amp-hero-cube-lg {
  right: -100px;
  top: -80px;
  opacity: 0.12;
}

.amp-hero-cube-sm {
  left: -70px;
  bottom: -120px;
  opacity: 0.09;
}

.amp-hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.amp-hero-eyebrow {
  margin: 0;
  color: var(--amp-teal-300);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1.amp-hero-title {
  margin: 0;
  color: #fff;
  font-size: 56px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.amp-hero-lead {
  margin: 0;
  color: var(--amp-on-dark);
  font-size: 19px;
  line-height: 1.5;
}

.amp-hero-search {
  position: relative;
  width: 100%;
  margin-top: 12px;
  text-align: left;
}

.amp-hero-search .search-icon {
  left: 26px;
  width: 20px;
  height: 20px;
  color: var(--amp-text-3);
}

[dir=rtl] .amp-hero-search .search-icon {
  left: auto;
  right: 26px;
}

.amp-hero-search .search.amp-search-hero {
  gap: 8px;
  padding: 8px;
  background-color: #fff;
  border: 0;
  border-radius: var(--amp-radius);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.amp-hero-search .search.amp-search-hero:focus-within {
  box-shadow: 0 0 0 3px rgba(60, 166, 153, 1), 0 18px 40px rgba(0, 0, 0, 0.28);
}

.amp-search-hero input[type=search] {
  order: 0;
  height: 52px;
  border-radius: var(--amp-radius-sm);
  color: rgba(39, 55, 71, 1);
  font-size: 18px;
}

[dir=ltr] .amp-search-hero input[type=search] {
  padding-left: 46px;
}

[dir=rtl] .amp-search-hero input[type=search] {
  padding-right: 46px;
}

.amp-search-hero input[type=search]::placeholder {
  color: var(--amp-text-3);
}

.amp-search-hero .clear-button {
  order: 1;
  border-radius: var(--amp-radius-sm) !important;
}

.amp-search-hero input[type=submit] {
  order: 2;
  flex: none;
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--amp-radius-sm);
  background-color: var(--amp-link);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.amp-search-hero input[type=submit]:hover {
  background-color: var(--amp-link-hover);
}

.amp-hero-popular {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--amp-on-dark);
  font-size: 14px;
}

.amp-hero-popular-label {
  margin-right: 4px;
}

.amp-chip-dark,
.amp-chip-dark:visited {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fff;
  line-height: 1.2;
}

.amp-chip-dark:hover {
  background-color: var(--amp-chrome-hover);
  color: #fff;
  text-decoration: none;
}

.page-main .container.amp-home {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: 1248px;
  margin: -96px auto 0;
  padding: 0 24px 80px;
}

.amp-section-title {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 700;
}

/* Category cards */
.amp-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

@media (min-width: 700px) {
  .amp-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .amp-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.amp-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(219, 231, 243, 1);
  border-top: 3px solid rgba(255, 255, 255, 1);
  border-radius: var(--amp-radius-lg);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.amp-card:hover,
.amp-card:focus-within {
  border-top-color: rgba(60, 166, 153, 1);
  box-shadow: var(--amp-shadow-hover);
  transform: translateY(-3px);
}

.amp-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.amp-card-title {
  margin: 4px 0 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}

.amp-card-title a,
.amp-card-title a:visited {
  color: rgba(39, 55, 71, 1);
}

.amp-card-title a:hover {
  color: rgba(0, 102, 93, 1);
}

.amp-card-desc {
  margin: 0;
  color: rgba(81, 101, 121, 1);
  font-size: 15px;
  line-height: 1.55;
}

.amp-card-sections {
  margin: 6px 0 0;
  border-top: 1px solid var(--amp-divider);
}

.amp-card-sections li {
  border-bottom: 1px solid var(--amp-divider);
}

.amp-card-sections a,
.amp-card-sections a:visited {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 0;
  color: rgba(0, 102, 93, 1);
  font-size: 15px;
  font-weight: 500;
}

.amp-card-sections a:hover {
  color: rgba(0, 74, 67, 1);
}

.amp-card-more {
  margin-top: auto;
  padding-top: 6px;
}

/* For administrators */
.amp-admin {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  padding: 36px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: var(--amp-radius-xl);
}

.amp-admin-intro {
  display: flex;
  flex: 1 1 300px;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.amp-admin-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.amp-admin-title {
  margin: 4px 0 0;
  font-size: 26px;
  font-weight: 700;
}

.amp-admin-title a,
.amp-admin-title a:visited {
  color: rgba(39, 55, 71, 1);
}

.amp-admin-title a:hover {
  color: rgba(0, 102, 93, 1);
}

.amp-admin-desc {
  margin: 0;
  color: rgba(81, 101, 121, 1);
  font-size: 15px;
  line-height: 1.6;
}

.amp-admin-sections {
  display: grid;
  flex: 2 1 480px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-content: start;
  gap: 12px;
}

.amp-tile,
.amp-tile:visited {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 100%;
  min-height: 56px;
  padding: 14px 16px;
  background-color: #fff;
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: var(--amp-radius);
  color: rgba(39, 55, 71, 1);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.amp-tile:hover {
  background-color: var(--amp-teal-25);
  border-color: rgba(60, 166, 153, 1);
  color: rgba(39, 55, 71, 1);
  text-decoration: none;
}

.amp-tile-chevron {
  color: rgba(0, 102, 93, 1);
}

/* More resources */
.amp-resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.amp-resource,
.amp-resource:visited {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  height: 100%;
  padding: 22px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: 14px;
  color: rgba(39, 55, 71, 1);
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.amp-resource:hover {
  background-color: var(--amp-teal-25);
  border-color: rgba(60, 166, 153, 1);
  color: rgba(39, 55, 71, 1);
  text-decoration: none;
}

.amp-resource-icon {
  display: inline-flex;
  margin-top: 2px;
  color: var(--amp-link);
}

.amp-resource-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.amp-resource-name {
  font-size: 16px;
  font-weight: 700;
}

.amp-resource-desc {
  color: rgba(81, 101, 121, 1);
  font-size: 14px;
  line-height: 1.5;
}

/* Other (old structure) categories. Empty once they are archived. */
.amp-other:not(:has(li)) {
  display: none;
}

.amp-other-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.amp-other-link,
.amp-other-link:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  background-color: #fff;
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: 999px;
  color: rgba(39, 55, 71, 1);
  font-size: 14px;
  font-weight: 600;
}

.amp-other-link:hover {
  background-color: var(--amp-teal-25);
  border-color: rgba(60, 166, 153, 1);
  color: rgba(0, 102, 93, 1);
  text-decoration: none;
}

/* Promoted articles */
.amp-promoted-list {
  overflow: hidden;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: var(--amp-radius-lg);
}

.amp-promoted-list li + li {
  border-top: 1px solid var(--amp-divider);
}

.amp-promoted-link,
.amp-promoted-link:visited {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  color: rgba(39, 55, 71, 1);
  font-weight: 600;
}

.amp-promoted-link:hover {
  background-color: var(--amp-teal-25);
  color: rgba(0, 102, 93, 1);
  text-decoration: none;
}

.amp-promoted-icon {
  color: var(--amp-link);
}

/***** "Can't find what you need?" banner *****/
.amp-help-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 32px 36px;
  background-color: var(--amp-teal-25);
  border: 1px solid var(--amp-teal-100);
  border-radius: var(--amp-radius-xl);
}

/* Requests turned off: the link helper renders nothing, so neither does
   the banner. */
.amp-help-banner:not(:has(a)) {
  display: none;
}

.amp-help-banner-compact {
  margin-top: 40px;
  padding: 24px 28px;
  border-radius: var(--amp-radius-lg);
}

.amp-help-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
}

.amp-help-banner-compact .amp-help-title {
  font-size: 18px;
}

.amp-help-text {
  margin: 0;
  color: var(--amp-text-2);
  font-size: 16px;
}

/***** Breadcrumbs *****/
.sub-nav {
  margin-bottom: 20px;
}

.breadcrumbs li {
  color: rgba(81, 101, 121, 1);
  font-size: 14px;
}

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

/***** Category and section page headers *****/
.page-header.amp-page-header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 20px;
  margin: 0 0 28px;
}

.amp-page-header-text {
  flex: 1 1 auto;
  min-width: 0;
}

.amp-page-header h1 {
  margin: 0 0 12px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.amp-page-header .page-header-description {
  max-width: 72ch;
  margin: 0;
  color: var(--amp-text-2);
  font-size: 17px;
  font-style: normal;
  line-height: 1.6;
}

.amp-page-header .section-subscribe {
  flex: none;
}

@media (max-width: 767px) {
  .page-header.amp-page-header {
    flex-wrap: wrap;
  }
  .amp-page-header h1 {
    font-size: 28px;
  }
}

/***** List cards (sections and articles on category/section pages) *****/
.amp-list-card {
  overflow: hidden;
  margin: 0 0 24px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: var(--amp-radius-lg);
}

.amp-list-card-title {
  margin: 0;
  padding: 14px 22px;
  background-color: rgba(248, 252, 255, 1);
  border-bottom: 1px solid var(--amp-divider);
  color: rgba(81, 101, 121, 1);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-list.amp-rows,
.article-list.amp-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.amp-rows .section-list-item,
.amp-rows .article-list-item,
.amp-rows .section-list-item:first-child,
.article-list.amp-rows:first-child .article-list-item:first-child {
  border-top: 1px solid var(--amp-divider);
  border-bottom: 0;
}

.amp-rows > li:first-child,
.amp-rows .section-list-item:first-child,
.article-list.amp-rows:first-child .article-list-item:first-child {
  border-top: 0;
}

.amp-rows .section-list-item > a,
.amp-rows .article-list-item > .article-list-link {
  gap: 16px;
  margin: 0;
  padding: 18px 22px;
  border-radius: 0;
  color: rgba(39, 55, 71, 1);
}

.amp-rows .section-list-item > a:hover,
.amp-rows .article-list-item > .article-list-link:hover,
.amp-rows .section-list-item > a:focus-visible,
.amp-rows .article-list-item > .article-list-link:focus-visible {
  background-color: var(--amp-teal-25);
  color: rgba(39, 55, 71, 1);
}

.amp-rows a:hover .list-row-name {
  color: rgba(0, 102, 93, 1);
}

.amp-rows .list-row-text {
  flex: 1 1 auto;
}

.amp-rows .list-row-name {
  font-size: 16px;
  font-weight: 600;
}

.amp-rows .list-row-chevron {
  color: rgba(0, 102, 93, 1);
}

.amp-rows-numbered {
  counter-reset: amp-row;
}

.amp-rows-numbered > li {
  counter-increment: amp-row;
}

.amp-row-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--amp-radius-sm);
  background-color: var(--amp-teal-50);
  color: var(--amp-link);
  font-size: 14px;
  font-weight: 700;
}

.amp-row-number::before {
  content: counter(amp-row);
}

.amp-row-flag {
  display: inline-flex;
  flex: none;
  color: var(--amp-warning-text);
}

/***** Pagination *****/
.pagination-next-link,
.pagination-prev-link,
.pagination-first-link,
.pagination-last-link {
  border-radius: var(--amp-radius-sm);
  border-color: var(--amp-border-strong);
  color: rgba(39, 55, 71, 1);
}

/***** Knowledge base rail *****/
@media (min-width: 1024px) {
  .kb-rail {
    border-right: 1px solid rgba(219, 231, 243, 1);
  }
  [dir=rtl] .kb-rail {
    border-right: 0;
    border-left: 1px solid rgba(219, 231, 243, 1);
  }
  /* Show the rail heading as a small label above the tree. */
  .kb-rail .collapsible-sidebar-title {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 10px 8px;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    color: rgba(81, 101, 121, 1);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
}

.kb-tree-toggle {
  width: 24px;
  height: 33px;
  border-radius: 6px;
  color: rgba(81, 101, 121, 1);
}

.kb-tree-toggle:hover {
  background-color: var(--amp-sunken);
  color: rgba(0, 102, 93, 1);
}

.kb-tree-toggle:focus {
  box-shadow: 0 0 0 2px rgba(60, 166, 153, 1);
}

.kb-tree-children {
  margin-left: 11px;
  padding-left: 6px;
}

.kb-tree-link,
.kb-tree-link:visited {
  padding: 7px 10px;
  border-radius: 6px;
  color: rgba(39, 55, 71, 1);
  font-size: 15px;
}

.kb-tree-link:hover,
.kb-tree-link:focus {
  background-color: var(--amp-sunken);
  color: rgba(0, 102, 93, 1);
}

.kb-tree-node-category > .kb-tree-row > .kb-tree-link {
  font-weight: 700;
}

.kb-tree-node-article > .kb-tree-row > .kb-tree-link,
.kb-tree-node-article > .kb-tree-row > .kb-tree-link:visited {
  color: var(--amp-text-2);
  font-size: 14px;
}

.kb-tree-node.is-current-section > .kb-tree-row > .kb-tree-link,
.kb-tree-node.is-current-category > .kb-tree-row > .kb-tree-link {
  color: rgba(0, 102, 93, 1);
}

.kb-tree-node.is-current-section > .kb-tree-row > .kb-tree-link {
  background-color: var(--amp-teal-50);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--amp-teal);
}

.kb-tree-node.is-current > .kb-tree-row > .kb-tree-link {
  background-color: var(--amp-teal-50);
  color: rgba(0, 102, 93, 1);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--amp-teal);
}

/* An article page also marks its section; only the article gets the bar. */
.kb-tree-node.is-current-section:has(.is-current) > .kb-tree-row > .kb-tree-link {
  background-color: transparent;
  box-shadow: none;
}

[dir=rtl] .kb-tree-node.is-current > .kb-tree-row > .kb-tree-link,
[dir=rtl] .kb-tree-node.is-current-section > .kb-tree-row > .kb-tree-link {
  box-shadow: inset -3px 0 0 var(--amp-teal);
}

/***** On this page *****/
.article-toc-title {
  color: rgba(81, 101, 121, 1);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.article-toc-link,
.article-toc-link:visited {
  color: var(--amp-text-2);
}

.article-toc-link:hover {
  color: rgba(0, 102, 93, 1);
  border-left-color: var(--amp-text-3);
}

.article-toc-link.is-active {
  color: rgba(0, 102, 93, 1);
  border-left-color: rgba(60, 166, 153, 1);
  font-weight: 700;
}

[dir=rtl] .article-toc-link.is-active {
  border-right-color: rgba(60, 166, 153, 1);
}

/***** Article *****/
.page-main .article.amp-article {
  padding: 44px 52px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: var(--amp-radius-lg);
}

@media (max-width: 767px) {
  .page-main .article.amp-article {
    padding: 28px 22px;
  }
}

.article-header.amp-article-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin: 0 0 8px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--amp-divider);
}

.amp-article-header .article-title {
  margin: 0;
  overflow: visible;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  white-space: normal;
}

@media (max-width: 767px) {
  .amp-article-header .article-title {
    font-size: 28px;
  }
}

.amp-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: rgba(81, 101, 121, 1);
  font-size: 14px;
}

.amp-article .article-body {
  color: rgba(39, 55, 71, 1);
  font-size: 17px;
  line-height: 1.7;
}

.amp-article .article-body h2 {
  margin: 36px 0 12px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
}

.amp-article .article-body h3 {
  margin: 28px 0 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.amp-article .article-body h4 {
  margin: 24px 0 8px;
  font-size: 17px;
  font-weight: 700;
}

.amp-article .article-body :not(pre) > code {
  background-color: var(--amp-sunken);
  border: 0;
  border-radius: 4px;
  color: rgba(39, 55, 71, 1);
}

/* Code blocks: dark, in the header colour, coloured by script.js
   (highlightCodeBlocks). Colours are Figma tokens; contrast on
   surface-chrome #1d2a36 is in brackets. Inline code above stays light. */
.amp-article .article-body pre {
  margin: 20px 0 24px;
  padding: 18px 22px;
  overflow-x: auto;
  background-color: var(--amp-chrome);
  border: 1px solid var(--amp-chrome-line);
  border-radius: var(--amp-radius);
  color: var(--amp-code-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 15px;
  line-height: 1.65;
  tab-size: 2;
}

.amp-article .article-body pre code {
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
}

.amp-article .article-body pre ::selection {
  background-color: rgba(134, 220, 207, 0.3);
}

.amp-tok-key,
.amp-tok-kw {
  color: var(--amp-code-key);
}

.amp-tok-kw {
  font-weight: 600;
}

.amp-tok-str {
  color: var(--amp-code-string);
}

.amp-tok-num {
  color: var(--amp-code-number);
}

.amp-tok-lit {
  color: var(--amp-code-literal);
}

.amp-tok-punct,
.amp-tok-com {
  color: var(--amp-code-muted);
}

.amp-tok-com {
  font-style: italic;
}

.amp-article .article-body blockquote {
  border-left: 4px solid rgba(60, 166, 153, 1);
  background-color: rgba(248, 252, 255, 1);
  color: var(--amp-text-2);
}

.amp-article .article-body table {
  border-collapse: collapse;
  width: 100%;
}

.amp-article .article-body th,
.amp-article .article-body td {
  border: 1px solid rgba(219, 231, 243, 1);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.amp-article .article-body th {
  background-color: var(--amp-teal-25);
  color: rgba(39, 55, 71, 1);
  font-weight: 700;
}

/* Footer: request callout band */
.amp-article-footer {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--amp-divider);
}

.amp-article-footer .article-footer:not(:has(*)) {
  display: none;
}

.article-more-questions.amp-help-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 20px 24px;
  background-color: var(--amp-teal-25);
  border: 1px solid var(--amp-teal-100);
  border-radius: var(--amp-radius);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
}

.article-more-questions.amp-help-inline:not(:has(a)) {
  display: none;
}

.article-more-questions.amp-help-inline p {
  display: contents;
}

.article-more-questions.amp-help-inline a,
.article-more-questions.amp-help-inline a:visited {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  background-color: var(--amp-link);
  border-radius: var(--amp-radius-sm);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.article-more-questions.amp-help-inline a:hover {
  background-color: var(--amp-link-hover);
  color: #fff;
}

.article-return-to-top {
  border-top: 1px solid var(--amp-divider);
}

/* Related and recently viewed articles */
.article-relatives.amp-relatives {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
  padding: 0;
  border-top: 0;
}

/* Zendesk always outputs <div data-recent-articles></div> and fills it from
   the visitor's history, so it's empty on a first visit. Hide empty cards,
   and the whole row when nothing in it has content. */
.article-relatives.amp-relatives > :empty,
.article-relatives.amp-relatives:not(:has(> :not(:empty))) {
  display: none;
}

.article-relatives.amp-relatives > * {
  min-width: 0;
  margin: 0;
  padding: 24px 28px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: var(--amp-radius-lg);
}

.amp-relatives .related-articles-title,
.amp-relatives .recent-articles-title,
.amp-relatives h2,
.amp-relatives h3 {
  margin: 0 0 8px;
  color: rgba(81, 101, 121, 1);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.amp-relatives li {
  margin: 0;
}

.amp-relatives li a {
  display: block;
  padding: 8px 0;
  font-size: 15px;
  line-height: 1.4;
}

/***** Search results *****/
.search-rail .sidenav-title,
.search-results-sidebar .sidenav-title {
  margin: 0 0 10px 12px;
  color: rgba(81, 101, 121, 1);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.search-results-sidebar .collapsible-sidebar + .collapsible-sidebar {
  padding-top: 24px;
  border-top: 1px solid rgba(219, 231, 243, 1);
}

.search-results-sidebar .multibrand-filter-list li + li {
  margin-top: 2px;
}

.search-results-sidebar .sidenav-item,
.search-results-sidebar .sidenav-item:visited {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--amp-radius-sm);
  color: rgba(39, 55, 71, 1);
  font-size: 15px;
  line-height: 1.35;
  white-space: normal;
}

.search-results-sidebar .sidenav-item:hover {
  background-color: var(--amp-sunken);
  color: rgba(0, 102, 93, 1);
  text-decoration: none;
}

.search-results-sidebar .sidenav-item.current {
  background-color: var(--amp-teal-50);
  color: rgba(0, 102, 93, 1);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--amp-teal);
}

[dir=rtl] .search-results-sidebar .sidenav-item.current {
  box-shadow: inset -3px 0 0 var(--amp-teal);
}

.search-results-sidebar .multibrand-filter-list .doc-count {
  flex: none;
  padding: 2px 8px;
  background-color: var(--amp-sunken);
  border-radius: 999px;
  color: var(--amp-text-2);
  font-size: 13px;
  font-weight: 600;
}

.search-results-sidebar .sidenav-item.current .doc-count {
  background-color: #fff;
  color: rgba(0, 102, 93, 1);
}

.search-results-sidebar .see-all-filters {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  margin-top: 4px;
  padding: 0 12px;
  border-radius: var(--amp-radius-sm);
  color: rgba(0, 102, 93, 1);
  font-size: 14px;
  font-weight: 700;
}

.search-results-sidebar .see-all-filters::after {
  content: none;
}

.search-results-sidebar .see-all-filters:hover {
  background-color: var(--amp-sunken);
  text-decoration: none;
}

.search-results-sidebar .sidenav-tag .content-tag {
  background-color: var(--amp-teal-50);
  border-radius: 999px;
}

.search-results-sidebar .sidenav-tag .content-tag .label {
  color: rgba(0, 102, 93, 1);
}

.amp-results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 36px 0 16px;
}

.search-results-column > .amp-results-head:first-child {
  margin-top: 0;
}

.amp-results-head .search-results-subheading {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.amp-results-head .search-results-subheading:empty {
  display: none;
}

.amp-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 14px;
  background-color: var(--amp-teal-50);
  border-radius: 999px;
  color: rgba(0, 102, 93, 1);
  font-size: 14px;
  font-weight: 700;
}

.amp-filter-chip-remove,
.amp-filter-chip-remove:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: rgba(0, 102, 93, 1);
}

.amp-filter-chip-remove:hover {
  background-color: #fff;
}

.search-results-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 32px;
}

.search-results-list > li,
.search-results-list > li:first-child {
  padding: 0;
  border-top: 0;
}

.amp-result {
  padding: 20px 24px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: 14px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.amp-result:hover,
.amp-result:focus-within {
  border-color: rgba(60, 166, 153, 1);
  box-shadow: 0 8px 20px rgba(29, 42, 54, 0.06);
}

.amp-result .search-result-title-container {
  align-items: flex-start;
  gap: 16px;
}

.amp-result .search-result-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

.amp-result .search-result-title a,
.amp-result .search-result-title a:visited {
  color: rgba(0, 102, 93, 1);
}

.amp-result .search-result-votes,
.amp-result .search-result-meta-count {
  display: inline-flex;
  flex: none;
  white-space: nowrap;
}

.amp-result .search-result-votes > span[aria-hidden],
.amp-result .search-result-meta-count > span[aria-hidden] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.amp-result .search-result-votes-icon,
.amp-result .search-result-meta-count-icon {
  color: rgba(81, 101, 121, 1);
}

.amp-result .search-result-meta-container {
  margin-top: 6px;
}

.search-result-breadcrumbs li {
  color: rgba(81, 101, 121, 1);
  font-size: 13px;
}

.search-result-breadcrumbs li a,
.search-result-breadcrumbs li a:visited {
  color: rgba(81, 101, 121, 1);
}

.search-result-breadcrumbs li a:hover {
  color: rgba(0, 102, 93, 1);
}

.search-result-breadcrumbs li + li::before {
  content: "›";
}

.amp-result .search-result-description {
  margin-top: 10px;
  color: var(--amp-text-2);
  font-size: 15px;
  line-height: 1.6;
}

.search-result-description em {
  padding: 0 2px;
  background-color: var(--amp-teal-100);
  border-radius: 3px;
  color: rgba(39, 55, 71, 1);
  font-style: normal;
  font-weight: 700;
}

/* No results */
.search-results .no-results.amp-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 720px;
  margin: 24px auto 40px;
  padding: 48px 40px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: var(--amp-radius-xl);
  text-align: center;
}

.search-results .amp-no-results .headline {
  margin: 0;
  color: rgba(39, 55, 71, 1);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: normal;
}

.search-results .amp-no-results .action-prompt {
  max-width: 46ch;
  margin: 0;
  color: var(--amp-text-2);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: normal;
}

.amp-no-results-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

/***** Footer *****/
/* The footer sits after .page-shell (moved there by build.py), so it spans
   the full width below the rails on every page, in the header colour. */
.footer {
  margin-top: 0;
  background-color: rgba(29, 42, 54, 1);
  border-top: 0;
  color: var(--amp-on-dark);
}

.footer a,
.footer a:visited,
.footer-language-selector button {
  color: #fff;
}

/* On short pages, keep the footer at the bottom of the window rather than
   leaving a strip of page background under it. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-shell {
  flex: 1 0 auto;
}

/* Space between the page content and the footer. The home page and the plain
   pages already end with their own spacing. */
.page-main {
  padding-bottom: 56px;
}

.page-shell:has(.kb-home-marker, .amp-plain-page) .page-main {
  padding-bottom: 0;
}

/***** Sticky rails *****/
/* The base theme pins the rails to the viewport (position: fixed), which
   leaves the footer squeezed between them. Instead, lay the shell out as a
   grid and make the rails sticky: they stay in view while the article
   scrolls, and stop where the page content ends, so the footer is full
   width. Below 1024px the base theme's stacked layout is unchanged. */
@media (min-width: 1024px) {
  .page-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 220px;
    align-items: start;
  }
  .kb-rail,
  .search-rail,
  .toc-rail {
    position: sticky;
    grid-row: 1;
  }
  .kb-rail,
  .search-rail {
    grid-column: 1;
  }
  .page-main,
  [dir=rtl] .page-main {
    grid-row: 1;
    grid-column: 2;
    margin-left: 0;
    margin-right: 0;
  }
  .toc-rail {
    grid-column: 3;
  }
  /* No left rail (home, plain pages, rail turned off): the content takes
     the whole width, as before. */
  .page-shell:not(:has(.kb-rail, .search-rail)) .page-main,
  .page-shell:has(.kb-home-marker) .page-main,
  .page-shell:has(.amp-plain-page) .page-main {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1280px) {
  .page-shell {
    grid-template-columns: 320px minmax(0, 1fr) 260px;
  }
}

/***** Small screens *****/
@media (max-width: 767px) {
  .amp-hero {
    padding: 40px 16px 128px;
  }
  h1.amp-hero-title {
    font-size: 38px;
  }
  .amp-hero-lead {
    font-size: 17px;
  }
  .amp-search-hero input[type=submit] {
    padding: 0 18px;
  }
  .page-main .container.amp-home {
    gap: 40px;
    padding: 0 16px 60px;
  }
  .amp-card,
  .amp-admin,
  .amp-help-banner {
    padding: 22px;
  }
}

/***** Reduced motion *****/
@media (prefers-reduced-motion: reduce) {
  .amp-card,
  .amp-card:hover,
  .amp-card:focus-within,
  .amp-link-arrow .amp-icon,
  .amp-link-arrow:hover .amp-icon {
    transform: none;
    transition: none;
  }
}

/* =========================================================================
 * Amplify 2026 redesign, part 2: requests, approvals, community and account
 * pages, plus the error page.
 *
 * These pages are not knowledge base content, so they drop the knowledge
 * base rail (category > section > article) and use the full content width.
 * Each of their templates carries a .amp-plain-page marker for this.
 * The rail stays on category, section and article pages only; the search
 * page keeps its own filter rail.
 * ========================================================================= */

/***** No knowledge base rail on account, request and community pages *****/
.page-shell:has(.amp-plain-page) .kb-rail {
  display: none;
}

@media (min-width: 1024px) {
  .page-shell:has(.amp-plain-page) .page-main {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Pages that open with the full-width community band sit flush under the
   header. */
.page-shell:has(.amp-band) .page-main {
  padding-top: 0;
}

.page-main .container.amp-plain {
  padding-top: 12px;
  padding-bottom: 72px;
}

/***** Page header (title, lead, actions) *****/
.amp-plain-header,
.my-activities-header.amp-plain-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 24px;
  margin: 0 0 28px;
}

.amp-plain-header-text {
  flex: 1 1 360px;
  min-width: 0;
}

.amp-plain-header h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.amp-plain-lead {
  max-width: 62ch;
  margin: 8px 0 0;
  color: var(--amp-text-2);
  font-size: 16px;
  line-height: 1.55;
}

.amp-plain-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Main column + side column (new request, new post). */
.amp-plain-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
}

.amp-plain-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/***** Cards *****/
.amp-form-card,
.amp-side-card {
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: var(--amp-radius-lg);
}

.amp-form-card {
  padding: 32px;
}

.amp-side-card {
  padding: 24px;
}

.amp-side-card-compact {
  padding: 20px 24px;
}

.amp-side-card-accent {
  background-color: var(--amp-teal-25);
  border-color: var(--amp-teal-100);
}

.amp-side-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: var(--amp-radius);
  background-color: var(--amp-teal-50);
  color: var(--amp-link);
}

.amp-side-card-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
}

.amp-side-card-text {
  margin: 0 0 14px;
  color: rgba(81, 101, 121, 1);
  font-size: 14px;
  line-height: 1.55;
}

.amp-side-label {
  margin: 0 0 12px;
  color: rgba(81, 101, 121, 1);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.amp-tips {
  margin: 0;
  padding-left: 18px;
  color: var(--amp-text-2);
  font-size: 14px;
  line-height: 1.7;
  list-style: disc;
}

[dir=rtl] .amp-tips {
  padding-left: 0;
  padding-right: 18px;
}

.amp-empty {
  margin: 0;
  padding: 32px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px dashed var(--amp-border-strong);
  border-radius: var(--amp-radius-lg);
  color: rgba(81, 101, 121, 1);
  font-size: 15px;
  text-align: center;
}

/***** Small inline search (error page, new request side card) *****/
.amp-side-search,
.amp-error-search {
  position: relative;
  width: 100%;
}

.amp-side-search .search-icon,
.amp-error-search .search-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  z-index: 1;
  color: rgba(81, 101, 121, 1);
  transform: translateY(-50%);
  pointer-events: none;
}

[dir=rtl] .amp-side-search .search-icon,
[dir=rtl] .amp-error-search .search-icon {
  left: auto;
  right: 14px;
}

.search.amp-search-inline {
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 1px solid var(--amp-border-strong);
  border-radius: var(--amp-radius-sm);
}

.search.amp-search-inline:focus-within {
  border-color: rgba(60, 166, 153, 1);
  box-shadow: 0 0 0 3px rgba(60, 166, 153, 0.4);
}

.amp-search-inline input[type=search] {
  flex: 1;
  min-width: 0;
  height: 42px;
  border: 0;
  background: transparent;
  color: rgba(39, 55, 71, 1);
  font-size: 15px;
}

[dir=ltr] .amp-search-inline input[type=search] {
  padding-left: 40px;
}

[dir=rtl] .amp-search-inline input[type=search] {
  padding-right: 40px;
}

.amp-search-inline input[type=search]:focus {
  outline: none;
}

.amp-side-search .amp-search-inline input[type=search] {
  height: 38px;
  font-size: 14px;
}

/***** Tabs *****/
.amp-tabs {
  display: flex;
  gap: 28px;
  margin: 0 0 24px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(219, 231, 243, 1);
}

.amp-tab,
.amp-tab:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: -1px;
  padding: 12px 0 13px;
  border-bottom: 3px solid transparent;
  color: rgba(81, 101, 121, 1);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.amp-tab:hover {
  border-bottom-color: var(--amp-border-strong);
  color: rgba(0, 102, 93, 1);
  text-decoration: none;
}

.amp-tab[aria-current=page] {
  border-bottom-color: rgba(60, 166, 153, 1);
  color: rgba(0, 102, 93, 1);
}

/* The profile's filters keep Zendesk's collapsible nav (a menu on phones);
   from tablet up it looks like the tabs above. */
.amp-profile-nav .collapsible-nav-list li a,
.profile-nav .collapsible-nav-list li a {
  color: rgba(81, 101, 121, 1);
  font-weight: 600;
}

@media (min-width: 768px) {
  .profile-nav .collapsible-nav-list li {
    margin-right: 28px;
    border-bottom: 3px solid transparent;
  }
  [dir=rtl] .profile-nav .collapsible-nav-list li {
    margin-left: 28px;
    margin-right: 0;
  }
  .profile-nav .collapsible-nav-list li:hover {
    border-bottom: 3px solid var(--amp-border-strong);
  }
  .profile-nav .collapsible-nav-list li a,
  .profile-nav .collapsible-nav-list li:hover a:not([aria-current=page]) {
    padding: 12px 0 10px;
  }
  .profile-nav .collapsible-nav-list li.current {
    padding: 0;
    border-bottom: 3px solid rgba(60, 166, 153, 1);
  }
  .profile-nav .collapsible-nav-list li.current a {
    color: rgba(0, 102, 93, 1);
  }
}

/***** Contributions / Following switch *****/
.amp-switch {
  display: inline-flex;
  padding: 4px;
  background-color: var(--amp-sunken);
  border-radius: 10px;
}

.amp-switch a,
.amp-switch a:visited {
  padding: 8px 14px;
  border-radius: var(--amp-radius-sm);
  color: var(--amp-text-2);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.amp-switch a:hover {
  color: rgba(0, 102, 93, 1);
  text-decoration: none;
}

.amp-switch a[aria-current=page] {
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(29, 42, 54, 0.12);
  color: rgba(0, 102, 93, 1);
}

/***** Tables (contributions, following) *****/
.amp-table-card {
  overflow-x: auto;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: var(--amp-radius-lg);
}

table.amp-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
}

.amp-table thead {
  display: table-header-group;
}

.amp-table th {
  padding: 12px 16px;
  background-color: var(--amp-teal-25);
  border-bottom: 1px solid rgba(219, 231, 243, 1);
  color: var(--amp-text-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

[dir=rtl] .amp-table th {
  text-align: right;
}

.amp-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--amp-divider);
  color: rgba(39, 55, 71, 1);
  vertical-align: middle;
}

.amp-table-card .amp-table th,
.amp-table-card .amp-table td,
.amp-table-card .amp-table th:first-child,
.amp-table-card .amp-table td:first-child,
.amp-table-card .amp-table th:last-child,
.amp-table-card .amp-table td:last-child {
  padding-left: 16px;
  padding-right: 16px;
}

.amp-table tbody tr:last-child td {
  border-bottom: 0;
}

.amp-table tbody tr:hover td {
  background-color: rgba(248, 252, 255, 1);
}

.amp-table .striped-list-title,
.amp-table .striped-list-title:visited {
  display: inline;
  max-width: none;
  margin: 0;
  color: rgba(0, 102, 93, 1);
  font-weight: 600;
}

.amp-table .amp-table-num {
  width: 1%;
  color: rgba(81, 101, 121, 1);
  text-align: right;
  white-space: nowrap;
}

.amp-table .amp-table-meta {
  color: rgba(81, 101, 121, 1);
  font-size: 14px;
}

.amp-follow-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.amp-follow-title .user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.amp-table .subscriptions-subscribe {
  text-align: right;
}

/* The base theme hides the header row and stacks cells on phones; keep the
   simpler scrolling table instead. */
@media (max-width: 767px) {
  .amp-table th:first-child,
  .amp-table td:first-child {
    padding-left: 16px;
  }
}

/***** Pills *****/
.amp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.amp-pill-neutral {
  background-color: var(--amp-sunken);
  color: var(--amp-text-2);
}

/***** Status labels (requests and community posts) *****/
/* One pill shape for every status. Colours follow the Amplify status
   surfaces: neutral, info, positive, negative, warning. */
.status-label,
.status-label:hover,
.status-label:focus {
  display: inline-flex;
  align-items: center;
  height: 24px;
  margin: 0;
  padding: 0 10px;
  border-radius: 999px;
  background-color: var(--amp-sunken);
  color: var(--amp-text-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: none;
  vertical-align: middle;
  white-space: nowrap;
}

/* Requests */
.status-label-new,
.status-label-open,
.status-label-planned {
  background-color: #f0f6ff;
  color: #0067d6;
}

.status-label-pending,
.status-label-pending-moderation {
  background-color: #fff7ec;
  color: var(--amp-warning-text);
}

.status-label-hold,
.status-label-solved,
.status-label-closed,
.status-label-not-planned {
  background-color: var(--amp-sunken);
  color: var(--amp-text-2);
}

/* Community posts */
.status-label-completed,
.status-label-answered {
  background-color: #deffe3;
  color: #006f30;
}

.status-label-pinned,
.status-label-featured,
.status-label-official {
  background-color: var(--amp-teal-50);
  color: var(--amp-link);
}

/***** Dropdown buttons (filter and sort menus) *****/
.amp-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.amp-filter-bar .topic-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.amp-select {
  position: relative;
}

.amp-select .dropdown-toggle,
.profile-section-sorter .dropdown-toggle,
.comment-sorter .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 180px;
  height: 44px;
  padding: 0 14px;
  background-color: #fff;
  border: 1px solid var(--amp-border-strong);
  border-radius: var(--amp-radius-sm);
  color: rgba(39, 55, 71, 1);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}

.profile-section-sorter .dropdown-toggle,
.comment-sorter .dropdown-toggle {
  min-width: 0;
  height: 36px;
  font-size: 14px;
}

.amp-select .dropdown-toggle:hover,
.profile-section-sorter .dropdown-toggle:hover,
.comment-sorter .dropdown-toggle:hover {
  border-color: var(--amp-text-3);
}

.amp-select .dropdown-toggle[aria-expanded=true] {
  border-color: rgba(60, 166, 153, 1);
  box-shadow: 0 0 0 3px rgba(60, 166, 153, 0.4);
}

.amp-select .dropdown-toggle .dropdown-chevron-icon {
  color: var(--amp-text-2);
}

.dropdown-menu {
  padding: 6px;
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: 10px;
  box-shadow: var(--amp-shadow-pop);
}

.dropdown-menu [role=menuitem],
.dropdown-menu [role=menuitemradio],
.dropdown-menu a {
  border-radius: 6px;
}

.dropdown-menu [role=menuitemradio][aria-checked=true] {
  background-color: var(--amp-teal-25);
  color: rgba(0, 102, 93, 1);
  font-weight: 600;
}

/***** Community band (community home) *****/
.amp-band {
  position: relative;
  overflow: hidden;
  margin-bottom: 40px;
  background-color: rgba(29, 42, 54, 1);
}

.amp-band-cube {
  position: absolute;
  right: -60px;
  top: -70px;
  color: rgba(60, 166, 153, 1);
  opacity: 0.12;
  pointer-events: none;
}

[dir=rtl] .amp-band-cube {
  right: auto;
  left: -60px;
}

.amp-band-inner {
  position: relative;
  box-sizing: border-box;
  max-width: 1040px;
  margin: 0 auto;
  padding: 44px 32px 52px;
}

.amp-band-crumbs .breadcrumbs li,
.amp-band-crumbs .breadcrumbs li::after {
  color: var(--amp-on-dark);
}

.amp-band-crumbs .breadcrumbs li a,
.amp-band-crumbs .breadcrumbs li a:visited {
  color: var(--amp-teal-300);
}

h1.amp-band-title {
  margin: 0;
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
}

.amp-band-lead {
  max-width: 56ch;
  margin: 10px 0 24px;
  color: var(--amp-on-dark);
  font-size: 17px;
  line-height: 1.5;
}

.amp-band-search {
  max-width: 620px;
  margin-top: 0;
}

/***** Community section heads and topic cards *****/
.amp-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
}

.amp-section-head .amp-section-title {
  margin: 0;
}

.amp-section-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.amp-topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.amp-topic-card,
.amp-topic-card:visited {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  box-sizing: border-box;
  padding: 24px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: var(--amp-radius-lg);
  color: rgba(39, 55, 71, 1);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.amp-topic-card:hover {
  border-color: var(--amp-teal-300);
  box-shadow: var(--amp-shadow-hover);
  color: rgba(39, 55, 71, 1);
  text-decoration: none;
  transform: translateY(-2px);
}

.amp-icon-tile-sm {
  width: 44px;
  height: 44px;
  border-radius: var(--amp-radius);
}

.amp-topic-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.amp-topic-card:hover .amp-topic-name {
  color: rgba(0, 102, 93, 1);
}

.amp-topic-desc {
  flex: 1;
  color: var(--amp-text-2);
  font-size: 15px;
  line-height: 1.55;
}

.amp-topic-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--amp-divider);
}

.amp-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(81, 101, 121, 1);
  font-size: 14px;
  white-space: nowrap;
}

/***** Topic page header *****/
.amp-topic-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
  margin: 0 0 24px;
  padding: 28px 32px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: var(--amp-radius-lg);
}

.amp-topic-header .amp-icon-tile {
  width: 56px;
  height: 56px;
}

.amp-topic-header-text {
  flex: 1 1 320px;
  min-width: 0;
}

.amp-topic-header h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
}

.amp-topic-header .page-header-description {
  margin: 8px 0 12px;
  color: var(--amp-text-2);
  font-size: 16px;
  font-style: normal;
  line-height: 1.55;
}

.amp-topic-header .amp-topic-stats {
  padding-top: 0;
  border-top: 0;
}

.amp-topic-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/***** Post rows (topic page and all posts) *****/
.amp-post-list {
  overflow: hidden;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: var(--amp-radius-lg);
}

.amp-post-list .amp-empty {
  border: 0;
  border-radius: 0;
}

.amp-post-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.amp-post-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--amp-divider);
}

.amp-post-rows > li:last-child .amp-post-row {
  border-bottom: 0;
}

.amp-post-row:hover {
  background-color: rgba(248, 252, 255, 1);
}

.amp-post-row.post-featured {
  box-shadow: inset 3px 0 0 rgba(60, 166, 153, 1);
}

.amp-post-votes {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background-color: var(--amp-teal-25);
  border: 1px solid var(--amp-teal-100);
  border-radius: var(--amp-radius);
  color: var(--amp-link);
}

.amp-post-votes-number {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.amp-post-votes-label {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.amp-post-info {
  flex: 1;
  min-width: 0;
}

.amp-post-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.amp-post-title,
.amp-post-title:visited {
  color: rgba(39, 55, 71, 1);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.amp-post-title:hover {
  color: rgba(0, 102, 93, 1);
}

.amp-post-meta {
  display: block;
  margin-top: 6px;
  color: rgba(81, 101, 121, 1);
  font-size: 14px;
}

.amp-post-comments {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  color: rgba(81, 101, 121, 1);
  font-size: 14px;
}

/***** Featured posts and recent activity *****/
.amp-featured-posts {
  margin: 32px 0 0;
}

.amp-link-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.amp-link-rows li + li {
  border-top: 1px solid var(--amp-divider);
}

.amp-link-rows a,
.amp-link-rows a:visited {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  color: rgba(39, 55, 71, 1);
  font-weight: 600;
  text-decoration: none;
}

.amp-link-rows a:hover {
  background-color: rgba(248, 252, 255, 1);
  color: rgba(0, 102, 93, 1);
}

.amp-link-rows a span {
  flex: 1;
}

.amp-link-rows-icon {
  color: rgba(60, 166, 153, 1);
}

.amp-link-rows-chevron {
  color: var(--amp-text-3);
}

.amp-activity {
  margin: 40px 0 0;
}

.amp-activity {
  border-top: 0;
}

.amp-activity .recent-activity-header {
  margin: 0 0 16px;
  text-align: left;
  font-size: 22px;
  font-weight: 700;
}

.amp-activity .recent-activity-list {
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: var(--amp-radius-lg);
}

.amp-activity .recent-activity-item {
  padding: 16px 24px;
  border-bottom: 1px solid var(--amp-divider);
}

.amp-activity .recent-activity-item:last-child {
  border-bottom: 0;
}

.amp-activity .recent-activity-item-parent {
  margin: 0 0 4px;
  color: rgba(81, 101, 121, 1);
  font-size: 13px;
  font-weight: 600;
}

.amp-activity .recent-activity-item-link,
.amp-activity .recent-activity-item-link:visited {
  color: rgba(39, 55, 71, 1);
  font-size: 16px;
  font-weight: 700;
}

.amp-activity .recent-activity-item-link:hover {
  color: rgba(0, 102, 93, 1);
}

.amp-activity .recent-activity-item-meta {
  color: rgba(81, 101, 121, 1);
  font-size: 14px;
}

.amp-activity .recent-activity-controls {
  padding-top: 16px;
}

.amp-activity .recent-activity-controls a {
  color: rgba(0, 102, 93, 1);
  font-weight: 700;
}

.amp-community .amp-help-banner-compact {
  margin-top: 40px;
}

/***** Forms (new post, request comments, post comments) *****/
.amp-form-card .form-field {
  margin: 0 0 22px;
}

.amp-form-card .form-field > label,
.amp-form-card .form-field label {
  display: block;
  margin-bottom: 8px;
  color: rgba(39, 55, 71, 1);
  font-size: 14px;
  font-weight: 700;
}

.amp-form-card .form-field .optional {
  margin-left: 6px;
  color: rgba(81, 101, 121, 1);
  font-weight: 400;
}

.amp-form-card .form-field input[type=text],
.amp-form-card .form-field input[type=email],
.amp-form-card .form-field select,
.amp-form-card .form-field textarea,
.amp-form-card .form-field .nesty-input,
.amp-form-card .form-field .hc-multiselect-toggle {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  background-color: #fff;
  border: 1px solid var(--amp-border-strong);
  border-radius: var(--amp-radius-sm);
  color: rgba(39, 55, 71, 1);
  font-family: inherit;
  font-size: 15px;
}

.amp-form-card .form-field textarea {
  padding: 12px 14px;
}

.amp-form-card .form-field input:focus,
.amp-form-card .form-field select:focus,
.amp-form-card .form-field textarea:focus,
.amp-form-card .form-field .nesty-input:focus {
  border-color: rgba(60, 166, 153, 1);
  box-shadow: 0 0 0 3px rgba(60, 166, 153, 0.4);
  outline: none;
}

.amp-form-card .content-tags-add-hint {
  display: block;
  margin: -2px 0 8px;
  color: rgba(81, 101, 121, 1);
  font-size: 13px;
}

.amp-form-card .suggestion-list {
  margin: -8px 0 22px;
  padding: 14px 16px;
  background-color: rgba(248, 252, 255, 1);
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: 10px;
}

.amp-form-card .suggestion-list:empty {
  display: none;
}

.amp-form-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
}

.hbs-form input[type=submit],
.comment-form-controls input[type=submit] {
  min-height: 44px;
  padding: 0 24px;
  border-radius: var(--amp-radius-sm);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

/* Rich text editor (Zendesk's wysiwyg) */
.amp-plain .ck.ck-editor__top .ck-toolbar,
.amp-article .ck.ck-editor__top .ck-toolbar {
  background-color: rgba(248, 252, 255, 1);
  border-color: var(--amp-border-strong);
  border-radius: var(--amp-radius-sm) var(--amp-radius-sm) 0 0 !important;
}

.amp-plain .ck.ck-editor__main > .ck-editor__editable,
.amp-article .ck.ck-editor__main > .ck-editor__editable {
  border-color: var(--amp-border-strong);
  border-radius: 0 0 var(--amp-radius-sm) var(--amp-radius-sm) !important;
}

.amp-plain .ck.ck-editor__main > .ck-editor__editable.ck-focused,
.amp-article .ck.ck-editor__main > .ck-editor__editable.ck-focused {
  border-color: rgba(60, 166, 153, 1);
  box-shadow: 0 0 0 3px rgba(60, 166, 153, 0.4);
}

/***** Comments (request, community post and article pages) *****/
.amp-request-page .comment-list,
.amp-post-page .comment-list {
  margin: 0;
  padding: 0;
}

.amp-request-page .comment,
.amp-post-page .comment {
  margin: 0 0 16px;
  padding: 24px 28px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: var(--amp-radius-lg);
}

.amp-request-page .comment-wrapper,
.amp-post-page .comment-wrapper {
  border: 0;
  padding: 0;
}

.amp-post-page .comment-wrapper.comment-official {
  padding: 0;
  border: 0;
}

.amp-post-page .comment:has(.comment-official) {
  border-color: var(--amp-teal-300);
  box-shadow: inset 3px 0 0 rgba(60, 166, 153, 1);
}

.amp-request-page .comment-author,
.amp-post-page .comment-author {
  margin-bottom: 14px;
}

.amp-request-page .comment-avatar .user-avatar,
.amp-post-page .comment-avatar .user-avatar,
.comment-form .comment-avatar .user-avatar {
  width: 40px;
  height: 40px;
}

.amp-request-page .comment-meta a,
.amp-post-page .comment-meta a {
  color: rgba(39, 55, 71, 1);
  font-weight: 700;
}

.amp-request-page .comment-body,
.amp-post-page .comment-body {
  color: rgba(39, 55, 71, 1);
  font-size: 16px;
  line-height: 1.65;
}

.amp-request-page .attachments,
.amp-post-page .attachments {
  margin-top: 14px;
}

.attachment-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.attachment-item .attachment-icon {
  position: static;
  color: rgba(81, 101, 121, 1);
}

.amp-request-page .comment-form,
.amp-post-page .comment-form {
  padding: 24px 28px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: var(--amp-radius-lg);
}

.amp-request-page .comment-show-container {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  background-color: #fff;
  border: 1px solid var(--amp-border-strong);
  border-radius: var(--amp-radius-sm);
  color: rgba(81, 101, 121, 1);
  font-family: inherit;
  font-size: 15px;
  text-align: left;
  cursor: text;
}

[dir=rtl] .amp-request-page .comment-show-container {
  text-align: right;
}

.amp-request-page .comment-show-container:hover {
  border-color: var(--amp-text-3);
}

.comment-form-controls {
  gap: 12px;
}

.mark-as-solved {
  min-height: 44px;
  padding: 0 20px;
  background-color: #fff;
  border: 1px solid var(--amp-border-strong);
  border-radius: var(--amp-radius-sm);
  color: rgba(39, 55, 71, 1);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
}

.mark-as-solved:hover {
  background-color: var(--amp-text-2);
  border-color: var(--amp-text-2);
  color: #fff;
}

/***** Request page *****/
.amp-request-page .request-title {
  max-width: 34ch;
  margin: 0 0 24px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
}

.amp-request-page .request-breadcrumbs {
  margin-bottom: 20px;
}

.amp-request-page .request-container {
  gap: 28px;
}

.amp-request-page .request-main {
  flex: 1 1 0;
  min-width: 0;
}

/* "This request is closed for comments. You can create a follow-up." */
.amp-request-page .request-follow-up:not(:empty) {
  margin: 0 0 16px;
  padding: 18px 24px;
  background-color: var(--amp-sunken);
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: var(--amp-radius-lg);
  color: var(--amp-text-2);
  font-size: 15px;
}

.amp-request-page .request-follow-up a {
  font-weight: 700;
}

.amp-request-page .request-sidebar.amp-side-card {
  padding: 4px 24px 8px;
}

@media (min-width: 1024px) {
  .amp-request-page .request-sidebar.amp-side-card {
    flex: 0 0 300px;
    width: 300px;
    padding: 20px 24px 8px;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(219, 231, 243, 1);
    font-size: 14px;
  }
  .amp-request-page .request-sidebar h2 {
    display: block;
    margin: 0 0 4px;
    color: rgba(81, 101, 121, 1);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

.amp-request-page .request-details {
  border-color: var(--amp-divider);
}

.amp-request-page .request-details dt,
.amp-request-page .request-details dd {
  margin-top: 14px;
  font-size: 14px;
}

.amp-request-page .request-details dd {
  color: rgba(39, 55, 71, 1);
  font-weight: 600;
}

/***** Community post page *****/
.amp-post-page .post-container {
  gap: 28px;
}

.amp-post-page .post {
  min-width: 0;
}

@media (min-width: 1024px) {
  .amp-post-page .post {
    flex: 1 1 0;
    max-width: none;
  }
}

.amp-post-page article#main-content {
  margin-bottom: 16px;
  padding: 32px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: var(--amp-radius-lg);
}

.amp-post-page .post-header {
  gap: 16px;
  margin-bottom: 16px;
}

.amp-post-page .post-title h1 {
  margin: 0 8px 0 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
}

.amp-post-page .post-title .status-label {
  vertical-align: middle;
}

.amp-post-page .post-author {
  margin-bottom: 18px;
}

.amp-post-page .post-avatar .user-avatar {
  width: 40px;
  height: 40px;
}

.amp-post-page .post-meta a {
  color: rgba(39, 55, 71, 1);
  font-weight: 700;
}

.amp-post-page .post-body {
  color: rgba(39, 55, 71, 1);
  font-size: 16px;
  line-height: 1.7;
}

.amp-post-page .post-footer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--amp-divider);
}

.amp-post-page .comment-overview {
  margin: 28px 0 16px;
  padding: 0;
  border: 0;
}

.amp-post-page .comment-heading {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

.amp-post-page .comment-callout {
  color: rgba(81, 101, 121, 1);
}

.amp-post-page .post-sidebar.amp-side-card {
  box-sizing: border-box;
  padding: 24px;
  border-top: 1px solid var(--amp-teal-100);
}

@media (min-width: 1024px) {
  .amp-post-page .post-sidebar.amp-side-card {
    align-self: flex-start;
    flex: 0 0 300px;
    margin: 0;
    padding: 24px;
  }
}

.amp-post-page .post-sidebar-title {
  margin: 0 0 14px;
  color: var(--amp-link);
  font-size: 17px;
  font-weight: 700;
}

/* Votes: a pill with up and down either side of the count. */
.amp-post-page .vote {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background-color: var(--amp-teal-25);
  border: 1px solid var(--amp-teal-100);
  border-radius: var(--amp-radius);
}

.amp-post-page .comment-vote.vote {
  background-color: transparent;
  border-color: transparent;
}

.vote-up,
.vote-down {
  border-radius: var(--amp-radius-sm);
  color: var(--amp-text-2);
}

.vote-up:hover,
.vote-down:hover {
  background-color: var(--amp-teal-50);
  color: var(--amp-link);
}

.vote-voted,
.vote-voted:hover {
  color: var(--amp-link);
}

.vote-sum {
  color: rgba(39, 55, 71, 1);
  font-weight: 700;
}

.amp-post-page .actions button,
.amp-request-page .actions button {
  color: rgba(81, 101, 121, 1);
}

/***** User profile *****/
.profile-header.amp-profile {
  padding: 12px 0 0;
  background-color: transparent;
}

.profile-header.amp-profile .container {
  display: block;
}

.amp-profile-card {
  overflow: hidden;
  margin-bottom: 28px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: var(--amp-radius-lg);
}

.amp-profile .profile-info {
  align-items: center;
  gap: 16px 24px;
  padding: 28px 32px 0;
}

.amp-profile .profile-avatar {
  margin: 0;
}

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

.amp-profile .basic-info .name {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

.amp-profile .basic-info .name a {
  color: rgba(39, 55, 71, 1);
}

.amp-profile .community-badge-title {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background-color: var(--amp-teal-50);
  color: var(--amp-link);
  font-size: 12px;
  font-weight: 700;
}

.amp-profile .options {
  flex-basis: auto;
  gap: 12px;
  margin: 0 0 0 auto;
}

[dir=rtl] .amp-profile .options {
  margin: 0 auto 0 0;
}

.amp-profile .description {
  flex-basis: 100%;
  margin: 0;
  color: var(--amp-text-2);
  font-size: 15px;
  line-height: 1.6;
}

/* Activity (total, last, member since) and counters (following, followers,
   votes, subscriptions) form one stats band across the bottom of the card. */
.amp-profile .profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  flex: 0 0 calc(100% + 64px);
  margin: 24px -32px 0;
  padding: 0;
  border-top: 1px solid var(--amp-divider);
  border-bottom: 0;
  font-size: 14px;
}

.amp-profile .profile-stats-counters {
  margin: 0;
  background-color: rgba(248, 252, 255, 1);
}

.amp-profile .profile-stats .stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 16px 32px;
  border-right: 1px solid var(--amp-divider);
}

[dir=rtl] .amp-profile .profile-stats .stat {
  border-right: 0;
  border-left: 1px solid var(--amp-divider);
}

.amp-profile .profile-stats .stat:last-child {
  border-right: 0;
  border-left: 0;
}

.amp-profile .profile-stats .stat-label {
  flex: none;
  margin: 0;
  color: rgba(81, 101, 121, 1);
}

.amp-profile .profile-stats-activity .stat-value {
  color: rgba(39, 55, 71, 1);
  font-size: 22px;
  font-weight: 700;
}

.amp-profile .profile-stats-counters .stat-value {
  color: rgba(39, 55, 71, 1);
  font-size: 16px;
  font-weight: 700;
}

.profile-nav {
  margin-bottom: 24px;
  background-color: transparent;
}

.profile-nav .collapsible-nav {
  border-bottom: 1px solid rgba(219, 231, 243, 1);
}

.profile-section {
  width: 100%;
}

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

.profile-section-header {
  align-items: center;
  margin-bottom: 16px;
}

.profile-section-title {
  font-size: 22px;
  font-weight: 700;
}

.profile-activity-list,
.profile-contribution-list {
  margin: 0;
  padding: 0;
}

.profile-activity,
.profile-contribution-list > .profile-contribution {
  position: relative;
  margin: 0 0 14px;
  padding: 22px 32px 22px 84px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: var(--amp-radius-lg);
}

.profile-activity:not(:last-child),
[dir=rtl] .profile-activity:not(:last-child) {
  border: 1px solid rgba(219, 231, 243, 1);
}

.profile-contribution-list > .profile-contribution:last-child {
  border-bottom: 1px solid rgba(219, 231, 243, 1);
}

[dir=rtl] .profile-activity,
[dir=rtl] .profile-contribution-list > .profile-contribution {
  padding: 22px 84px 22px 32px;
}

.profile-activity-icon,
.profile-contribution-icon {
  /* 32px in, the same inner edge as the profile header and stats above. */
  position: absolute;
  top: 22px;
  left: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background-color: var(--amp-teal-50);
  color: var(--amp-link);
  line-height: 1;
}

[dir=rtl] .profile-activity-icon,
[dir=rtl] .profile-contribution-icon {
  left: auto;
  right: 32px;
}

.profile-activity-icon svg,
.profile-contribution-icon svg {
  position: static;
  width: 15px;
  height: 15px;
  transform: none;
}

.profile-activity-header .user-avatar {
  display: none;
}

.profile-activity-description {
  color: rgba(81, 101, 121, 1);
  font-size: 14px;
}

.profile-activity-contribution {
  margin: 6px 0 0;
  padding: 0;
  background-color: transparent;
}

@media (min-width: 768px) {
  .profile-activity {
    padding-left: 84px;
  }
  .profile-activity-icon {
    left: 32px;
  }
  .profile-activity-contribution {
    margin-left: 0;
  }
  .profile-contribution-list > .profile-contribution {
    padding-left: 84px;
  }
}

.profile-contribution-title {
  font-size: 17px;
  font-weight: 700;
}

.profile-contribution-title a {
  color: rgba(0, 102, 93, 1);
}

.profile-contribution-breadcrumbs li {
  color: rgba(81, 101, 121, 1);
  font-size: 13px;
}

.profile-contribution-body {
  margin: 8px 0;
  color: var(--amp-text-2);
  line-height: 1.6;
}

.profile-contribution-list .profile-contribution-header {
  margin-left: 0;
}

.profile-section .no-activity,
.profile-section .private-activity {
  margin-top: 0;
  padding: 32px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px dashed var(--amp-border-strong);
  border-radius: var(--amp-radius-lg);
  color: rgba(81, 101, 121, 1);
  text-align: center;
}

/***** Error page *****/
.page-main .error-page.amp-error {
  max-width: 720px;
  padding-top: 48px;
  padding-bottom: 72px;
  text-align: center;
}

.amp-error-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 52px 44px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: var(--amp-radius-xl);
}

.amp-error-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: var(--amp-radius-xl);
  background-color: #fff7ec;
  color: var(--amp-warning-text);
}

.amp-error-code {
  margin: 0;
  color: rgba(81, 101, 121, 1);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h1.amp-error-title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
}

.amp-error-text {
  max-width: 46ch;
  margin: 0;
  color: var(--amp-text-2);
  font-size: 16px;
  line-height: 1.6;
}

.amp-error-search {
  max-width: 460px;
  margin-top: 8px;
  text-align: left;
}

.amp-error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

/* new_request renders nothing when requests are off. */
.amp-error-actions a:empty {
  display: none;
}

.amp-error-tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 18px 20px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: var(--amp-radius-lg);
  text-align: left;
}

.amp-error-tip p {
  margin: 0;
  color: var(--amp-text-2);
  font-size: 14px;
  line-height: 1.55;
}

.amp-error-tip-icon {
  margin-top: 2px;
  color: var(--amp-text-2);
}

/***** Zendesk modules: request list, new request form, approvals *****/
/*
 * These are React apps built from Zendesk Garden components, so they can only
 * be restyled, not re-laid-out. Garden marks each component with a stable
 * data-garden-id attribute, which is what these rules hook into. Their primary
 * colour comes from brand_color, which the templates pass in as Primary 700.
 */
.amp-module {
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

/* Tabs (My requests / CC'd / Organizational) */
/* Zendesk renders the tablist as a block of inline-block tabs, so it needs
   flex for the gap to apply. */
.amp-module [data-garden-id="tabs.tablist"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(219, 231, 243, 1);
}

.amp-module [data-garden-id="tabs.tab"] {
  margin: 0 0 -1px;
  padding: 12px 0 10px;
  border-bottom: 3px solid transparent;
  color: rgba(81, 101, 121, 1);
  font-size: 15px;
  font-weight: 600;
}

.amp-module [data-garden-id="tabs.tab"]:hover {
  border-bottom-color: var(--amp-border-strong);
  color: rgba(0, 102, 93, 1);
}

.amp-module [data-garden-id="tabs.tab"][aria-selected=true] {
  border-bottom-color: rgba(60, 166, 153, 1);
  color: rgba(0, 102, 93, 1);
}

/* Tables */
.amp-module [data-garden-id="tables.table"] {
  overflow: hidden;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(219, 231, 243, 1);
  border-radius: var(--amp-radius-lg);
  border-collapse: separate;
  border-spacing: 0;
}

.amp-module [data-garden-id="tables.header_row"] {
  background-color: var(--amp-teal-25);
  border-bottom: 1px solid rgba(219, 231, 243, 1);
}

.amp-module [data-garden-id="tables.header_cell"] {
  color: var(--amp-text-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.amp-module [data-garden-id="tables.header_cell"],
.amp-module [data-garden-id="tables.cell"] {
  padding-left: 16px;
  padding-right: 16px;
}

.amp-module [data-garden-id="tables.row"] {
  border-bottom-color: var(--amp-divider);
}

.amp-module [data-garden-id="tables.row"]:hover {
  background-color: rgba(248, 252, 255, 1);
}

.amp-module [data-garden-id="tables.cell"] {
  color: rgba(39, 55, 71, 1);
  font-size: 15px;
}

.amp-module [data-garden-id="tables.cell"] a {
  color: rgba(0, 102, 93, 1);
  font-weight: 600;
}

/* Status tags */
.amp-module [data-garden-id="tags.tag_view"] {
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

/* Inputs, selects and comboboxes */
.amp-module [data-garden-id="forms.input"],
.amp-module [data-garden-id="forms.faux_input"],
.amp-module [data-garden-id="forms.media_input"],
.amp-module [data-garden-id="forms.textarea"],
.amp-module [data-garden-id="dropdowns.combobox"] > div {
  border-color: var(--amp-border-strong);
  border-radius: var(--amp-radius-sm);
  color: rgba(39, 55, 71, 1);
  font-size: 15px;
}

.amp-module [data-garden-id="forms.input"],
.amp-module [data-garden-id="forms.faux_input"],
.amp-module [data-garden-id="dropdowns.combobox"] > div {
  min-height: 44px;
}

.amp-module [data-garden-id="forms.input_label"] {
  color: rgba(39, 55, 71, 1);
  font-size: 14px;
  font-weight: 700;
}

.amp-module [data-garden-id="forms.input_hint"] {
  color: rgba(81, 101, 121, 1);
  font-size: 13px;
}

.amp-module [data-garden-id="forms.field"] {
  margin-bottom: 22px;
}

/* The request list's search box shares a bottom-aligned row with the Filter
   button, so a bottom margin would push the button below the box. */
.amp-module-requests [data-garden-id="forms.field"] {
  margin-bottom: 0;
}

.amp-module [data-garden-id="forms.file_upload"] {
  border: 1.5px dashed var(--amp-border-strong);
  border-radius: var(--amp-radius-sm);
  background-color: rgba(248, 252, 255, 1);
  color: rgba(81, 101, 121, 1);
}

.amp-module [data-garden-id="dropdowns.menu"] {
  border-color: rgba(219, 231, 243, 1);
  border-radius: 10px;
  box-shadow: var(--amp-shadow-pop);
}

/* Buttons */
.amp-module [data-garden-id="buttons.button"] {
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--amp-radius-sm);
  font-size: 15px;
  font-weight: 700;
}

/* Pagination */
.amp-module [data-garden-id="pagination.page"] {
  border-radius: var(--amp-radius-sm);
}

/* Approval request: the module's two content panels become cards. */
.amp-module-approval [data-garden-id="grid.col"] > div,
.amp-module-approvals [data-garden-id="notifications.notification"] {
  border-radius: var(--amp-radius-lg);
}

/* New request form inside its card: the module adds its own top margin. */
.amp-module-form #new-request-form > :first-child {
  margin-top: 0;
}

/***** Small screens *****/
@media (max-width: 1023px) {
  .amp-plain-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .amp-plain-header h1 {
    font-size: 26px;
  }
  .amp-form-card {
    padding: 22px 18px;
  }
  .amp-topic-grid {
    grid-template-columns: 1fr;
  }
  .amp-band-inner {
    padding: 32px 20px 40px;
  }
  h1.amp-band-title {
    font-size: 28px;
  }
  .amp-topic-header {
    padding: 22px 20px;
  }
  .amp-topic-header h1 {
    font-size: 24px;
  }
  .amp-post-row {
    gap: 12px;
    padding: 16px;
  }
  .amp-post-votes {
    width: 48px;
    height: 48px;
  }
  .amp-post-page article#main-content,
  .amp-request-page .comment,
  .amp-post-page .comment,
  .amp-request-page .comment-form,
  .amp-post-page .comment-form {
    padding: 20px 18px;
  }
  .amp-profile .profile-info {
    padding: 22px 20px 0;
  }
  .amp-profile .profile-stats {
    flex-basis: calc(100% + 40px);
    margin: 20px -20px 0;
  }
  .amp-profile .profile-stats-counters {
    margin: 0;
  }
  .amp-profile .profile-info {
    flex-wrap: wrap;
  }
  .amp-profile .profile-avatar .user-avatar {
    width: 64px;
    height: 64px;
  }
  .amp-profile .basic-info {
    flex: 1 1 calc(100% - 96px);
  }
  .amp-profile .basic-info .name {
    font-size: 24px;
  }
  .amp-profile .options {
    flex-basis: 100%;
  }
  .profile-activity-header {
    margin-left: 0;
  }
  [dir=rtl] .profile-activity-header {
    margin-right: 0;
  }
  .amp-profile .profile-stats .stat {
    padding: 14px 20px;
  }
  .amp-profile .options {
    margin: 0;
  }
  .amp-error-card {
    padding: 36px 22px;
  }
  .profile-activity,
  .profile-contribution-list > .profile-contribution {
    padding: 18px 20px 18px 70px;
  }
  .profile-activity-icon,
  .profile-contribution-icon {
    left: 20px;
    top: 18px;
  }
}

/***** Follow buttons (topics, posts, profiles, following list) *****/
/* Zendesk's subscribe helper renders a button with the follower count in
   ::after. It becomes a secondary button; Following state is Primary 700. */
.community-follow button,
.subscriptions-subscribe button {
  min-height: 44px;
  padding: 0 18px;
  background-color: #fff;
  border: 1px solid var(--amp-border-strong);
  border-radius: var(--amp-radius-sm);
  color: rgba(39, 55, 71, 1);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 42px;
}

.community-follow button[data-follower-count] {
  padding-right: 64px;
}

[dir=rtl] .community-follow button[data-follower-count] {
  padding-left: 64px;
  padding-right: 18px;
}

.community-follow button::after {
  border-left-color: var(--amp-border-strong);
  color: rgba(81, 101, 121, 1);
  font-family: inherit;
}

.community-follow button:hover,
.subscriptions-subscribe button:hover {
  background-color: var(--amp-text-2);
  border-color: var(--amp-text-2);
  color: #fff;
}

.community-follow button[data-selected=true] {
  background-color: var(--amp-link);
  border-color: var(--amp-link);
  color: #fff;
}

.community-follow button[data-selected=true]:hover {
  background-color: var(--amp-link-hover);
  border-color: var(--amp-link-hover);
}

.community-follow button:hover::after,
.community-follow button[data-selected=true]::after {
  border-left-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.subscriptions-subscribe button {
  min-height: 36px;
  line-height: 34px;
  font-size: 14px;
}

/***** Fixes shared with the knowledge base pages *****/
/* Long trails wrap instead of pushing the page sideways on phones. */
.breadcrumbs {
  flex-wrap: wrap;
  row-gap: 4px;
}

.breadcrumbs li {
  max-width: 100%;
}

/* Library icons carry .amp-icon (display:inline-block), which would show
   both the chevron and the close icon in collapsible toggles. */
.amp-icon.collapsible-nav-toggle-icon,
.amp-icon.collapsible-sidebar-toggle-icon {
  display: none;
}

.collapsible-nav-toggle[aria-expanded=false] .amp-icon.chevron-icon,
.collapsible-nav-toggle[aria-expanded=true] .amp-icon.x-icon,
.collapsible-sidebar-toggle[aria-expanded=false] .amp-icon.chevron-icon,
.collapsible-sidebar-toggle[aria-expanded=true] .amp-icon.x-icon {
  display: inline-block;
}

/* The base theme's phone rule hides every item without aria-selected, which
   also hides the current filter (it is marked with .current instead). */
.collapsible-nav-list li.current {
  display: block;
}

/* Wide request tables scroll inside the page on phones. */
.amp-module-requests {
  overflow-x: auto;
}

/* "Official comment" sits above the author as a pill, rather than as a tab
   pinned to the top edge (which overlapped the author on phones). */
.amp-post-page .comment-info > .status-label-official,
.profile-section .status-label-official {
  position: static;
  width: auto;
  margin: 0 0 12px;
  border-radius: 999px;
}