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

body {
  margin: 0;
}

main {
  display: block;
}

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

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

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

a {
  background-color: transparent;
}

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

b,
strong {
  font-weight: bolder;
}

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

small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

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

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

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

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

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

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

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

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

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

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

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

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

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

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

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

body {
  background-color: #FFFFFF;
  color: #333333;
  font-family: Calibre, "Helvetica Neue", 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: Calibre, "Helvetica Neue", 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: #1F514C;
  text-decoration: none;
}
a:visited {
  color: #1F514C;
}
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 #1F514C;
}
.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 #1F514C;
}
.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 #1F514C;
}

.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 #1F514C;
  border-radius: 4px;
  color: #1F514C;
  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: #1F514C;
}
.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: #1F514C;
  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: #030707;
  border-color: #030707;
}
.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: #1F514C;
  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: #030707;
}
.button-large[disabled], .hbs-form input[type=submit][disabled] {
  background-color: #ddd;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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: #1F514C;
  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: #1F514C;
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .nav-wrapper-mobile {
    display: none;
  }
}
.nav-wrapper-mobile .menu-button-mobile {
  background: none;
  border: 0;
  width: auto;
  min-width: 71px;
  cursor: pointer;
}
.nav-wrapper-mobile .menu-button-mobile .icon-menu {
  padding: 7px;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
  background: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile {
  position: absolute;
  background-color: #fff;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 2;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
  display: block;
}
.nav-wrapper-mobile .menu-list-mobile-items .item {
  margin: 4px 0;
}
.nav-wrapper-mobile .menu-list-mobile-items li:empty:not(.nav-divider) {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  border-bottom: 0.1px solid #ddd;
  padding: 0;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider:last-child {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items button {
  background: none;
  border: none;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: #333333;
  cursor: pointer;
  text-align: start;
}
.nav-wrapper-mobile .menu-list-mobile-items button:active, .nav-wrapper-mobile .menu-list-mobile-items button:focus, .nav-wrapper-mobile .menu-list-mobile-items button:hover {
  background-color: #f3f3f3;
  text-decoration: underline;
}
.nav-wrapper-mobile .menu-list-mobile-items a {
  display: block;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: #333333;
}
.nav-wrapper-mobile .menu-list-mobile-items a:active, .nav-wrapper-mobile .menu-list-mobile-items a:focus, .nav-wrapper-mobile .menu-list-mobile-items a:hover {
  background-color: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile {
  display: flex;
  line-height: 1.5;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile .my-profile-tooltip {
  font-size: 12px;
  color: #68737D;
}
.nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  margin-top: 1px;
}
[dir=rtl] .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  margin-right: 0;
  margin-left: 8px;
}

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

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

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

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

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

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

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

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

/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
  display: flex;
}
@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}
.breadcrumbs li {
  display: inline-block;
  color: #666;
  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: #1F514C;
}

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

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

.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/01J2MKVNSRWBVS5M8XEG2SQNZ8);
  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 #1F514C;
  border-radius: 4px;
  box-sizing: border-box;
  color: #1F514C;
  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: #1F514C;
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: #FFFFFF;
  text-decoration: none;
}
.blocks-item-internal {
  background-color: transparent;
  border: 1px solid #ddd;
}
.blocks-item-internal .icon-lock {
  height: 15px;
  width: 15px;
  bottom: 5px;
  position: relative;
}
.blocks-item-internal a {
  color: #333333;
}
.blocks-item-link {
  color: #1F514C;
  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 #1F514C;
  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/01J2MKVPH81KGKS29S2RDVPPX7);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}
.community a {
  color: #1F514C;
  text-decoration: underline;
}
.community a:visited {
  color: #1F514C;
}
.community a:hover, .community a:active, .community a:focus {
  color: #0B3A36;
}

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

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

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

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

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

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

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

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

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

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

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

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

/***** Attachments *****/
/* Styles attachments inside posts, articles and comments */
.attachments .attachment-item {
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}
.attachments .attachment-item:last-child {
  margin-bottom: 0;
}
.attachments .attachment-item .attachment-icon {
  color: #333333;
  left: 0;
  position: absolute;
  top: 5px;
}
[dir=rtl] .attachments .attachment-item {
  padding-left: 0;
  padding-right: 20px;
}
[dir=rtl] .attachments .attachment-item .attachment-icon {
  left: auto;
  right: 0;
}

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

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

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

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

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

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

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

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

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

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

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

.vote-voted {
  color: #1F514C;
}

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

/***** 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/01J2MKVP5AP8PGW5BTMVF4WF4K);
  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: #1F514C;
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: #FFFFFF;
  color: #FFFFFF;
}
.community-follow button[data-selected=true] {
  background-color: #1F514C;
  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: #030707;
  border-color: #030707;
}
.community-follow button::after {
  border-left: 1px solid #1F514C;
  content: attr(data-follower-count);
  color: #1F514C;
  display: inline-block;
  font-family: Calibre, "Helvetica Neue", 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 #1F514C;
  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: #1F514C;
  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: #1F514C;
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #666;
  font-size: 13px;
  justify-content: flex-start;
  text-transform: capitalize;
}
@media (min-width: 768px) {
  .striped-list-count {
    display: flex;
    flex: 1;
    justify-content: space-around;
  }
}
.striped-list-count-item::after {
  content: "·";
  display: inline-block;
  padding: 0 5px;
}
@media (min-width: 768px) {
  .striped-list-count-item::after {
    display: none;
  }
}
.striped-list-count-item:last-child::after {
  display: none;
}
.striped-list-number {
  text-align: center;
}
@media (min-width: 768px) {
  .striped-list-number {
    color: #333333;
    display: block;
  }
}

/***** Status labels *****/
/* Styles labels used in posts, articles and requests */
.status-label {
  background-color: #038153;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  margin-right: 2px;
  padding: 3px 10px;
  vertical-align: middle;
  white-space: nowrap;
  display: inline-block;
}
.status-label:hover, .status-label:active, .status-label:focus {
  text-decoration: none;
}
.status-label-pinned, .status-label-featured, .status-label-official {
  background-color: #1F514C;
}
.status-label-official {
  border-radius: 0;
  margin-right: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .status-label-official {
    border-radius: 0 0 4px 4px;
    right: 30px;
    width: auto;
  }
}
[dir=rtl] .status-label-official {
  left: 30px;
  right: auto;
}
.status-label-not-planned, .status-label-closed {
  background-color: #e9ebed;
  color: #666;
}
.status-label-pending, .status-label-pending-moderation {
  background-color: #1f73b7;
  text-align: center;
}
.status-label-open {
  background-color: #c72a1c;
}
.status-label-solved {
  background-color: #68737d;
}
.status-label-new {
  background-color: #ffb648;
  color: #703b15;
}
.status-label-hold {
  background-color: #000;
}
.status-label-request {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .status-label-request {
    max-width: 150px;
  }
}

/***** Post *****/
/*
* The post grid is defined this way:
* Content | Sidebar
* 70%     | 30%
*/
.post {
  flex: 1;
  margin-bottom: 10px;
}
@media (min-width: 1024px) {
  .post {
    flex: 1 0 70%;
    max-width: 70%;
  }
}
.post-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .post-container {
    flex-direction: row;
  }
}
.post-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .post-header {
    align-items: baseline;
    flex-direction: row;
  }
}
.post-header .status-label {
  vertical-align: super;
}
.post-title {
  margin-bottom: 20px;
  width: 100%;
}
@media (min-width: 768px) {
  .post-title {
    margin-bottom: 0;
    padding-right: 10px;
  }
}
.post-title h1 {
  display: inline;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .post-title h1 {
    margin-right: 5px;
  }
}
.post-author {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}
.post-avatar {
  margin-bottom: 30px;
}
.post-content {
  font-family: Calibre, "Helvetica Neue", 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: #1F514C;
  text-decoration: underline;
}
.post-body a:visited {
  color: #1F514C;
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: #0B3A36;
}
.post-body img {
  height: auto;
  max-width: 100%;
}
.post-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.post-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.post-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.post-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.post-body figure.image {
  display: table;
  margin: 0 auto;
}
.post-body figure.image > img {
  display: block;
  width: 100%;
}
.post-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.post-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.post-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.post-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.post-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.post-body ul,
.post-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .post-body ul,
[dir=rtl] .post-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.post-body ul > ul,
.post-body ol > ol,
.post-body ol > ul,
.post-body ul > ol,
.post-body li > ul,
.post-body li > ol {
  margin: 0;
}
.post-body ul {
  list-style-type: disc;
}
.post-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.post-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.post-body blockquote {
  border-left: 1px solid #ddd;
  color: #666;
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: #666;
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: #1F514C;
  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 #1F514C;
}

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

.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 #1F514C;
}
.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: #666;
  font-size: 13px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: #666;
}

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

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

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

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

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

.meta-group * {
  display: inline;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/***** Search results *****/
.search-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .search-results {
    flex-direction: row;
  }
}
.search-results-column {
  flex: 1;
}
@media (min-width: 1024px) {
  .search-results-column {
    flex: 0 0 75%;
  }
}
.search-results-sidebar {
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .search-results-sidebar {
    border: 0;
    flex: 0 0 20%;
    height: auto;
  }
}
.search-results-sidebar .sidenav-item {
  border-radius: 4px;
  padding: 10px 36px;
  margin-bottom: 4px;
  color: #333333;
}
.search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current {
  background-color: #e9ebed;
  text-decoration: none;
}
.search-results-sidebar .sidenav-subitem {
  unicode-bidi: embed;
}
.search-results-sidebar .sidenav-tag {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-grow: 0;
}
.search-results-sidebar .sidenav-tag .content-tag {
  background: #E9EBED;
  border-radius: 4px;
  padding: 4px 12px;
  text-decoration: none;
}
.search-results-sidebar .sidenav-tag .content-tag .label {
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  letter-spacing: -0.000427656px;
  color: #49545C;
  flex-grow: 0;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .sidenav-tag .content-tag .close-icon {
  color: #555555;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .collapsible-sidebar {
  margin-bottom: 30px;
}
.search-results-sidebar .collapsible-sidebar[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: #1F514C;
}
.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: #1F514C;
}
.search-results .no-results .action-prompt a:visited {
  color: #1F514C;
}

.search-result-title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-result-title {
  font-size: 16px;
  margin-bottom: 0;
}
.search-result-votes, .search-result-meta-count {
  color: #666;
  font-size: 13px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: #1F514C;
  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/01KEH3GVG5CFJS1RF7W0ESXNE0);
  margin-bottom: 10px;
  height: 320px;
}
.service-catalog-description {
  display: flow-root;
}
.service-catalog-description a {
  color: #1F514C;
  text-decoration: underline;
}
.service-catalog-description a:visited {
  color: #1F514C;
}
.service-catalog-description a:hover, .service-catalog-description a:active, .service-catalog-description a:focus {
  color: #0B3A36;
}
.service-catalog-description img {
  height: auto;
  max-width: 100%;
}
.service-catalog-description p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.service-catalog-description p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.service-catalog-description p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.service-catalog-description p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.service-catalog-description figure.image {
  display: table;
  margin: 0 auto;
}
.service-catalog-description figure.image > img {
  display: block;
  width: 100%;
}
.service-catalog-description figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.service-catalog-description figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.service-catalog-description figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.service-catalog-description figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.service-catalog-description figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.service-catalog-description ul,
.service-catalog-description ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .service-catalog-description ul,
[dir=rtl] .service-catalog-description ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.service-catalog-description ul > ul,
.service-catalog-description ol > ol,
.service-catalog-description ol > ul,
.service-catalog-description ul > ol,
.service-catalog-description li > ul,
.service-catalog-description li > ol {
  margin: 0;
}
.service-catalog-description ul {
  list-style-type: disc;
}
.service-catalog-description :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.service-catalog-description pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.service-catalog-description blockquote {
  border-left: 1px solid #ddd;
  color: #666;
  font-style: italic;
  padding: 0 15px;
}
.service-catalog-main-content {
  display: flex;
  gap: 32px;
}
.service-catalog-list {
  width: 100%;
}
.service-catalog-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 20px;
}

.is-service-catalog-preview #navbar-container,
.is-service-catalog-preview .navbar-container,
.is-service-catalog-preview .assembly-bar,
.is-service-catalog-preview [data-garden-id="chrome.subnav"] {
  display: none !important;
}
/* ==========================================================================
   TRUE LINK THEME LAYER
   --------------------------------------------------------------------------
   Everything above this banner is stock Zendesk Copenhagen 4.49.0.
   Everything below is True Link's design layer. Keep it in this order — the
   overrides depend on coming last. Colours follow the True Link style guide:

     Emerald    #0D875C   accents, CTAs. NEVER on text below 18px.
     Evergreen  #1F514C   text accents at any size, dark backgrounds
     Grey       #F9F9F8   page backgrounds
     Teal/Sky/Mist/Lemon/Lime   illustration + texture only
     Blue #164AD4 info · Red #C94841 error · Orange #BF5A00 warning
     Grey-1 #333 text · Grey-2 #4F4F4F rules · Grey-3 #828282 disabled
     Grey-4 #BDBDBD borders · Grey-5 #E0E0E0
   ========================================================================== */

:root {
  --tl-emerald: #0d875c;
  --tl-emerald-dark: #0a6e4b;
  --tl-evergreen: #1f514c;
  --tl-evergreen-dark: #0b3a36;
  --tl-evergreen-tint: #f2f7f6;
  --tl-grey-bg: #f9f9f8;
  --tl-teal: #77d8d8;
  --tl-sky: #b7eeed;
  --tl-mist: #dafaf7;
  --tl-lemon: #ffea71;
  --tl-lime: #62bb45;
  --tl-blue: #164ad4;
  --tl-blue-tint: #eef2fd;
  --tl-red: #c94841;
  --tl-red-tint: #fdf1f0;
  --tl-orange: #bf5a00;
  --tl-orange-tint: #fdf4ea;
  --tl-grey-1: #333333;
  --tl-grey-2: #4f4f4f;
  --tl-grey-3: #828282;
  --tl-grey-4: #bdbdbd;
  --tl-grey-5: #e0e0e0;

  /* Type — True Link style guide. Calibre has Regular (400) and Semibold
     (600) only; never ask for 700, it would be synthesised. */
  --tl-font: Calibre, "Helvetica Neue", Arial, sans-serif;
  --tl-font-heading: Calibre, "Helvetica Neue", Arial, sans-serif;
  --tl-font-button: Calibre, "Helvetica Neue", Arial, sans-serif;
  --tl-weight-semibold: 600;

  --tl-size-h1: 46px;      /* guide H1, 1.2 */
  --tl-size-h2: 36px;      /* guide H2, 1.2 */
  --tl-size-h3: 28px;      /* guide H3, 1.3 */
  --tl-size-body-lg: 24px; /* guide Body Large, 1.3 */
  --tl-size-body: 20px;    /* guide Body Regular, 1.3 */
  --tl-size-small: 18px;   /* guide Body Small, 1.4 */
  --tl-size-button: 16px;  /* guide Web Button, 1.3 */
  /* The guide stops at 18px. These two are interface chrome it doesn't
     cover — breadcrumbs, counts, eyebrow labels, rail links. */
  --tl-size-chrome: 16px;
  --tl-size-meta: 15px;

  /* Body copy at the guide's 1.3 is tight for multi-paragraph articles, so
     long-form prose uses 1.5. Change this one value for strict 1.3. */
  --tl-leading-prose: 1.5;

  /* Buttons are near-square in the guide; cards and panels are softer. */
  --tl-radius: 8px;
  --tl-radius-sm: 4px;
  --tl-shadow-sm: 0 1px 2px rgba(31, 81, 76, 0.06), 0 2px 6px rgba(31, 81, 76, 0.05);
  --tl-shadow-md: 0 2px 4px rgba(31, 81, 76, 0.07), 0 8px 24px rgba(31, 81, 76, 0.08);
  --tl-measure: 68ch;
  --tl-header-height: 75px;
}

/* --------------------------------------------------------------------------
   1. Base and typography
   -------------------------------------------------------------------------- */

body {
  color: var(--tl-grey-1);
  font-family: var(--tl-font);
  font-size: var(--tl-size-body);
  line-height: var(--tl-leading-prose);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--tl-evergreen);
  font-family: var(--tl-font-heading);
  font-weight: var(--tl-weight-semibold);
  line-height: 1.2;
}

h3, h4, h5, h6 {
  line-height: 1.3;
}

/* Calibre has no 700 weight — keep every bold at Semibold so the browser
   never synthesises one. */
strong,
b,
th {
  font-weight: var(--tl-weight-semibold);
}

a {
  text-underline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--tl-emerald);
  outline-offset: 2px;
  border-radius: 3px;
}

.container {
  max-width: 1240px;
}

@media (min-width: 1240px) {
  .container {
    padding: 0;
    width: 92%;
  }
}

.container-divider {
  border: 0;
}

/* --------------------------------------------------------------------------
   2. Header
   -------------------------------------------------------------------------- */

.header {
  background: #ffffff;
  border-bottom: 1px solid var(--tl-grey-5);
  display: block;
  height: auto;
  max-width: none;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 40;
}

.header-inner {
  align-items: center;
  display: flex;
  height: var(--tl-header-height);
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1240px;
  padding: 0 5%;
}

@media (min-width: 1240px) {
  .header-inner {
    padding: 0;
    width: 92%;
  }
}

.header .logo {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.header .logo img {
  display: block;
  max-height: 34px;
  width: auto;
}

.logo-divider {
  background: var(--tl-grey-5);
  display: none;
  height: 24px;
  width: 1px;
}

.header .logo .logo-kicker {
  color: var(--tl-grey-2);
  display: none;
  font-size: var(--tl-size-chrome);
  font-weight: var(--tl-weight-semibold);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.logo-kicker:hover {
  color: var(--tl-evergreen);
}

@media (min-width: 768px) {
  .logo-divider,
  .header .logo .logo-kicker {
    display: block;
  }
}

.nav-wrapper-desktop {
  align-items: center;
  display: none;
  gap: 10px;
}

@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: flex;
  }

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

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

.user-nav-list .nav-link {
  border-radius: var(--tl-radius-sm);
  color: var(--tl-grey-2);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--tl-size-chrome);
  font-weight: var(--tl-weight-semibold);
  padding: 10px 10px;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.user-nav-list .nav-link:hover {
  background: var(--tl-evergreen-tint);
  color: var(--tl-evergreen);
}

.user-nav-list .nav-link-button {
  background: var(--tl-evergreen);
  color: #ffffff;
  margin-left: 10px;
}

.user-nav-list .nav-link-button:hover,
.user-nav-list .nav-link-button:focus {
  background: var(--tl-evergreen-dark);
  color: #ffffff;
  text-decoration: none;
}

.nav-link-icon {
  flex: 0 0 auto;
  opacity: 0.85;
}

.menu-button-mobile {
  border: 1px solid var(--tl-grey-5);
  border-radius: var(--tl-radius-sm);
  color: var(--tl-evergreen);
  padding: 10px 10px;
}

.menu-list-mobile {
  border-radius: var(--tl-radius);
  box-shadow: var(--tl-shadow-md);
}

.menu-list-mobile .item a {
  font-size: var(--tl-size-chrome);
  font-weight: var(--tl-weight-semibold);
}

/* --------------------------------------------------------------------------
   3. Hero
   -------------------------------------------------------------------------- */

.hero {
  background-color: var(--tl-evergreen);
  background-image: none;
  height: auto;
  padding: 55px 5% 60px;
  position: relative;
  text-align: center;
}

.hero-inner {
  display: block;
  margin: 0 auto;
  max-width: 720px;
  padding: 0;
  /* Copenhagen vertically centres the hero inside a fixed 300px band. This
     hero grows with its content, so undo the centring. */
  position: static;
  top: auto;
  transform: none;
}

.hero-heading {
  color: #ffffff;
  font-size: var(--tl-size-h3);
  font-weight: var(--tl-weight-semibold);
  line-height: 1.2;
  margin: 0 0 10px;
}

@media (min-width: 768px) {
  .hero-heading {
    font-size: var(--tl-size-h1);
  }
}

.hero-subheading {
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--tl-size-body);
  margin: 0 auto 30px;
  max-width: 34em;
}

.hero-search {
  position: relative;
}

/* Copenhagen draws a 1px pill border on the search FORM and a second rounded
   white box on the input inside it. Styling only the input leaves both frames
   visible and mismatched, so the form is the control here and the input is a
   plain transparent field inside it. */
.search {
  background: #ffffff;
  border-color: var(--tl-grey-4);
  border-radius: var(--tl-radius-sm);
  overflow: hidden;
}

.search:focus-within {
  border-color: var(--tl-emerald);
  box-shadow: 0 0 0 3px rgba(13, 135, 92, 0.16);
}

.search input[type="search"],
.search .clear-button {
  background-color: transparent;
  border-radius: 0;
}

.search input[type="search"] {
  font-family: var(--tl-font);
  font-size: var(--tl-size-chrome);
  height: 45px;
}

.search input[type="search"]::placeholder {
  color: var(--tl-grey-2);
}

/* The clear button is a flex sibling of the input, not an overlay. */
.search .clear-button:hover {
  background-color: var(--tl-grey-5);
  color: var(--tl-grey-1);
}

.search .clear-button:focus {
  box-shadow: none;
  outline: 2px solid var(--tl-emerald);
  outline-offset: -2px;
}

/* Hero: no border, a soft shadow instead, and a taller field. */
.hero .search {
  border: 0;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
}

.hero .search:focus-within {
  box-shadow: 0 0 0 4px rgba(119, 216, 216, 0.55), 0 6px 24px rgba(0, 0, 0, 0.16);
}

.hero .search input[type="search"] {
  font-size: var(--tl-size-body);
  height: 60px;
}

.hero .search-icon {
  color: var(--tl-grey-2);
  height: 20px;
  left: 20px;
  width: 20px;
  z-index: 2;
}

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

.hero-quick-links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 25px;
}

.hero-quick-links-label {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--tl-size-chrome);
  font-weight: var(--tl-weight-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hero-quick-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero-quick-links a {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--tl-radius-sm);
  color: #ffffff;
  display: inline-block;
  font-size: var(--tl-size-chrome);
  font-weight: var(--tl-weight-semibold);
  padding: 5px 15px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.hero-quick-links a:hover {
  background: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   4. Home page: promoted articles and topic tiles
   -------------------------------------------------------------------------- */

.home-section-title {
  font-size: var(--tl-size-chrome);
  font-weight: var(--tl-weight-semibold);
  letter-spacing: 0.06em;
  margin: 0 0 20px;
  text-transform: uppercase;
}

.section.home-promoted {
  margin-top: 45px;
}

.promoted-articles {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .promoted-articles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Copenhagen lays these out as three flex columns with their own padding.
   Reset that so the grid above controls the layout. */
.promoted-articles-item,
.promoted-articles-item:nth-child(3n) {
  align-self: stretch;
  flex: none;
  margin: 0;
  padding: 0;
  width: auto;
}

.promoted-articles-item a,
.promoted-articles-item:last-child a {
  align-items: center;
  background: var(--tl-grey-bg);
  border: 1px solid var(--tl-grey-5);
  border-radius: var(--tl-radius);
  color: var(--tl-evergreen);
  display: flex;
  font-weight: var(--tl-weight-semibold);
  gap: 10px;
  min-height: 100%;
  padding: 15px 20px;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.promoted-articles-item a:hover {
  border-color: var(--tl-emerald);
  box-shadow: var(--tl-shadow-sm);
  color: var(--tl-evergreen);
  transform: translateY(-1px);
}

.promoted-articles-title {
  flex: 1 1 auto;
}

.promoted-articles-item .chevron-right {
  color: var(--tl-emerald);
  flex: 0 0 auto;
}

.section.knowledge-base {
  margin-top: 45px;
}

.kb-category {
  margin-bottom: 40px;
}

.kb-category-title {
  font-size: var(--tl-size-body-lg);
  margin: 0 0 5px;
}

.kb-category-title a {
  color: var(--tl-evergreen);
  text-decoration: none;
}

.kb-category-description {
  color: var(--tl-grey-2);
  margin: 0 0 20px;
}

/* Only one category: its name duplicates the page, so hide the heading. */
.kb-category:only-of-type > .kb-category-title,
.kb-category:only-of-type > .kb-category-description {
  display: none;
}

/* Six tracks rather than three, with each tile spanning two. Thirds AND halves
   are then both expressible, which is what lets the last row absorb leftovers:
   one leftover stretches across the whole row, two split it down the middle.
   The count of sections is whatever Zendesk gives us, so this has to be
   arithmetic on :nth-child rather than a hard-coded layout.

   With N tiles at three per row, a tile is first in its row when its index is
   3n+1 — so a :last-child that is also 3n+1 is a lone leftover, and a
   :nth-last-child(2) that is 3n+1 starts a row of two. */
.blocks-list {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.blocks-item {
  grid-column: span 6; /* one per row */
}

@media (min-width: 640px) {
  .blocks-item {
    grid-column: span 3; /* two per row */
  }

  .blocks-item:last-child:nth-child(2n+1) {
    grid-column: span 6; /* lone leftover fills the row */
  }
}

@media (min-width: 1024px) {
  /* Three per row, and the two-up leftover rule above no longer applies. */
  .blocks-item,
  .blocks-item:last-child:nth-child(2n+1) {
    grid-column: span 2;
  }

  .blocks-item:last-child:nth-child(3n+1) {
    grid-column: span 6; /* one leftover: full row */
  }

  .blocks-item:nth-last-child(2):nth-child(3n+1),
  .blocks-item:nth-last-child(2):nth-child(3n+1) + .blocks-item {
    grid-column: span 3; /* two leftovers: half each */
  }
}

/* Copenhagen paints the hover fill on the <li> (`.blocks-item:hover
   { background-color: #1F514C }`), not on the link inside it. Left alone,
   that fill is a separate square layer behind our rounded card, so the green
   never traces the card's shape. Neutralise it: `.blocks-item-link` is the only
   surface that paints, and it carries the border-radius, so its background is
   clipped to exactly the card outline. */
.blocks-item {
  background-color: transparent;
  border: 0;
  border-radius: var(--tl-radius);
  display: block;
  flex: none;
  height: auto;
  margin: 0;
  max-width: none;
  text-align: left;
}

.blocks-item:hover,
.blocks-item:focus,
.blocks-item:active,
.blocks-item:focus-within {
  background-color: transparent;
}

.blocks-item-link {
  align-items: flex-start;
  /* Copenhagen stacks the contents of this link in a column. */
  flex-direction: row;
  justify-content: flex-start;
  background: #ffffff;
  border: 1px solid var(--tl-grey-5);
  border-radius: var(--tl-radius);
  color: var(--tl-grey-1);
  display: flex;
  gap: 15px;
  height: 100%;
  padding: 20px;
  text-align: left;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, transform 0.15s ease;
}

.blocks-item-link .chevron-right {
  color: var(--tl-grey-4);
  flex: 0 0 auto;
  /* Sits at the far right even when the text is capped on a full-width tile. */
  margin-left: auto;
  margin-top: 5px;
  transition: color 0.15s ease, transform 0.15s ease;
}

.blocks-item-link:hover .chevron-right,
.blocks-item-link:focus .chevron-right {
  transform: translateX(2px);
}

.blocks-item-link:hover,
.blocks-item-link:focus {
  background: var(--tl-evergreen);
  border-color: var(--tl-evergreen);
  box-shadow: var(--tl-shadow-md);
  text-decoration: none;
  transform: translateY(-2px);
}

.blocks-item-link:hover .blocks-item-title,
.blocks-item-link:focus .blocks-item-title,
.blocks-item-link:hover .chevron-right,
.blocks-item-link:focus .chevron-right {
  color: #ffffff;
}

.blocks-item-link:hover .blocks-item-description,
.blocks-item-link:focus .blocks-item-description {
  color: rgba(255, 255, 255, 0.9);
}

.blocks-item-link:hover .blocks-item-count,
.blocks-item-link:focus .blocks-item-count {
  color: rgba(255, 255, 255, 0.72);
}

.blocks-item-body {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  /* No-op at a third of the row; keeps line length sane on a full-width tile. */
  max-width: 70ch;
}

.blocks-item-title {
  color: var(--tl-evergreen);
  display: block;
  font-size: var(--tl-size-body);
  font-weight: var(--tl-weight-semibold);
  line-height: 1.3;
  margin-bottom: 5px;
  transition: color 0.15s ease;
}

.blocks-item-description {
  color: var(--tl-grey-2);
  display: block;
  font-size: var(--tl-size-small);
  line-height: 1.4;
  max-height: none;
  overflow: visible;
  transition: color 0.15s ease;
}

.blocks-item-count {
  color: var(--tl-grey-2);
  display: block;
  font-size: var(--tl-size-meta);
  font-weight: var(--tl-weight-semibold);
  letter-spacing: 0.02em;
  margin-top: 10px;
  text-transform: uppercase;
  transition: color 0.15s ease;
}

/* --------------------------------------------------------------------------
   5. Sub navigation, breadcrumbs, page headers
   -------------------------------------------------------------------------- */

.sub-nav {
  align-items: center;
  border-bottom: 1px solid var(--tl-grey-5);
  gap: 15px;
  margin-bottom: 30px;
  padding: 20px 0;
}

.breadcrumbs {
  flex-wrap: wrap;
  row-gap: 5px;
}

.breadcrumbs li {
  color: var(--tl-grey-2);
  font-size: var(--tl-size-chrome);
  max-width: 100%;
}

.breadcrumbs li a {
  color: var(--tl-grey-2);
  font-weight: var(--tl-weight-semibold);
  text-decoration: none;
}

.breadcrumbs li a:hover {
  color: var(--tl-evergreen);
  text-decoration: underline;
}

.breadcrumbs li:last-child a {
  color: var(--tl-grey-2);
  font-weight: 400;
}

.sub-nav .search-icon {
  left: 15px;
}

.page-header {
  align-items: flex-start;
  border-bottom: 1px solid var(--tl-grey-5);
  display: flex;
  flex-direction: row;
  gap: 15px;
  margin: 0 0 10px;
  padding-bottom: 25px;
}

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

.page-header h1 {
  font-size: var(--tl-size-h3);
  margin: 0 0 10px;
}

@media (min-width: 768px) {
  .page-header h1 {
    font-size: var(--tl-size-h2);
  }
}

.page-header-description {
  color: var(--tl-grey-2);
  font-size: var(--tl-size-body-lg);
  font-style: normal;
  line-height: 1.3;
  margin: 0;
  max-width: 46ch;
}

.page-header-count {
  color: var(--tl-grey-2);
  font-size: var(--tl-size-meta);
  font-weight: var(--tl-weight-semibold);
  letter-spacing: 0.03em;
  margin: 10px 0 0;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   6. Article lists (section page) and section tree (category page)
   -------------------------------------------------------------------------- */

/* Copenhagen pushes section and category content into the right 80% of the
   row, leaving an empty 20% gutter on the left where a sidebar used to be.
   Reclaim the full width and cap the list itself for line length instead. */
.section-container,
.category-container {
  display: block;
}

.section-content,
.category-content {
  flex: none;
  max-width: none;
  width: auto;
}

.section-content .article-list,
.section-list {
  border: 0;
  list-style: none;
  margin: 20px 0 0;
  max-width: 920px;
  padding: 0;
}

.section-content .article-list-item {
  border-bottom: 1px solid var(--tl-grey-5);
  font-size: var(--tl-size-small);
  overflow: visible;
  padding: 0;
}

.section-content .article-list-item:first-child {
  border-top: 1px solid var(--tl-grey-5);
}

.section-content .article-list-link {
  align-items: center;
  color: var(--tl-grey-1);
  display: flex;
  gap: 15px;
  padding: 20px 10px 20px 5px;
  text-decoration: none;
  transition: background-color 0.12s ease, padding-left 0.12s ease;
}

.section-content .article-list-link:hover {
  background: var(--tl-evergreen-tint);
  padding-left: 10px;
}

.article-list-text {
  flex: 1 1 auto;
  min-width: 0;
}

.article-list-title {
  color: var(--tl-evergreen);
  display: block;
  font-size: var(--tl-size-small);
  font-weight: var(--tl-weight-semibold);
}

.section-content .article-list-link:hover .article-list-title {
  text-decoration: underline;
}

/* Zendesk's `snippet` is already an excerpt, but its length varies. Clamp to
   two lines so the rows in a section stay even. */
.article-list-excerpt {
  color: var(--tl-grey-2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: var(--tl-size-small);
  line-height: 1.4;
  margin-top: 5px;
  overflow: hidden;
}

.section-content .article-list-link .chevron-right {
  color: var(--tl-grey-4);
  flex: 0 0 auto;
}

.section-content .article-list-link:hover .chevron-right {
  color: var(--tl-emerald);
}

.article-promoted .article-list-title {
  align-items: center;
  display: flex;
  gap: 10px;
}

.section-list-item {
  border-bottom: 1px solid var(--tl-grey-5);
}

.section-list-item a {
  color: var(--tl-evergreen);
  font-weight: var(--tl-weight-semibold);
  padding: 15px 5px;
}

.section-tree {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
  margin-top: 30px;
}

@media (min-width: 768px) {
  .section-tree {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.section-tree-item {
  background: #ffffff;
  border: 1px solid var(--tl-grey-5);
  border-radius: var(--tl-radius);
  padding: 20px;
}

.section-tree-title {
  font-size: var(--tl-size-body);
  margin: 0 0 5px;
}

.section-tree-title a {
  color: var(--tl-evergreen);
  text-decoration: none;
}

.section-tree-title a:hover {
  text-decoration: underline;
}

.section-tree-description {
  color: var(--tl-grey-2);
  font-size: var(--tl-size-chrome);
  margin: 0 0 10px;
}

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

.article-list-compact .article-list-item {
  border: 0;
  font-size: var(--tl-size-chrome);
  padding: 0;
}

.article-list-compact .article-list-link {
  align-items: center;
  color: var(--tl-grey-1);
  display: flex;
  gap: 10px;
  padding: 5px 0;
  text-decoration: none;
}

.article-list-compact .article-list-link:hover {
  color: var(--tl-evergreen);
  text-decoration: underline;
}

.see-all-articles {
  display: inline-block;
  font-size: var(--tl-size-chrome);
  font-weight: var(--tl-weight-semibold);
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   7. Article page layout — the three column grid
   -------------------------------------------------------------------------- */

.article-container {
  display: block;
}

@media (min-width: 1024px) {
  .article-container {
    align-items: start;
    display: grid;
    gap: 40px;
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  }

  .article-sidebar {
    grid-column: 1;
    grid-row: 1;
  }

  .article {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (min-width: 1200px) {
  .article-container {
    gap: 50px;
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr) 220px;
  }

  .article-toc {
    display: block;
    grid-column: 3;
    grid-row: 1;
  }
}

.article {
  flex: none;
  max-width: none;
  min-width: 0;
  padding: 0;
}

@media (min-width: 1024px) {
  .article {
    flex: none;
    max-width: none;
    min-width: 0;
    padding: 0;
  }
}

/* --- left rail: other articles in this section --- */

.article-sidebar {
  min-width: 0;
}

@media (min-width: 1024px) {
  /* Copenhagen sizes this rail as a flex child at 17%; inside the grid that
     percentage resolves against the 240px track and collapses it. */
  .article-sidebar {
    flex: none;
    max-width: none;
    width: auto;
  }

  .article-sidebar {
    position: sticky;
    top: calc(var(--tl-header-height) + 20px);
    max-height: calc(100vh - var(--tl-header-height) - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.collapsible-sidebar-title.sidenav-title {
  color: var(--tl-grey-2);
  font-size: var(--tl-size-meta);
  font-weight: var(--tl-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.article-sidebar .collapsible-sidebar-body ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.article-sidebar .sidenav-item {
  border-left: 2px solid var(--tl-grey-5);
  color: var(--tl-grey-2);
  display: block;
  font-size: var(--tl-size-chrome);
  line-height: 1.45;
  padding: 10px 10px 10px 15px;
  text-decoration: none;
  transition: border-color 0.12s ease, color 0.12s ease, background-color 0.12s ease;
}

.article-sidebar .sidenav-item:hover {
  background: var(--tl-evergreen-tint);
  border-left-color: var(--tl-grey-4);
  color: var(--tl-evergreen);
}

.article-sidebar .sidenav-item.current-article {
  background: var(--tl-evergreen-tint);
  border-left-color: var(--tl-emerald);
  color: var(--tl-evergreen);
  font-weight: var(--tl-weight-semibold);
}

.article-sidebar-item {
  display: inline-block;
  font-size: var(--tl-size-chrome);
  font-weight: var(--tl-weight-semibold);
  margin: 10px 0 0 15px;
}

/* --- right rail: in-article contents --- */

.article-toc {
  min-width: 0;
}

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

.article-toc-inner {
  border-left: 1px solid var(--tl-grey-5);
  padding-left: 20px;
}

/* The sticky element has to be the grid item itself. Sticking the inner box
   instead gives it a containing block only as tall as its own content, so it
   would have nowhere to travel and would simply scroll away. */
@media (min-width: 1200px) {
  .article-toc {
    max-height: calc(100vh - var(--tl-header-height) - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    position: sticky;
    top: calc(var(--tl-header-height) + 20px);
  }
}

.article-toc-title {
  color: var(--tl-grey-2);
  font-size: var(--tl-size-meta);
  font-weight: var(--tl-weight-semibold);
  letter-spacing: 0.05em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

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

.article-toc-list a {
  color: var(--tl-grey-2);
  display: block;
  font-size: var(--tl-size-meta);
  line-height: 1.4;
  padding: 5px 0;
  text-decoration: none;
}

.article-toc-list a:hover {
  color: var(--tl-evergreen);
  text-decoration: underline;
}

.article-toc-list a.is-active {
  color: var(--tl-evergreen);
  font-weight: var(--tl-weight-semibold);
}

.article-toc-list .toc-level-3 a {
  font-size: var(--tl-size-chrome);
  padding-left: 15px;
}

/* On tablet and phone the contents box sits above the article. */
@media (max-width: 1199px) {
  .article-toc {
    grid-column: 2;
    background: var(--tl-grey-bg);
    border: 1px solid var(--tl-grey-5);
    border-radius: var(--tl-radius);
    margin: 0 0 30px;
    padding: 15px 20px;
  }

  .article-toc-inner {
    border-left: 0;
    padding-left: 0;
  }

  .article-toc-list {
    columns: 2;
    column-gap: 25px;
  }
}

@media (max-width: 640px) {
  .article-toc-list {
    columns: 1;
  }
}

/* --------------------------------------------------------------------------
   8. Article header and body
   -------------------------------------------------------------------------- */

.article-header {
  display: block;
  margin: 0 0 30px;
}

.article-title {
  font-size: var(--tl-size-h3);
  font-weight: var(--tl-weight-semibold);
  line-height: 1.2;
  margin: 0 0 10px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

@media (min-width: 768px) {
  .article-title {
    font-size: var(--tl-size-h2);
  }
}

.article-author {
  margin: 0;
}

.article-meta .meta-group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 15px;
}

.article-meta .meta-data {
  color: var(--tl-grey-2);
  font-size: var(--tl-size-chrome);
}

.article-meta .meta-data::after {
  content: none;
}

.article-reading-time[hidden] {
  display: none;
}

.article-info {
  border: 0;
  padding: 0;
}

.article-body {
  font-size: var(--tl-size-body);
  line-height: var(--tl-leading-prose);
  max-width: var(--tl-measure);
}

.article-body > *:first-child {
  margin-top: 0;
}

.article-body p,
.article-body ul,
.article-body ol {
  margin: 0 0 1.15em;
}

/* The house style opens with "In this article, you'll learn…" — that lede
   gets a little more presence, but only when it is asked for.

   This used to match `.article-body > p:first-of-type`, which silently sized
   the opening paragraph of EVERY article at Body Large, including the many
   that open with ordinary body copy. Opt a paragraph in from the editor's
   source view instead:

     <p class="tl-lede">In this article, you'll learn…</p> */
.article-body > p.tl-lede {
  color: var(--tl-grey-2);
  font-size: var(--tl-size-body-lg);
  line-height: 1.35;
}

/* Legacy pasted font sizes.

   Articles written before this theme carry inline sizes baked in by whatever
   they were pasted from — Google Docs, Word, Outlook, Slack — usually
   `font-size: 15px` or `11pt`, matching stock Copenhagen's 15px base. Stock
   Copenhagen set no size on `.article-body`, so those paragraphs and their
   unstyled neighbours all rendered identically and nothing looked wrong. This
   theme sets Body Regular (20px) on `.article-body`, so a hardcoded paragraph
   now stays behind at 15px while the paragraph above it moves to 20px, and the
   article renders at two or three different sizes.

   An inline style only loses to `!important`, hence the flag. Scoped to prose
   containers and their descendants so headings, which legitimately carry their
   own sizes, are left alone. Any DELIBERATE inline sizing inside a paragraph
   is also neutralised — that is the intended trade: the token scale in this
   file is the single source of truth for body copy. */
.article-body p[style*="font-size"],
.article-body p [style*="font-size"],
.article-body li[style*="font-size"],
.article-body li [style*="font-size"],
.article-body td[style*="font-size"],
.article-body td [style*="font-size"],
.article-body th[style*="font-size"],
.article-body th [style*="font-size"],
.article-body blockquote[style*="font-size"],
.article-body blockquote [style*="font-size"] {
  font-size: inherit !important;
}

/* Same problem, older markup: <font size="2">. */
.article-body font[size] {
  font-size: inherit !important;
}

.article-body h2 {
  font-size: var(--tl-size-h3);
  font-weight: var(--tl-weight-semibold);
  line-height: 1.3;
  margin: 45px 0 15px;
  scroll-margin-top: calc(var(--tl-header-height) + 25px);
}

.article-body h3 {
  font-size: var(--tl-size-body-lg);
  font-weight: var(--tl-weight-semibold);
  line-height: 1.3;
  margin: 35px 0 10px;
  scroll-margin-top: calc(var(--tl-header-height) + 25px);
}

.article-body h4 {
  font-size: var(--tl-size-body);
  font-weight: var(--tl-weight-semibold);
  line-height: 1.3;
  margin: 30px 0 10px;
  scroll-margin-top: calc(var(--tl-header-height) + 25px);
}

.article-body h2 + h3 {
  margin-top: 20px;
}

.article-body a {
  color: var(--tl-evergreen);
  font-weight: var(--tl-weight-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.article-body a:hover {
  color: var(--tl-evergreen-dark);
  text-decoration-thickness: 2px;
}

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

.article-body ul,
.article-body ol {
  padding-left: 1.35em;
}

.article-body li {
  margin-bottom: 0.5em;
}

.article-body li > ul,
.article-body li > ol {
  margin-top: 0.5em;
}

/* Numbered steps: one action per step, so make the numbers easy to track. */
.article-body ol {
  counter-reset: tl-step;
  list-style: none;
  padding-left: 0;
}

.article-body ol > li {
  counter-increment: tl-step;
  padding-left: 45px;
  position: relative;
}

.article-body ol > li::before {
  align-items: center;
  background: var(--tl-evergreen-tint);
  border: 1px solid #d5e5e2;
  border-radius: 50%;
  color: var(--tl-evergreen);
  content: counter(tl-step);
  display: flex;
  font-size: var(--tl-size-chrome);
  font-weight: var(--tl-weight-semibold);
  height: 28px;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0.05em;
  width: 28px;
}

/* Nested ordered lists fall back to plain letters. */
.article-body ol ol {
  counter-reset: none;
  list-style: lower-alpha;
  padding-left: 1.35em;
}

.article-body ol ol > li {
  counter-increment: none;
  padding-left: 0;
}

.article-body ol ol > li::before {
  content: none;
}

.article-body ul {
  list-style: none;
  padding-left: 0;
}

.article-body ul > li {
  padding-left: 25px;
  position: relative;
}

.article-body ul > li::before {
  background: var(--tl-emerald);
  border-radius: 50%;
  content: "";
  height: 7px;
  left: 7px;
  position: absolute;
  top: 0.62em;
  width: 7px;
}

.article-body ul ul > li::before {
  background: transparent;
  border: 1.5px solid var(--tl-emerald);
}

/* Images and screenshots */
.article-body img {
  border: 1px solid var(--tl-grey-5);
  border-radius: var(--tl-radius-sm);
  box-shadow: var(--tl-shadow-sm);
  display: block;
  height: auto;
  margin: 1.5em 0;
  max-width: 100%;
}

.article-body img.tl-zoomable {
  cursor: zoom-in;
}

.article-body p > img:only-child {
  margin: 1.5em 0;
}

/* Inline icons and emoji shouldn't get a frame. */
.article-body img[width="16"],
.article-body img[width="20"],
.article-body img[width="24"],
.article-body img[height="16"],
.article-body img[height="20"],
.article-body img[height="24"] {
  border: 0;
  box-shadow: none;
  display: inline;
  margin: 0;
}

/* Videos and embeds */
.article-body iframe {
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--tl-radius);
  box-shadow: var(--tl-shadow-md);
  display: block;
  height: auto;
  margin: 1.75em 0;
  max-width: 100%;
  width: 100%;
}

/* Tables — the fee tables need real structure */
.tl-table-scroll {
  margin: 1.75em 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.article-body table {
  border-collapse: collapse;
  font-size: var(--tl-size-chrome);
  margin: 1.75em 0;
  width: 100%;
}

.tl-table-scroll > table {
  margin: 0;
}

.article-body th,
.article-body td {
  border: 1px solid var(--tl-grey-5);
  padding: 10px 15px;
  text-align: left;
  vertical-align: top;
}

.article-body thead th,
.article-body tr:first-child th {
  background: var(--tl-evergreen-tint);
  border-bottom: 2px solid var(--tl-evergreen);
  color: var(--tl-evergreen);
  font-weight: var(--tl-weight-semibold);
}

.article-body tbody tr:nth-child(even) {
  background: var(--tl-grey-bg);
}

.article-body code {
  background: var(--tl-grey-bg);
  border: 1px solid var(--tl-grey-5);
  border-radius: 4px;
  font-size: 0.9em;
  padding: 5px 5px;
}

.article-body pre {
  background: var(--tl-grey-bg);
  border: 1px solid var(--tl-grey-5);
  border-radius: var(--tl-radius-sm);
  overflow-x: auto;
  padding: 15px 15px;
}

.article-body hr {
  background: var(--tl-grey-5);
  border: 0;
  height: 1px;
  margin: 2.25em 0;
}

/* Blockquotes double as callouts in the editor */
.article-body blockquote {
  background: var(--tl-evergreen-tint);
  border: 0;
  border-left: 4px solid var(--tl-emerald);
  border-radius: 0 var(--tl-radius-sm) var(--tl-radius-sm) 0;
  color: var(--tl-grey-1);
  margin: 1.75em 0;
  padding: 15px 20px;
}

.article-body blockquote > *:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   9. Callouts (built by script.js from "Please note" / "Please be aware")
   -------------------------------------------------------------------------- */

.tl-callout {
  background: var(--tl-grey-bg);
  border: 1px solid var(--tl-grey-5);
  border-left: 4px solid var(--tl-grey-4);
  border-radius: 0 var(--tl-radius-sm) var(--tl-radius-sm) 0;
  margin: 1.75em 0;
  padding: 15px 20px;
}

.tl-callout > *:first-child {
  margin-top: 0;
}

.tl-callout > *:last-child {
  margin-bottom: 0;
}

.tl-callout-label {
  align-items: center;
  color: var(--tl-grey-2);
  display: flex;
  font-size: var(--tl-size-meta);
  font-weight: var(--tl-weight-semibold);
  gap: 5px;
  letter-spacing: 0.05em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.tl-callout-label::before {
  border-radius: 50%;
  content: "";
  height: 8px;
  width: 8px;
}

.tl-callout-note {
  background: var(--tl-blue-tint);
  border-color: #d7def8;
  border-left-color: var(--tl-blue);
}

.tl-callout-note .tl-callout-label {
  color: var(--tl-blue);
}

.tl-callout-note .tl-callout-label::before {
  background: var(--tl-blue);
}

.tl-callout-warning {
  background: var(--tl-orange-tint);
  border-color: #f3e0c8;
  border-left-color: var(--tl-orange);
}

.tl-callout-warning .tl-callout-label {
  color: var(--tl-orange);
}

.tl-callout-warning .tl-callout-label::before {
  background: var(--tl-orange);
}

.tl-callout-tip {
  background: var(--tl-evergreen-tint);
  border-color: #d5e5e2;
  border-left-color: var(--tl-emerald);
}

.tl-callout-tip .tl-callout-label {
  color: var(--tl-evergreen);
}

.tl-callout-tip .tl-callout-label::before {
  background: var(--tl-emerald);
}

/* Legal footnote at the end of Wallet articles */
.tl-legal-footnote {
  border-top: 1px solid var(--tl-grey-5);
  color: var(--tl-grey-2);
  font-size: var(--tl-size-meta);
  line-height: 1.6;
  margin-top: 2.5em;
  padding-top: 1.25em;
}

/* --------------------------------------------------------------------------
   10. Article footer: pager, votes, feedback
   -------------------------------------------------------------------------- */

.article footer {
  border-top: 1px solid var(--tl-grey-5);
  margin-top: 50px;
  padding-top: 10px;
}

.article-pager {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  margin: 30px 0 0;
}

.article-pager[hidden] {
  display: none;
}

@media (min-width: 640px) {
  .article-pager {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.article-pager-link {
  border: 1px solid var(--tl-grey-5);
  border-radius: var(--tl-radius);
  color: var(--tl-grey-1);
  display: block;
  padding: 15px 20px;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.article-pager-link[hidden] {
  display: none;
}

.article-pager-link:hover {
  border-color: var(--tl-emerald);
  box-shadow: var(--tl-shadow-sm);
  color: var(--tl-grey-1);
}

.article-pager-next {
  grid-column: 2;
  text-align: right;
}

@media (max-width: 639px) {
  .article-pager-next {
    grid-column: 1;
    text-align: left;
  }
}

.article-pager-label {
  align-items: center;
  color: var(--tl-grey-2);
  display: flex;
  font-size: var(--tl-size-meta);
  font-weight: var(--tl-weight-semibold);
  gap: 5px;
  letter-spacing: 0.04em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.article-pager-next .article-pager-label {
  justify-content: flex-end;
}

@media (max-width: 639px) {
  .article-pager-next .article-pager-label {
    justify-content: flex-start;
  }
}

.article-pager-title {
  color: var(--tl-evergreen);
  display: block;
  font-size: var(--tl-size-chrome);
  font-weight: var(--tl-weight-semibold);
  line-height: 1.35;
}

.article-votes {
  background: var(--tl-grey-bg);
  border: 1px solid var(--tl-grey-5);
  border-radius: var(--tl-radius);
  margin: 30px 0 0;
  padding: 20px;
  text-align: center;
}

.article-votes-question {
  font-size: var(--tl-size-small);
  font-weight: var(--tl-weight-semibold);
  margin: 0 0 15px;
}

.article-votes-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.article-vote {
  border: 1px solid var(--tl-grey-4);
  border-radius: var(--tl-radius-sm);
  color: var(--tl-evergreen);
  font-weight: var(--tl-weight-semibold);
  min-width: 95px;
  padding: 10px 20px;
}

.article-vote:hover {
  background: #ffffff;
  border-color: var(--tl-emerald);
  color: var(--tl-evergreen);
}

.button.article-vote.button-primary,
.article-vote.button-primary {
  background: var(--tl-emerald);
  border-color: var(--tl-emerald);
  color: #ffffff;
}

.article-votes-count {
  color: var(--tl-grey-2);
  display: block;
  font-size: var(--tl-size-chrome);
  margin-top: 10px;
}

.article-feedback-form {
  background: #ffffff;
  border: 1px solid var(--tl-grey-5);
  border-radius: var(--tl-radius);
  margin: 10px 0 0;
  padding: 20px;
}

.article-feedback-form.hide,
.article-feedback-success.hide,
.article-feedback-error.hide {
  display: none;
}

.article-feedback-form label {
  color: var(--tl-evergreen);
  display: block;
  font-size: var(--tl-size-small);
  font-weight: var(--tl-weight-semibold);
  margin-bottom: 10px;
}

.article-feedback-form select,
.article-feedback-form textarea {
  border: 1px solid var(--tl-grey-4);
  border-radius: var(--tl-radius-sm);
  display: block;
  font-family: inherit;
  font-size: var(--tl-size-chrome);
  margin-bottom: 10px;
  padding: 10px 10px;
  width: 100%;
}

.article-feedback-form textarea {
  min-height: 110px;
  resize: vertical;
}

.article-feedback-form select:focus,
.article-feedback-form textarea:focus {
  border-color: var(--tl-emerald);
  box-shadow: 0 0 0 3px rgba(13, 135, 92, 0.16);
  outline: none;
}

.article-feedback-note {
  color: var(--tl-grey-2);
  font-size: var(--tl-size-meta);
  margin: 10px 0 0;
}

.article-feedback-success,
.article-feedback-error {
  border-radius: var(--tl-radius);
  margin: 10px 0 0;
  padding: 15px 20px;
}

.article-feedback-success {
  background: var(--tl-evergreen-tint);
  border: 1px solid #d5e5e2;
}

.article-feedback-success p,
.article-feedback-error p {
  margin: 0;
}

.article-feedback-error {
  background: var(--tl-red-tint);
  border: 1px solid #f0d5d3;
  color: var(--tl-red);
}

.article-return-to-top {
  border: 0;
  margin: 30px 0 0;
  text-align: center;
}

.article-return-to-top a {
  color: var(--tl-grey-2);
  font-size: var(--tl-size-chrome);
  font-weight: var(--tl-weight-semibold);
  text-decoration: none;
}

.article-return-to-top a:hover {
  color: var(--tl-evergreen);
}

.article-return-to-top-icon {
  transform: rotate(180deg);
}

.article-attachments-title,
.related-articles-title,
.recent-articles-title {
  color: var(--tl-grey-2);
  font-size: var(--tl-size-meta);
  font-weight: var(--tl-weight-semibold);
  letter-spacing: 0.05em;
  margin: 0 0 15px;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   11. Related articles
   -------------------------------------------------------------------------- */

.article-relatives {
  border-top: 1px solid var(--tl-grey-5);
  display: grid;
  gap: 30px;
  margin-top: 40px;
  padding-top: 30px;
}

.related-articles ul,
.recent-articles ul {
  /* align-items: start so a two-line title doesn't stretch the card beside it */
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .related-articles ul,
  .recent-articles ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.related-articles li,
.recent-articles li {
  margin: 0;
}

.related-articles li a,
.recent-articles li a {
  background: var(--tl-grey-bg);
  border: 1px solid var(--tl-grey-5);
  border-radius: var(--tl-radius-sm);
  color: var(--tl-evergreen);
  display: block;
  font-size: var(--tl-size-chrome);
  font-weight: var(--tl-weight-semibold);
  padding: 15px;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.related-articles li a:hover,
.recent-articles li a:hover {
  background: #ffffff;
  border-color: var(--tl-emerald);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   12. Support banner
   -------------------------------------------------------------------------- */

/* A compact centred card, not a full-width bar. Stretched across the container
   the sentence ended near x=680 while the button sat near x=1640 — nearly a
   thousand pixels of empty green between the two, with nothing tying them
   together. Readers who don't scan for buttons never made the connection.
   Narrow it, centre it, and stack the button directly under the text. */
.support-banner {
  align-items: center;
  background: var(--tl-evergreen);
  background-image:
    radial-gradient(circle at 100% 0%, rgba(119, 216, 216, 0.18), transparent 60%);
  border-radius: var(--tl-radius);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 40px auto 0;
  max-width: 600px;
  padding: 30px;
  text-align: center;
}

.support-banner-home {
  margin: 55px auto 0;
}

.support-banner-text {
  max-width: 42ch;
}

.support-banner h2 {
  color: #ffffff;
  font-size: var(--tl-size-body-lg);
  margin: 0 0 10px;
}

.support-banner p {
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--tl-size-small);
  margin: 0;
}

.support-banner-phone {
  margin-top: 10px !important;
}

.support-banner-phone a {
  color: #ffffff;
  font-size: var(--tl-size-body);
  font-weight: var(--tl-weight-semibold);
  text-decoration: none;
}

.support-banner-phone span {
  color: rgba(255, 255, 255, 0.74);
  display: block;
  font-size: var(--tl-size-chrome);
}

.support-banner .support-banner-button,
.support-banner a.button.support-banner-button,
.support-banner a.button-primary.support-banner-button {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--tl-evergreen);
  flex: 0 0 auto;
  font-weight: var(--tl-weight-semibold);
  white-space: nowrap;
}

.support-banner .support-banner-button:hover,
.support-banner .support-banner-button:focus,
.support-banner a.button-primary.support-banner-button:hover,
.support-banner a.button-primary.support-banner-button:focus {
  background: var(--tl-mist);
  border-color: var(--tl-mist);
  color: var(--tl-evergreen-dark);
}

/* --------------------------------------------------------------------------
   13. Buttons
   -------------------------------------------------------------------------- */

/* Buttons follow the style guide's button sheet: near-square corners, Web
   Button type (Semibold 16px), Primary and Neutral families, each with a
   filled, outline and disabled state. Sizes are Large / Regular / Small.

   Markup:
     <a class="button button-primary">           filled green, regular size
     <a class="button button-primary button-large">
     <a class="button button-primary button-outline">
     <a class="button button-neutral button-small">
   Copenhagen's own buttons come out as Neutral unless given a family. */

.button,
button.button,
a.button,
input[type="submit"].button {
  border: 1px solid transparent;
  border-radius: var(--tl-radius-sm);
  cursor: pointer;
  display: inline-block;
  font-family: var(--tl-font-button);
  font-size: var(--tl-size-button);
  font-weight: var(--tl-weight-semibold);
  line-height: 1.3;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.button-large {
  padding: 15px 25px;
}

.button-small {
  padding: 5px 15px;
}

/* --- Primary --- */

.button.button-primary,
a.button-primary,
button.button-primary,
input[type="submit"].button-primary {
  background: var(--tl-emerald);
  border-color: var(--tl-emerald);
  color: #ffffff;
}

.button.button-primary:hover,
.button.button-primary:focus,
.button.button-primary:active,
a.button-primary:hover,
a.button-primary:focus,
button.button-primary:hover,
button.button-primary:focus {
  background: var(--tl-emerald-dark);
  border-color: var(--tl-emerald-dark);
  color: #ffffff;
}

/* Outline text is Evergreen, not Emerald: at 16px the guide's own rule rules
   Emerald out for text. */
.button.button-primary.button-outline,
a.button-primary.button-outline,
button.button-primary.button-outline {
  background: #ffffff;
  border-color: var(--tl-emerald);
  color: var(--tl-evergreen);
}

.button.button-primary.button-outline:hover,
.button.button-primary.button-outline:focus,
a.button-primary.button-outline:hover,
button.button-primary.button-outline:hover {
  background: var(--tl-emerald);
  border-color: var(--tl-emerald);
  color: #ffffff;
}

/* --- Neutral --- */

.button-neutral,
.button:not(.button-primary):not(.support-banner-button) {
  background: var(--tl-grey-bg);
  border-color: var(--tl-grey-4);
  color: var(--tl-grey-1);
}

.button-neutral:hover,
.button-neutral:focus,
.button:not(.button-primary):not(.support-banner-button):hover,
.button:not(.button-primary):not(.support-banner-button):focus {
  background: var(--tl-grey-5);
  border-color: var(--tl-grey-2);
  color: var(--tl-grey-1);
}

.button-neutral.button-outline {
  background: #ffffff;
}

/* --- Disabled --- */

.button[disabled],
.button[aria-disabled="true"],
.button-disabled {
  background: var(--tl-grey-3);
  border-color: var(--tl-grey-2);
  color: #ffffff;
  cursor: not-allowed;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   14. Search results
   -------------------------------------------------------------------------- */

.search-result-title a {
  color: var(--tl-evergreen);
  font-size: var(--tl-size-body);
  font-weight: var(--tl-weight-semibold);
}

.search-results-list > li {
  border-bottom: 1px solid var(--tl-grey-5);
  padding: 20px 0;
}

.search-result-description {
  color: var(--tl-grey-2);
  font-size: var(--tl-size-chrome);
  line-height: 1.6;
}

.search-result-breadcrumbs li,
.search-result-breadcrumbs li a {
  color: var(--tl-grey-2);
  font-size: var(--tl-size-meta);
}

.search-results-subheading {
  font-size: var(--tl-size-body-lg);
  margin-bottom: 20px;
}

.no-results {
  padding: 20px 0 0;
  text-align: center;
}

.no-results svg {
  max-width: 140px;
}

.no-results .headline {
  color: var(--tl-evergreen);
  font-size: var(--tl-size-body-lg);
  font-weight: var(--tl-weight-semibold);
  margin: 20px 0 10px;
}

.no-results .action-prompt {
  color: var(--tl-grey-2);
}

.no-results-tips {
  background: var(--tl-grey-bg);
  border: 1px solid var(--tl-grey-5);
  border-radius: var(--tl-radius);
  display: inline-block;
  margin: 25px auto 0;
  padding: 20px 25px;
  text-align: left;
}

.no-results-tips p {
  font-weight: var(--tl-weight-semibold);
  margin: 0 0 10px;
}

.no-results-tips ul {
  margin: 0;
  padding-left: 20px;
}

.no-results-tips li {
  color: var(--tl-grey-2);
  margin-bottom: 5px;
}

.search-results-sidebar .sidenav-item {
  font-size: var(--tl-size-chrome);
}

/* --------------------------------------------------------------------------
   15. "That page isn't part of this help center"
   -------------------------------------------------------------------------- */

.page-unavailable {
  margin: 0 auto;
  max-width: 620px;
  padding: 65px 0 40px;
  text-align: center;
}

.page-unavailable h1 {
  font-size: var(--tl-size-h3);
  margin: 0 0 15px;
}

.page-unavailable-lead {
  color: var(--tl-grey-2);
  font-size: var(--tl-size-small);
  margin: 0 0 30px;
}

.page-unavailable-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.page-unavailable-phone {
  margin: 25px 0 0;
}

.page-unavailable-phone a {
  font-size: var(--tl-size-body-lg);
  font-weight: var(--tl-weight-semibold);
  text-decoration: none;
}

.page-unavailable-phone span {
  color: var(--tl-grey-2);
  display: block;
  font-size: var(--tl-size-chrome);
}

.page-unavailable-secondary {
  color: var(--tl-grey-2);
  font-size: var(--tl-size-chrome);
  margin: 25px 0 0;
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--tl-grey-bg);
  border-top: 1px solid var(--tl-grey-5);
  margin-top: 70px;
  padding: 50px 0 30px;
}

.footer a {
  color: var(--tl-grey-2);
  text-decoration: none;
}

.footer a:hover {
  color: var(--tl-evergreen);
  text-decoration: underline;
}

.footer-inner {
  display: block;
  margin: 0 auto;
  max-width: 1240px;
  padding: 0 5%;
}

@media (min-width: 1240px) {
  .footer-inner {
    padding: 0;
    width: 92%;
  }
}

.footer-columns {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
}

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

@media (min-width: 1024px) {
  .footer-columns {
    grid-template-columns: 0.8fr 1fr 1fr 1fr;
  }
}

.footer-logo img {
  display: block;
  max-height: 28px;
  width: auto;
}

.footer-tagline {
  color: var(--tl-grey-2);
  font-size: var(--tl-size-chrome);
  line-height: 1.55;
  margin: 15px 0 10px;
  max-width: 34ch;
}

.footer-external {
  font-size: var(--tl-size-chrome);
  font-weight: var(--tl-weight-semibold);
}

.footer-heading {
  color: var(--tl-grey-2);
  font-size: var(--tl-size-meta);
  font-weight: var(--tl-weight-semibold);
  letter-spacing: 0.06em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  font-size: var(--tl-size-chrome);
}

.footer-phone {
  margin: 15px 0 0;
}

.footer-phone a {
  color: var(--tl-evergreen);
  font-size: var(--tl-size-small);
  font-weight: var(--tl-weight-semibold);
}

.footer-hours {
  color: var(--tl-grey-2);
  display: block;
  font-size: var(--tl-size-meta);
}

/* The markup for .footer-tagline, .footer-external, .footer-legal and
   .footer-disclosure was removed from footer.hbs at True Link's request. These
   rules are kept so the block can be restored by pasting the markup back. */
.footer-legal {
  align-items: center;
  border-top: 1px solid var(--tl-grey-5);
  display: flex;
  flex-direction: column;
  gap: 15px;
  justify-content: space-between;
  margin-top: 35px;
  padding-top: 25px;
}

@media (min-width: 900px) {
  .footer-legal {
    flex-direction: row;
  }
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-legal-links a {
  font-size: var(--tl-size-chrome);
}

.footer-legal-meta {
  align-items: center;
  display: flex;
  gap: 20px;
}

.footer-disclosure {
  color: var(--tl-grey-2);
  font-size: var(--tl-size-meta);
  margin: 0;
}

/* --------------------------------------------------------------------------
   17. Screenshot lightbox
   -------------------------------------------------------------------------- */

.tl-lightbox {
  align-items: center;
  background: rgba(11, 58, 54, 0.88);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  padding: 30px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;
}

.tl-lightbox[hidden] {
  display: none;
}

.tl-lightbox img {
  background: #ffffff;
  border-radius: var(--tl-radius-sm);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.tl-lightbox-close {
  background: #ffffff;
  border: 0;
  border-radius: 50%;
  color: var(--tl-evergreen);
  cursor: pointer;
  font-size: var(--tl-size-body-lg);
  height: 44px;
  line-height: 1;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 44px;
}

/* --------------------------------------------------------------------------
   18. Motion and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .blocks-item-link:hover,
  .promoted-articles-item a:hover {
    transform: none;
  }
}

@media print {
  .header,
  .footer,
  .sub-nav,
  .article-sidebar,
  .article-toc,
  .article-votes,
  .article-feedback-form,
  .article-pager,
  .support-banner,
  .article-return-to-top,
  .article-relatives,
  .hero {
    display: none !important;
  }

  .article-container {
    display: block !important;
  }

  .article-body {
    font-size: 12pt;
    max-width: none;
  }

  .article-body a {
    text-decoration: underline;
  }

  .article-body a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  .article-body img {
    box-shadow: none;
    max-width: 100%;
    page-break-inside: avoid;
  }

  .article-body h2,
  .article-body h3 {
    page-break-after: avoid;
  }
}

/* --- orphan handling for promoted articles --- */
@media (min-width: 768px) {
  .promoted-articles-item:last-child:nth-child(2n+1) {
    grid-column: 1 / -1;
  }
}

/* --- orphan handling for category page sections --- */
@media (min-width: 768px) {
  .section-tree-item:last-child:nth-child(2n+1) {
    grid-column: 1 / -1;
  }
}

/* --- orphan handling for related and recently viewed articles --- */
@media (min-width: 768px) {
  .related-articles li:last-child:nth-child(2n+1),
  .recent-articles li:last-child:nth-child(2n+1) {
    grid-column: 1 / -1;
  }
}