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

body {
  margin: 0;
}

main {
  display: block;
}

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

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

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

a {
  background-color: transparent;
}

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

b,
strong {
  font-weight: bolder;
}

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

small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

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

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

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

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

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

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

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

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

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

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

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

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

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

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

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

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

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

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

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

h4 {
  font-size: 16px;
}

a {
  color: #4A3A8A;
  text-decoration: none;
}
a:visited {
  color: #9358B0;
}
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 #0F3D2E;
}
.hbs-form input[disabled], .search input[disabled] {
  background-color: #ddd;
}
.hbs-form select, .search select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") no-repeat #fff;
  background-position: right 10px center;
  border: 1px solid #848F99;
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: #555;
  width: 100%;
}
.hbs-form select:focus, .search select:focus {
  border: 1px solid #0F3D2E;
}
.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 #0F3D2E;
}

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

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

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

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

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

/***** Buttons *****/
.button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
  background-color: transparent;
  border: 1px solid #0F3D2E;
  border-radius: 4px;
  color: #0F3D2E;
  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: #0F3D2E;
}
.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: #0F3D2E;
  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: #000;
  border-color: #000;
}
.button[data-disabled], [data-disabled].pagination-next-link, [data-disabled].pagination-prev-link, [data-disabled].pagination-first-link, [data-disabled].pagination-last-link, .subscriptions-subscribe button[data-disabled], .requests-table-toolbar .organization-subscribe button[data-disabled], .community-follow button[data-disabled], .article-subscribe button[data-disabled], .section-subscribe button[data-disabled], .split-button button[data-disabled] {
  cursor: default;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.logo a {
  display: inline-block;
}

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

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

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

@media (max-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: inline-block;
  }
}
.nav-wrapper-desktop a {
  border: 0;
  color: #4A3A8A;
  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: #4A3A8A;
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .nav-wrapper-mobile {
    display: none;
  }
}
.nav-wrapper-mobile .menu-button-mobile {
  background: none;
  border: 0;
  width: auto;
  min-width: 71px;
  cursor: pointer;
}
.nav-wrapper-mobile .menu-button-mobile .icon-menu {
  padding: 7px;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
  background: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile {
  position: absolute;
  background-color: #fff;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 2;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
  display: block;
}
.nav-wrapper-mobile .menu-list-mobile-items .item {
  margin: 4px 0;
}
.nav-wrapper-mobile .menu-list-mobile-items li:empty:not(.nav-divider) {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  border-bottom: 0.1px solid #ddd;
  padding: 0;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider:last-child {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items button {
  background: none;
  border: none;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: #0D1B17;
  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: #0D1B17;
}
.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;
}

/***** 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: #4A3A8A;
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: #4A3A8A;
  background-color: transparent;
}
.user-info > button::after {
  color: #4A3A8A;
  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: #0F3D2E;
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: #FFFFFF;
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 17px;
}

/***** Footer *****/
.footer {
  border-top: 1px solid #ddd;
  margin-top: 60px;
  padding: 30px 0;
}
.footer a {
  color: #2e6052;
}
.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: #2e6052;
  display: inline-block;
}

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

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

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

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

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

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

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

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

/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
}
@media (min-width: 768px) {
  .blocks-list {
    margin: 0 -15px;
  }
}
.blocks-item {
  border: 1px solid #0F3D2E;
  border-radius: 4px;
  box-sizing: border-box;
  color: #0F3D2E;
  display: flex;
  flex: 1 0 340px;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
}
@media (min-width: 768px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  background-color: #0F3D2E;
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: #FFFFFF;
  text-decoration: none;
}
.blocks-item-internal {
  background-color: transparent;
  border: 1px solid #ddd;
}
.blocks-item-internal .icon-lock {
  height: 15px;
  width: 15px;
  bottom: 5px;
  position: relative;
}
.blocks-item-internal a {
  color: #0D1B17;
}
.blocks-item-link {
  color: #0F3D2E;
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  border-radius: inherit;
}
.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active {
  color: inherit;
  text-decoration: none;
}
.blocks-item-link:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #0F3D2E;
  text-decoration: none;
}
.blocks-item-title {
  margin-bottom: 0;
  font-size: 16px;
}
.blocks-item-description {
  margin: 0;
}
.blocks-item-description:not(:empty) {
  margin-top: 10px;
}

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

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

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

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

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

/***** Recent activity *****/
.recent-activity-header {
  margin-bottom: 10px;
  text-align: center;
}
.recent-activity-list {
  padding: 0;
}
.recent-activity-item {
  border-bottom: 1px solid #ddd;
  overflow: auto;
  padding: 20px 0;
}
.recent-activity-item h3 {
  margin: 0;
}
.recent-activity-item-parent {
  font-size: 16px;
  font-weight: 600;
}
.recent-activity-item-parent, .recent-activity-item-link {
  margin: 6px 0;
  display: inline-block;
  width: 100%;
}
@media (min-width: 768px) {
  .recent-activity-item-parent, .recent-activity-item-link {
    width: 70%;
    margin: 0;
  }
}
.recent-activity-item-link {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-activity-item-meta {
  color: #0D1B17;
  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: #4A3A8A;
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: #9358B0;
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: #2A7558;
}
.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: #0F3D2E;
  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: #0D1B17;
}
.section-tree .see-all-articles {
  display: block;
  padding: 15px 0;
}

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

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

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

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

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

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

/***** 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: #2e6052;
}
.share a:hover {
  text-decoration: none;
  color: #0F3D2E;
}
.share a svg {
  height: 18px;
  width: 18px;
  display: block;
}

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

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

.vote-voted {
  color: #0F3D2E;
}

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

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

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

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

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

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

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

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

/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  padding: 0;
}
.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}
.striped-list-info {
  flex: 2;
}
.striped-list-title {
  color: #4A3A8A;
  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: #9358B0;
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #2e6052;
  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: #0D1B17;
    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: #0F3D2E;
}
.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: #2e6052;
}
.status-label-pending, .status-label-pending-moderation {
  background-color: #1f73b7;
  text-align: center;
}
.status-label-open {
  background-color: #c72a1c;
}
.status-label-solved {
  background-color: #68737d;
}
.status-label-new {
  background-color: #ffb648;
  color: #703b15;
}
.status-label-hold {
  background-color: #000;
}
.status-label-request {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .status-label-request {
    max-width: 150px;
  }
}

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

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

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

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

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

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

.community-badge {
  margin: 2px;
}

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

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

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

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

.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}
.collapsible-nav-list li {
  color: #0D1B17;
  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: #0D1B17;
  display: block;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:hover {
    border-bottom: 4px solid #ddd;
  }
  .collapsible-nav-list li:hover a:not([aria-current=page]) {
    padding: 15px 0 11px 0;
    text-decoration: none;
  }
}
.collapsible-nav-list li:not([aria-selected=true]),
.collapsible-nav-list li:not(.current) {
  display: none;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:not([aria-selected=true]),
  .collapsible-nav-list li:not(.current) {
    display: block;
  }
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true] {
    padding: 15px 0 11px 0;
  }
}
.collapsible-nav-list li[aria-selected=true],
.collapsible-nav-list li.current {
  order: 0;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true],
  .collapsible-nav-list li.current {
    border-bottom: 4px solid #0F3D2E;
    order: 1;
  }
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
  color: #0D1B17;
}

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

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

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

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

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

.no-activities {
  color: #2e6052;
}

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

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

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

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

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

.meta-group * {
  display: inline;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.profile-activity-contribution {
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background-color: #f7f7f7;
}
@media (min-width: 768px) {
  .profile-activity-contribution {
    margin-top: 0;
    margin-left: 50px;
  }
  [dir=rtl] .profile-activity-contribution {
    margin-left: 0;
    margin-right: 50px;
  }
}

.profile-activity-icon {
  position: absolute;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-color: #FFFFFF;
  background-position: 50% 50%;
  text-align: center;
  color: #ccc;
}
[dir=rtl] .profile-activity-icon {
  right: 0;
}
@media (min-width: 768px) {
  .profile-activity-icon {
    left: -14px;
  }
  [dir=rtl] .profile-activity-icon {
    right: -14px;
  }
}

.profile-activity-icon svg {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  margin: auto;
}

/***** Search results *****/
.search-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .search-results {
    flex-direction: row;
  }
}
.search-results-column {
  flex: 1;
}
@media (min-width: 1024px) {
  .search-results-column {
    flex: 0 0 75%;
  }
}
.search-results-sidebar {
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .search-results-sidebar {
    border: 0;
    flex: 0 0 20%;
    height: auto;
  }
}
.search-results-sidebar .sidenav-item {
  border-radius: 4px;
  padding: 10px 36px;
  margin-bottom: 4px;
  color: #0D1B17;
}
.search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current {
  background-color: #e9ebed;
  text-decoration: none;
}
.search-results-sidebar .sidenav-subitem {
  unicode-bidi: embed;
}
.search-results-sidebar .sidenav-tag {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-grow: 0;
}
.search-results-sidebar .sidenav-tag .content-tag {
  background: #E9EBED;
  border-radius: 4px;
  padding: 4px 12px;
  text-decoration: none;
}
.search-results-sidebar .sidenav-tag .content-tag .label {
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  letter-spacing: -0.000427656px;
  color: #49545C;
  flex-grow: 0;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .sidenav-tag .content-tag .close-icon {
  color: #555555;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .collapsible-sidebar {
  margin-bottom: 30px;
}
.search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
  display: none;
}
@media (min-width: 1024px) {
  .search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
    display: block;
  }
}
.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n+6) {
  display: none;
}
.search-results-sidebar .multibrand-filter-list .doc-count {
  color: #666;
}
.search-results-sidebar .see-all-filters {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  padding: 10px;
  color: #4A3A8A;
}
.search-results-sidebar .see-all-filters[aria-hidden=true] {
  display: none;
}
.search-results-sidebar .see-all-filters:hover {
  text-decoration: underline;
}
.search-results-sidebar .see-all-filters::after {
  content: " ⌄";
  font-weight: bold;
}
.search-results-subheading {
  font-size: 18px;
  font-weight: 600;
}
.search-results-list {
  margin-bottom: 25px;
}
.search-results-list > li {
  padding: 20px 0;
}
.search-results-list > li:first-child {
  border-top: 1px solid #ddd;
}
.search-results .no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rem;
}
.search-results .no-results .headline {
  color: #2F3941;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.45px;
}
.search-results .no-results .action-prompt {
  color: #68737D;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.154px;
}
.search-results .no-results .action-prompt a {
  color: #4A3A8A;
}
.search-results .no-results .action-prompt a:visited {
  color: #4A3A8A;
}

.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: #2e6052;
  font-size: 13px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: #0F3D2E;
  vertical-align: middle;
  width: 13px;
  height: 13px;
}
[dir=ltr] .search-result-votes, [dir=ltr] .search-result-meta-count {
  margin-left: 20px;
}
[dir=rtl] .search-result-votes, [dir=rtl] .search-result-meta-count {
  margin-right: 20px;
}
.search-result-meta-container {
  color: #666;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .search-result-meta-container {
    flex-direction: row;
    align-items: center;
  }
}
@media (min-width: 1024px) {
  .search-result-meta-container nav {
    flex: 1;
  }
}
@media (min-width: 1024px) {
  [dir=ltr] .search-result-meta-container .meta-data {
    margin-left: 20px;
  }
}
@media (min-width: 1024px) {
  [dir=rtl] .search-result-meta-container .meta-data {
    margin-right: 20px;
  }
}
.search-result-meta-container .meta-data::after {
  content: none;
}
.search-result-breadcrumbs {
  margin: 0;
}
.search-result-description {
  margin-top: 10px;
  margin-bottom: 0;
  word-break: break-word;
}

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

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

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

.notification a {
  color: #158ec2;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.service-catalog-hero {
  background-image: url(/hc/theming_assets/01KGM76J61VFFSVQZ1FKPMX2JW);
  margin-bottom: 10px;
  height: 320px;
}
.service-catalog-description {
  display: flow-root;
}
.service-catalog-description a {
  color: #4A3A8A;
  text-decoration: underline;
}
.service-catalog-description a:visited {
  color: #9358B0;
}
.service-catalog-description a:hover, .service-catalog-description a:active, .service-catalog-description a:focus {
  color: #2A7558;
}
.service-catalog-description img {
  height: auto;
  max-width: 100%;
}
.service-catalog-description p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.service-catalog-description p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.service-catalog-description p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.service-catalog-description p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.service-catalog-description figure.image {
  display: table;
  margin: 0 auto;
}
.service-catalog-description figure.image > img {
  display: block;
  width: 100%;
}
.service-catalog-description figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.service-catalog-description figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.service-catalog-description figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.service-catalog-description figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.service-catalog-description figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.service-catalog-description ul,
.service-catalog-description ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .service-catalog-description ul,
[dir=rtl] .service-catalog-description ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.service-catalog-description ul > ul,
.service-catalog-description ol > ol,
.service-catalog-description ol > ul,
.service-catalog-description ul > ol,
.service-catalog-description li > ul,
.service-catalog-description li > ol {
  margin: 0;
}
.service-catalog-description ul {
  list-style-type: disc;
}
.service-catalog-description :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.service-catalog-description pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.service-catalog-description blockquote {
  border-left: 1px solid #ddd;
  color: #2e6052;
  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;
}

/* ============================================================
   TRUSTPOINT HELP CENTER — CUSTOM STYLES (v2)
   ============================================================
   All custom styles are prefixed with .tp- to avoid collisions
   with Copenhagen's default styling. Existing styles above remain
   untouched and still work on any un-customized page templates
   (article page, requests, community, etc.).

   COLOR VARIABLES (set via theme settings):
   - #0F3D2E    = deep green (hero/footer backgrounds)
   - #0F3D2E  = dark green  (#0F3D2E default)
   - #FFAB40 = amber highlight (#FFAB40)
   - #FFF3E0 = soft amber background (#FFF3E0)
   - #F3F8F5  = soft green background (#F3F8F5 default)

   Structure (find sections by comment block):
   1. CSS variables & base adjustments
   2. Header
   3. Homepage hero + search
   4. Anonymous banner
   5. (Quickstart strip — removed for borrower theme)
   6. Category groups (uniform card grid)
   7. Help CTA
   8. Category page subheader, hero, layout
   9. Category page article grid
   10. Responsive adjustments
   ============================================================ */

/* ---------- 1. CSS VARIABLES & BASE ADJUSTMENTS ---------- */

:root {
  --tp-green-900: #0F3D2E;
  --tp-green-700: #17494D;
  --tp-green-600: #2a7558;
  --tp-green-100: #e8f1ec;
  --tp-green-50:  #F3F8F5;

  --tp-ink-900: #0d1b17;
  --tp-ink-700: #2c3a34;
  --tp-ink-500: #5a6a63;
  --tp-ink-300: #9aa7a1;
  --tp-ink-100: #e4e9e6;
  --tp-ink-50:  #f5f7f6;

  --tp-accent: #FFAB40;
  --tp-accent-soft: #FFF3E0;

  --tp-radius-sm: 6px;
  --tp-radius-md: 10px;
  --tp-radius-lg: 14px;

  --tp-shadow-sm: 0 1px 2px rgba(15,61,46,0.04), 0 1px 3px rgba(15,61,46,0.06);
  --tp-shadow-md: 0 4px 12px rgba(15,61,46,0.06), 0 2px 4px rgba(15,61,46,0.04);
  --tp-shadow-lg: 0 12px 32px rgba(15,61,46,0.08), 0 4px 8px rgba(15,61,46,0.04);

  --tp-max-width: 1200px;
}

/* ---------- 2. HEADER ---------- */

.tp-header {
  border-bottom: 1px solid var(--tp-ink-100);
  background: #fff;
}
.tp-header-inner {
  max-width: var(--tp-max-width);
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.tp-logo img {
  height: 32px;
  width: auto;
  display: block;
}
.tp-nav-desktop {
  display: flex;
  align-items: center;
  gap: 24px;
}
.tp-user-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 20px;
  align-items: center;
}
.tp-user-nav-list a {
  color: var(--tp-ink-700);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
}
.tp-user-nav-list a:hover {
  color: var(--tp-green-700);
}

/* ---------- 3. HOMEPAGE HERO ---------- */

/* Defensive reset for the hero section */
.tp-hero,
.tp-hero * {
  box-sizing: border-box;
}

.tp-hero {
  background: transparent !important;
  background-image: none !important;
  color: var(--tp-ink-900);
  padding: 24px 32px 0 !important;
  position: relative;
  overflow: visible;
  margin: 0 !important;
  height: auto !important;
  width: 100% !important;
  text-align: center;
}
.tp-hero::before,
.tp-hero::after {
  content: none !important;
}
.tp-hero-inner {
  max-width: var(--tp-max-width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-align: center;
  /* Deep green pill background, contained. */
  background: linear-gradient(135deg, #0F3D2E 0%, #17494D 100%);
  border-radius: 16px;
  color: #fff;
  padding: 72px 32px 88px;
  top: auto !important;
  transform: none !important;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(15, 61, 46, 0.12);
}
.tp-hero-inner::before {
  content: '';
  position: absolute;
  top: -30%; left: -8%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}
.tp-hero-inner::after {
  content: '';
  position: absolute;
  bottom: -35%; right: -5%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(255,171,64,0.14) 0%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}
.tp-hero .tp-hero-eyebrow {
  display: inline-block;
  position: relative;
  z-index: 1;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.7) !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
}
.tp-hero .tp-hero-headline {
  position: relative;
  z-index: 1;
  font-size: 44px !important;
  font-weight: 600 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  color: #fff !important;
  border: none !important;
  text-align: center !important;
}
.tp-hero .tp-hero-subtitle {
  position: relative;
  z-index: 1;
  font-size: 18px !important;
  color: rgba(255,255,255,0.8) !important;
  margin: 0 auto 36px !important;
  padding: 0 !important;
  max-width: 600px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}
.tp-search-wrap {
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.tp-search-wrap input,
.tp-search-wrap .search-full .search-input {
  width: 100% !important;
  padding: 18px 24px 18px 56px !important;
  font-size: 16px !important;
  border: none !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: var(--tp-shadow-lg) !important;
  color: var(--tp-ink-900) !important;
}
.tp-search-wrap input:focus {
  outline: 2px solid var(--tp-accent);
  outline-offset: 2px;
}
.tp-search-icon {
  position: absolute;
  left: 22px; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  color: var(--tp-ink-500);
  z-index: 2;
  pointer-events: none;
}
.tp-hero-chips {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  flex-wrap: wrap;
  align-items: center;
}
.tp-hero-chips-label {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}
.tp-hero-chip {
  font-size: 13px;
  color: rgba(255,255,255,0.9);
  padding: 4px 12px;
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  text-decoration: none;
  transition: background 0.15s ease;
}
.tp-hero-chip:hover {
  background: rgba(255,255,255,0.18);
  text-decoration: none;
  color: #fff;
}

/* ---------- 3b. MAIN CONTAINER ---------- */

.tp-main-container {
  max-width: var(--tp-max-width);
  margin: 0 auto;
  padding: 56px 32px 0;
}

/* ---------- 4. ANONYMOUS USER BANNER ---------- */

.tp-anon-banner {
  background: var(--tp-green-50);
  border: 1px solid var(--tp-green-100);
  border-radius: var(--tp-radius-md);
  padding: 24px 28px;
  margin-top: 32px;
  margin-bottom: 32px;
}
.tp-anon-banner h2 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--tp-green-900);
}
.tp-anon-banner p {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--tp-ink-700);
  line-height: 1.5;
}
.tp-anon-banner p:last-child { margin-bottom: 0; }

/* ---------- 6. CATEGORY GROUPS (rendered by script.js) ---------- */

.tp-category-group {
  margin-bottom: 56px;
}
.tp-category-group-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
}
.tp-category-group-header h2 {
  font-size: 24px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: -0.01em;
  color: var(--tp-ink-900) !important;
  border: none !important;
}
.tp-category-group-header p {
  margin: 4px 0 0 !important;
  font-size: 14px !important;
  color: var(--tp-ink-500) !important;
  padding: 0 !important;
}
.tp-category-group-header-text { max-width: 100%; }

.tp-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.tp-category-card {
  background: #fff !important;
  border: 1px solid var(--tp-ink-100) !important;
  border-radius: var(--tp-radius-md) !important;
  padding: 24px !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: all 0.15s ease;
  display: flex !important;
  flex-direction: column !important;
  min-height: 160px;
  margin: 0 !important;
}
.tp-category-card:hover {
  border-color: var(--tp-green-600) !important;
  transform: translateY(-2px);
  box-shadow: var(--tp-shadow-md);
  text-decoration: none !important;
  color: inherit !important;
}
.tp-category-card h3 {
  margin: 0 0 6px !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--tp-ink-900) !important;
  border: none !important;
}
.tp-category-card p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  color: var(--tp-ink-500) !important;
  line-height: 1.5 !important;
  flex-grow: 1;
}
.tp-category-icon {
  width: 44px; height: 44px;
  background: var(--tp-green-50);
  border-radius: var(--tp-radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--tp-green-900) !important;
  margin-bottom: 14px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none !important;
  flex-shrink: 0;
}
.tp-category-icon svg { width: 22px; height: 22px; stroke: currentColor; }

.tp-category-card.tp-category-card-featured {
  border-color: var(--tp-accent);
  background: linear-gradient(180deg, var(--tp-accent-soft) 0%, #fff 40%);
}
/* Keep the icon green to match the rest of the grid — the amber border
   and gradient background already mark this card as featured. */
.tp-category-card.tp-category-card-featured .tp-category-icon {
  background: var(--tp-green-50);
  color: var(--tp-green-900) !important;
}

/* Featured grid (Getting started section with big Training Course card) */
.tp-featured-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}
.tp-featured-card {
  background: linear-gradient(135deg, var(--tp-green-50) 0%, var(--tp-accent-soft) 100%);
  border: 1px solid var(--tp-green-100);
  border-radius: var(--tp-radius-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
}
.tp-featured-card:hover {
  border-color: var(--tp-green-600);
  transform: translateY(-2px);
  box-shadow: var(--tp-shadow-md);
  text-decoration: none;
  color: inherit;
}
.tp-featured-badge {
  display: inline-block;
  background: var(--tp-green-900);
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin: 0 0 14px !important;
  width: fit-content;
}
.tp-featured-card h3 {
  margin: 0 0 8px !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--tp-ink-900) !important;
  padding: 0 !important;
}
.tp-featured-card p {
  margin: 0 0 16px !important;
  font-size: 14px !important;
  color: var(--tp-ink-700) !important;
  line-height: 1.5 !important;
  padding: 0 !important;
}
.tp-featured-stats {
  display: flex;
  gap: 20px;
  margin-top: auto;
  font-size: 13px;
  color: var(--tp-ink-500);
  flex-wrap: wrap;
}
.tp-featured-stats strong {
  color: var(--tp-green-900);
  font-weight: 600;
}

/* ---------- 7. HELP CTA ---------- */

.tp-help-cta {
  background: linear-gradient(135deg, var(--tp-green-900) 0%, var(--tp-green-700) 100%);
  border-radius: var(--tp-radius-lg);
  padding: 48px;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 64px;
  position: relative;
  overflow: hidden;
}
.tp-help-cta::after {
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,171,64,0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.tp-help-cta-content { position: relative; z-index: 1; }
.tp-help-cta-content h2 {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
  color: #fff;
}
.tp-help-cta-content p {
  margin: 0;
  font-size: 15px;
  color: rgba(255,255,255,0.8);
  line-height: 1.6;
}
.tp-help-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.tp-help-cta-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--tp-radius-md);
  color: #fff !important;
  text-decoration: none;
  transition: all 0.15s ease;
}
.tp-help-cta-btn:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.3);
  text-decoration: none;
  color: #fff !important;
}
.tp-help-cta-btn-icon {
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tp-help-cta-btn-content { flex-grow: 1; }
.tp-help-cta-btn strong { display: block; font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.tp-help-cta-btn > span span { font-size: 12px; color: rgba(255,255,255,0.7); }

/* ---------- 8. CATEGORY PAGE SUBHEADER & HERO ---------- */

/* Subheader — outer is now transparent (no full-width band).
   The light green pill sits INSIDE, contained within the page max-width. */
.tp-subheader {
  background: transparent !important;
  border-bottom: 0 !important;
  padding: 24px 0 0 !important;
}
.tp-subheader-inner {
  max-width: var(--tp-max-width);
  margin: 0 auto;
  padding: 14px 28px;
  /* Contained pill background instead of full-width band */
  background: var(--tp-green-50);
  border: 1px solid var(--tp-green-100);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* Margin from page edges so the pill doesn't touch left/right */
  margin-left: 32px;
  margin-right: 32px;
  width: auto;
  box-sizing: border-box;
}
@media (min-width: 1264px) {
  .tp-subheader-inner {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
  }
}
.tp-breadcrumbs {
  font-size: 13px;
  color: var(--tp-ink-500);
}
.tp-breadcrumbs a {
  color: var(--tp-ink-700);
  font-weight: 500;
}
.tp-breadcrumbs a:hover { color: var(--tp-green-700); text-decoration: none; }
.tp-subheader-search {
  position: relative;
  width: 320px;
}
.tp-subheader-search svg {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--tp-ink-500);
  z-index: 2;
  pointer-events: none;
}
.tp-subheader-search input,
.tp-subheader-search .search-input {
  width: 100% !important;
  padding: 10px 16px 10px 40px !important;
  font-size: 14px !important;
  border: 1px solid var(--tp-ink-100) !important;
  border-radius: 999px !important;
  background: #fff !important;
}

.tp-page-hero {
  padding: 48px 0 32px;
}
.tp-page-hero-inner {
  max-width: var(--tp-max-width);
  margin: 0 auto;
  /* Align with card interior content (32px page padding + 20px card padding) */
  padding: 0 52px;
}
.tp-page-hero h1 {
  font-size: 36px;
  font-weight: 600;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  color: var(--tp-ink-900);
  line-height: 1.15;
}
.tp-page-hero-lede {
  font-size: 17px;
  color: var(--tp-ink-700);
  line-height: 1.6;
  margin: 0;
  max-width: 720px;
}

.tp-page-layout {
  max-width: var(--tp-max-width);
  margin: 0 auto;
  padding: 32px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
}

.tp-sidebar {
  position: sticky;
  top: 32px;
  align-self: start;
}
.tp-sidebar-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tp-ink-500);
  margin: 0 0 12px;
  padding: 0 12px;
}
.tp-sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}
.tp-sidebar-nav li a {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--tp-ink-700);
  border-radius: var(--tp-radius-sm);
  margin-bottom: 2px;
  font-weight: 500;
  text-decoration: none;
}
.tp-sidebar-nav li a:hover {
  background: var(--tp-ink-50);
  color: var(--tp-green-900);
  text-decoration: none;
}

/* ---------- 9. CATEGORY PAGE ARTICLE GRID ---------- */

.tp-section {
  margin-bottom: 48px;
}
.tp-section-header {
  margin-bottom: 20px;
}
.tp-section-header h2 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  color: var(--tp-ink-900);
}
.tp-section-header h2 a {
  color: inherit;
  text-decoration: none;
}
.tp-section-header h2 a:hover {
  color: var(--tp-green-700);
}
.tp-section-intro {
  font-size: 14px;
  color: var(--tp-ink-500);
  margin: 0;
}

/* ============================================================
   SECTION PAGE — article cards (Option 3)
   ============================================================
   Uniform document icon for articles. Videos auto-get a play icon
   via script.js (tpUpgradeVideoArticleCards). */

.tp-section-content {
  max-width: var(--tp-max-width);
  margin: 0 auto;
  padding: 40px 32px 64px;
}

.tp-article-grid {
  /* Use CSS multi-column layout for top-down-then-next-column flow.
     Articles fill the left column first (top to bottom), then continue
     in the right column. Preserves Zendesk's article order naturally. */
  column-count: 2;
  column-gap: 14px;
  margin-bottom: 32px;
}
.tp-article-grid > * {
  /* Prevent cards from breaking across columns */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 14px;
  display: block;
}
.tp-article-grid > *:last-child {
  margin-bottom: 0;
}

.tp-article-card {
  background: #fff !important;
  border: 1px solid var(--tp-ink-100) !important;
  border-radius: var(--tp-radius-md) !important;
  padding: 20px !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: all 0.15s ease;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 82px;
  margin: 0 0 14px 0 !important;
}
.tp-article-grid > .tp-article-card:last-child {
  margin-bottom: 0 !important;
}
.tp-article-card:hover {
  border-color: var(--tp-green-600) !important;
  box-shadow: var(--tp-shadow-md);
  transform: translateY(-1px);
  text-decoration: none !important;
  color: inherit !important;
}

.tp-article-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: var(--tp-green-50);
  border-radius: var(--tp-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tp-green-900) !important;
}
.tp-article-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Video variant — amber-tinted tile, amber play icon */
.tp-article-card--video .tp-article-icon {
  background: var(--tp-accent-soft);
  color: var(--tp-accent) !important;
}

/* Webinar variant — purple-tinted tile, purple microphone icon.
   Distinct from video so users can tell the two content types apart
   at a glance when scanning a long section list. */
.tp-article-card--webinar .tp-article-icon {
  background: #EEEDFE;
  color: #534AB7 !important;
}

/* Promoted variant — amber star icon on a soft amber tile.
   Promoted articles are flagged in Zendesk admin (per-article toggle);
   the template adds the .tp-article-card--promoted class and renders a
   star SVG inside .tp-article-icon. */
.tp-article-card--promoted .tp-article-icon {
  background: var(--tp-accent-soft);
  color: var(--tp-accent) !important;
}
.tp-article-card--promoted .tp-article-icon svg path {
  fill: currentColor;
}

.tp-article-card-content {
  flex: 1;
  min-width: 0;
}
.tp-article-card-content h4 {
  font-size: 15px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--tp-ink-900) !important;
  line-height: 1.4 !important;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tp-article-card-arrow {
  color: var(--tp-ink-300);
  transition: transform 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.tp-article-card:hover .tp-article-card-arrow {
  color: var(--tp-green-700);
  transform: translateX(2px);
}

.tp-empty {
  color: var(--tp-ink-500);
  font-size: 14px;
  font-style: italic;
}

@media (max-width: 700px) {
  .tp-article-grid { column-count: 1; }
  .tp-section-content { padding: 28px 20px 48px; }
  .tp-page-hero-inner { padding: 0 20px; }
  .tp-subheader-inner { padding: 0 20px; }
}

.tp-see-all {
  display: inline-block;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tp-green-900);
  text-decoration: none;
}
.tp-see-all:hover {
  text-decoration: underline;
}

.tp-helpful {
  border-top: 1px solid var(--tp-ink-100);
  padding: 32px 0;
  text-align: center;
}
.tp-helpful-question {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 12px;
  color: var(--tp-ink-700);
}
.tp-helpful-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.tp-helpful-btn {
  padding: 8px 24px;
  border: 1px solid var(--tp-ink-100);
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: var(--tp-ink-700);
  transition: all 0.15s ease;
  font-family: inherit;
}
.tp-helpful-btn:hover {
  border-color: var(--tp-green-600);
  color: var(--tp-green-900);
}

/* ---------- 10. RESPONSIVE ---------- */

@media (max-width: 1000px) {
  .tp-page-layout {
    grid-template-columns: 1fr;
  }
  .tp-sidebar { position: static; }
  .tp-article-grid { column-count: 1; }
}

@media (max-width: 900px) {
  .tp-category-grid { grid-template-columns: repeat(2, 1fr); }
  .tp-help-cta { grid-template-columns: 1fr; padding: 32px; }
  .tp-quickstart { grid-template-columns: 1fr; text-align: center; }
  .tp-hero-headline { font-size: 32px !important; }
  .tp-hero { padding: 16px 16px 0 !important; }
  .tp-hero-inner { padding: 56px 24px 72px !important; border-radius: 12px; }
  .tp-main-container { padding: 40px 20px 0; }
  .tp-subheader-inner {
    flex-direction: column;
    align-items: flex-start;
    margin-left: 16px !important;
    margin-right: 16px !important;
    padding: 14px 18px !important;
  }
  .tp-subheader-search { width: 100%; }
}

@media (max-width: 600px) {
  .tp-category-grid { grid-template-columns: 1fr; }
  .tp-page-hero h1 { font-size: 28px; }
}

/* ---------- 11. SUBSECTION LIST (section pages with nested sections) ---------- */

.tp-subsection-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.tp-subsection-list-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--tp-ink-100);
  border-radius: var(--tp-radius-md);
  color: var(--tp-ink-900);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  transition: all 0.15s ease;
}
.tp-subsection-list-item a:hover {
  border-color: var(--tp-green-600);
  transform: translateY(-1px);
  box-shadow: var(--tp-shadow-sm);
  text-decoration: none;
  color: var(--tp-green-900);
}
.tp-subsection-list-item svg {
  color: var(--tp-ink-300);
  flex-shrink: 0;
}
.tp-subsection-list-item a:hover svg {
  color: var(--tp-green-700);
}

.tp-section-subscribe {
  margin-top: 16px;
}

@media (max-width: 700px) {
  .tp-subsection-list { grid-template-columns: 1fr; }
}

/* Featured grid responsive */
@media (max-width: 900px) {
  .tp-featured-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HERO SEARCH + CHIP FIXES
   ============================================================ */

/* Hide Zendesk's own clear-search "×" button that appears below the search */
.tp-search-wrap form button,
.tp-search-wrap [type="reset"],
.tp-search-wrap [type="submit"],
.tp-search-wrap button[aria-label*="lear"],
.tp-search-wrap button[aria-label*="Clear"],
.tp-subheader-search [type="submit"],
.tp-subheader-search button[type="submit"],
.tp-subheader-search button:not([aria-label*="lear"]):not([aria-label*="Clear"]):not(.search-clear),
.tp-subheader-search [class*="search-submit"],
.tp-subheader-search [class*="submit-button"],
.tp-subheader-search .search-button,
.tp-subheader-search input[type="submit"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Hide the search submit button/magnifying-glass icon Zendesk adds at the end */
.tp-hero .search button,
.tp-hero .search [type="submit"] {
  display: none !important;
}

/* Popular chips: force white on ALL states (link, visited, hover, focus, active) */
.tp-hero-chip,
.tp-hero-chip:link,
.tp-hero-chip:visited,
.tp-hero-chip:hover,
.tp-hero-chip:focus,
.tp-hero-chip:active {
  color: #fff !important;
  text-decoration: none !important;
}

/* ============================================================
   BREADCRUMBS — Option 2 (chevron separators, muted palette, weighted current)
   ============================================================ */
.tp-breadcrumbs {
  font-size: 13px;
  color: var(--tp-ink-500);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tp-breadcrumbs ol,
.tp-breadcrumbs ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tp-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.tp-breadcrumbs li + li::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M3 2l3 3-3 3' stroke='%239aa7a1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
/* Hide the help-center root crumb ("trustpoint.ai"). The home page
   redirects to Customer Resource Center, so the root and the category
   are functionally the same destination — showing both was noise.
   Also hide the chevron separator that would otherwise appear before
   the (now first-visible) category crumb. */
.tp-breadcrumbs li:first-child {
  display: none !important;
}
.tp-breadcrumbs li:first-child + li::before {
  display: none !important;
}
.tp-breadcrumbs a,
.tp-breadcrumbs a:link,
.tp-breadcrumbs a:visited {
  color: var(--tp-ink-500) !important;
  text-decoration: none !important;
  padding: 2px 4px;
  margin: -2px -4px;
  border-radius: 4px;
  transition: all 0.15s ease;
  font-weight: 500;
}
.tp-breadcrumbs a:hover,
.tp-breadcrumbs a:focus {
  color: var(--tp-green-900) !important;
  background: rgba(15, 61, 46, 0.06);
  text-decoration: none !important;
}
/* Current page (last li in list). Zendesk renders this as a real <a>
   on article pages (linking back to the parent section) and as a plain
   <span> on category/section pages. We style it as the "current" state
   visually, but keep links clickable so users can return to the parent
   section from an article. */
.tp-breadcrumbs li:last-child,
.tp-breadcrumbs li:last-child a,
.tp-breadcrumbs li:last-child a:link,
.tp-breadcrumbs li:last-child a:visited {
  color: var(--tp-green-900) !important;
  font-weight: 600 !important;
}
.tp-breadcrumbs li:last-child a:hover,
.tp-breadcrumbs li:last-child a:focus {
  color: var(--tp-green-900) !important;
  background: rgba(15, 61, 46, 0.06);
  text-decoration: none !important;
  cursor: pointer;
}

/* Article-title crumb appended by JS on article pages.
   Long article titles can blow out the breadcrumb row, so cap the width
   and add ellipsis. The full title is still visible in the H1 below. */
.tp-breadcrumbs .tp-breadcrumb-article {
  min-width: 0;
  max-width: 100%;
}
.tp-breadcrumbs .tp-breadcrumb-article span {
  display: inline-block;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
@media (max-width: 700px) {
  .tp-breadcrumbs .tp-breadcrumb-article span {
    max-width: 180px;
  }
}

/* ============================================================
   ARTICLE PAGE — themed layout matching Variant 2 prototype
   ============================================================
   Two-column shell: sidebar with "in this section" nav + main content.
   Clean themed attachment cards. Hidden vendor logos on article pages.
*/

.tp-article-shell {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 36px 52px 64px !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* High-specificity layout override — multiple selectors to beat Copenhagen */
body .tp-article-shell .tp-article-container,
body .article-container.tp-article-container,
html body .article-container#article-container.tp-article-container {
  display: grid !important;
  grid-template-columns: 260px 1fr !important;
  gap: 48px !important;
  flex-direction: unset !important;
  flex: unset !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

/* ---- Sidebar (override Copenhagen's flex/max-width rules) ---- */
body .tp-article-shell .tp-article-sidebar,
body .article-sidebar.tp-article-sidebar,
html body .article-sidebar.tp-article-sidebar {
  position: sticky !important;
  top: 24px !important;
  align-self: start !important;
  min-width: 0 !important;
  width: 260px !important;
  max-width: 260px !important;
  flex: unset !important;
  flex-basis: 260px !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body .tp-article-shell .collapsible-sidebar.tp-article-sidebar-inner {
  width: 100% !important;
  position: static !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
/* Hide the mobile-only collapse toggle button on desktop */
@media (min-width: 901px) {
  body .tp-article-shell .collapsible-sidebar-toggle {
    display: none !important;
  }
  body .tp-article-shell .collapsible-sidebar-body {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}
.tp-article-sidebar-title {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--tp-ink-500) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 0 0 14px !important;
  padding: 0 10px 8px !important;
  border-bottom: 1px solid var(--tp-ink-100) !important;
}
.tp-article-sidebar-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tp-article-sidebar-list li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: 0 !important;
  background: transparent !important;
}
.tp-article-sidebar-link,
.tp-article-sidebar-link:link,
.tp-article-sidebar-link:visited {
  display: block !important;
  padding: 10px !important;
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--tp-ink-700) !important;
  border-radius: 8px !important;
  -webkit-border-radius: 8px !important;
  transition: background 0.15s ease, color 0.15s ease;
  line-height: 1.4 !important;
  text-decoration: none !important;
  border: 0 !important;
  box-sizing: border-box;
}
.tp-article-sidebar-link:hover,
.tp-article-sidebar-link:focus {
  background: var(--tp-green-50) !important;
  color: var(--tp-green-900) !important;
  text-decoration: none !important;
  border-radius: 8px !important;
}
.tp-article-sidebar-link-active,
.tp-article-sidebar-link-active:link,
.tp-article-sidebar-link-active:visited,
.tp-article-sidebar-link-active:hover,
.tp-article-sidebar-link-active:focus,
.tp-article-sidebar-list .current-article,
.tp-article-sidebar-list .sidenav-item.current-article {
  background: var(--tp-green-900) !important;
  background-color: var(--tp-green-900) !important;
  color: #fff !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  -webkit-border-radius: 8px !important;
  border: 0 !important;
}
/* Override Copenhagen's .sidenav-item margin/spacing on our links */
.tp-article-sidebar-list .sidenav-item.tp-article-sidebar-link {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  border-radius: 8px !important;
}
.tp-article-sidebar-see-more,
.tp-article-sidebar-see-more:link,
.tp-article-sidebar-see-more:visited,
.tp-article-sidebar-see-more:hover,
.tp-article-sidebar-see-more:focus,
.tp-article-sidebar-see-more:active,
a.tp-article-sidebar-see-more,
a.tp-article-sidebar-see-more:visited {
  display: inline-block !important;
  margin-top: 12px !important;
  margin-left: 10px !important;
  font-size: 13px !important;
  color: var(--tp-green-900) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-decoration-color: var(--tp-green-700) !important;
  text-underline-offset: 3px !important;
  background: transparent !important;
}
.tp-article-sidebar-see-more:hover {
  color: var(--tp-green-900) !important;
  text-decoration-color: var(--tp-green-900) !important;
}

/* ---- Main article area ---- */
body .tp-article-shell .tp-article,
body .article.tp-article {
  min-width: 0 !important;
  max-width: none !important;
  flex: unset !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
.tp-article-header {
  margin-bottom: 28px;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.tp-article-title {
  font-size: 32px !important;
  font-weight: 600 !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  letter-spacing: -0.02em !important;
  color: var(--tp-ink-900) !important;
  line-height: 1.2 !important;
  flex-basis: 100% !important;
}

/* ---- Article body text styling ---- */
.tp-article .article-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--tp-ink-700);
}
.tp-article .article-body h1,
.tp-article .article-body h2,
.tp-article .article-body h3 {
  color: var(--tp-ink-900);
  letter-spacing: -0.01em;
}
.tp-article .article-body h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 36px 0 14px;
  padding-bottom: 0;
  border-bottom: 0;
}
.tp-article .article-body h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 24px 0 10px;
}
.tp-article .article-body p {
  margin: 0 0 16px;
}
.tp-article .article-body ul,
.tp-article .article-body ol {
  margin: 0 0 20px;
  padding-left: 24px;
}
.tp-article .article-body li {
  margin-bottom: 6px;
}
.tp-article .article-body strong,
.tp-article .article-body b {
  color: var(--tp-ink-900);
  font-weight: 600;
}
.tp-article .article-body a {
  color: var(--tp-green-700);
  text-decoration: underline;
  text-decoration-color: var(--tp-green-100);
  text-underline-offset: 2px;
}
.tp-article .article-body a:hover {
  color: var(--tp-green-900);
  text-decoration-color: var(--tp-green-700);
}

/* Callout box (blockquote) — light green, soft, with left border accent.
   Overrides Copenhagen's italic gray default. */
.tp-article .article-body blockquote {
  background: var(--tp-green-50) !important;
  border: 1px solid var(--tp-green-100) !important;
  border-left: 3px solid var(--tp-green-700) !important;
  border-radius: 6px !important;
  padding: 18px 22px !important;
  margin: 24px 0 !important;
  color: var(--tp-ink-700) !important;
  font-style: normal !important;
}
.tp-article .article-body blockquote * {
  background: transparent !important;
  color: var(--tp-ink-700) !important;
  font-style: normal !important;
}
.tp-article .article-body blockquote strong,
.tp-article .article-body blockquote b {
  color: var(--tp-green-900) !important;
  font-weight: 600 !important;
}
.tp-article .article-body blockquote em,
.tp-article .article-body blockquote i {
  font-style: italic !important;
}
.tp-article .article-body blockquote p {
  margin: 0 !important;
}
.tp-article .article-body blockquote p + p {
  margin-top: 8px !important;
}

/* Hide horizontal-rule dividers in article body — visual clutter */
.tp-article .article-body hr {
  display: none !important;
}

/* ---- Attachments block ---- */
.tp-attachments {
  background: var(--tp-ink-50);
  border-radius: var(--tp-radius-md, 10px);
  padding: 20px 24px;
  margin-top: 32px;
}
.tp-attachments-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--tp-ink-900) !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none !important;
}
.tp-attachment-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px;
}
.tp-attachment-item {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.tp-attachment-link,
.tp-attachment-link:link,
.tp-attachment-link:visited {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--tp-ink-100);
  border-radius: var(--tp-radius-sm, 6px);
  transition: all 0.15s ease;
  text-decoration: none !important;
  color: inherit !important;
  min-width: 0;
  width: 100%;
}
.tp-attachment-link:hover {
  border-color: var(--tp-green-600);
  box-shadow: var(--tp-shadow-sm);
  text-decoration: none !important;
}
.tp-attachment-icon {
  width: 32px; height: 32px;
  background: var(--tp-green-50);
  color: var(--tp-green-900);
  border-radius: var(--tp-radius-sm, 6px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tp-attachment-icon svg { width: 16px; height: 16px; }
.tp-attachment-body { flex: 1; min-width: 0; }
.tp-attachment-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--tp-ink-900);
  line-height: 1.4;
  word-break: break-word;
  /* Show full filename, no truncation */
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}
.tp-attachment-size {
  font-size: 11px;
  color: var(--tp-ink-500);
  margin-top: 2px;
}

/* ---- Mobile: collapse sidebar ---- */
@media (max-width: 900px) {
  .tp-article-shell .tp-article-container,
  .article-container.tp-article-container {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .tp-article-shell .tp-article-sidebar,
  .article-sidebar.tp-article-sidebar {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Show mobile collapse toggle */
  .tp-article-shell .collapsible-sidebar-toggle {
    display: inline-flex !important;
  }
  .tp-article-shell .collapsible-sidebar[aria-expanded="false"] .collapsible-sidebar-body {
    display: none !important;
  }
}
@media (max-width: 700px) {
  .tp-article-shell { padding: 28px 20px 48px !important; }
  .tp-article-title { font-size: 26px !important; }
}

/* Reset Copenhagen defaults that conflict */
.tp-article .article-author,
.tp-article .article-meta {
  font-size: 13px !important;
  color: var(--tp-ink-500) !important;
}

/* ============================================================
   ARTICLE FOOTER: vote buttons, related articles, comments
   ============================================================
   These were rendering in default Copenhagen purple — restyle to match.
*/

/* Vote section ("Was this article helpful?") */
/* Article footer row: Back link LEFT + Was this helpful + buttons RIGHT */
.tp-article-footer {
  margin-top: 40px;
}
.tp-article-footer-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 0 !important;
  margin: 0 !important;
}
.tp-back-link,
.tp-back-link:link,
.tp-back-link:visited {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--tp-green-700) !important;
  text-decoration: none !important;
  transition: color 0.15s ease;
}
.tp-back-link:hover {
  color: var(--tp-green-900) !important;
}
.tp-back-link svg {
  flex-shrink: 0;
}

/* Article-votes: now sits in same row as back-link, transparent bg */
.tp-article .article-votes {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}
.tp-article .article-votes-question {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--tp-ink-700) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  flex: unset !important;
  min-width: 0 !important;
}
.tp-article .article-votes-controls {
  display: inline-flex !important;
  gap: 8px;
}
.tp-article .article-vote {
  background: #fff !important;
  border: 1px solid var(--tp-ink-100) !important;
  border-radius: var(--tp-radius-sm, 6px) !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--tp-ink-700) !important;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 56px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
}
.tp-article .article-vote-up::before {
  content: "👍";
  font-size: 14px;
  line-height: 1;
}
.tp-article .article-vote-down::before {
  content: "👎";
  font-size: 14px;
  line-height: 1;
}
.tp-article .article-vote:hover {
  border-color: var(--tp-green-600) !important;
  color: var(--tp-green-900) !important;
  background: #fff !important;
}
.tp-article .article-vote.button-primary {
  background: var(--tp-green-900) !important;
  border-color: var(--tp-green-900) !important;
  color: #fff !important;
}
.tp-article .article-votes-count {
  display: none !important; /* The "0 out of 0 found this helpful" line removed for cleaner footer */
}

/* Hide secondary footer items we don't need to clutter the new clean footer */
.tp-article-footer-meta {
  display: none !important;
}
.tp-article .article-more-questions,
.tp-article .article-return-to-top {
  display: none !important;
}

/* Article footer (share + comment count) */
.tp-article .article-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0 0;
}
.tp-article .article-share {
  font-size: 13px !important;
  color: var(--tp-ink-500) !important;
}
.tp-article .article-comment-count {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 13px !important;
  color: var(--tp-green-700) !important;
  text-decoration: none !important;
}
.tp-article .article-comment-count:hover {
  color: var(--tp-green-900) !important;
}

/* Article more questions / submit request callout */
.tp-article .article-more-questions {
  margin-top: 24px;
  font-size: 14px;
  color: var(--tp-ink-500);
}
.tp-article .article-more-questions a {
  color: var(--tp-green-700) !important;
  text-decoration: underline !important;
  font-weight: 500;
}

/* Return to top link */
.tp-article .article-return-to-top {
  display: none !important; /* Not needed with our shorter layout */
}

/* Related articles + Recently viewed (the .article-relatives block) */
.tp-article .article-relatives {
  margin-top: 48px !important;
  padding: 0 !important;
  border-top: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 32px !important;
}
.tp-article .article-relatives > * {
  flex: unset !important;
  min-width: 0 !important;
  margin: 0 !important;
}
.tp-article .article-relatives h3,
.tp-article .article-relatives .related-articles-title,
.tp-article .article-relatives .recent-articles-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--tp-ink-900) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
}
.tp-article .article-relatives ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.tp-article .article-relatives li {
  margin: 0 !important;
  padding: 6px 0 !important;
  border: 0 !important;
}
.tp-article .article-relatives li:last-child {
  border: 0 !important;
}
.tp-article .article-relatives a {
  font-size: 14px !important;
  color: var(--tp-green-700) !important;
  text-decoration: none !important;
  font-weight: 500;
  line-height: 1.5;
}
.tp-article .article-relatives a:hover {
  color: var(--tp-green-900) !important;
  text-decoration: underline !important;
}

@media (max-width: 700px) {
  .tp-article .article-relatives {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* Comments section */
.tp-article .article-comments {
  margin-top: 48px;
  padding-top: 0;
  border-top: 0;
}
.tp-article .comment-heading,
.tp-article .comments .comment-heading {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--tp-ink-900) !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
}
.tp-article .comment-callout {
  font-size: 13px !important;
  color: var(--tp-ink-500) !important;
}

/* Subscribe button (article header) */
.tp-article .article-subscribe button,
.tp-article .article-subscribe a {
  background: #fff !important;
  border: 1px solid var(--tp-ink-100) !important;
  color: var(--tp-ink-700) !important;
  padding: 6px 14px !important;
  border-radius: var(--tp-radius-sm, 6px) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.tp-article .article-subscribe button:hover,
.tp-article .article-subscribe a:hover {
  border-color: var(--tp-green-600) !important;
  color: var(--tp-green-900) !important;
}

/* Hide the original .article-attachments default rendering — we have tp- version */
.tp-article .article-attachments .attachment-item:not(.tp-attachment-item) {
  display: none;
}

/* Author info row */
.tp-article .article-author {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 0 28px !important;
  font-size: 13px !important;
  color: var(--tp-ink-500) !important;
}
.tp-article .article-avatar {
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
}
.tp-article .article-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.tp-article .article-meta {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tp-article .meta-data {
  font-size: 13px !important;
  color: var(--tp-ink-500) !important;
}

/* ============================================================
   ITEM 4: FONT CONSISTENCY IN ARTICLE BODY
   ============================================================
   Some articles wrap step-by-step content in <pre> blocks, which
   render in monospace by default. Make all article body text use the
   theme's Inter font, except inline <code> (single backticks for
   code references), which stays monospace by convention.
*/
.tp-article .article-body pre,
.tp-article .article-body pre *,
.tp-article .article-body code,
.tp-article .article-body kbd,
.tp-article .article-body samp {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--tp-ink-700) !important;
}
/* Pre blocks: clean styling, no gray background, no borders */
.tp-article .article-body pre {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  overflow: visible !important;
}
/* Inline <code> inside paragraphs: keep monospace for actual code references */
.tp-article .article-body p code,
.tp-article .article-body li code {
  font-family: 'SF Mono', 'Monaco', 'Cascadia Code', Consolas, monospace !important;
  font-size: 0.92em !important;
  background: var(--tp-ink-50) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  color: var(--tp-ink-900) !important;
}

/* ============================================================
   ITEM 1: SECTIONS / TOC PANEL (Option B — vertical list panel)
   ============================================================
   Detect tables of contents that author embedded in articles.
   Common pattern: <h3>Sections</h3> followed by <ul> of anchor links.
   We can't reliably target by HTML, so we offer a class hook the
   author can apply: <div class="tp-toc">...<h3>Sections</h3><ol>...
   But also try to auto-style any list directly preceded by an
   "Sections" / "Contents" / "Jump to" heading.

   Simpler approach: provide a class that the article author wraps
   the TOC in, and style that class.
*/
.tp-article .article-body .tp-toc,
.tp-article .article-body .toc,
.tp-article .article-body div.sections-toc {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid var(--tp-ink-100) !important;
  border-radius: 10px !important;
  padding: 6px 14px 8px !important;
  margin: 24px 0 !important;
  box-shadow: none !important;
}
.tp-article .article-body .tp-toc h2,
.tp-article .article-body .tp-toc h3,
.tp-article .article-body .tp-toc h4,
.tp-article .article-body .tp-toc p:first-child,
.tp-article .article-body .toc h2,
.tp-article .article-body .toc h3,
.tp-article .article-body .toc h4,
.tp-article .article-body .toc p:first-child {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--tp-ink-500) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin: 12px 4px 6px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.tp-article .article-body .tp-toc ul,
.tp-article .article-body .tp-toc ol,
.tp-article .article-body .toc ul,
.tp-article .article-body .toc ol {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: tp-toc-counter;
  background: transparent !important;
}
.tp-article .article-body .tp-toc li,
.tp-article .article-body .toc li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  counter-increment: tp-toc-counter;
  border: 0 !important;
  background: transparent !important;
}
.tp-article .article-body .tp-toc li a,
.tp-article .article-body .toc li a {
  display: flex !important;
  align-items: center;
  gap: 0;
  padding: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--tp-ink-900) !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  transition: all 0.15s ease;
  position: relative;
}
.tp-article .article-body .tp-toc li a::before,
.tp-article .article-body .toc li a::before {
  content: counter(tp-toc-counter) ".";
  font-size: 12px;
  font-weight: 700;
  color: var(--tp-green-700);
  min-width: 22px;
  padding-right: 10px;
  margin-right: 12px;
  border-right: 1px solid var(--tp-ink-100);
  flex-shrink: 0;
}
.tp-article .article-body .tp-toc li a::after,
.tp-article .article-body .toc li a::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: auto;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa7a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18l6-6-6-6'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.tp-article .article-body .tp-toc li a:hover,
.tp-article .article-body .toc li a:hover {
  background: var(--tp-green-50) !important;
  color: var(--tp-green-900) !important;
  text-decoration: none !important;
}
.tp-article .article-body .tp-toc li a:hover::after,
.tp-article .article-body .toc li a:hover::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317494d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18l6-6-6-6'/></svg>");
  transform: translateX(2px);
}

/* ============================================================
   ITEM 5: ARTICLE HEADER LAYOUT (Option A)
   ============================================================
   Title on its own line; below it a row with "Updated X ago" on
   the left and the Follow button on the right; a soft border below
   to separate header from body.
*/
.tp-article .article-header,
body .tp-article-shell .article-header.tp-article-header {
  /* Grid layout: title spans full width on top row,
     author + subscribe share a second row, vertically centered. */
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-areas:
    "title title"
    "author subscribe" !important;
  align-items: center !important;
  column-gap: 16px !important;
  row-gap: 8px !important;
  margin: 0 0 16px !important;
  padding: 0 0 14px !important;
  border-bottom: none !important;
  float: none !important;
}
.tp-article .article-title,
.tp-article .tp-article-title {
  grid-area: title !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: -0.02em !important;
  color: var(--tp-ink-900) !important;
  line-height: 1.2 !important;
  flex-basis: auto !important;
  display: block !important;
}

/* The author info row contains avatar + meta date.
   Subscribe button is rendered separately by Zendesk.
   Both siblings of the title; CSS grid above places them on the same row. */

.tp-article .article-header .article-author {
  grid-area: author !important;
  display: inline-flex !important;
  align-items: center;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  color: var(--tp-ink-500) !important;
  vertical-align: middle;
  line-height: 1 !important;
}
.tp-article .article-header .article-author .article-avatar {
  display: none !important; /* Hide avatar — only the date matters in clean header */
}
.tp-article .article-header .article-author .article-author-name {
  display: none !important; /* Hide author name — only Updated date is shown */
}
.tp-article .article-header .article-meta {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  color: var(--tp-ink-500) !important;
  line-height: 1 !important;
}
.tp-article .article-header .article-meta time {
  color: var(--tp-ink-500) !important;
}
.tp-article .article-header .meta-data {
  font-size: 13px !important;
  color: var(--tp-ink-500) !important;
  line-height: 1 !important;
}

/* Follow / Subscribe button — vertically centered in its grid cell, right-aligned */
.tp-article .article-header .article-subscribe {
  grid-area: subscribe !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-self: end !important;
}
.tp-article .article-header .article-subscribe button,
.tp-article .article-header .article-subscribe a,
.tp-article .article-subscribe button,
.tp-article .article-subscribe a {
  background: #fff !important;
  border: 1px solid var(--tp-ink-100) !important;
  color: var(--tp-ink-700) !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  text-decoration: none !important;
  line-height: 1.2 !important;
}
.tp-article .article-header .article-subscribe button:hover,
.tp-article .article-header .article-subscribe a:hover,
.tp-article .article-subscribe button:hover,
.tp-article .article-subscribe a:hover {
  border-color: var(--tp-green-700) !important;
  color: var(--tp-green-900) !important;
  background: #fff !important;
}

/* Remove the old clearfix — no longer needed with grid */
.tp-article .article-header::after {
  content: none !important;
  display: none !important;
}

/* Hide author-embedded "Back to Top" anchor links in article body.
   These typically point to #top, #article-container, or #article-header.
   With our sidebar navigation they're redundant. JS in script.js also
   removes the surrounding paragraph if it contained only the link. */
.tp-article .article-body a[href="#top"],
.tp-article .article-body a[href="#article-container"],
.tp-article .article-body a[href="#article-header"],
.tp-article .article-body a[href="#main-content"] {
  display: none !important;
}

/* Tighten gap between article header and first content element.
   Zeros out top margin on the first paragraph/heading inside article body
   so the body sits close to the meta row underneath the header border. */
.tp-article .article-body > *:first-child,
.tp-article .article-body > p:first-child,
.tp-article .article-body > h1:first-child,
.tp-article .article-body > h2:first-child,
.tp-article .article-body > h3:first-child,
.tp-article .article-body > strong:first-child,
.tp-article .article-body > div:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.tp-article .article-content {
  margin: 16px 0 !important;
  padding-top: 0 !important;
}

/* ============================================================
   REUSABLE CALLOUT BLOCK (.callout)
   ============================================================
   For authors to use consistently across articles. Renders as a
   white card with an amber tab attached at the top-left containing
   the callout title.

   Usage:
     <div class="callout" data-title="What makes us different">
       Body text goes here. The title shown in the tab comes from
       the data-title attribute.
     </div>

   Or alternative markup using a child <strong> as the title:
     <div class="callout">
       <strong class="callout-title">What makes us different</strong>
       Body text goes here.
     </div>

   The class works on <div>, <blockquote>, <aside>, or <section>.
*/
.tp-article .article-body .callout {
  position: relative !important;
  background: #fff !important;
  border: 1px solid var(--tp-ink-100) !important;
  border-top: 2px solid var(--tp-accent, #FFAB40) !important;
  border-radius: 0 10px 10px 10px !important;
  padding: 18px 22px !important;
  margin: 40px 0 24px !important;
  color: var(--tp-ink-700) !important;
  font-style: normal !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  box-shadow: none !important;
}
/* Amber tab generated from data-title attribute */
.tp-article .article-body .callout[data-title]::before {
  content: attr(data-title);
  position: absolute;
  top: -28px;
  left: -1px;
  background: var(--tp-accent, #FFAB40);
  color: var(--tp-ink-900);
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 6px 6px 0 0;
  font-family: inherit;
}
/* Alternative: child <strong class="callout-title"> renders as the tab */
.tp-article .article-body .callout > .callout-title:first-child,
.tp-article .article-body .callout > strong.callout-title {
  position: absolute;
  top: -28px;
  left: -1px;
  background: var(--tp-accent, #FFAB40);
  color: var(--tp-ink-900);
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 6px 6px 0 0;
  display: inline-block;
}
/* Reset child element styles inside callout — strip out italic, weird colors,
   inherited text decorations from author-pasted inline styles. */
.tp-article .article-body .callout *:not(.callout-title):not(strong):not(b):not(em):not(i):not(a) {
  background: transparent !important;
  color: inherit !important;
  font-style: normal !important;
}
.tp-article .article-body .callout p {
  margin: 0 !important;
  color: var(--tp-ink-700) !important;
}
.tp-article .article-body .callout p + p {
  margin-top: 10px !important;
}
.tp-article .article-body .callout strong:not(.callout-title),
.tp-article .article-body .callout b:not(.callout-title) {
  color: var(--tp-green-900) !important;
  font-weight: 600 !important;
}
.tp-article .article-body .callout em,
.tp-article .article-body .callout i {
  font-style: italic !important;
}

/* Hygiene: hide empty paragraphs (e.g., leftover <p>&nbsp;</p> or <p></p>
   from author HTML editing). Prevents unwanted gaps in article body. */
.tp-article .article-body p:empty,
.tp-article .article-body p:has(> br:only-child) {
  display: none !important;
}

/* ============================================================
   SEARCH RESULTS PAGE (V2 design)
   ============================================================ */
.tp-search-page {
  background: #fff;
  min-height: 60vh;
}

/* Layout: sidebar + main column */
.tp-search-shell {
  max-width: var(--tp-max-width, 1200px);
  margin: 0 auto;
  padding: 32px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  align-items: start;
}

/* ---------- Sidebar ---------- */
.tp-search-sidebar {
  position: sticky;
  top: 24px;
}
.tp-search-filter-section {
  margin-bottom: 28px;
}
.tp-search-filter-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--tp-ink-500) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 0 0 12px !important;
  padding: 0 10px 8px !important;
  border-bottom: 1px solid var(--tp-ink-100) !important;
}
.tp-search-filter-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tp-search-filter-list li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.tp-search-filter-item,
.tp-search-filter-item:link,
.tp-search-filter-item:visited {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center;
  padding: 8px 10px !important;
  font-size: 13px !important;
  color: var(--tp-ink-700) !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: all 0.15s ease;
}
.tp-search-filter-item:hover {
  background: var(--tp-green-50) !important;
  color: var(--tp-green-900) !important;
  text-decoration: none !important;
}
.tp-search-filter-item.is-active {
  background: var(--tp-green-900) !important;
  color: #fff !important;
  font-weight: 500 !important;
}
.tp-search-filter-name {
  flex: 1;
  text-align: left;
}
.tp-search-filter-count {
  font-size: 12px;
  color: var(--tp-ink-500);
  font-weight: 400;
}
.tp-search-filter-item.is-active .tp-search-filter-count {
  color: rgba(255,255,255,0.7);
}
.tp-search-filter-tag {
  display: flex !important;
  align-items: center;
  gap: 6px;
  background: var(--tp-green-50);
  border: 1px solid var(--tp-green-100);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--tp-green-900);
  margin-bottom: 4px !important;
}
.tp-search-filter-tag-remove {
  display: inline-flex;
  align-items: center;
  color: var(--tp-green-700);
  text-decoration: none !important;
}
.tp-search-filter-tag-remove:hover { color: var(--tp-green-900); }

/* ---------- Main column ---------- */
.tp-search-main {
  min-width: 0;
}

/* AI generative answer panel — Zendesk renders default markup inside.
   We style its outer container and the standard child elements. */
.tp-search-ai-wrap:not(:empty) {
  background: #fff;
  border: 1px solid var(--tp-ink-100);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 0 0 28px;
  position: relative;
}
.tp-search-ai-wrap:empty {
  display: none;
}
/* Override Zendesk's default generative_answers card styling */
.tp-search-ai-wrap .generative-search-answer,
.tp-search-ai-wrap [class*="generative"] {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
/* Header row inside AI panel */
.tp-search-ai-wrap h2,
.tp-search-ai-wrap h3 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--tp-green-900) !important;
  margin: 0 0 12px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tp-search-ai-wrap h2::before,
.tp-search-ai-wrap h3::before {
  content: '✦';
  display: inline-block;
  background: var(--tp-green-900);
  color: var(--tp-accent, #FFAB40);
  font-size: 11px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  border-radius: 50%;
  text-align: center;
  flex-shrink: 0;
}
.tp-search-ai-wrap p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--tp-ink-700) !important;
  margin: 0 0 10px !important;
}
.tp-search-ai-wrap p:last-child { margin-bottom: 0 !important; }
.tp-search-ai-wrap ul,
.tp-search-ai-wrap ol {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--tp-ink-700) !important;
  margin: 0 0 10px !important;
  padding-left: 20px !important;
}
.tp-search-ai-wrap a,
.tp-search-ai-wrap a:link,
.tp-search-ai-wrap a:visited {
  color: var(--tp-green-700) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
.tp-search-ai-wrap a:hover {
  color: var(--tp-green-900) !important;
  text-decoration: underline !important;
}
/* Hide the AI thumbs / feedback if the user wants — keep for now but soften */
.tp-search-ai-wrap button {
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
}

/* Results count heading */
.tp-search-heading {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--tp-ink-500) !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: 0 !important;
}

/* ---------- Result list ---------- */
.tp-search-results {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tp-search-results li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.tp-search-result-link,
.tp-search-result-link:link,
.tp-search-result-link:visited {
  display: flex !important;
  gap: 14px !important;
  padding: 14px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: background 0.15s ease;
  align-items: flex-start;
}
.tp-search-result-link:hover {
  background: var(--tp-ink-50) !important;
  text-decoration: none !important;
}
.tp-search-result-icon {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  background: var(--tp-green-700);
  border-radius: 50%;
  margin-top: 11px;
  margin-right: 4px;
  margin-left: 4px;
}
.tp-search-result-icon svg { display: none !important; }
.tp-search-result-body {
  flex: 1;
  min-width: 0;
}
.tp-search-result-link,
.tp-search-result-link:link,
.tp-search-result-link:visited,
.tp-search-result-link:hover,
.tp-search-result-link:focus,
.tp-search-result-link:active {
  display: flex !important;
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: background 0.15s ease;
  align-items: flex-start;
}
.tp-search-result-link:hover {
  background: var(--tp-ink-50) !important;
  text-decoration: none !important;
}
.tp-search-result-title,
a .tp-search-result-title,
.tp-search-result-link .tp-search-result-title,
.tp-search-result-link:visited .tp-search-result-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--tp-green-900) !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  line-height: 1.35 !important;
  border: 0 !important;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tp-search-result-link:hover .tp-search-result-title {
  color: var(--tp-green-700) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
.tp-search-result-external {
  flex-shrink: 0;
  color: var(--tp-ink-500);
}
.tp-search-result-meta {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--tp-ink-500);
}
.tp-search-result-breadcrumbs {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.tp-search-result-breadcrumbs li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px;
  color: var(--tp-ink-500);
}
.tp-search-result-breadcrumbs li:not(:last-child)::after {
  content: '›';
  margin: 0 6px;
  color: var(--tp-ink-300);
}
.tp-search-result-snippet {
  font-size: 13px !important;
  color: var(--tp-ink-700) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Limit to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tp-search-result-snippet em,
.tp-search-result-snippet b,
.tp-search-result-snippet strong {
  background: rgba(255, 171, 64, 0.18) !important;
  color: var(--tp-ink-900) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  padding: 0 2px !important;
  border-radius: 2px !important;
}
.tp-search-result-stats {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  margin-left: 12px;
}
.tp-search-result-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--tp-ink-500);
}
.tp-search-result-stat svg {
  flex-shrink: 0;
}

/* ---------- No results ---------- */
.tp-search-no-results {
  text-align: center;
  padding: 60px 24px;
}
.tp-search-no-results svg {
  margin: 0 auto 24px;
  display: block;
}
.tp-search-no-results-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--tp-ink-900) !important;
  margin: 0 0 8px !important;
}
.tp-search-no-results-text {
  font-size: 14px !important;
  color: var(--tp-ink-500) !important;
  margin: 0 0 8px !important;
  line-height: 1.5;
}
.tp-search-no-results-text a {
  color: var(--tp-green-700) !important;
  font-weight: 500;
  text-decoration: none !important;
}
.tp-search-no-results-text a:hover {
  color: var(--tp-green-900) !important;
  text-decoration: underline !important;
}

/* ---------- Pagination ---------- */
.tp-search-main .pagination {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--tp-ink-100);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .tp-search-shell {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 24px;
  }
  .tp-search-sidebar {
    position: static;
  }
}


/* ============================================================
   FOOTER — remove the Copenhagen top divider line
   ============================================================
   The borrower theme's footer has no help_center link and (for
   English-only sites) no visible language selector, so the
   Copenhagen `border-top: 1px solid #ddd` rule rendered as a
   stray divider line. Hide it. */
.footer {
  border-top: 0 !important;
}