@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800&display=swap');
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/mulish/v18/1Ptvg83HX_SGhgqk3wotYKNnBQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/***** Normalize.css *****/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  font-family: 'Mulish';
}

body {
  margin: 0;
  font-family: 'Mulish';
}

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: #2F3941;
  font-family: 'Mulish', 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', 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: 'Mulish', 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif;
  margin-top: 0;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

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

h4 {
  font-size: 16px;
}

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

a:visited {
  color: rgba(0, 141, 255, 1);
}

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

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

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

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

input:not([type="checkbox"]):focus {
  border: 1px solid rgba(36, 61, 92, 1);
}

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

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") no-repeat #fff;
  background-position: right 10px center;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: #555;
  width: 100%;
}

select:focus {
  border: 1px solid rgba(36, 61, 92, 1);
}

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

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

textarea:focus {
  border: 1px solid rgba(36, 61, 92, 1);
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}

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

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

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

.error-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}

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

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

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

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

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

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

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

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

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

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

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

.button-secondary {
  color: #5a6d7c;
  border: 1px solid #ddd;
  background-color: transparent;
}

.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: #2F3941;
  border: 1px solid #ddd;
  background-color: #f7f7f7;
}

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

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

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

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

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

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

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

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

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

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

.form-field input:focus {
  border: 1px solid rgba(36, 61, 92, 1);
}

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

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

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

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

.form-field .nesty-input:focus {
  border: 1px solid rgba(36, 61, 92, 1);
  text-decoration: none;
}

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

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

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

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

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

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

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

.form .suggestion-list {
  font-size: 13px;
  margin-top: 30px;
}

.form .suggestion-list label {
  border-bottom: 1px solid #ddd;
  display: block;
  padding-bottom: 5px;
}

.form .suggestion-list li {
  padding: 10px 0;
}

.form .suggestion-list li a:visited {
  color: rgba(0, 141, 255, 1);
}

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

@media (min-width: 1160px) {
  .header {
    padding: 0;
    width: 90%;
  }
}

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

.logo span {
  margin: 0 10px;
  color: rgba(36, 61, 92, 1);
}

.logo a {
  display: inline-block;
}

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

.user-nav {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .user-nav {
    position: relative;
  }
}

.user-nav[aria-expanded="true"] {
  background-color: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  border: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 1;
}

.user-nav[aria-expanded="true"] > a {
  display: block;
  margin: 20px;
}

.user-nav[aria-expanded="true"] > .user-nav-list li {
  display: block;
}

.user-nav[aria-expanded="true"] > .user-nav-list a {
  display: block;
  margin: 20px;
}

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

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

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

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

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

.nav-wrapper-desktop a {
  border: 0;
  display: none;
  font-size: 16px;
  padding: 6px 15px;
  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 {
  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: #2F3941;
  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: #2F3941;
}

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

/***** Header buttons *****/
.header-buttons {
  align-items: center;
  display: flex;
  gap: 10px;
}

.header-btn {
  align-items: center;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  font-family: 'Mulish', sans-serif;
  font-size: 15px;
  font-weight: 700;
  gap: 6px;
  padding: 10px 20px;
  text-decoration: none;
  transition: filter 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}

.header-btn:hover, .header-btn:focus {
  filter: brightness(1.1);
  text-decoration: none;
}

.header-btn--blue {
  background-color: #4a7fd4;
  color: #fff;
}

.header-btn--blue:hover, .header-btn--blue:focus {
  background-color: #4a7fd4;
  color: #fff;
}

.header-btn--green {
  background-color: #2e7d5e;
  color: #fff;
}

.header-btn--green:hover, .header-btn--green:focus {
  background-color: #2e7d5e;
  color: #fff;
}

.header-btn--user {
  padding: 8px 16px;
}

.header-user-icon {
  flex-shrink: 0;
}

/***** 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.header-btn {
  border: none;
  color: #fff;
  min-width: 0;
  background-color: #2e7d5e;
  white-space: nowrap;
  font-size: 16px;
  padding: 8px 15px;
  display: flex;
}

.user-info > button.header-btn:hover, .user-info > button.header-btn:focus {
  filter: brightness(1.1);
}

.user-info > button.header-btn::after {
  display: none;
}

.user-info > button {
  border: 0;
  color: rgba(0, 56, 101, 1);
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}

.user-info > button::after {
  color: rgba(0, 56, 101, 1);
  padding-right: 15px;
}

[dir="rtl"] .user-info > button::after {
  padding-left: 15px;
  padding-right: 0;
}

#user #user-name {
  display: none;
  font-size: 14px;
}

@media (min-width: 768px) {
  #user #user-name {
    display: inline-block;
  }
}

#user #user-name:hover {
  text-decoration: underline;
}

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

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

.avatar img {
  height: 40px;
  width: 40px;
}

.avatar .icon-agent {
  color: rgba(36, 61, 92, 1);
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: #FFFFFF;
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 17px;
}

/***** Footer *****/
.footer {
  border-top: 1px solid #ddd;
  margin-top: 60px;
  padding: 30px 0;
}

.footer a {
  color: #5a6d7c;
}

.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: #5a6d7c;
  display: inline-block;
}

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

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

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

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

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

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

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

.search {
  border-color: #ddd;
  border-radius: 30px;
  border-style: solid;
  border-width: 1px;
  display: flex;
  position: relative;
  transition: border 0.12s ease-in-out;
}

.search:focus-within {
  border-color: rgba(36, 61, 92, 1);
}

.search input[type="search"],
.search .clear-button {
  background-color: #fff;
  border-radius: 30px;
  border: none;
}

.search-full input[type="search"],
.search-full .clear-button {
  border-color: #fff;
}

.search input[type="search"] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  color: #272727;
  flex: 1 1 auto;
  height: 60px;
  width: 100%;
  font-size: 16px;
}

.search input[type="search"]:focus {
  color: #555;
}

.search input[type="search"]::-webkit-search-decoration, .search input[type="search"]::-webkit-search-cancel-button, .search input[type="search"]::-webkit-search-results-button, .search input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.search input[type="search"]:-webkit-autofill, .search input[type="search"]:-webkit-autofill:hover, .search input[type="search"]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}

.search .clear-button {
  align-items: center;
  box-sizing: border-box;
  color: #777;
  cursor: pointer;
  display: none;
  flex: none;
  justify-content: center;
  padding: 0 15px;
}

.search .clear-button:hover {
  background-color: rgba(36, 61, 92, 1);
  color: #fff;
}

.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(36, 61, 92, 1);
}

.search-has-value .clear-button {
  display: flex;
}

[dir="ltr"] .search input[type="search"] {
  padding-left: 40px;
  padding-right: 20px;
}

[dir="ltr"] .search-has-value input[type="search"] {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}

[dir="ltr"] .search-has-value input[type="search"]:focus {
  border-right-color: rgba(36, 61, 92, 1);
}

[dir="ltr"] .search .clear-button {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}

[dir="ltr"] .search .clear-button:focus {
  border-left-color: rgba(36, 61, 92, 1);
}

[dir="rtl"] .search input[type="search"] {
  padding-left: 20px;
  padding-right: 40px;
}

[dir="rtl"] .search-has-value input[type="search"] {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}

[dir="rtl"] .search-has-value input[type="search"]:focus {
  border-left-color: rgba(36, 61, 92, 1);
}

[dir="rtl"] .search .clear-button {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}

[dir="rtl"] .search .clear-button:focus {
  border-right-color: rgba(36, 61, 92, 1);
}

.search-icon {
  position: relative;
  top: 58%;
  transform: translateY(0%);
  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/01KNSJP19KG4PH07XD2GWJ5D30);
  background-position: center;
  background-size: cover;
  height: 380px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}

.hero-inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-width: 650px;
  margin: 0 auto;
}

.hero-label {
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2.5px;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.hero-title {
  color: #fff;
  font-size: 48px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 20px;
}

.popular-searches {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
}

.popular-searches-label {
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  font-weight: 500;
}

.popular-searches-item {
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.23);
  backdrop-filter: blur(2px);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  padding: 5px 16px;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.popular-searches-item:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.8);
  color: #fff;
  text-decoration: none;
}

.page-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 10px 0;
}

@media (min-width: 768px) {
  .page-header {
    align-items: baseline;
    flex-direction: row;
    margin: 0;
  }
}

.page-header .section-subscribe {
  flex-shrink: 0;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .page-header .section-subscribe {
    margin-bottom: 0;
  }
}

.page-header h1 {
  flex-grow: 1;
  margin-bottom: 10px;
}

.page-header-description {
  font-style: italic;
  margin: 0 0 30px 0;
  word-break: break-word;
}

@media (min-width: 1024px) {
  .page-header-description {
    flex-basis: 100%;
  }
}

.page-header .icon-lock {
  height: 20px;
  width: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

.sub-nav {
  align-items: baseline;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 15px 30px;
  justify-content: space-between;
  margin-bottom: 55px;
}

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

.sub-nav .breadcrumbs {
  margin: 0;
}

.sub-nav .search-container {
  max-width: 300px;
  width: 100%;
}

@media (min-width: 768px) {
  .sub-nav .search-container {
    flex: 0 1 300px;
  }
}

.sub-nav input[type="search"]::after {
  font-size: 15px;
}

/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
}

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

.blocks-item {
  border: 1px solid rgba(36, 61, 92, 1);
  border-radius: 4px;
  box-sizing: border-box;
  color: rgba(36, 61, 92, 1);
  display: flex;
  flex: 1 0 340px;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
}

@media (min-width: 768px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}

.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  background-color: rgba(36, 61, 92, 1);
}

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

.blocks-item-link {
  color: rgba(36, 61, 92, 1);
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  border-radius: inherit;
}

.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active {
  color: inherit;
  text-decoration: none;
}

.blocks-item-link:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(36, 61, 92, 1);
  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;
}

/***** Knowledge Base category row-card overrides *****/
.knowledge-base .blocks-list {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 0;
}

.knowledge-base .blocks-item {
  background: #f5f7fa;
  border: 1px solid #e8edf2;
  border-radius: 8px;
  color: #1a3a5c;
  flex: none;
  margin: 0;
  max-width: 100%;
  text-align: left;
  width: 100%;
}

.knowledge-base .blocks-item:hover,
.knowledge-base .blocks-item:focus,
.knowledge-base .blocks-item:active {
  background-color: #eaf0f9;
}

.knowledge-base .blocks-item:hover *,
.knowledge-base .blocks-item:focus *,
.knowledge-base .blocks-item:active * {
  color: #1a3a5c;
  text-decoration: none;
}

.knowledge-base .blocks-item-link {
  align-items: center;
  color: #1a3a5c;
  flex-direction: row;
  justify-content: space-between;
  padding: 18px 22px;
}

.knowledge-base .blocks-item-link::after {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%231a3a5c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4 2l4 4-4 4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.knowledge-base .blocks-item-title {
  color: #1a3a5c;
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}

.knowledge-base .blocks-item-description {
  display: none;
}

/***** Homepage *****/
.section {
  margin-bottom: 40px;
}

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

/* Left, not Copenhagen's centre — every heading in this design is left
   aligned. This rule targets the h2 directly, so it also beats the
   text-align on .recent-activity-header, which only sets it on the
   container and would otherwise be overridden here. */
.home-section h2 {
  margin-bottom: 10px;
  text-align: left;
}

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

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

.community a:visited {
  color: rgba(0, 141, 255, 1);
}

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

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

/***** Recent activity *****/
.recent-activity-header {
  margin-bottom: 20px;
  text-align: left;
}

.recent-activity-header h2 {
  color: #1a3a5c;
  font-size: 24px;
  font-weight: 800;
}

.recent-activity-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recent-activity-item {
  background: #fff;
  border: 1px solid #e0e4ea;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  overflow: auto;
  padding: 18px 24px;
}

.recent-activity-item-parent {
  color: #1a3a5c;
  font-size: 16px;
  font-weight: 700;
}

.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 {
  color: #68737d;
  font-size: 14px;
  text-decoration: none;
}

.recent-activity-item-link:hover {
  text-decoration: underline;
}

.recent-activity-item-meta {
  align-items: center;
  color: #68737d;
  display: flex;
  gap: 8px;
  margin: 10px 0 0 0;
  float: none;
}

@media (min-width: 768px) {
  .recent-activity-item-meta {
    align-items: center;
    display: flex;
    margin: 0;
    float: right;
  }
  [dir="rtl"] .recent-activity-item-meta {
    float: left;
  }
}

.recent-activity-item-time, .recent-activity-item-comment {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: #68737d;
}

.recent-activity-item-time::after {
  content: '|';
  margin-left: 8px;
  color: #c8cdd2;
}

.recent-activity-item-comment {
  padding-left: 0;
  gap: 4px;
}

[dir="rtl"] .recent-activity-item-comment {
  padding: 0 5px 0 0;
}

.recent-activity-item-comment::before {
  display: inline-block;
}

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

.recent-activity-controls a {
  color: rgba(0, 56, 101, 1);
  text-decoration: underline;
}

.recent-activity-controls a:visited {
  color: rgba(0, 141, 255, 1);
}

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

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

.recent-activity-comment-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #1a3a5c;
}

.recent-activity-comment-icon svg {
  vertical-align: middle;
  color: #1a3a5c;
  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;
}

/***** Knowledge Base link-list section *****/
.kb-links {
  border-top: 1px solid #e8edf2;
  padding: 40px 0;
}

.kb-links-title {
  color: #1a3a5c;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 20px;
}

.kb-links-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
}

.kb-links-item {
  background: #f5f7fa;
  border: 1px solid #e8edf2;
  border-radius: 8px;
}

.kb-links-link {
  align-items: center;
  color: #1a3a5c;
  display: flex;
  font-size: 15px;
  font-weight: 700;
  justify-content: space-between;
  padding: 18px 22px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.kb-links-link:hover, .kb-links-link:focus {
  background-color: #eaf0f9;
  color: #1a3a5c;
  text-decoration: none;
}

.kb-links-chevron {
  color: #1a3a5c;
  flex-shrink: 0;
}

/***** Promo CTA section *****/
.promo-cta {
  border-top: 1px solid #e8edf2;
  padding: 60px 0;
}

.promo-cta-inner {
  align-items: center;
  display: flex;
  gap: 60px;
}

.promo-cta-text {
  flex: 1 1 45%;
}

.promo-cta-title {
  color: #1a3a5c;
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 16px;
}

.promo-cta-body {
  color: #555;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 28px;
}

.promo-cta-btn {
  background-color: #4a7fd4;
  border-radius: 6px;
  color: #fff;
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  padding: 11px 22px;
  text-decoration: none;
  transition: filter 0.15s ease;
}

.promo-cta-btn:hover, .promo-cta-btn:focus {
  color: #fff;
  filter: brightness(1.1);
  text-decoration: none;
}

.promo-cta-image {
  flex: 1 1 50%;
  text-align: center;
}

.promo-cta-image img {
  border-radius: 16px;
  height: auto;
  max-width: 100%;
  width: 100%;
}

@media (max-width: 768px) {
  .promo-cta-inner {
    flex-direction: column;
    gap: 32px;
  }

  .promo-cta-image {
    order: -1;
  }
}

/***** Category pages *****/
.category-container {
  display: flex;
  justify-content: flex-end;
}

.category-content {
  flex: 1;
}

@media (min-width: 1024px) {
  .category-content {
    flex: 0 0 80%;
  }
}

.section-tree {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

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

.section-tree .section {
  flex: initial;
}

@media (min-width: 768px) {
  .section-tree .section {
    flex: 0 0 45%;
    /* Two columns for tablet and desktop. Leaving 5% separation between columns */
  }
}

.section-tree-title {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 600;
}

.section-tree-title a {
  color: #2F3941;
}

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

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

.article-list-item a {
  color: #2F3941;
}

.icon-star {
  color: rgba(36, 61, 92, 1);
  font-size: 18px;
}

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

.section-content {
  flex: 1;
}

@media (min-width: 1024px) {
  .section-content {
    flex: 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: #2F3941;
  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;
}

@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 a {
  color: rgba(0, 56, 101, 1);
  text-decoration: underline;
}

.article-body a:visited {
  color: rgba(0, 141, 255, 1);
}

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

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

.article-body ul,
.article-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}

[dir="rtl"] .article-body ul, [dir="rtl"]
.article-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}

.article-body ul > ul,
.article-body ol > ol,
.article-body ol > ul,
.article-body ul > ol,
.article-body li > ul,
.article-body li > ol {
  margin: 0;
}

.article-body ul {
  list-style-type: disc;
}

.article-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}

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

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

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

.article-comment-count-icon {
  vertical-align: middle;
  color: rgba(36, 61, 92, 1);
  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;
  }
}

.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-vote {
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}

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

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

.article-more-questions a:visited {
  color: rgba(0, 141, 255, 1);
}

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

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

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

.article-return-to-top a {
  color: #2F3941;
  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);
}

.sidenav-title {
  font-size: 15px;
  position: relative;
  font-weight: 600;
}

.sidenav-item {
  display: block;
  margin-top: 10px;
  margin-bottom: 16px;
}

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

/***** Attachments *****/
/* Styles attachments inside posts, articles and comments */
.attachments .attachment-item {
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}

.attachments .attachment-item:last-child {
  margin-bottom: 0;
}

.attachments .attachment-item .attachment-icon {
  color: #2F3941;
  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: #5a6d7c;
}

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

.share a:hover {
  text-decoration: none;
  color: rgba(36, 61, 92, 1);
}

.share a svg {
  height: 18px;
  width: 18px;
  display: block;
}

/***** Comments *****/
/* Styles comments inside articles, posts and requests */
.comment {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}

.comment-heading, .recent-articles-title,
.related-articles-title {
  margin-bottom: 5px;
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
}

.comment-overview {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 20px 0;
}

.comment-overview p {
  margin-top: 0;
}

.comment-callout {
  color: #5a6d7c;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}

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

.comment-callout a:visited {
  color: rgba(0, 141, 255, 1);
}

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

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

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

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

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

.comment-wrapper.comment-official {
  border: 1px solid rgba(36, 61, 92, 1);
  padding: 40px 20px 20px;
}

@media (min-width: 768px) {
  .comment-wrapper.comment-official {
    padding-top: 20px;
  }
}

.comment-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}

[dir="rtl"] .comment-info {
  padding-right: 0;
  padding-left: 20px;
}

.comment-author {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .comment-author {
    justify-content: space-between;
  }
}

.comment-avatar {
  margin-right: 10px;
}

[dir="rtl"] .comment-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.comment-meta {
  flex: 1 0 auto;
}

.comment-labels {
  flex-basis: 100%;
}

@media (min-width: 768px) {
  .comment-labels {
    flex-basis: auto;
  }
}

.comment .status-label:not(.status-label-official) {
  margin-top: 10px;
}

@media (min-width: 768px) {
  .comment .status-label:not(.status-label-official) {
    margin-top: 0;
  }
}

.comment-form {
  display: flex;
  padding-top: 30px;
  word-wrap: break-word;
}

.comment-container {
  width: 100%;
}

.comment-form-controls {
  display: none;
  margin-top: 10px;
  text-align: left;
}

@media (min-width: 768px) {
  [dir="ltr"] .comment-form-controls {
    text-align: right;
  }
}

.comment-form-controls input[type="submit"] {
  margin-top: 15px;
}

@media (min-width: 1024px) {
  .comment-form-controls input[type="submit"] {
    margin-left: 15px;
  }
  [dir="rtl"] .comment-form-controls input[type="submit"] {
    margin-left: 0;
    margin-right: 15px;
  }
}

.comment-form-controls input[type="checkbox"] {
  margin-right: 5px;
}

.comment-form-controls input[type="checkbox"] [dir="rtl"] {
  margin-left: 5px;
}

.comment-ccs {
  display: none;
}

.comment-ccs + textarea {
  margin-top: 10px;
}

.comment-attachments {
  margin-top: 10px;
}

.comment-attachments a {
  color: rgba(36, 61, 92, 1);
}

.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}

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

.comment-body a:visited {
  color: rgba(0, 141, 255, 1);
}

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

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

.comment-body ul,
.comment-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}

[dir="rtl"] .comment-body ul, [dir="rtl"]
.comment-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}

.comment-body ul > ul,
.comment-body ol > ol,
.comment-body ol > ul,
.comment-body ul > ol,
.comment-body li > ul,
.comment-body li > ol {
  margin: 0;
}

.comment-body ul {
  list-style-type: disc;
}

.comment-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}

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

.comment-body blockquote {
  border-left: 1px solid #ddd;
  color: #5a6d7c;
  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: #5a6d7c;
  display: block;
  margin: 3px 0;
}

[dir="rtl"] .vote-sum {
  direction: ltr;
  unicode-bidi: bidi-override;
}

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

.vote-up:hover,
.vote-down:hover {
  color: rgba(36, 61, 92, 1);
}

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

.vote-voted {
  color: rgba(36, 61, 92, 1);
}

.vote-voted:hover {
  color: #070c13;
}

/***** 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/01KNSJP19KG4PH07XD2GWJ5D30);
  margin-bottom: 10px;
}

.community-footer {
  padding-top: 50px;
  text-align: center;
}

.community-footer-title {
  font-size: 16px;
  margin-bottom: 20px;
}

.community-featured-posts .title {
  font-size: 18px;
  font-weight: 600;
}

.community-featured-posts, .community-activity {
  padding-top: 40px;
  width: 100%;
}

.community-header {
  margin-bottom: 30px;
}

.community-header .title {
  margin-bottom: 0;
  font-size: 16px;
}

.post-to-community {
  margin-top: 10px;
}

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

/* Community topics grid */
.topics {
  max-width: none;
  width: 100%;
}

.topics-item .meta-group {
  justify-content: center;
  margin-top: 20px;
}

/* Community topic page */
.topic-header {
  border-bottom: 1px solid #ddd;
  font-size: 13px;
}

@media (min-width: 768px) {
  .topic-header {
    padding-bottom: 10px;
  }
}

.topic-header .dropdown {
  display: block;
  border-top: 1px solid #ddd;
  padding: 10px 0;
}

@media (min-width: 768px) {
  .topic-header .dropdown {
    border-top: 0;
    display: inline-block;
    margin-right: 20px;
    padding: 0;
  }
}

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

/* Topic, post and user follow button */
.community-follow {
  margin-bottom: 10px;
  width: 100%;
}

@media (min-width: 768px) {
  .community-follow {
    margin-bottom: 0;
    width: auto;
  }
}

.community-follow button {
  line-height: 30px;
  padding: 0 10px 0 15px;
  position: relative;
  width: 100%;
}

@media (min-width: 768px) {
  .community-follow button {
    width: auto;
  }
}

.community-follow button:hover {
  background-color: rgba(36, 61, 92, 1);
}

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

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

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

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

.community-follow button::after {
  border-left: 1px solid rgba(36, 61, 92, 1);
  content: attr(data-follower-count);
  color: rgba(36, 61, 92, 1);
  display: inline-block;
  font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}

@media (min-width: 768px) {
  .community-follow button::after {
    position: static;
  }
}

[dir="rtl"] .community-follow button::after {
  border-left: 0;
  border-right: 1px solid rgba(36, 61, 92, 1);
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
}

/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  padding: 0;
}

.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}

@media (min-width: 768px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}

.striped-list-info {
  flex: 2;
}

.striped-list-title {
  color: rgba(0, 56, 101, 1);
  margin-bottom: 10px;
  margin-right: 5px;
}

.striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active {
  text-decoration: underline;
}

.striped-list-title:visited {
  color: rgba(0, 141, 255, 1);
}

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

.striped-list-count {
  color: #5a6d7c;
  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: #2F3941;
    display: block;
  }
}

/***** Status labels *****/
/* Styles labels used in posts, articles and requests */
.status-label {
  background-color: #038153;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  margin-right: 2px;
  padding: 3px 10px;
  vertical-align: middle;
  white-space: nowrap;
  display: inline-block;
}

.status-label:hover, .status-label:active, .status-label:focus {
  text-decoration: none;
}

.status-label-pinned, .status-label-featured, .status-label-official {
  background-color: rgba(36, 61, 92, 1);
}

.status-label-official {
  border-radius: 0;
  margin-right: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 100%;
}

@media (min-width: 768px) {
  .status-label-official {
    border-radius: 0 0 4px 4px;
    right: 30px;
    width: auto;
  }
}

[dir="rtl"] .status-label-official {
  left: 30px;
  right: auto;
}

.status-label-not-planned, .status-label-closed {
  background-color: #e9ebed;
  color: #5a6d7c;
}

.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: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif;
  line-height: 1.6;
  word-break: break-word;
}

.post-info-container {
  display: flex;
  margin-bottom: 40px;
}

.post-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}

[dir="rtl"] .post-info {
  padding-right: 0;
  padding-left: 20px;
}

.post-meta {
  display: inline-block;
  flex: 1;
  margin-left: 10px;
  vertical-align: middle;
}

[dir="rtl"] .post-meta {
  margin-left: 0;
  margin-right: 10px;
}

.post-body a {
  color: rgba(0, 56, 101, 1);
  text-decoration: underline;
}

.post-body a:visited {
  color: rgba(0, 141, 255, 1);
}

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

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

.post-body ul,
.post-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}

[dir="rtl"] .post-body ul, [dir="rtl"]
.post-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}

.post-body ul > ul,
.post-body ol > ol,
.post-body ol > ul,
.post-body ul > ol,
.post-body li > ul,
.post-body li > ol {
  margin: 0;
}

.post-body ul {
  list-style-type: disc;
}

.post-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}

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

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

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

.post-comment-count {
  color: #5a6d7c;
}

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

.post-comment-count .icon-comments {
  color: rgba(36, 61, 92, 1);
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 5px;
  vertical-align: middle;
}

.post-sidebar {
  border-top: 1px solid #ddd;
  flex: 1;
  padding: 30px 0;
  text-align: center;
}

@media (min-width: 1024px) {
  .post-sidebar {
    border: 0;
    flex: 1 0 30%;
    padding: 0 0 0 50px;
    text-align: initial;
  }
  [dir="rtl"] .post-sidebar {
    padding: 0 50px 0 0;
  }
}

.post-sidebar-title {
  font-size: 18px;
  font-weight: 600;
}

.post-comments {
  margin-bottom: 20px;
}

@media (min-width: 1024px) {
  .post-comments {
    margin-bottom: 0;
  }
}

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

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

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

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

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

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

.community-badge {
  margin: 2px;
}

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

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

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

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

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

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

.profile-info .community-badge-achievements-rest {
  line-height: 40px;
  font-size: 20px;
}

/* Navigation element that collapses on mobile */
.collapsible-nav {
  flex-direction: column;
  font-size: 14px;
  position: relative;
}

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

.collapsible-nav-border {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
}

@media (min-width: 768px) {
  .collapsible-nav-border {
    border-top: 0;
  }
}

.collapsible-nav-toggle {
  top: calc(45px / 2);
  transform: translateY(-50%);
  position: absolute;
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

@media (min-width: 768px) {
  .collapsible-nav-toggle {
    display: none;
  }
}

[dir="rtl"] .collapsible-nav-toggle {
  left: 0;
  right: auto;
}

.collapsible-nav-toggle-icon {
  display: none;
}

.collapsible-nav-toggle[aria-expanded="false"] .chevron-icon {
  display: inline-block;
}

.collapsible-nav-toggle[aria-expanded="true"] .x-icon {
  display: inline-block;
}

.collapsible-nav-toggle:focus {
  outline: none;
  border: 1px solid rgba(36, 61, 92, 1);
}

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

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

.collapsible-nav-list li {
  color: #2F3941;
  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: #2F3941;
  display: block;
}

@media (min-width: 768px) {
  .collapsible-nav-list li:hover {
    border-bottom: 4px solid #ddd;
  }
  .collapsible-nav-list li:hover a:not([aria-current="page"]) {
    padding: 15px 0 11px 0;
    text-decoration: none;
  }
}

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

@media (min-width: 768px) {
  .collapsible-nav-list li:not([aria-selected="true"]),
  .collapsible-nav-list li:not(.current) {
    display: block;
  }
}

@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected="true"] {
    padding: 15px 0 11px 0;
  }
}

.collapsible-nav-list li[aria-selected="true"],
.collapsible-nav-list li.current {
  order: 0;
  position: relative;
}

@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected="true"],
  .collapsible-nav-list li.current {
    border-bottom: 4px solid rgba(36, 61, 92, 1);
    order: 1;
  }
}

.collapsible-nav-list li[aria-selected="true"] a,
.collapsible-nav-list li.current a {
  color: #2F3941;
}

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

/* Sidebar navigation that collapses on mobile */
.collapsible-sidebar {
  flex: 1;
  max-height: 45px;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
}

@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 0;
  }
}

.collapsible-sidebar-title {
  margin-top: 0;
}

.collapsible-sidebar-toggle {
  position: absolute;
  top: calc(45px / 2);
  transform: translateY(-50%);
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

@media (min-width: 1024px) {
  .collapsible-sidebar-toggle {
    display: none;
  }
}

[dir="rtl"] .collapsible-sidebar-toggle {
  left: 0;
  right: auto;
}

.collapsible-sidebar-toggle-icon {
  display: none;
}

.collapsible-sidebar-toggle[aria-expanded="false"] .chevron-icon {
  display: inline-block;
}

.collapsible-sidebar-toggle[aria-expanded="true"] .x-icon {
  display: inline-block;
}

.collapsible-sidebar-toggle:focus {
  outline: none;
  border: 1px solid rgba(36, 61, 92, 1);
}

.collapsible-sidebar-body {
  display: none;
}

@media (min-width: 1024px) {
  .collapsible-sidebar-body {
    display: block;
  }
}

.collapsible-sidebar[aria-expanded="true"] {
  max-height: none;
}

.collapsible-sidebar[aria-expanded="true"] .collapsible-sidebar-body {
  display: block;
}

/***** My activities *****/
.my-activities-nav {
  background-color: #f2f2f2;
  margin-bottom: 20px;
}

.my-activities-sub-nav {
  margin-bottom: 30px;
}

.my-activities-table .striped-list-title {
  /* My activities tables */
  display: block;
  margin-bottom: 10px;
  max-width: 350px;
  white-space: normal;
}

@media (min-width: 1024px) {
  .my-activities-table .striped-list-title {
    margin-bottom: 0;
    max-width: 500px;
    min-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.my-activities-table thead {
  display: none;
}

@media (min-width: 768px) {
  .my-activities-table thead {
    display: table-header-group;
  }
}

.my-activities-table th:first-child,
.my-activities-table td:first-child {
  padding-left: 0;
}

@media (min-width: 1024px) {
  .my-activities-table th:first-child,
  .my-activities-table td:first-child {
    width: 500px;
  }
}

.my-activities-table th:last-child,
.my-activities-table td:last-child {
  padding-right: 0;
}

.my-activities-table td:not(:first-child) {
  display: none;
}

@media (min-width: 768px) {
  .my-activities-table td:not(:first-child) {
    display: table-cell;
  }
}

/* Requests table */
.requests-search {
  width: 100%;
}

.requests-table-toolbar {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .requests-table-toolbar {
    flex-direction: row;
  }
}

.requests-table-toolbar .search {
  flex: 1;
  width: 100%;
}

.requests-table-toolbar .request-table-filter {
  width: 100%;
}

@media (min-width: 768px) {
  .requests-table-toolbar .request-table-filter {
    width: auto;
  }
}

.requests-table-toolbar .request-filter {
  display: block;
}

@media (min-width: 768px) {
  .requests-table-toolbar .request-filter {
    margin: 0 0 0 30px;
  }
  [dir="rtl"] .requests-table-toolbar .request-filter {
    margin: 0 30px 0 0;
  }
}

.requests-table-toolbar .request-filter-label {
  font-size: 13px;
  margin-top: 30px;
}

@media (min-width: 768px) {
  .requests-table-toolbar .request-filter-label {
    margin-top: 0;
  }
}

.requests-table-toolbar select {
  max-height: 40px;
  margin-bottom: 30px;
  width: 100%;
}

@media (min-width: 768px) {
  .requests-table-toolbar select {
    margin-bottom: 0;
    max-width: 300px;
    width: auto;
  }
}

@media (min-width: 768px) {
  .requests-table-toolbar .organization-subscribe {
    margin-left: 10px;
  }
  [dir="rtl"] .requests-table-toolbar .organization-subscribe {
    margin: 0 10px 0 0;
  }
}

.requests-table-toolbar .organization-subscribe button {
  line-height: 40px;
  max-height: 40px;
  padding: 0 20px;
}

.requests-table-toolbar + .requests-search-info {
  margin-top: 15px;
}

.requests-table-toolbar + .requests-search-info.meta-data::after {
  content: "";
  margin: 0;
}

.requests-table-toolbar + .requests-search-info + .requests {
  margin-top: 20px;
}

.requests-table-toolbar + .requests {
  margin-top: 40px;
}

.requests .requests-table-meta {
  display: block;
}

@media (min-width: 768px) {
  .requests .requests-table-meta {
    display: none;
  }
}

.requests .requests-table thead {
  display: none;
}

@media (min-width: 768px) {
  .requests .requests-table thead {
    display: table-header-group;
  }
}

.requests .requests-table-info {
  display: block;
}

@media (min-width: 768px) {
  .requests .requests-table-info {
    display: table-cell;
    vertical-align: middle;
    width: auto;
  }
}

.requests .requests-table .requests-link {
  position: relative;
}

.requests .requests-table .requests-sort-symbol {
  position: absolute;
  left: calc(100% + 3px);
  bottom: 0;
  font-size: 10px;
}

/* Following table */
@media (min-width: 768px) {
  .subscriptions-subscribe button {
    width: auto;
  }
}

.subscriptions-table td:last-child {
  display: block;
}

@media (min-width: 768px) {
  .subscriptions-table td:last-child {
    display: table-cell;
  }
}

.subscriptions-table td:first-child {
  display: flex;
  align-items: center;
}

.subscriptions-table .user-avatar {
  margin-right: 10px;
}

.subscriptions .striped-list-title {
  display: inline-block;
  vertical-align: middle;
}

/* Contributions table */
.contributions-table td:last-child {
  color: #5a6d7c;
  font-size: 13px;
}

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

.no-activities {
  color: #5a6d7c;
}

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

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

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

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

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

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

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

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

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

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

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

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

.request-main .comment-show-container {
  border-radius: 2px;
  border: 1px solid #ddd;
  color: #5a6d7c;
  text-align: inherit;
  padding: 8px 25px;
  width: 100%;
}

.request-main .comment-show-container.hidden {
  display: none;
}

.request-main .form-field.comment-ccs > ul {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}

.request-main .form-field.comment-ccs > ul[data-hc-focus="true"] {
  border: 1px solid rgba(36, 61, 92, 1);
}

.request-main .form-field.comment-ccs > input[type="text"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}

.request-main .comment-ccs + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}

.request-main .comment-ccs + textarea:focus {
  border-top: 1px solid rgba(36, 61, 92, 1);
}

.request-main input#mark_as_solved {
  display: none;
}

.request-title {
  width: 100%;
}

@media (min-width: 1024px) {
  .request-title {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    max-width: 66%;
    padding-bottom: 20px;
  }
}

.request-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  order: 0;
}

@media (min-width: 1024px) {
  .request-sidebar {
    background-color: #f7f7f7;
    border: 0;
    font-size: 13px;
    flex: 0 0 auto;
    padding: 0 20px;
    width: 30%;
  }
}

.request-sidebar h2 {
  font-size: 15px;
  font-weight: 600;
  position: relative;
}

@media (min-width: 1024px) {
  .request-sidebar h2 {
    display: none;
  }
}

.request-details {
  border-bottom: 1px solid #ddd;
  font-size: 0;
  margin: 0;
  padding-bottom: 20px;
}

.request-details:last-child {
  border: 0;
}

.request-details dt, .request-details dd {
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  margin: 20px 0 0 0;
}

.request-details dd {
  padding: 0 10px;
  width: 60%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.meta-group * {
  display: inline;
}

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

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

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

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

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

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

.profile-avatar {
  position: relative;
  line-height: 0;
  align-self: center;
  margin-right: 10px;
}

[dir="rtl"] .profile-avatar {
  margin-left: 10px;
  margin-right: 0;
}

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

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

.profile-header .basic-info {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}

.profile-header .basic-info .name {
  margin: 0;
  line-height: 25px;
}

.profile-header .options {
  display: flex;
  flex-basis: 100%;
  margin-top: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

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

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

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

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

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

.profile-stats .stat-label {
  color: #5a6d7c;
  flex: 0 0 100px;
  margin-right: 10px;
}

[dir="rtl"] .profile-stats .stat-label {
  margin-left: 10px;
  margin-right: 0;
}

.profile-stats-activity {
  border-top: solid 1px #ddd;
  margin-top: 15px;
}

@media (min-width: 768px) {
  .profile-stats-activity {
    border-top: 0;
    flex-direction: row;
  }
}

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

.profile-stats-activity .stat:first-child {
  margin-top: 10px;
}

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

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

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

.profile-stats-counters {
  border-bottom: solid 1px #ddd;
}

@media (min-width: 768px) {
  .profile-stats-counters {
    flex: 0 0 200px;
    border-bottom: 0;
    margin-left: 40px;
  }
  [dir="rtl"] .profile-stats-counters {
    margin-left: 0;
    margin-right: 40px;
  }
}

@media (min-width: 1024px) {
  .profile-stats-counters {
    flex: 0 0 270px;
    margin-left: 60px;
  }
  [dir="rtl"] .profile-stats-counters {
    margin-right: 60px;
    margin-left: 0;
  }
}

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

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

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

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

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

.profile-private-badge {
  flex-basis: 100%;
  border: solid 1px rgba(36, 61, 92, 1);
  border-radius: 4px;
  color: rgba(36, 61, 92, 1);
  padding: 5px 20px;
  font-size: 12px;
  text-align: center;
}

.profile-private-badge .profile-private-icon {
  margin-left: 5px;
  line-height: 15px;
}

@media (min-width: 768px) {
  .profile-private-badge {
    flex-basis: auto;
  }
}

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

.profile-section {
  width: 100%;
}

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

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

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

.profile-section-description {
  flex-basis: 100%;
  padding: 10px 0;
  color: #5a6d7c;
  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: #5a6d7c;
  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: #2F3941;
}

.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 .collapsible-sidebar {
  margin-bottom: 30px;
}

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

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

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

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

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

.search-results-sidebar .see-all-filters[aria-hidden="true"] {
  display: none;
}

.search-results-sidebar .see-all-filters:hover {
  text-decoration: underline;
}

.search-results-sidebar .see-all-filters::after {
  content: ' \2304';
  font-weight: bold;
}

.search-results-subheading {
  font-size: 18px;
  font-weight: 600;
}

.search-results-list {
  margin-bottom: 25px;
}

.search-results-list > li {
  padding: 20px 0;
}

.search-results-list > li:first-child {
  border-top: 1px solid #ddd;
}

.search-results-list > li h2 {
  margin-bottom: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.notification a {
  color: #158ec2;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Inline notifications */
.notification-inline {
  border-radius: 4px;
  line-height: 14px;
  margin-top: 5px;
  padding: 5px;
  position: relative;
  text-align: left;
  vertical-align: middle;
}

[dir="rtl"] .notification-inline {
  text-align: right;
}

.notification-inline[aria-hidden="true"] {
  display: none;
}

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

[dir="rtl"] .notification-inline.notification-error::before {
  margin: 0 0 0 5px;
}

.notification-inline.notification-error {
  background-color: #fff0f1;
  border: 1px solid #e35b66;
  color: #cc3340;
}

.notification-inline.notification-large {
  padding: 13px 15px;
  margin-bottom: 25px;
}

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

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

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

.dropdown-toggle {
  cursor: pointer;
  background: none;
  border: 0;
  display: inline-block;
  padding: 0;
  text-align: initial;
  vertical-align: middle;
}

.dropdown-toggle:hover {
  text-decoration: none;
}

.dropdown-toggle > * {
  display: inline-block;
}

.dropdown-menu {
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  display: none;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  left: 0;
  margin-top: 1px;
  min-width: 170px;
  padding: 10px 0;
  position: absolute;
  text-align: left;
  z-index: 1000;
}

[dir="rtl"] .dropdown-menu {
  text-align: right;
}

.dropdown-menu[aria-expanded="true"] {
  display: block;
}

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

.dropdown-menu [role="menuitem"] {
  color: #333;
  cursor: pointer;
  display: block;
  padding: 7px 40px 7px 20px;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  text-align: start;
  line-height: inherit;
  width: 100%;
}

[dir="rtl"] .dropdown-menu [role="menuitem"] {
  padding: 7px 20px 7px 40px;
}

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

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

.dropdown-menu [role="menuitem"][aria-selected="true"]::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 7l3 3 7-7'%3E%3C/path%3E%3C/svg%3E");
  display: inline-block;
  height: 12px;
  margin-left: 10px;
  width: 12px;
}

[dir="rtl"] .dropdown-menu [role="menuitem"][aria-selected="true"]::after {
  margin-left: 0;
  margin-right: 10px;
  float: left;
}

.dropdown-menu [role="menuitem"][hidden], .dropdown-menu [role="menuitem"][aria-hidden="true"] {
  display: none !important;
}

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

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

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

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

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

/***** Knowledge base pages — shared shell (BidHarvest design) *****/
/* Design tokens: Dark Blue #243D5C, Light Blue #2F73C7, Green #117E4B,
   Grey #D7D9DF, Stroke #A0A7BF, Background #FAFAFA, Muted #606060 */
/* Applies to any template carrying .kb-page: article, category, section. */

/* Compact hero re-used above the page content */
.hero-compact {
  height: auto;
  padding: 50px 20px;
}

.hero-compact .hero-inner {
  max-width: 850px;
  top: auto;
  transform: none;
}

.hero-compact .hero-title {
  margin-bottom: 30px;
}

.hero-compact .hero-label {
  color: #c7f1fb;
  font-weight: 400;
  letter-spacing: normal;
}

/* Own positioning context so the icon centres on the input regardless of
   hero height (the base .search-icon offset is tuned to the 380px homepage hero) */
.hero-search {
  position: relative;
}

.hero-search .search-icon {
  top: 50%;
  transform: translateY(-50%);
}

/* Page shell */
.kb-page {
  max-width: 1200px;
  padding-top: 40px;
  padding-bottom: 60px;
}

@media (min-width: 1200px) {
  .kb-page {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }
}

/* Breadcrumbs — blue, 16px, chevron separators */
.sub-nav-kb {
  margin-bottom: 20px;
}

.sub-nav-kb .breadcrumbs li {
  color: #2f73c7;
  font-size: 16px;
  line-height: 1.2;
}

.sub-nav-kb .breadcrumbs li a,
.sub-nav-kb .breadcrumbs li a:visited {
  color: #2f73c7;
}

/* Chevron separator. .sub-nav-kb targets the {{breadcrumbs}} helper output,
   which can't take a class; .kb-breadcrumbs is for hand-written breadcrumbs. */
.sub-nav-kb .breadcrumbs li + li::before,
.kb-breadcrumbs li + li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 8px 1px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  vertical-align: middle;
}

[dir="rtl"] .sub-nav-kb .breadcrumbs li + li::before,
[dir="rtl"] .kb-breadcrumbs li + li::before {
  transform: rotate(135deg);
}

/* Two-column layout: 320px sidebar | content, 60px gutter */
.kb-layout {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .kb-layout {
    flex-direction: row;
    /* nowrap matters: .search-results inherits flex-wrap:wrap from Copenhagen,
       and a wrapping container drops the main column below the sidebar rather
       than shrinking it. */
    flex-wrap: nowrap;
    gap: 60px;
  }

  .kb-sidebar {
    flex: 0 0 320px;
    max-width: 320px;
  }

  /* 0 basis, not auto — width comes from the free space, not the content */
  .kb-main {
    flex: 1 1 0%;
    min-width: 0;
    max-width: none;
    padding: 0;
  }
}

.kb-sidebar {
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-bottom: 36px;
}

/* Sidebar cards */
.sidebar-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.kb-sidebar .collapsible-sidebar.sidebar-card {
  flex: 0 0 auto;
  max-height: none;
  padding: 0;
}

.sidebar-card-title {
  border-bottom: 1px solid #d7d9df;
  color: #243d5c;
  display: block;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  padding: 15px 10px;
  text-align: center;
}

.sidebar-card-body {
  padding: 10px 20px;
}

.kb-sidebar .collapsible-sidebar-toggle {
  top: 27px;
  right: 15px;
}

/* Article list inside the sidebar card */
.sidenav-list-item + .sidenav-list-item .sidenav-item {
  border-top: 1px solid #d7d9df;
}

.kb-sidebar .sidenav-item {
  color: #243d5c;
  display: block;
  font-size: 14px;
  line-height: 1.2;
  margin: 0;
  padding: 10px 15px;
}

.kb-sidebar .sidenav-item:hover,
.kb-sidebar .sidenav-item:focus {
  color: #2f73c7;
  text-decoration: none;
}

/* .current-article: article sidebar. .current: search filter lists. */
.kb-sidebar .sidenav-item.current-article,
.kb-sidebar .sidenav-item.current {
  background-color: #2f73c7;
  border-radius: 3px;
  color: #fff;
  font-weight: 800;
  padding: 15px;
}

/* The active row supplies its own edges, so drop the adjoining rules */
.kb-sidebar .sidenav-item.current-article,
.sidenav-list-item:has(.current-article) + .sidenav-list-item .sidenav-item {
  border-top-color: transparent;
}

.sidebar-help-btn {
  background-color: #117e4b;
  border-radius: 5px;
  color: #fff;
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.28px;
  padding: 10px 15px;
  text-align: center;
  transition: filter 0.15s ease;
}

.sidebar-help-btn:hover, .sidebar-help-btn:focus {
  color: #fff;
  filter: brightness(1.1);
  text-decoration: none;
}

/***** Article page (BidHarvest design) *****/
/* Article header */
.article-page .article-header {
  border-bottom: 1px solid #d7d9df;
  display: block;
  margin: 0 0 33px;
  padding-bottom: 30px;
}

.article-page .article-title {
  color: #243d5c;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.72px;
  line-height: 1.1;
  margin: 0 0 33px;
}

.article-header-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

.article-page .article-author {
  align-items: center;
  display: flex;
  gap: 20px;
  margin: 0;
}

.article-page .article-avatar {
  flex: 0 0 58px;
  height: 58px;
  margin: 0;
  width: 58px;
}

.article-page .article-avatar .user-avatar {
  height: 58px;
  width: 58px;
}

.article-page .article-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.article-author-name,
.article-author-name:visited {
  color: #2f73c7;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.article-page .article-meta .meta-data {
  color: #243d5c;
  font-size: 14px;
  line-height: 1.2;
}

.article-page .article-meta .meta-data:not(:last-child)::after {
  content: "-";
  margin: 0 4px;
}

/* Follow button */
.article-page .article-subscribe [role="button"],
.article-page .article-subscribe button,
.article-page .article-subscribe .button {
  background-color: #2f73c7;
  border: 0;
  border-radius: 5px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.28px;
  min-height: 35px;
  padding: 10px 15px;
  transition: filter 0.15s ease;
  width: auto;
}

.article-page .article-subscribe [role="button"]:hover,
.article-page .article-subscribe button:hover,
.article-page .article-subscribe .button:hover {
  background-color: #2f73c7;
  color: #fff;
  filter: brightness(1.1);
}

/* Body */
.article-page .article-content {
  color: #272727;
  font-size: 16px;
  margin: 0 0 50px;
}

/* Shared heading + link-list treatment for "Related to" / recently viewed */
.article-page .article-relatives-block,
.article-page .content-tags,
.article-page .article-relatives > * {
  border-top: 1px solid #d7d9df;
  padding: 30px 0 0;
}

.article-page .article-relatives-title,
.article-page .content-tags > p,
.article-page .article-relatives h3 {
  color: #243d5c;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.1;
  margin: 0 0 16px;
}

.article-page .content-tag-list li,
.article-page .article-relatives li {
  margin-bottom: 7px;
}

.article-page .content-tag-list a,
.article-page .content-tag-list a:visited,
.article-page .article-relatives a,
.article-page .article-relatives a:visited {
  color: #2f73c7;
  font-size: 16px;
  line-height: 1.6;
  text-decoration: underline;
}

.article-page .article-relatives {
  border: 0;
  display: block;
  padding: 0;
}

.article-page .article-relatives > * {
  margin-bottom: 50px;
  max-width: none;
  padding-right: 0;
}

/* Attachments — card row */
.article-page .article-attachments {
  margin: 50px 0;
}

.article-page .attachments .attachment-item {
  align-items: center;
  background-color: #fafafa;
  border-radius: 10px;
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
  max-width: 426px;
  padding: 10px;
}

.attachment-icon-tile {
  align-items: center;
  align-self: stretch;
  background-color: #fff;
  border-radius: 3px;
  color: #243d5c;
  display: flex;
  flex: 0 0 30px;
  justify-content: center;
  min-height: 30px;
}

.article-page .attachments .attachment-item .attachment-icon {
  position: static;
}

.attachment-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.attachment-name,
.attachment-name:visited {
  color: #2f73c7;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.article-page .attachment-meta .meta-data {
  color: #606060;
  font-size: 12px;
  line-height: 1.2;
}

.article-page .attachment-meta .meta-data:not(:last-child)::after {
  content: "";
  margin: 0 3px;
}

.article-page .attachment-meta a.meta-data,
.article-page .attachment-meta a.meta-data:visited {
  color: #606060;
  text-decoration: underline;
}

/* Votes */
.article-page .article-votes {
  align-items: center;
  border-top: 1px solid #d7d9df;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 50px;
  padding: 40px 0 0;
  text-align: left;
}

.article-votes-question {
  color: #243d5c;
  font-size: 16px;
  line-height: 1.2;
}

.article-page .article-votes-controls {
  display: flex;
  gap: 20px;
}

.article-page .article-vote {
  background-color: #2f73c7;
  border: 0;
  border-radius: 5px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.28px;
  margin: 0;
  min-height: 35px;
  min-width: 100px;
  padding: 10px 15px;
  transition: filter 0.15s ease;
}

.article-page .article-vote:hover,
.article-page .article-vote:focus,
.article-page .article-vote-selected {
  background-color: #2f73c7;
  color: #fff;
  filter: brightness(1.1);
}

.article-page .article-vote-selected {
  box-shadow: 0 0 0 2px rgba(47, 115, 199, 0.35);
}

.article-page .article-votes-count {
  color: #243d5c;
  font-size: 16px;
  line-height: 1.2;
}

/* Mobile */
@media (max-width: 1023px) {
  .article-page .article-title {
    font-size: 28px;
  }

  .kb-sidebar {
    gap: 20px;
  }

  .hero-compact .hero-title {
    font-size: 32px;
  }
}

/***** Category page (BidHarvest design) *****/
.category-page .category-container {
  justify-content: flex-start;
}

@media (min-width: 1024px) {
  .category-page .category-content {
    flex: 1 1 auto;
  }
}

.category-page .page-header {
  border-bottom: 1px solid #d7d9df;
  display: block;
  margin: 0;
  padding-bottom: 30px;
}

.category-page .page-header h1 {
  color: #243d5c;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.72px;
  line-height: 1.1;
  margin: 0;
}

.category-page .page-header-description {
  color: #272727;
  font-size: 16px;
  font-style: normal;
  margin: 12px 0 0;
}

/* One section per row, not Copenhagen's two-up grid */
.category-page .section-tree {
  display: block;
  margin-top: 10px;
}

/* Spacing between sections comes from the design's 10px gap + the heading's
   20px top padding, not Copenhagen's 60px .section margin */
.category-page .section-tree .section {
  flex: none;
  margin-bottom: 10px;
  width: 100%;
}

.category-page .section-tree .section:last-child {
  margin-bottom: 0;
}

.category-page .section-tree-title {
  color: #243d5c;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.1;
  margin: 0;
  padding: 20px 15px 10px;
}

.category-page .section-tree-title a,
.category-page .section-tree-title a:visited {
  color: #243d5c;
}

.category-page .section-tree-title a:hover,
.category-page .section-tree-title a:focus {
  color: #2f73c7;
  text-decoration: none;
}

.category-page .article-list-item {
  align-items: center;
  border-bottom: 1px solid #d7d9df;
  display: flex;
  font-size: 14px;
  gap: 6px;
  line-height: 1.2;
  padding: 10px 15px;
}

.category-page .article-list-item a,
.category-page .article-list-item a:visited {
  color: #243d5c;
}

.category-page .article-list-item a:hover,
.category-page .article-list-item a:focus {
  color: #2f73c7;
}

.category-page .see-all-articles {
  color: #2f73c7;
  display: block;
  font-size: 14px;
  padding: 10px 15px;
}

.category-page .category-empty {
  display: block;
  padding: 20px 15px;
}

@media (max-width: 1023px) {
  .category-page .page-header h1 {
    font-size: 28px;
  }
}

/***** Error page (BidHarvest design) *****/
/* Full-bleed hero filling the gap between header and footer.
   Fallback for browsers without :has() — 166px is the header (71px) plus
   the footer at its natural height. The flex rules below supersede it. */
.error-hero {
  align-items: center;
  display: flex;
  height: auto;
  justify-content: center;
  min-height: calc(100vh - 166px);
  padding: 70px 20px;
}

/* Stretch the hero to the viewport with no magic numbers, mirroring the
   design's flex:1 0 0. Scoped to the error page so other templates are
   untouched. The footer's 60px top margin would otherwise leave a white
   band between the hero and the footer. */
body:has(.error-hero) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body:has(.error-hero) > main {
  display: flex;
  flex: 1 0 auto;
}

body:has(.error-hero) .error-hero {
  flex: 1 0 auto;
  min-height: 0;
}

body:has(.error-hero) .footer {
  margin-top: 0;
}

.error-hero .hero-inner {
  max-width: 850px;
  top: auto;
  transform: none;
  width: 100%;
}

.error-hero .hero-label {
  color: #c7f1fb;
  font-weight: 400;
  letter-spacing: normal;
  margin-bottom: 10px;
}

.error-title {
  letter-spacing: -0.96px;
  /* Figma stacks two 0.85-height lines with a 24px gap; that resolves to ~1.3 */
  line-height: 1.3;
  margin-bottom: 30px;
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 90px;
}

.error-btn,
.error-btn:visited {
  background-color: #2f73c7;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.28px;
  padding: 10px 15px;
  text-align: center;
  transition: filter 0.15s ease;
}

.error-btn:hover, .error-btn:focus {
  color: #fff;
  filter: brightness(1.1);
  text-decoration: none;
}

@media (max-width: 767px) {
  .error-hero {
    min-height: calc(100vh - 140px);
    padding: 50px 20px;
  }

  .error-title {
    font-size: 32px;
  }

  .error-actions {
    margin-top: 50px;
  }
}

/***** Shared: 1200px container + tab bar (BidHarvest design) *****/
/* .kb-container is the plain 1200px width; .kb-page above adds the page padding.
   .kb-tabs styles Copenhagen's .collapsible-nav as the design's tab group, so the
   mobile collapse behaviour in script.js keeps working. */
.kb-container {
  max-width: 1200px;
}

@media (min-width: 1200px) {
  .kb-container {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }
}

.kb-tabs {
  border-bottom: 1px solid #d7d9df;
}

.kb-tabs .collapsible-nav-list li,
.kb-tabs .collapsible-nav-list li.current,
.kb-tabs .collapsible-nav-list li[aria-selected="true"] {
  border-bottom: 4px solid transparent;
  line-height: normal;
  margin: 0 0 -1px;
  padding: 0;
}

.kb-tabs .collapsible-nav-list li a,
.kb-tabs .collapsible-nav-list li:hover a:not([aria-current="page"]) {
  color: #000;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  opacity: 0.5;
  padding: 10px 15px;
}

.kb-tabs .collapsible-nav-list li:hover {
  border-bottom-color: #d7d9df;
}

.kb-tabs .collapsible-nav-list li:hover a {
  opacity: 1;
  text-decoration: none;
}

.kb-tabs .collapsible-nav-list li.current,
.kb-tabs .collapsible-nav-list li[aria-selected="true"] {
  border-bottom-color: #4d7eb8;
}

.kb-tabs .collapsible-nav-list li.current a,
.kb-tabs .collapsible-nav-list li[aria-selected="true"] a {
  color: #4d7eb8;
  opacity: 1;
}

/* Shared data table: 50px rows, first column fluid, the rest 166px.
   Used by the requests ("My Tickets") and subscriptions ("Following") pages. */
.kb-table {
  table-layout: auto;
}

.kb-table tr {
  border-bottom: 0;
  padding: 0;
}

.kb-table th,
.kb-table th a {
  color: #1d1d1d;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
}

[dir="rtl"] .kb-table th, [dir="rtl"]
.kb-table th a {
  text-align: right;
}

.kb-table th,
.kb-table td,
.kb-table th:first-child,
.kb-table td:first-child,
.kb-table th:last-child,
.kb-table td:last-child {
  height: 50px;
  padding: 10px 20px;
}

.kb-table th {
  border-bottom: 1px solid #808080;
}

.kb-table td {
  border-bottom: 1px solid #d7d9df;
  color: #1d1d1d;
  font-size: 16px;
  line-height: 1.2;
}

@media (min-width: 1024px) {
  .kb-table th:first-child,
  .kb-table td:first-child {
    width: auto;
  }

  .kb-table th:not(:first-child),
  .kb-table td:not(:first-child) {
    width: 166px;
  }
}

.kb-table .striped-list-title {
  color: #1d1d1d;
  max-width: none;
  min-width: 0;
}

.kb-table .striped-list-title:hover,
.kb-table .striped-list-title:focus {
  color: #2f73c7;
}

/* Filter control drawn as a select in the design (native select or the
   dropdown button Copenhagen uses on the Following page) */
/* No display/flex declarations here — this class lands on native <select>
   elements, where they let the control shrink below its 173px width. */
.kb-select {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23272727' stroke-linecap='round' d='M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  border: 1px solid #a0a7bf;
  border-radius: 10px;
  color: #272727;
  flex: 0 0 173px;
  font-size: 16px;
  height: 42px;
  line-height: 1.2;
  margin: 0;
  max-height: none;
  max-width: none;
  padding: 0 40px 0 12px;
  width: 173px;
}

[dir="rtl"] .kb-select {
  background-position: left 10px center;
  padding: 0 12px 0 40px;
}

/***** User profile page (BidHarvest design) *****/

/* Header: white, not Copenhagen's grey band */
.profile-header {
  background-color: #fff;
  padding: 40px 0 0;
}

.profile-header .container {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

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

/* Row gap 34px stacks avatar/name/actions above the stats row;
   column gap 20px sits between the avatar and the name. */
.profile-header .profile-info {
  align-items: center;
  flex: 1 1 auto;
  gap: 34px 20px;
}

.profile-header .profile-avatar {
  align-self: center;
  flex: 0 0 58px;
  margin: 0;
}

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

.profile-header .basic-info {
  flex: 0 1 auto;
}

.profile-header .basic-info .name {
  color: #2f73c7;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.72px;
  line-height: 1.1;
}

.profile-header .basic-info .name a,
.profile-header .basic-info .name a:visited {
  color: #2f73c7;
}

/* Push the Edit Profile / Follow actions to the far end of the first row */
.profile-header .options {
  align-items: center;
  flex: 0 0 auto;
  margin: 0 0 0 auto;
}

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

.profile-header .user-profile-actions {
  margin-bottom: 0;
  width: auto;
}

.profile-header .options button,
.profile-header .community-follow [role="button"],
.profile-header .community-follow button {
  background-color: #2f73c7;
  border-radius: 5px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  height: 35px;
  letter-spacing: -0.28px;
  padding: 0 15px;
}

.profile-header .options button:hover,
.profile-header .options button:focus {
  background-color: #2f73c7;
  filter: brightness(1.1);
}

.profile-header .description {
  color: #000;
  flex-basis: 100%;
  font-size: 16px;
  line-height: 1.2;
  margin: 0;
}

/* Stats — label above value on the left, label/value pairs on the right */
.profile-header .profile-stats {
  color: #000;
  font-size: 16px;
}

.profile-header .profile-stats .stat-label {
  color: #000;
  flex: 0 1 auto;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
}

.profile-header .profile-stats .stat-value {
  line-height: 1.2;
}

.profile-header .profile-stats-activity {
  border-top: 0;
  flex-basis: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px 62px;
  margin: 0;
}

.profile-header .profile-stats-activity .stat {
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.profile-header .profile-stats-counters {
  border-bottom: 0;
  flex: 0 0 235px;
  gap: 16px;
  margin: 0;
  min-height: 145px;
}

@media (min-width: 768px) {
  .profile-header .profile-stats-counters {
    justify-content: space-between;
  }
}

.profile-header .profile-stats-counters .stat {
  flex-direction: row;
  justify-content: space-between;
  margin: 0;
}

.profile-header .profile-stats-counters .stat-value {
  flex: 0 0 75px;
}

/* Tabs — .kb-tabs above supplies the look; the nav sits inside the 1200px
   container so its rule spans the content, not the full viewport width as
   Copenhagen's grey nav band did */
.profile-nav {
  background-color: transparent;
  margin: 40px 0;
}

/* Section heading */
.profile-section {
  width: 100%;
}

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

.profile-section-header {
  margin-bottom: 40px;
}

.profile-section-title {
  color: #243d5c;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.1;
}

.profile-section-description {
  color: #000;
  font-size: 16px;
  line-height: 1.2;
  overflow: visible;
  padding: 10px 0 0;
  text-overflow: clip;
  white-space: normal;
}

@media (max-width: 767px) {
  .profile-header .basic-info .name {
    font-size: 28px;
  }

  .profile-header .profile-info {
    gap: 20px;
  }
}

/***** Requests (My Tickets) page (BidHarvest design) *****/
.requests-page {
  padding-top: 40px;
  padding-bottom: 60px;
}

.requests-page .my-activities-header h1 {
  color: #243d5c;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.56px;
  line-height: 1.2;
  margin: 0 0 20px;
}

.requests-page .my-activities-sub-nav {
  margin-bottom: 40px;
}

.requests-page .collapsible-nav-border {
  border: 0;
  border-bottom: 1px solid #d7d9df;
}

/* Toolbar: search grows, the status filter keeps its own width */
.requests-page .requests-table-toolbar {
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px 40px;
  margin-bottom: 10px;
}

@media (min-width: 1200px) {
  .requests-page .requests-table-toolbar {
    gap: 20px 120px;
  }
}

.requests-page .requests-table-toolbar .search {
  border: 1px solid #a0a7bf;
  border-radius: 10px;
  flex: 1 1 260px;
  width: auto;
}

.requests-page .requests-table-toolbar .search input[type="search"] {
  border-radius: 10px;
  font-size: 16px;
  height: 42px;
  padding-left: 52px;
}

[dir="rtl"] .requests-page .requests-table-toolbar .search input[type="search"] {
  padding-left: 20px;
  padding-right: 52px;
}

.requests-page .requests-table-toolbar .search-icon {
  height: 20px;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
}

[dir="rtl"] .requests-page .requests-table-toolbar .search-icon {
  left: auto;
  right: 20px;
}

.requests-page .requests-table-toolbar .request-table-filter {
  align-items: center;
  display: flex;
  gap: 10px;
  width: auto;
}

/* Copenhagen gives every .request-filter a 30px left margin, which outranks
   .kb-select's margin:0 — the gap comes from the toolbar's own gap instead */
.requests-page .requests-table-toolbar .request-filter,
.requests-page .requests-table-toolbar .request-filter.kb-select {
  margin: 0;
}

.requests-page .requests-table-toolbar .request-filter-label {
  color: #000;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  opacity: 0.5;
}

.requests-page .requests-table-toolbar .organization-subscribe button {
  border-radius: 5px;
  height: 42px;
  line-height: normal;
  max-height: none;
}

.requests-page .requests-table-toolbar + .requests,
.requests-page .requests-table-toolbar + .requests-search-info + .requests {
  margin-top: 0;
}

/* Table styling lives on the shared .kb-table below */

.requests-page .requests-table-status {
  text-align: center;
}

/* Status pills — Pending and Solved come from the design; the remaining
   Zendesk statuses are mapped onto the same palette. */
.requests-page .status-label {
  border-radius: 5px;
  font-size: 14px;
  font-weight: 400;
  margin: 0;
  padding: 5px 10px;
}

.requests-page .status-label-new,
.requests-page .status-label-open {
  background-color: #2f73c7;
  color: #fff;
}

.requests-page .status-label-pending,
.requests-page .status-label-answered {
  background-color: #4d7eb8;
  color: #fff;
}

.requests-page .status-label-solved {
  background-color: #117e4b;
  color: #fff;
}

.requests-page .status-label-closed {
  background-color: #808080;
  color: #fff;
}

.requests-page .status-label-hold {
  background-color: #243d5c;
  color: #fff;
}

.requests-page .no-activities,
.requests-page .requests-search-info {
  color: #1d1d1d;
  font-size: 16px;
  padding: 20px 0;
}

@media (max-width: 767px) {
  .requests-page .my-activities-header h1 {
    font-size: 24px;
  }

  .requests-page .requests-table-toolbar .request-table-filter {
    width: 100%;
  }

  .requests-page .requests-table-toolbar .kb-select {
    flex: 1 1 auto;
    width: auto;
  }
}

/***** Search results page (BidHarvest design) *****/
.search-page .search-results {
  justify-content: flex-start;
}

.search-page .search-results-sidebar {
  border: 0;
}

@media (min-width: 1024px) {
  .search-page .search-results-column {
    flex: 1 1 auto;
  }
}

/* Filter cards — the sidebar-card shell, with no rules between filter rows */
.search-page .search-results-sidebar .collapsible-sidebar {
  margin-bottom: 0;
}

.search-page .search-results-sidebar .sidenav-item {
  border-radius: 0;
  margin-bottom: 0;
}

.search-page .search-results-sidebar .sidenav-item:hover {
  background-color: transparent;
  color: #2f73c7;
}

.search-page .search-results-sidebar .sidenav-item.current:hover {
  background-color: #2f73c7;
  color: #fff;
}

.search-page .search-results-sidebar .doc-count {
  color: inherit;
}

.search-page .search-results-sidebar .see-all-filters {
  color: #2f73c7;
  font-size: 14px;
  padding: 10px 15px;
}

/* Results heading */
.search-page .search-results-subheading {
  border-bottom: 1px solid #d7d9df;
  color: #243d5c;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.1;
  margin: 0 0 20px;
  padding-bottom: 30px;
}

/* Result cards */
.search-page .search-results-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}

.search-page .search-results-list > li,
.search-page .search-results-list > li:first-child {
  background-color: #f0eff1;
  border: 0;
  border-bottom: 1px solid #d7d9df;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 30px;
}

.search-page .search-result-title {
  margin: 0;
}

.search-page .search-result-title a,
.search-page .search-result-title a:visited {
  color: #2f73c7;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.1;
}

/* Breadcrumb trail left, date right */
.search-result-meta {
  align-items: baseline;
  color: #243d5c;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  justify-content: space-between;
  opacity: 0.65;
}

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

.search-page .search-result-breadcrumbs li,
.search-page .search-result-breadcrumbs li a,
.search-page .search-result-breadcrumbs li a:visited,
.search-result-date {
  color: #243d5c;
  font-size: 14px;
  line-height: 1.2;
}

.search-result-date {
  white-space: nowrap;
}

/* The design truncates the excerpt to a single line */
.search-page .search-results-description {
  color: #243d5c;
  font-size: 14px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-page .search-result-icons {
  color: #243d5c;
  opacity: 0.65;
}

.search-page .search-results-empty {
  color: #243d5c;
  font-size: 16px;
}

@media (max-width: 767px) {
  .search-page .search-results-list > li,
  .search-page .search-results-list > li:first-child {
    padding: 20px;
  }

  /* Wrapping beats truncating once the card is narrow */
  .search-page .search-results-description {
    overflow: visible;
    white-space: normal;
  }
}

/***** Following (subscriptions) page (BidHarvest design) *****/
.following-nav {
  background-color: transparent;
  margin: 0;
  padding-top: 40px;
}

.following-page {
  padding-bottom: 60px;
  padding-top: 40px;
}

.following-page .my-activities-header h1 {
  color: #243d5c;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.56px;
  line-height: 1.2;
  margin: 0 0 20px;
}

.following-page .my-activities-following-header {
  margin-bottom: 40px;
}

/* Copenhagen renders this filter as a dropdown button, not a <select>;
   .kb-select gives it the drawn control's look, and the chevron comes from
   that background image so the inline SVG is dropped from the template. */
.following-page .dropdown-toggle.kb-select {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  text-align: left;
}

.following-page .dropdown-menu {
  border-radius: 10px;
}

/* Unfollow button */
.following-page .subscriptions-subscribe {
  text-align: center;
}

.following-page .subscriptions-subscribe button {
  background-color: #606060;
  border: 0;
  border-radius: 5px;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  padding: 5px 10px;
  transition: filter 0.15s ease;
  width: auto;
}

.following-page .subscriptions-subscribe button:hover,
.following-page .subscriptions-subscribe button:focus,
.following-page .subscriptions-subscribe button[data-selected="true"] {
  background-color: #606060;
  border: 0;
  color: #fff;
  filter: brightness(1.15);
}

.following-page .subscriptions-table td:first-child {
  gap: 10px;
}

.following-page .subscriptions-table .user-avatar {
  margin: 0;
}

.following-page .no-activities {
  color: #1d1d1d;
  font-size: 16px;
  padding: 20px 0;
}

@media (max-width: 767px) {
  .following-page .my-activities-header h1 {
    font-size: 24px;
  }
}

/***** Footer (BidHarvest design) *****/
/* The design butts the footer band straight against the page content —
   every restyled template supplies its own bottom padding. */
.footer {
  background-color: #fafafa;
  border-top: 1px solid #d7d9df;
  margin-top: 0;
  padding: 20px 40px;
}

.footer-inner {
  align-items: center;
  gap: 20px;
  max-width: 1400px;
  padding: 0;
  width: 100%;
}

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

.footer-brand {
  align-items: center;
  display: flex;
  gap: 20px;
  min-width: 0;
}

.footer-logo-link {
  display: inline-flex;
  line-height: 0;
}

.footer-logo {
  height: 34px;
  width: auto;
}

.footer-social {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

/* Instagram and Facebook carry their own circle; LinkedIn is a bare glyph,
   so its container supplies the disc — as the design does. */
.footer-social-icon {
  align-items: center;
  border-radius: 50%;
  display: flex;
  flex: 0 0 30px;
  height: 30px;
  justify-content: center;
  transition: filter 0.15s ease;
  width: 30px;
}

.footer-social-icon-filled {
  background-color: #243d5c;
  color: #fff !important;
}

.footer-social-icon:hover, .footer-social-icon:focus {
  filter: brightness(1.25);
}

.footer-btn,
.footer-btn:visited {
  background-color: #2f73c7;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.28px;
  line-height: 1.2;
  padding: 10px 15px;
  text-align: center;
  transition: filter 0.15s ease;
  white-space: nowrap;
}

.footer-btn:hover, .footer-btn:focus {
  color: #fff;
  filter: brightness(1.1);
  text-decoration: none;
}

.footer-language-selector button,
.footer-language-selector a,
.footer-language-selector a:visited {
  color: #243d5c;
  font-size: 14px;
}

/* "Powered by Zendesk" is injected by Zendesk, not by footer.hbs, so its
   position in the DOM isn't ours to control.

   The box stays full width so the grey band runs edge to edge like the
   footer above it; the text is pulled in by padding instead of by capping
   the box, so it still lines up with the logo and the Submit Ticket button.
   max() keeps the side padding from going negative on narrow viewports.

   Both placements are handled: the base rule assumes it sits outside the
   band, so it paints its own background and keeps the band's 40px minimum;
   the nested rule drops that minimum to 0 because the band's padding is
   already applied by then. */
.powered-by-zendesk {
  background-color: #fafafa;
  margin: 0;
  max-width: none;
  padding-left: max(40px, calc((100% - 1400px) / 2));
  padding-right: max(40px, calc((100% - 1400px) / 2));
  width: 100%;
}

.footer .powered-by-zendesk {
  background-color: transparent;
  padding-left: max(0px, calc((100% - 1400px) / 2));
  padding-right: max(0px, calc((100% - 1400px) / 2));
}

@media (max-width: 767px) {
  .footer {
    padding: 20px;
  }

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

  .footer-social {
    justify-content: flex-start;
  }

  /* track the band's smaller padding at this width */
  .powered-by-zendesk {
    padding-left: max(20px, calc((100% - 1400px) / 2));
    padding-right: max(20px, calc((100% - 1400px) / 2));
  }
}

/***** New request (Submit a Ticket) page *****/
/* No Figma frame for this page — the widths, type scale, form-control
   treatment and button come from the pages that do have one, so it reads as
   part of the same set. Everything inside .form is markup generated by
   {{request_form}}, so it can only be reached by element selectors. */
.new-request-page {
  padding-bottom: 60px;
  padding-top: 40px;
}

.new-request-title {
  color: #243d5c;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.56px;
  line-height: 1.2;
  margin: 0 0 40px;
}

.new-request-title .follow-up-hint {
  color: #606060;
  display: block;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: normal;
  margin-top: 8px;
}

.new-request-title .follow-up-hint:empty {
  display: none;
}

/* 820px matches the content column on the two-column KB pages.
   The bottom margin sits on the form itself rather than relying on the
   container's padding, so the gap above the footer survives however
   {{request_form}} renders. */
.new-request-page .form {
  margin-bottom: 60px;
  max-width: 820px;
}

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

.new-request-page .form-field label {
  color: #243d5c;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 8px;
}

/* The design's input treatment: 10px radius, #a0a7bf stroke, 16px text */
.new-request-page .form-field input:not([type="checkbox"]):not([type="submit"]),
.new-request-page .form-field textarea,
.new-request-page .form-field select,
.new-request-page .form-field .nesty-input {
  border: 1px solid #a0a7bf;
  border-radius: 10px;
  color: #272727;
  font-size: 16px;
  min-height: 42px;
  padding: 10px 12px;
  width: 100%;
}

.new-request-page .form-field select {
  background-position: right 12px center;
  padding-right: 40px;
}

.new-request-page .form-field .nesty-input {
  display: flex;
  align-items: center;
  line-height: normal;
  padding-right: 40px;
  position: relative;
}

/* Zendesk's own nesty stylesheet draws this control's arrow with
   `content: "▾"` (U+25BE) but serves it mis-encoded, so it renders as the
   literal characters "â–¾". Not scoped to .new-request-page — the same
   control appears on any form with a nested drop-down field.

   Replacing the glyph with the inline SVG the other form controls already
   use fixes it and makes it encoding-proof. Zendesk's rule is `.nesty-input:after`
   at specificity (0,1,1); `.form-field .nesty-input::after` is (0,2,1), so this
   wins regardless of which stylesheet loads first. */
.form-field .nesty-input::after,
.form-field .nesty-input:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23272727' stroke-linecap='round' d='M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  height: 20px;
  margin: 0;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
}

[dir="rtl"] .form-field .nesty-input::after,
[dir="rtl"] .form-field .nesty-input:after {
  left: 12px;
  right: auto;
}

.new-request-page .form-field textarea {
  line-height: 1.5;
  min-height: 160px;
}

.new-request-page .form-field input:not([type="checkbox"]):focus,
.new-request-page .form-field textarea:focus,
.new-request-page .form-field select:focus,
.new-request-page .form-field .nesty-input:focus,
.new-request-page .form-field .hc-multiselect-toggle:focus {
  border: 1px solid #2f73c7;
}

.new-request-page .form-field input[type="checkbox"] {
  min-height: 0;
  width: auto;
}

.new-request-page .form-field input[type="checkbox"] + label {
  color: #272727;
  font-weight: 400;
}

/* Hint text under a field, and the "(optional)" marker beside its label */
.new-request-page .form-field p,
.new-request-page .form-field .optional {
  color: #606060;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

.new-request-page .form-field p {
  margin: 8px 0 0;
}

.new-request-page .upload-dropzone {
  border-radius: 10px;
}

.new-request-page .upload-dropzone span {
  color: #606060;
}

/* Suggested articles — the search page's card language, at list scale */
.new-request-page .form .suggestion-list {
  border-top: 1px solid #d7d9df;
  font-size: 16px;
  margin-top: 40px;
  padding-top: 30px;
}

.new-request-page .form .suggestion-list label {
  border: 0;
  color: #243d5c;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.1;
  margin-bottom: 8px;
  padding-bottom: 0;
}

.new-request-page .form .suggestion-list li {
  padding: 7px 0;
}

.new-request-page .form .suggestion-list a,
.new-request-page .form .suggestion-list a:visited {
  color: #2f73c7;
  font-size: 16px;
  line-height: 1.6;
  text-decoration: underline;
}

/* Actions. Flex rather than inline flow so the submit button, the cancel
   link and any checkbox the form adds share one baseline. */
.new-request-page .form footer {
  align-items: center;
  border-top: 1px solid #d7d9df;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 40px;
  padding-top: 30px;
}

.new-request-page .form footer a {
  color: #606060;
  font-size: 14px;
  margin-right: 0;
}

.new-request-page .form footer input[type="submit"] {
  margin: 0;
}

.new-request-page input[type="submit"] {
  background-color: #2f73c7;
  border-radius: 5px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.28px;
  line-height: normal;
  min-height: 42px;
  min-width: 160px;
  padding: 10px 24px;
  transition: filter 0.15s ease;
}

.new-request-page input[type="submit"]:hover,
.new-request-page input[type="submit"]:focus,
.new-request-page input[type="submit"]:active {
  background-color: #2f73c7;
  filter: brightness(1.1);
}

.new-request-page input[type="submit"][disabled] {
  background-color: #a0a7bf;
  filter: none;
}

@media (max-width: 767px) {
  .new-request-title {
    font-size: 24px;
  }
}

/***** Visited-link colours on buttons and chips *****/
/* Copenhagen's `a:visited { color: rgba(0, 141, 255, 1) }` has specificity
   (0,1,1), which beats a plain `.button-class` rule at (0,1,0) — so any anchor
   styled as a button turned bright blue once clicked. Every custom anchor that
   isn't a plain body link is pinned here for all link states.
   Add new button classes to this block when you add them. */

/* White label on a coloured fill */
.header-btn,
.header-btn:visited,
.header-btn:hover,
.header-btn:focus,
.header-btn:active,
.popular-searches-item,
.popular-searches-item:visited,
.popular-searches-item:hover,
.popular-searches-item:focus,
.popular-searches-item:active,
.promo-cta-btn,
.promo-cta-btn:visited,
.promo-cta-btn:hover,
.promo-cta-btn:focus,
.promo-cta-btn:active,
.sidebar-help-btn,
.sidebar-help-btn:visited,
.sidebar-help-btn:hover,
.sidebar-help-btn:focus,
.sidebar-help-btn:active,
.error-btn,
.error-btn:visited,
.error-btn:hover,
.error-btn:focus,
.error-btn:active,
.footer-btn,
.footer-btn:visited,
.footer-btn:hover,
.footer-btn:focus,
.footer-btn:active,
.footer-social-icon-filled,
.footer-social-icon-filled:visited,
.footer-social-icon-filled:hover,
.footer-social-icon-filled:focus,
.footer-social-icon-filled:active,
.kb-sidebar .sidenav-item.current,
.kb-sidebar .sidenav-item.current:visited,
.kb-sidebar .sidenav-item.current:hover,
.kb-sidebar .sidenav-item.current:focus,
.kb-sidebar .sidenav-item.current-article,
.kb-sidebar .sidenav-item.current-article:visited,
.kb-sidebar .sidenav-item.current-article:hover,
.kb-sidebar .sidenav-item.current-article:focus {
  color: #fff;
}

/* Dark label on a light surface */
.kb-links-link,
.kb-links-link:visited,
.kb-sidebar .sidenav-item:visited,
.kb-table .striped-list-title:visited,
.category-page .article-list-item a:visited,
.category-page .section-tree-title a:visited {
  color: #243d5c;
}

/* Blue text links that are still links, just not the visited blue */
.see-all-articles,
.see-all-articles:visited,
.search-page .search-results-sidebar .see-all-filters,
.search-page .search-results-sidebar .see-all-filters:visited,
.article-author-name:visited,
.attachment-name:visited,
.search-page .search-result-title a:visited,
.search-page .content-tag-list a:visited,
.article-page .content-tag-list a:visited,
.article-page .article-relatives a:visited {
  color: #2f73c7;
}

/* Hover states that would otherwise fall back to the dark default */
.kb-sidebar .sidenav-item:hover,
.kb-sidebar .sidenav-item:focus,
.kb-table .striped-list-title:hover,
.kb-table .striped-list-title:focus,
.category-page .article-list-item a:hover,
.category-page .article-list-item a:focus,
.category-page .section-tree-title a:hover,
.category-page .section-tree-title a:focus {
  color: #2f73c7;
}