@charset "UTF-8";

/***** Normalize.css *****/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

[dir] body {
  margin: 0;
}

body.homepage .header .nav-wrapper .search-container {
  display: none;
}

/* Large screens, homepage: hide the header search — the hero already has one.
   Higher specificity + !important to beat the inline toggle script. */
@media (min-width: 1200px) {
  body.homepage .header .nav-wrapper .search-container,
  body.homepage .header .user-nav .search-container {
    display: none !important;
  }
}

main {
  display: block;
}

h1 {
  font-size: 36px;
}

[dir] h1 {
  margin: 0.67em 0;
}

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

[dir] a {
  background-color: transparent;
}

abbr[title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

[dir] abbr[title] {
  border-bottom: none;
}

b,
strong {
  font-weight: bolder;
}

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

/* Jason's PRE and CODE custom settings - 25/8/2025 */

.article-body code,
.comment-body code,
.post-body code,
li code,
p code,
div code {
    font-family: monospace !important;
    background-color: #f5f5f5 !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 0 !important;
    font-size: 0.9em !important;
    display: inline !important;
    white-space: nowrap !important;
    border-radius: 0 !important;
}

.article-body pre code,
.comment-body pre code,
.post-body pre code,
pre code {
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    white-space: pre !important;
    border: none !important;
    border-radius: 0 !important;
}

.article-body pre,
.comment-body pre,
.post-body pre {
    background-color: #f5f5f5 !important;
    padding: 12px !important;
    border-radius: 4px !important;
    overflow-x: auto !important;
}

/* End of Jason's PRE and CODE custom settings */

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 {
  max-width: 100%;
}

[dir] img {
  border-style: none;
}

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

[dir] button, [dir] input, [dir] optgroup, [dir] select, [dir] textarea {
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

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

[dir] button::-moz-focus-inner, [dir] [type="button"]::-moz-focus-inner, [dir] [type="reset"]::-moz-focus-inner, [dir] [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;
}

[dir] fieldset {
  padding: 0.35em 0.75em 0.625em;
}

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

[dir] legend {
  padding: 0;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

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

[dir] [type="checkbox"], [dir] [type="radio"] {
  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 {
  color: #2F3941;
  font-family: 'Figtree', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[dir] body {
  background-color: #FFFFFF;
}

[dir] body > main {
  border-top: 112px solid #fff;
}

[dir] .is-user > main {
  border-top: 64px solid #fff;
}

@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

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

[dir] h1, [dir] h2, [dir] h3, [dir] h4, [dir] h5, [dir] h6 {
  margin-top: 0;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 18px;
  font-weight: 600;
  font-family: 'Ufficio Fireblocks', sans-serif;
}

h4 {
  font-size: 16px;
}

a {
  color: rgb(69, 104, 243);
  text-decoration: none;
}

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

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

input {
  font-weight: 300;
  max-width: 100%;
  box-sizing: border-box;
  transition: border .12s ease-in-out;
}

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

[dir] input:not([type="checkbox"]):focus {
  border: 1px solid rgba(33, 38, 71, 1);
}

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

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  color: #555;
  width: 100%;
}

[dir] select {
  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;
  border: 1px solid #ddd;
  border-radius: 4px;
}

[dir=ltr] select {
  background-position: right 10px center;
  padding: 8px 28px 8px 8px;
}

[dir=rtl] select {
  background-position: left 10px center;
  padding: 8px 8px 8px 28px;
}

[dir] select:focus {
  border: 1px solid rgba(33, 38, 71, 1);
}

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

textarea {
  resize: vertical;
  width: 100%;
  outline: none;
}

[dir] textarea {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 12px;
}

[dir] textarea:focus {
  border: 1px solid rgba(33, 38, 71, 1);
}

.container {
  max-width: 1216px;
}

[dir] .container {
  margin: 0 auto;
  padding: 0 32px;
}

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

ul {
  list-style: none;
}

[dir] ul {
  margin: 0;
  padding: 0;
}

.error-page {
  max-width: 1160px;
}

[dir] .error-page {
  margin: 0 auto;
  padding: 0 5%;
}

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

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

[dir] .visibility-hidden {
  border: 0;
  margin: 0;
  padding: 0;
}

.visible-xs {
  display: none !important;
}

@media (max-width: 1023px) {
  .visible-xs {
    display: block !important;
  }
}

.visible-sm {
  display: none !important;
}

@media (min-width: 1024px) {
  .visible-sm {
    display: block !important;
  }
}

/***** 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 {
  color: rgba(33, 38, 71, 1);
  display: inline-block;
  font-size: 12px;
  line-height: 2.34;
  transition: background-color .12s ease-in-out, border-color .12s ease-in-out, color .15s ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  white-space: nowrap;
  width: 100%;
  -webkit-touch-callout: none;
}

[dir] .button, [dir] .split-button button, [dir] .section-subscribe button, [dir] .article-subscribe button, [dir] .community-follow button, [dir] .requests-table-toolbar .organization-subscribe button, [dir] .subscriptions-subscribe button, [dir] .pagination-next-link, [dir] .pagination-prev-link, [dir] .pagination-first-link, [dir] .pagination-last-link {
  background-color: transparent;
  border: 1px solid rgba(33, 38, 71, 1);
  border-radius: 4px;
  cursor: pointer;
  margin: 0;
  padding: 0 20px;
  text-align: center;
}

@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: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 {
  color: #FFFFFF;
  text-decoration: none;
}

[dir] .button:hover, [dir] .split-button button:hover, [dir] .section-subscribe button:hover, [dir] .article-subscribe button:hover, [dir] .community-follow button:hover, [dir] .requests-table-toolbar .organization-subscribe button:hover, [dir] .subscriptions-subscribe button:hover, [dir] .pagination-next-link:hover, [dir] .pagination-prev-link:hover, [dir] .pagination-first-link:hover, [dir] .pagination-last-link:hover, [dir] .button:active, [dir] .split-button button:active, [dir] .section-subscribe button:active, [dir] .article-subscribe button:active, [dir] .community-follow button:active, [dir] .requests-table-toolbar .organization-subscribe button:active, [dir] .subscriptions-subscribe button:active, [dir] .pagination-next-link:active, [dir] .pagination-prev-link:active, [dir] .pagination-first-link:active, [dir] .pagination-last-link:active, [dir] .button:focus, [dir] .split-button button:focus, [dir] .section-subscribe button:focus, [dir] .article-subscribe button:focus, [dir] .community-follow button:focus, [dir] .requests-table-toolbar .organization-subscribe button:focus, [dir] .subscriptions-subscribe button:focus, [dir] .pagination-next-link:focus, [dir] .pagination-prev-link:focus, [dir] .pagination-first-link:focus, [dir] .pagination-last-link:focus, [dir] .button.button-primary, [dir] .split-button button.button-primary, [dir] .section-subscribe button.button-primary, [dir] .section-subscribe button[data-selected="true"], [dir] .article-subscribe button.button-primary, [dir] .article-subscribe button[data-selected="true"], [dir] .community-follow button.button-primary, [dir] .requests-table-toolbar .organization-subscribe button.button-primary, [dir] .requests-table-toolbar .organization-subscribe button[data-selected="true"], [dir] .subscriptions-subscribe button.button-primary, [dir] .subscriptions-subscribe button[data-selected="true"], [dir] .button-primary.pagination-next-link, [dir] .button-primary.pagination-prev-link, [dir] .button-primary.pagination-first-link, [dir] .button-primary.pagination-last-link {
  background-color: rgba(33, 38, 71, 1);
}

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

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

.button-large, input[type="submit"] {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 400;
  line-height: 2.72;
  min-width: 190px;
  width: 100%;
}

[dir] .button-large, [dir] input[type="submit"] {
  cursor: pointer;
  background-color: rgba(33, 38, 71, 1);
  border: 0;
  border-radius: 4px;
  padding: 0 1.9286em;
}

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

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

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

.button-secondary {
  color: #5a6d7c;
}

[dir] .button-secondary {
  border: 1px solid #ddd;
  background-color: transparent;
}

.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: #2F3941;
}

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

/***** Split button *****/

.split-button {
  display: flex;
}

.split-button button {
  color: #FFFFFF;
  height: 32px;
  line-height: 16px;
  outline-color: rgba(33, 38, 71, 1);
}

[dir] .split-button button {
  background-color: rgba(33, 38, 71, 1);
  border: 0;
}

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

[dir] .split-button button:not(:only-child):last-child {
  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;
  font-weight: 300;
}

[dir=ltr] .table th, [dir=ltr] .table th a {
  text-align: left;
}

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

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

.table tr {
  display: block;
}

[dir] .table tr {
  border-bottom: 1px solid #ddd;
  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) {
  [dir] .table td, [dir] .table th {
    padding: 20px 28px;
  }
}

@media (min-width: 768px) {
  .table td, .table th {
    height: 60px;
  }
  [dir] .table td, [dir] .table th {
    padding: 8px 20px;
  }
}

/***** Forms *****/

[dir] .form-field:nth-child(3) ~ .form-field {
  margin-top: 24px;
}

.form-field input {
  width: 100%;
}

[dir] .form-field input {
  border: 1px solid #ddd;
  padding: 8px;
}

[dir] .form-field input:focus {
  border: 1px solid rgba(33, 38, 71, 1);
}

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

[dir] .form-field input[type="text"]:focus {
  border: 1px solid rgba(33, 38, 71, 1);
}

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

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

.form-field .nesty-input:focus {
  text-decoration: none;
}

[dir] .form-field .nesty-input:focus {
  border: 1px solid rgba(33, 38, 71, 1);
}

.form-field .hc-multiselect-toggle:focus {
  outline: none;
  text-decoration: none;
}

[dir] .form-field .hc-multiselect-toggle:focus {
  border: 1px solid rgba(33, 38, 71, 1);
}

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

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

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

[dir=ltr] .form-field .optional {
  margin-left: 4px;
}

[dir=rtl] .form-field .optional {
  margin-right: 4px;
}

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

[dir] .form-field p {
  margin: 4px 0;
}

[dir] .form footer {
  margin-top: 40px;
  padding-top: 28px;
}

.form footer a {
  color: #5a6d7c;
}

[dir] .form footer a {
  cursor: pointer;
}

[dir=ltr] .form footer a {
  margin-right: 12px;
}

[dir=rtl] .form footer a {
  margin-left: 12px;
}

.form .searchbox {
  font-size: 13px;
  width: 100%;
}

[dir] .form .searchbox {
  margin-top: 28px;
}

.form .searchbox label {
  display: block;
}

[dir] .form .searchbox label {
  border-bottom: 1px solid #ddd;
  padding-bottom: 4px;
}

[dir] .form .searchbox li {
  padding: 8px 0;
}

.form .searchbox li a:visited {
  color: #4B61C3;
}

/***** Header *****/

.header {
  
  
  transition: all 0.3s ease;
}

.header__inner {
  align-items: center;
  display: flex;
  justify-content: space-between;
  height: 64px;
  max-width: none;
  margin: 0;
}

[dir] .header__inner {
  padding: 24px 40px 24px 20px;
}

[dir=rtl] .header__inner {
  padding: 24px 20px 24px 40px;
}

.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"] {
  top: 71px;
  z-index: 1;
}

[dir] .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;
}

[dir=ltr] .user-nav[aria-expanded="true"] {
  right: 0;
  left: 0;
}

[dir=rtl] .user-nav[aria-expanded="true"] {
  left: 0;
  right: 0;
}

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

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

.nav-wrapper a,
.nav-wrapper .user-info {
  color: rgb(69, 104, 243);
  display: none;
  font-size: 14px;
  width: auto;
}

[dir] .nav-wrapper a {
  border: 0;
}

[dir=ltr] .nav-wrapper a {
  padding: 0 20px 0 0;
}

[dir=rtl] .nav-wrapper a {
  padding: 0 0 0 20px;
}

@media (min-width: 1200px) {
  .nav-wrapper a, 
  .nav-wrapper .user-info{
    display: inline-block;
  }
}

[dir="rtl"] .nav-wrapper a,
  .nav-wrapper .user-info {
  padding: 0 0 0 20px;
}

.nav-wrapper a:hover, .nav-wrapper a:focus, .nav-wrapper a:active {
  color: rgb(69, 104, 243);
  text-decoration: underline;
}

[dir] .nav-wrapper a:hover, [dir] .nav-wrapper a:focus, [dir] .nav-wrapper a:active {
  background-color: transparent;
}

.nav-wrapper a.sign-in {
  display: inline-block;
}

@media (max-width: 768px) {
  .nav-wrapper .hide-on-mobile {
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
    white-space: nowrap;
  }
  [dir] .nav-wrapper .hide-on-mobile {
    border: 0;
    margin: 0;
    padding: 0;
  }
}

.nav-wrapper .menu-button {
  color: rgb(69, 104, 243);
  display: inline-block;
  width: auto;
}

[dir] .nav-wrapper .menu-button {
  background: none;
  border: 0;
  padding: 0;
}

[dir=ltr] .nav-wrapper .menu-button {
  margin-right: 8px;
}

[dir=rtl] .nav-wrapper .menu-button {
  margin-left: 8px;
}

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

.nav-wrapper .menu-button .icon-menu {
  vertical-align: middle;
  width: 13px;
  height: 13px;
}

[dir="rtl"] .nav-wrapper .menu-button {
  margin-left: 8px;
  margin-right: 0;
}

.nav-wrapper .menu-button:hover, .nav-wrapper .menu-button:focus, .nav-wrapper .menu-button:active {
  color: rgb(69, 104, 243);
}

[dir] .nav-wrapper .menu-button:hover, [dir] .nav-wrapper .menu-button:focus, [dir] .nav-wrapper .menu-button:active {
  background-color: transparent;
}

.skip-navigation {
  align-items: center;
  color: white;
  display: flex;
  font-size: 14px;
  justify-content: center;
  overflow: hidden;
  position: absolute;
  top: auto;
  z-index: -999;
}

[dir] .skip-navigation {
  background-color: black;
  margin: 20px;
  padding: 20px;
}

[dir=ltr] .skip-navigation {
  left: -999px;
}

[dir=rtl] .skip-navigation {
  right: -999px;
}

[dir="rtl"] .skip-navigation {
  left: initial;
  right: -999px;
}

.skip-navigation:focus, .skip-navigation:active {
  overflow: auto;
  text-decoration: none;
  top: auto;
  z-index: 999;
}

[dir] .skip-navigation:focus, [dir] .skip-navigation:active {
  text-align: center;
}

[dir=ltr] .skip-navigation:focus, [dir=ltr] .skip-navigation:active {
  left: auto;
}

[dir=rtl] .skip-navigation:focus, [dir=rtl] .skip-navigation:active {
  right: auto;
}

[dir="rtl"] .skip-navigation:focus, [dir="rtl"] .skip-navigation:active {
  left: initial;
  right: auto;
}

/***** 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 {
  color: rgb(69, 104, 243);
  min-width: 0;
  white-space: nowrap;
}

[dir] .user-info > button {
  border: 0;
  padding: 0;
}

.user-info > button:hover, .user-info > button:focus {
  color: rgb(69, 104, 243);
}

[dir] .user-info > button:hover, [dir] .user-info > button:focus {
  background-color: transparent;
}

.user-info > button::after {
  color: rgb(69, 104, 243);
}

[dir=ltr] .user-info > button::after {
  padding-right: 12px;
}

[dir=rtl] .user-info > button::after {
  padding-left: 12px;
}

[dir="rtl"] .user-info > button::after {
  padding-left: 12px;
  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;
  display: inline-block;
  vertical-align: middle;
}

[dir] .user-avatar {
  border-radius: 50%;
}

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

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

.avatar .icon-agent {
  color: rgba(33, 38, 71, 1);
  bottom: -4px;
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  width: 17px;
}

[dir] .avatar .icon-agent {
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: #FFFFFF;
  text-align: center;
}

[dir=ltr] .avatar .icon-agent {
  right: -2px;
}

[dir=rtl] .avatar .icon-agent {
  left: -2px;
}

/***** Footer *****/

[dir] .footer {
  border-top: 1px solid #ddd;
  margin-top: 60px;
  padding: 28px 0;
}

.footer a {
  color: #5a6d7c;
}

.footer-inner {
  max-width: 1160px;
  display: flex;
  justify-content: space-between;
}

[dir] .footer-inner {
  margin: 0 auto;
  padding: 0 5%;
}

@media (min-width: 1160px) {
  .footer-inner {
    width: 90%;
  }
  [dir] .footer-inner {
    padding: 0;
  }
}

.footer-language-selector button {
  color: #5a6d7c;
  display: inline-block;
  font-weight: 300;
}

/***** Breadcrumbs *****/

[dir] .breadcrumbs {
  margin: 0 0 12px 0;
  padding: 0;
}

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

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

.breadcrumbs li + li:before {
  content: "";
  display: inline-block;
  height: 8px;
  width: 8px;
}

[dir] .breadcrumbs li + li:before {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='9' viewBox='0 0 8 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 8.5L6 4.5L2 0.5' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  margin: 0 4px;
}

.breadcrumbs li a:visited {
  color: rgb(69, 104, 243);
}

/***** Search field *****/

.search {
  position: relative;
}

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

[dir] .search input[type="search"] {
  border: 1px solid #ddd;
  border-radius: 30px;
}

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

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

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

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

[dir] .search input[type="search"]:focus {
  border: 1px solid rgba(33, 38, 71, 1);
}

[dir] .search-full input[type="search"] {
  border: 1px solid #fff;
}

.search-icon {
  position: relative;
  top: 50%;
  position: absolute;
  z-index: 1;
  width: 18px;
  height: 18px;
  color: #777;
}

[dir] .search-icon {
  transform: translateY(-50%);
}

[dir=ltr] .search-icon {
  left: 15px;
}

[dir=rtl] .search-icon {
  right: 15px;
}

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

.search-container {
  position: relative;
}

/***** Hero component *****/

.hero {
  height: 300px;
  width: 100%;
}

[dir] .hero {
  background-image: url(/hc/theming_assets/01KYMGWB4D54PK0ZTT59JMSJJ0);
  background-position: center;
  background-size: cover;
  padding: 0 20px;
  text-align: center;
}

.hero-inner {
  position: relative;
  top: 50%;
  max-width: 610px;
}

[dir] .hero-inner {
  transform: translateY(-50%);
  margin: 0 auto;
}

/* Homepage hero search stays visible across breakpoints (Figma 4560-775) —
   it is the primary search affordance and anchors the suggestion pills. */

.page-header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

[dir] .page-header {
  margin-bottom: 40px;
}

.page-header .section-subscribe {
  flex-shrink: 0;
}

[dir] .page-header .section-subscribe {
  margin-bottom: 8px;
}

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

.page-header h1 {
  flex-grow: 1;
  font-family: 'Ufficio Fireblocks', sans-serif;
}

[dir] .page-header h1 {
  margin-bottom: 0;
}

.page-header-description {
  font-style: italic;
  font-weight: 300;
  word-break: break-word;
}

[dir] .page-header-description {
  margin: 0 0 28px 0;
}

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

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

[dir=ltr] .page-header .icon-lock {
  left: -5px;
}

[dir=rtl] .page-header .icon-lock {
  right: -5px;
}

.sub-nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 50px;
}

[dir] .sub-nav {
  margin-bottom: 28px;
  padding-bottom: 12px;
}

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

@media (min-width: 768px) {
  .sub-nav input[type="search"] {
    min-width: 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;
}

[dir] .blocks-list {
  padding: 0;
}

@media (min-width: 768px) {
  [dir] .blocks-list {
    margin: 0 -12px;
  }
}

.blocks-item {
  box-sizing: border-box;
  color: rgba(33, 38, 71, 1);
  display: flex;
  flex-basis: calc(33.3% - 24px);
  max-width: 100%;
  transition: all 0.3s ease;
}

[dir] .blocks-item {
  border: 1px solid rgba(33, 38, 71, 1);
  border-radius: 4px;
  margin: 0 0 28px;
  text-align: center;
}

[dir] .blocks-item:hover {
    transform: translateY(-4px);
    box-shadow: 0px 10px 50px rgba(6, 6, 6, 0.1);
  }

@media (max-width: 1023px) {

.blocks-item {
    flex-basis: calc(50% - 24px)
}
  }

@media (max-width: 707px) {

.blocks-item {
    flex-basis: 100%
}

[dir] .blocks-item {
    margin-bottom: 24px
}
  }

@media (min-width: 768px) {
  [dir] .blocks-item {
    margin: 0 12px 28px;
  }
}

[dir] .blocks-item:hover, [dir] .blocks-item:focus, [dir] .blocks-item:active {
  background-color: rgba(33, 38, 71, 1);
}

.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  text-decoration: none;
}

[dir] .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(33, 38, 71, 1);
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;

  
}

[dir] .blocks-item-link {
  padding: 20px 28px;
  border-radius: inherit;

  
}

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

.blocks-item-link:focus {
  outline: 0;
  text-decoration: none;
}

[dir] .blocks-item-link:focus {
  box-shadow: 0 0 0 3px rgba(33, 38, 71, 1);
}

.blocks-item-title {
  font-size: 16px;
  position: relative;
  font-family: 'Ufficio Fireblocks', sans-serif;
}

[dir] .blocks-item-title {
  margin-bottom: 0;
}

.blocks-item-title:hover {
    color: #212647;
  }

.blocks-item-description {
  font-weight: 300;
}

[dir] .blocks-item-description {
  margin: 0;
}

[dir] .blocks-item-description:not(:empty) {
  margin-top: 8px;
}

/***** Homepage *****/

[dir] .section {
  margin-bottom: 40px;
}

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

[dir] .home-section h2 {
  margin-bottom: 8px;
  text-align: center;
}

/***** Promoted articles *****/

.promoted-articles {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

@media (min-width: 1024px) {
  .promoted-articles {
    flex-direction: row;
  }
}

.promoted-articles-item {
  flex: 1 0 auto;
}

@media (min-width: 1024px) {
  .promoted-articles-item {
    align-self: flex-end;
    flex: 0 0 auto;
    width: 33%;
    /* Three columns on desktop */
  }
  [dir=ltr] .promoted-articles-item {
    padding-right: 28px;
  }
  [dir=rtl] .promoted-articles-item {
    padding-left: 28px;
  }
  [dir="rtl"] .promoted-articles-item {
    padding: 0 0 0 28px;
  }
}

[dir=ltr] .promoted-articles-item:nth-child(3n) {
  padding-right: 0;
}

[dir=rtl] .promoted-articles-item:nth-child(3n) {
  padding-left: 0;
}

.promoted-articles-item a {
  display: block;
  color: #2F3941;
}

[dir] .promoted-articles-item a {
  border-bottom: 1px solid #ddd;
  padding: 12px 0;
}

.promoted-articles-item .icon-lock {
  vertical-align: baseline;
}

[dir] .promoted-articles-item:last-child a {
  border: 0;
}

@media (min-width: 1024px) {
  [dir] .promoted-articles-item:last-child a {
    border-bottom: 1px solid #ddd;
  }
}

/***** Recent activity *****/

[dir] .recent-activity-header {
  margin-bottom: 8px;
  text-align: center;
}

[dir] .recent-activity-list {
  padding: 0;
}

.recent-activity-item {
  overflow: auto;
}

[dir] .recent-activity-item {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}

.recent-activity-item-parent {
  font-size: 16px;
}

.recent-activity-item-parent, .recent-activity-item-link {
  color: #2F3941;
  display: inline-block;
  width: 100%;
}

[dir] .recent-activity-item-parent, [dir] .recent-activity-item-link {
  margin: 4px 0;
}

@media (min-width: 768px) {
  .recent-activity-item-parent, .recent-activity-item-link {
    width: 70%;
  }
  [dir] .recent-activity-item-parent, [dir] .recent-activity-item-link {
    margin: 0;
  }
}

.recent-activity-item-link {
  font-size: 14px;
  font-weight: 300;
}

[dir] .recent-activity-item-meta {
  margin: 12px 0 0 0;
  float: none;
}

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

.recent-activity-item-time, .recent-activity-item-comment {
  color: #5a6d7c;
  display: inline-block;
  font-size: 13px;
  font-weight: 300;
}

[dir=ltr] .recent-activity-item-comment {
  padding-left: 4px;
}

[dir=rtl] .recent-activity-item-comment {
  padding-right: 4px;
}

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

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

[dir] .recent-activity-controls {
  padding-top: 12px;
}

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

[dir] .recent-activity-accessibility-label {
  border: 0;
  margin: 0;
  padding: 0;
}

.recent-activity-comment-icon svg {
  vertical-align: middle;
  color: rgba(33, 38, 71, 1);
  width: 16px;
  height: 16px;
}

.recent-activity-comment-icon:after {
  content: attr(data-comment-count);
}

[dir=ltr] .recent-activity-comment-icon:after {
  margin-left: 0;
}

[dir=rtl] .recent-activity-comment-icon:after {
  margin-right: 0;
}

[dir="rtl"] .recent-activity-comment-icon:after {
  margin-left: 0;
  margin-right: 0;
}

/***** Category pages *****/

.category-content {
  flex: 1;
}

.category-content .section {
    overflow: hidden;
  }

.category-content .blocks-item-icon {
    height: 50px;
    width: 50px;
  }

[dir=ltr] .category-content .blocks-item-icon {
  margin:  0 8px 0 0;
  }

[dir=rtl] .category-content .blocks-item-icon {
    margin:  0 0 0 8px;
  }

@media (min-width: 1200px) {

.category-content .blocks-item-icon {
      display: none
  }
    }

.category-container .article-inner {
    width: 100%;
  }

.category-container .category-content {
    max-width: 927px;
  }

.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 {
  font-size: 18px;
  font-weight: 600;
  font-family: 'Ufficio Fireblocks', sans-serif;
}

[dir] .section-tree-title {
  margin-bottom: 0;
}

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

.section-tree .see-all-articles {
  display: block;
}

[dir] .section-tree .see-all-articles {
  padding: 12px 0;
}

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

[dir] .article-list-item {
  padding: 12px 0;
}

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

.icon-star {
  color: rgba(33, 38, 71, 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%;
  }
}

[dir] .section-list {
  margin: 40px 0;
}

.section-list-item {
  font-size: 16px;
}

[dir] .section-list-item {
  border-bottom: 1px solid #ddd;
  padding: 12px 0;
}

[dir] .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 {
  display: block;
}

[dir] .see-all-sections-trigger {
  cursor: pointer;
  padding: 12px;
  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: 0 1 788px;
  }
  [dir] .article {
    padding-bottom: 56px;
  }
  [dir=ltr] .article {
    padding-right: 88px;
  }
  [dir=rtl] .article {
    padding-left: 88px;
  }
}

.article-container {
  display: flex;
  flex-direction: column;
}

@media (max-width: 1199px) {
    .article-container .article-sidebar {
      display: none !important;
    }
  }

@media (min-width: 1200px) {
  .article-container {
    flex-direction: row;
    justify-content: space-between;
    /* Left-aligned docs layout: no centered 1280 max-width, so the
       sidebar sits at the left gutter (aligned with the header logo)
       instead of leaving a large empty margin on the left. */
    max-width: none;
    margin: 0;
    padding-left: 16px;
    padding-right: 16px;
  }
}

.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

[dir] .article-header {
  margin-bottom: 40px;
  margin-top: 20px;
}

@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
  }
  [dir] .article-header {
    margin-top: 0;
  }
}

[dir=ltr] .article-avatar {
  margin-right: 8px;
}

[dir=rtl] .article-avatar {
  margin-left: 8px;
}

[dir] .article-author {
  margin-bottom: 8px;
}

@media (min-width: 768px) {
  .article-title {
    flex-basis: 100%;
    /* Take entire row */
  }
}

.article-title .icon-lock {
  position: relative;
  vertical-align: baseline;
}

[dir=ltr] .article-title .icon-lock {
  left: -5px;
}

[dir=rtl] .article-title .icon-lock {
  right: -5px;
}

.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 ul, .article-body ol {
  display: block;
  list-style-position: outside;
}

[dir=ltr] .article-body ul, [dir=ltr] .article-body ol {
  padding-left: 28px;
  margin: 2em 2em 4em 2em;
}

[dir=rtl] .article-body ul, [dir=rtl] .article-body ol {
  padding-right: 20px;
  margin: 2em 2em 4em 2em;
}

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

[dir] .article-body ul > ul, [dir] .article-body ol > ol, [dir] .article-body ol > ul, [dir] .article-body ul > ol, [dir] .article-body li > ul, [dir] .article-body li > ol {
  margin-left: 2em;
}

.article-body a:visited {
  color: #4B61C3;
}

.article-body blockquote {
  color: #5a6d7c;
  font-style: italic;
}

[dir] .article-body blockquote {
  padding: 0 12px;
}

[dir=ltr] .article-body blockquote {
  border-left: 1px solid #ddd;
}

[dir=rtl] .article-body blockquote {
  border-right: 1px solid #ddd;
}

[dir] .article-body > p:last-child {
  margin-bottom: 0;
}

.article-content {
  line-height: 1.6;
  word-wrap: break-word;
}

[dir] .article-content {
  margin: 40px 0;
}

.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

[dir] .article-footer {
  padding-bottom: 20px;
}

.article-comment-count {
  color: #5a6d7c;
  font-weight: 300;
}

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

.article-comment-count-icon {
  vertical-align: middle;
  color: rgba(33, 38, 71, 1);
  width: 18px;
  height: 18px;
}

.article-sidebar {
  
  flex: 1 0 auto;
  
}

[dir] .article-sidebar {
  padding: 0 !important;
  background: #FFFFFF;
}

[dir=ltr] .article-sidebar {
  border-right: none;
}

[dir=rtl] .article-sidebar {
  border-left: none;
}

@media (min-width: 1200px) {
  .article-sidebar {
    flex: 0 0 240px;
    height: auto;
  }
  [dir] .article-sidebar {
    margin-bottom: -144px;
    margin-top: -144px;
  }

  .toc-container {
    flex: 0 0 288px;
  }
}

.article-relatives {
  display: flex;
  flex-direction: column;
}

[dir] .article-relatives {
  border-top: 1px solid #ddd;
  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;
}

[dir=ltr] .article-relatives > * {
  margin-right: 0;
}

[dir=rtl] .article-relatives > * {
  margin-left: 0;
}

[dir] .article-relatives > *:last-child {
  padding: 0;
}

@media (min-width: 768px) {
  [dir=ltr] .article-relatives > * {
    padding-right: 20px;
  }
  [dir=rtl] .article-relatives > * {
    padding-left: 20px;
  }
}

[dir] .article-votes {
  border-top: 1px solid #ddd;
  padding: 28px 0;
  text-align: center;
}

.article-vote {
  min-width: 90px;
  width: auto;
}

[dir] .article-vote {
  margin: 8px 4px;
}

[dir] .article-more-questions {
  margin: 8px 0 20px;
  text-align: center;
}

[dir] .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;
}

[dir] .article-return-to-top a {
  padding: 20px 0;
}

.article-return-to-top a:hover, .article-return-to-top a:focus {
  text-decoration: none;
}

[dir=ltr] .article-return-to-top-icon {
  transform: rotate(0.5turn);
}

[dir=rtl] .article-return-to-top-icon {
  transform: rotate(-0.5turn);
}

.sidenav-title {
  font-size: 15px;
  position: relative;
  font-weight: 600;
  font-family: 'Ufficio Fireblocks', sans-serif;
}

.sidenav-item {
  color: #404040;
  display: inline-block;
  font-size: 14px;
  line-height: 150%;
}

[dir] .sidenav-item {
  border-radius: 12px;
  padding: 8px 8px;
  margin-bottom: 16px;
}

.sidenav-item.current-article {
  color: #FFFFFF;
  text-decoration: none;
}

[dir] .sidenav-item.current-article {
  background-color: rgba(33, 38, 71, 1);
}

.sidenav-item:hover {
  color: #404040;
  text-decoration: none;
  font-weight: normal;
}

[dir] .sidenav-item:hover {
  background: rgba(191, 191, 197, 0.2);
}

[dir] .recent-articles li, [dir] .related-articles li {
  margin-bottom: 12px;
}

[dir] .related-articles li {
  margin-bottom: 0;
  margin-top: 12px;
}

/***** Attachments *****/

/* Styles attachments inside posts, articles and comments */

.attachments .attachment-item {
  position: relative;
}

[dir] .attachments .attachment-item {
  margin-bottom: 8px;
}

[dir=ltr] .attachments .attachment-item {
  padding-left: 20px;
}

[dir=rtl] .attachments .attachment-item {
  padding-right: 20px;
}

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

.attachments .attachment-item .attachment-icon {
  color: #2F3941;
  position: absolute;
  top: 5px;
}

[dir=ltr] .attachments .attachment-item .attachment-icon {
  left: 0;
}

[dir=rtl] .attachments .attachment-item .attachment-icon {
  right: 0;
}

[dir="rtl"] .attachments .attachment-item {
  padding-left: 0;
  padding-right: 20px;
}

[dir="rtl"] .attachments .attachment-item .attachment-icon {
  left: auto;
  right: 0;
}

.article-attachments {
  display: none;
}

.upload-dropzone span {
  color: #5a6d7c;
}

/***** Social share links *****/

.share {
  white-space: nowrap;
}

[dir] .share {
  padding: 0;
}

.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(33, 38, 71, 1);
}

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

/***** Comments *****/

/* Styles comments inside articles, posts and requests */

.comment-heading, .recent-articles-title,
.related-articles-title {
  font-size: 18px;
  font-weight: 600;
  font-family: 'Ufficio Fireblocks', sans-serif;
}

[dir] .comment-heading, [dir] .recent-articles-title, [dir] .related-articles-title {
  margin-bottom: 4px;
  margin-top: 0;
}

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

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

.comment-callout {
  color: #5a6d7c;
  display: inline-block;
  font-weight: 300;
  font-size: 13px;
}

[dir] .comment-callout {
  margin-bottom: 0;
}

.comment-callout a {
  color: rgba(33, 38, 71, 1);
}

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

[dir=ltr] .comment-sorter {
  float: right;
}

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

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

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

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

[dir] .comment-wrapper.comment-official {
  border: 1px solid rgba(33, 38, 71, 1);
  padding: 40px 20px 20px;
}

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

.comment-info {
  min-width: 0;
  width: 100%;
}

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

.comment-author {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

[dir] .comment-author {
  margin-bottom: 8px;
}

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

[dir=ltr] .comment-avatar {
  margin-right: 16px;
}

[dir=rtl] .comment-avatar {
  margin-left: 16px;
}

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

.comment-meta {
  flex: 1 0 auto;
  font-size: 12px;
  line-height: 150%;
  letter-spacing: 0.03em;
  color: #545360;
}

.comment-meta a {
    font-weight: 700;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0.04em;
    color: #000000;
  }

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

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

[dir] .comment .status-label:not(.status-label-official) {
  margin-top: 8px;
}

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

.comment-form {
  word-wrap: break-word;
}

[dir] .comment-form {
  padding-top: 28px;
}

.comment-container {
  width: 100%;
}

[dir] .comment-form-controls {
  margin-top: 8px;
}

[dir=ltr] .comment-form-controls {
  text-align: left;
}

[dir=rtl] .comment-form-controls {
  text-align: right;
}

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

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

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

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

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

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

.comment-ccs {
  display: none;
}

[dir] .comment-ccs + textarea {
  margin-top: 8px;
}

.comment-form-controls {
  display: flex !important;
  justify-content: flex-end;
  width: 100%;
}

@media (max-width: 956px) {

.comment-form-controls {
    justify-content: flex-start
}
  }

.comment-form-controls .button {
    font-size: 0 !important;
    height: 32px;
    width: 32px;
    min-width: unset !important;  
  }

[dir] .comment-form-controls .button {
    background-color: #fff !important;
    padding: 0;
    border-radius: 50px; 
    box-shadow: none;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M25.5035 15.1039C26.2443 15.4714 26.2444 16.5281 25.5035 16.8956L9.38577 24.8905C8.72106 25.2202 7.94141 24.7367 7.94141 23.9947V17.9983L16.9413 15.9983L7.94141 13.7927L7.94141 8.00489C7.94141 7.26289 8.72106 6.77933 9.38577 7.10904L25.5035 15.1039Z' fill='%230075F2'/%3E%3C/svg%3E%0A");  
  }

[dir] .comment-form-controls .button:hover {
      background-color: rgba(184, 183, 195, 0.15) !important;
    }
[dir] .comment-attachments textarea {
    border: 1px solid #E5E7EC;
  }

.comment-attachments .upload-dropzone {
    position: relative;
    height: 48px;
  }

[dir] .comment-attachments .upload-dropzone {
    border: 1px solid #E5E7EC;
    border-top: none;
    border-radius: 0px 0px 8px 8px;
  }

@media (max-width: 768px) {

.comment-attachments .upload-dropzone {
      height: unset;
      min-height: 48px
  }
    }

.comment-attachments .upload-dropzone:hover a {
        color: #212647;
      }

[dir] .comment-attachments .upload-dropzone span {
      padding-top: 12px;
      padding-bottom: 12px;
    }

[dir=ltr] .comment-attachments .upload-dropzone span {
  padding-left: 48px;
    }

[dir=rtl] .comment-attachments .upload-dropzone span {
      padding-right: 48px;
    }

.comment-attachments .upload-dropzone span a {
        color: #4568F3;
      }

.comment-attachments .upload-dropzone span:before {
      height: 28px;
      width: 28px;
      display: block;
      content: '';
      position: absolute;
      top: 10px;
    }

[dir] .comment-attachments .upload-dropzone span:before {
      background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.8842 13.6234L14.4512 20.0564C13.6631 20.8445 12.5942 21.2873 11.4797 21.2873C10.3652 21.2873 9.29627 20.8445 8.50818 20.0564C7.72009 19.2683 7.27734 18.1994 7.27734 17.0849C7.27734 15.9704 7.72009 14.9015 8.50818 14.1134L14.9412 7.68042C15.4666 7.15503 16.1792 6.85986 16.9222 6.85986C17.6652 6.85986 18.3778 7.15503 18.9032 7.68042C19.4286 8.20581 19.7237 8.9184 19.7237 9.66142C19.7237 10.4044 19.4286 11.117 18.9032 11.6424L12.4632 18.0754C12.2005 18.3381 11.8442 18.4857 11.4727 18.4857C11.1012 18.4857 10.7449 18.3381 10.4822 18.0754C10.2195 17.8127 10.0719 17.4564 10.0719 17.0849C10.0719 16.7134 10.2195 16.3571 10.4822 16.0944L16.4252 10.1584' stroke='%23545360' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    }

[dir=ltr] .comment-attachments .upload-dropzone span:before {
  left: 16px;
    }

[dir=rtl] .comment-attachments .upload-dropzone span:before {
      right: 16px;
    }

.comment-attachments a {
  color: rgba(33, 38, 71, 1);
}

.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}

[dir] .comment-body {
  padding: 8px;
  background: #FAFAFA;
  border-radius: 12px;
  margin-bottom: 24px;
}

[dir=ltr] .comment-body {
  margin-left: 48px;
}

[dir=rtl] .comment-body {

  margin-right: 48px;
}

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

.comment-body ul, .comment-body ol {
  list-style-position: outside;
}

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

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

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

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

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

.comment-body a:visited {
  color: #4B61C3;
}

[dir] .comment-body code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0 4px;
  margin: 0 0;
}

.comment-body pre {
  overflow: auto;
  white-space: pre;
}

[dir] .comment-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 12px 16px;
}

.comment-body blockquote {
  color: #5a6d7c;
  font-style: italic;
}

[dir] .comment-body blockquote {
  padding: 0 12px;
}

[dir=ltr] .comment-body blockquote {
  border-left: 1px solid #ddd;
}

[dir=rtl] .comment-body blockquote {
  border-right: 1px solid #ddd;
}

.comment-mark-as-solved {
  display: inline-block;
}

.mark-as-solved {
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: 0.03em;
  color: #4568F3;
}

[dir] .mark-as-solved {
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.mark-as-solved:hover {
    color: #212647;
  }

@media (max-width: 956px) {

[dir] .mark-as-solved {
    padding: 0 !important
}
  }

/***** Vote *****/

/* Used in article comments, post comments and post */

.vote {
  display: flex;
  flex-direction: column;
}

[dir] .vote {
  text-align: center;
}

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

.vote-sum {
  color: #5a6d7c;
  display: block;
}

[dir] .vote-sum {
  margin: 0 0;
}

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

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

.vote-up:hover,
.vote-down:hover {
  color: rgba(33, 38, 71, 1);
}

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

[dir] .vote-up, [dir] .vote-down {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.vote-voted {
  color: rgba(33, 38, 71, 1);
}

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

/***** Actions *****/

/* Styles admin and en user actions(edit, delete, change status) in comments and posts */

.actions {
  flex-shrink: 0;
  /*Avoid collapsing elements in Safari*/
}

[dir] .actions {
  text-align: center;
}

.actions button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[dir] .actions button {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

/***** Striped list *****/

/* Used in community posts list and requests list */

[dir] .striped-list {
  padding: 0;
}

.striped-list-item {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

[dir] .striped-list-item {
  border-bottom: 1px solid #ddd;
  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: rgb(69, 104, 243);
}

[dir] .striped-list-title {
  margin-bottom: 8px;
}

[dir=ltr] .striped-list-title {
  margin-right: 4px;
}

[dir=rtl] .striped-list-title {
  margin-left: 4px;
}

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

.striped-list-title:visited {
  color: #4B61C3;
}

[dir] .striped-list .meta-group {
  margin: 4px 0;
}

.striped-list-count {
  color: #5a6d7c;
  font-weight: 300;
  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;
}

[dir] .striped-list-count-item::after {
  padding: 0 4px;
}

@media (min-width: 768px) {
  .striped-list-count-item::after {
    display: none;
  }
}

.striped-list-count-item:last-child::after {
  display: none;
}

.striped-list-number {
  font-weight: 300;
}

[dir] .striped-list-number {
  text-align: center;
}

@media (min-width: 768px) {
  .striped-list-number {
    color: #2F3941;
    display: block;
    font-weight: 400;
  }
}

/***** Status labels *****/

/* Styles labels used in posts, articles and requests */

.status-label {
  color: #fff;
  font-size: 12px;
  line-height: 24px;
  vertical-align: middle;
  white-space: nowrap;
  display: inline-block;
}

[dir] .status-label {
  background-color: #038153;
  border-radius: 4px;
  padding: 0 8px;
}

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

[dir] .status-label-pinned, [dir] .status-label-featured, [dir] .status-label-official {
  background-color: rgba(33, 38, 71, 1);
}

.status-label-official {
  position: absolute;
  top: 0;
  width: 100%;
}

[dir] .status-label-official {
  border-radius: 0;
  text-align: center;
}

[dir=ltr] .status-label-official {
  margin-right: 0;
  right: 0;
}

[dir=rtl] .status-label-official {
  margin-left: 0;
  left: 0;
}

@media (min-width: 768px) {
  .status-label-official {
    width: auto;
  }
  [dir] .status-label-official {
    border-radius: 0 0 4px 4px;
  }
  [dir=ltr] .status-label-official {
    right: 30px;
  }
  [dir=rtl] .status-label-official {
    left: 30px;
  }
}

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

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

[dir] .status-label-not-planned, [dir] .status-label-closed {
  background-color: #e9ebed;
}

[dir] .status-label-pending, [dir] .status-label-pending-moderation {
  background-color: #4568F3;
  text-align: center;
}

.status-label-open {
  color: #155110;
}

[dir] .status-label-open {
  background-color: #E1F6DF;
}

[dir] .status-label-solved {
  background-color: #68737d;
}

.status-label-new {
  color: #703b15;
}

[dir] .status-label-new {
  background-color: #FFEECE;
}

[dir] .status-label-hold {
  background-color: #000;
}

/***** My activities *****/

[dir] .my-activities-nav {
  background-color: #f2f2f2;
  margin-bottom: 20px;
}

[dir] .my-activities-sub-nav {
  margin-bottom: 28px;
}

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

[dir] .my-activities-table .striped-list-title {
  margin-bottom: 8px;
}

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

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

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

[dir=ltr] .my-activities-table th:first-child, [dir=ltr] .my-activities-table td:first-child {
  padding-left: 0;
}

[dir=rtl] .my-activities-table th:first-child, [dir=rtl] .my-activities-table td:first-child {
  padding-right: 0;
}

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

[dir=ltr] .my-activities-table th:last-child, [dir=ltr] .my-activities-table td:last-child {
  padding-right: 0;
}

[dir=rtl] .my-activities-table th:last-child, [dir=rtl] .my-activities-table td:last-child {
  padding-left: 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: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

@media (min-width: 957px) {
  .requests-table-toolbar {
    flex-wrap: nowrap;
  }
}

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

@media (max-width: 768px) {

[dir] .requests-table-toolbar .search {
    margin-bottom: 32px
}
  }

@media (max-width: 768px) {

[dir] .request-list-button.mobile {
    margin-bottom: 32px
}
  }

.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) {
  [dir=ltr] .requests-table-toolbar .request-filter {
    margin: 0 0 0 28px;
  }
  [dir=rtl] .requests-table-toolbar .request-filter {
    margin: 0 28px 0 0;
  }
  [dir="rtl"] .requests-table-toolbar .request-filter {
    margin: 0 28px 0 0;
  }
}

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

[dir] .requests-table-toolbar .request-filter-label {
  margin-top: 28px;
}

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

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

[dir] .requests-table-toolbar select {
  margin-bottom: 28px;
}

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

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

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

[dir] .requests-table-toolbar .organization-subscribe button {
  padding: 0 20px;
}

[dir] .requests-table-toolbar + .requests-search-info {
  margin-top: 12px;
}

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

[dir] .requests-table-toolbar + .requests-search-info.meta-data::after {
  margin: 0;
}

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

[dir] .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;
  bottom: 0;
  font-size: 10px;
}

[dir=ltr] .requests .requests-table .requests-sort-symbol {
  left: calc(100% + 3px);
}

[dir=rtl] .requests .requests-table .requests-sort-symbol {
  right: calc(100% + 3px);
}

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

[dir=ltr] .subscriptions-table .user-avatar {
  margin-right: 8px;
}

[dir=rtl] .subscriptions-table .user-avatar {
  margin-left: 8px;
}

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

/* Contributions table */

.contributions-table td:last-child {
  color: #5a6d7c;
  font-size: 13px;
  font-weight: 300;
}

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

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

/***** Request *****/

[dir] .request-container {
  background: #FFFFFF;
  border: 1px solid #E5E7EC;
  border-radius: 12px;
  padding: 40px;
}

@media (max-width: 956px) {

[dir] .request-container {
    padding: 16px
}
  }

.request-container__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

[dir] .request-container__top {
  margin-bottom: 40px;
}

@media (max-width: 956px) {

.request-container__top {
    display: block
}

[dir] .request-container__top {
    margin-bottom: 24px
}
  }

.requests-link.request-back {
  vertical-align: middle;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  color: #747382;
  display: flex;
}

[dir] .requests-link.request-back {
  margin-top: 56px;
  margin-bottom: 16px;
}

.requests-link.request-back svg {
    vertical-align: middle; 
  }

[dir=ltr] .requests-link.request-back svg {
  margin-right: 4px; 
  }

[dir=rtl] .requests-link.request-back svg {
    margin-left: 4px; 
  }

.request-title {
  width: 66.6%;
}

[dir] .request-title {
  margin-bottom: 0;
}

@media (max-width: 956px) {

.request-title {
    width: 100%;
    font-size: 28px
}
  }

.request-container__bottom {
  display: flex;
  justify-content: space-between;
}

@media (max-width: 1199px) {

.request-container__bottom {
    flex-direction: column
}

    .request-container__bottom .collapsible-sidebar-toggle {
      top: 13px;
    }

    [dir=ltr] .request-container__bottom .collapsible-sidebar-toggle {
    right: -25px;
    }

    [dir=rtl] .request-container__bottom .collapsible-sidebar-toggle {
      left: -25px;
    }

    .request-container__bottom .request-sidebar__title {
      position: relative;
      display: inline-block;
    }

    [dir] .request-container__bottom .request-sidebar__title {
      cursor: pointer;
    }
      [dir] .request-container__bottom .request-sidebar__title h2 {
        margin-bottom: 8px;
      }

    [dir] .request-container__bottom .request-sidebar {
      margin-bottom: 28px;
    }
  }

@media (min-width: 1200px) {
    .request-container__bottom .request-sidebar__title {
      display: none;
    }
  }

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

.request-container .comment-container .comment-form-controls {
    justify-content: flex-end;
  }

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

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

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

.comment-container__inner {
  display: none;
  flex-wrap: wrap;
}

.comment-fields  {
  width: calc(100% - 50px);
  line-height: 0;
}

[dir] .comment-fields textarea:focus {
    box-shadow: none;
  }

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

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

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

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

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

.request-main .comment-show-container {  
  color: #747382;
  font-size: 14px;
  line-height: 1.5;
  width: 100%;
  position: relative;
}

[dir] .request-main .comment-show-container {
  text-align: inherit;
  padding: 16px 64px;

  border: 1px solid #E5E7EC;
  border-radius: 12px;
  background-color: #fff;
}

.request-main .comment-show-container:before {
    width: 40px;
    height: 40px;
    display: block;
    content: '';
    position: absolute;
    top: 8px;
  }

[dir] .request-main .comment-show-container:before {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M29.8368 19.462L20.6468 28.652C19.5209 29.7779 17.994 30.4104 16.4018 30.4104C14.8096 30.4104 13.2826 29.7779 12.1568 28.652C11.0309 27.5262 10.3984 25.9992 10.3984 24.407C10.3984 22.8148 11.0309 21.2879 12.1568 20.162L21.3468 10.972C22.0973 10.2215 23.1153 9.7998 24.1768 9.7998C25.2382 9.7998 26.2562 10.2215 27.0068 10.972C27.7573 11.7226 28.179 12.7406 28.179 13.802C28.179 14.8635 27.7573 15.8815 27.0068 16.632L17.8068 25.822C17.4315 26.1973 16.9225 26.4081 16.3918 26.4081C15.861 26.4081 15.3521 26.1973 14.9768 25.822C14.6015 25.4467 14.3907 24.9378 14.3907 24.407C14.3907 23.8763 14.6015 23.3673 14.9768 22.992L23.4668 14.512' stroke='%23545360' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  }

[dir=ltr] .request-main .comment-show-container:before {
  left: 8px;
  }

[dir=rtl] .request-main .comment-show-container:before {
    right: 8px;
  }

.request-main .comment-show-container:after {
    width: 40px;
    height: 40px;
    display: block;
    content: '';
    position: absolute;
    top: 8px;
  }

[dir] .request-main .comment-show-container:after {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M28.5036 19.104C29.2445 19.4715 29.2445 20.5282 28.5036 20.8957L12.3858 28.8906C11.7211 29.2204 10.9414 28.7368 10.9414 27.9948V21.9983L19.9414 19.9983L10.9414 17.7927L10.9414 12.0049C10.9414 11.2629 11.7211 10.7793 12.3858 11.109L28.5036 19.104Z' fill='%230075F2'/%3E%3C/svg%3E%0A");
  }

[dir=ltr] .request-main .comment-show-container:after {
  right: 8px;
  }

[dir=rtl] .request-main .comment-show-container:after {
    left: 8px;
  }

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

[dir] .request-main .form-field.comment-ccs > ul {
  border-bottom: 0;
}

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

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

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

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

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

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

[dir] .request-main .comment-ccs + textarea {
  margin-top: 0;
}

[dir=ltr] .request-main .comment-ccs + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

[dir=rtl] .request-main .comment-ccs + textarea {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

[dir] .request-main .comment-ccs + textarea:focus {
  border-top: 1px solid rgba(33, 38, 71, 1);
}

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

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

@media (max-width: 1199px) {
    .request-sidebar .collapsible-sidebar-toggle {
      display: block;
    }
  }

@media (max-width: 1199px) {
      .request-sidebar .collapsible-sidebar-body h2 {
        display: none;
      }

      .request-sidebar .collapsible-sidebar-body dt, .request-sidebar .collapsible-sidebar-body dd {
        width: auto;
      }
    }

@media (min-width: 1200px) {

[dir=ltr] .request-sidebar .collapsible-sidebar-body {
    padding-left: 80px;
    margin-left: 80px;
    border-left: 1px solid #E5E7EC

  }

[dir=rtl] .request-sidebar .collapsible-sidebar-body {
      padding-right: 80px;
      margin-right: 80px;
      border-right: 1px solid #E5E7EC

  }
    }

@media (min-width: 1024px) {
  .request-sidebar {
    font-size: 13px;
    flex: 0 0 auto;
    width: 45%;
  }
  [dir] .request-sidebar {
    border: 0;
    padding: 0 20px;
  }
}

.request-sidebar h2 {
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: 0.03em;

  color: #373737;
}

[dir] .request-sidebar h2 {
  margin-bottom: 16px;
}

.request-sidebar h2:hover {
    color: #000;
  }

.request-details {
  font-size: 0;
}

[dir] .request-details {
  border-bottom: 1px solid #ddd;
  margin: 0;
  padding-bottom: 20px;
}

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

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

[dir] .request-details dt, [dir] .request-details dd {
  margin: 0 0 16px;
}

@media (max-width: 1199px) {

[dir] .request-details dt, [dir] .request-details dd {
    margin-bottom: 8px
}
   }

.request-details dd {
  width: 60%;
}

@media (max-width: 1199px) {

[dir=ltr] .request-details dd {
    margin-left: 4px
}

[dir=rtl] .request-details dd {
   margin-right: 4px
}

   [dir=ltr] .request-details dd + dt {
    padding-left: 16px;
    margin-left: 16px;
    border-left: 1px solid rgb(184 183 195 / 52%);
   }

   [dir=rtl] .request-details dd + dt {
    padding-right: 16px;
    margin-right: 16px;
    border-right: 1px solid rgb(184 183 195 / 52%);
   }
  }

.request-details dd span {
    font-size: 12px;
    line-height: 150%;
    letter-spacing: 0.03em;
    color: #545360;
  }

[dir] .request-details dd span {
    padding: 4px 8px;
    background: #F6F6F6;
    border-radius: 12px;
  }

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

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

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

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

[dir] .request-attachments dd {
  margin: 8px 0 0 0;
}

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

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

/***** Pagination *****/

[dir] .pagination {
  margin: 20px 0;
  text-align: center;
}

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

[dir] .pagination-first-link, [dir] .pagination-last-link {
  padding: 0 8px;
}

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

[dir] .pagination-first-text, [dir] .pagination-last-text {
  border: 0;
  margin: 0;
  padding: 0;
}

[dir=ltr] .pagination-next-link {
  padding-right: 8px;
}

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

[dir=ltr] .pagination-next-text {
  margin-right: 8px;
}

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

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

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

[dir=ltr] .pagination-prev-link {
  padding-left: 8px;
}

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

[dir=ltr] .pagination-prev-text {
  margin-left: 8px;
}

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

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

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

/***** Metadata *****/

.meta-group {
  display: block;
}

[dir=ltr] .meta-group-opposite {
  float: right;
}

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

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

.meta-group * {
  display: inline;
}

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

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

[dir] .meta-data:not(:last-child)::after {
  margin: 0 4px;
}

/* User Profiles */

[dir] .profile-header {
  padding: 28px 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;
  -ms-grid-row-align: center;
      align-self: center;
}

[dir=ltr] .profile-avatar {
  margin-right: 8px;
}

[dir=rtl] .profile-avatar {
  margin-left: 8px;
}

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

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

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

[dir=ltr] .profile-avatar .icon-agent {
  right: 0;
}

[dir=rtl] .profile-avatar .icon-agent {
  left: 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 {
  line-height: 25px;
}

[dir] .profile-header .basic-info .name {
  margin: 0;
}

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

[dir] .profile-header .options {
  margin-top: 12px;
}

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

.user-profile-actions {
  width: 100%;
}

[dir] .user-profile-actions {
  margin-bottom: 12px;
}

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

[dir] .profile-header .description {
  margin: 12px 0;
}

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

.profile-stats .stat {
  display: flex;
}

[dir] .profile-stats .stat {
  margin-bottom: 8px;
}

.profile-stats .stat-label {
  color: #5a6d7c;
  font-weight: 300;
  flex: 0 0 100px;
}

[dir=ltr] .profile-stats .stat-label {
  margin-right: 8px;
}

[dir=rtl] .profile-stats .stat-label {
  margin-left: 8px;
}

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

[dir] .profile-stats-activity {
  border-top: solid 1px #ddd;
  margin-top: 12px;
}

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

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

[dir] .profile-stats-activity .stat:first-child {
  margin-top: 8px;
}

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

@media (min-width: 768px) {
  [dir=ltr] .profile-stats-activity .stat:not(:last-child) {
    margin-right: 40px;
  }
  [dir=rtl] .profile-stats-activity .stat:not(:last-child) {
    margin-left: 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;
  }
}

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

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

@media (min-width: 1024px) {
  .profile-stats-counters {
    flex: 0 0 270px;
  }
  [dir=ltr] .profile-stats-counters {
    margin-left: 60px;
  }
  [dir=rtl] .profile-stats-counters {
    margin-right: 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) {
  [dir] .profile-stats-counters .stat:not(:last-child) {
    margin-bottom: 12px;
  }
}

@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%;
  color: rgba(33, 38, 71, 1);
  font-size: 12px;
}

[dir] .profile-private-badge {
  border: solid 1px rgba(33, 38, 71, 1);
  border-radius: 4px;
  padding: 4px 20px;
  text-align: center;
}

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

[dir=ltr] .profile-private-badge .profile-private-icon {
  margin-left: 4px;
}

[dir=rtl] .profile-private-badge .profile-private-icon {
  margin-right: 4px;
}

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

[dir] .profile-nav {
  background-color: #f2f2f2;
  margin-bottom: 36px;
}

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

[dir] .profile-section-title {
  margin-bottom: 0;
}

.profile-section-description {
  flex-basis: 100%;
  color: #5a6d7c;
  font-weight: 300;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[dir] .profile-section-description {
  padding: 8px 0;
}

@media (min-width: 768px) {
  .profile-section-description {
    flex: 1 0 50%;
  }
  [dir] .profile-section-description {
    padding-bottom: 0;
  }
}

.profile-section-sorter {
  flex-basis: 100%;
  font-size: 13px;
}

[dir] .profile-section-sorter {
  border-top: solid 1px #eee;
}

.profile-section-sorter .dropdown-toggle {
  width: 100%;
}

[dir] .profile-section-sorter .dropdown-toggle {
  padding: 8px 0;
}

.profile-section-sorter .dropdown-toggle::after {
  position: absolute;
}

[dir=ltr] .profile-section-sorter .dropdown-toggle::after {
  right: 0;
}

[dir=rtl] .profile-section-sorter .dropdown-toggle::after {
  left: 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;
  }
  [dir] .profile-section-sorter {
    padding-top: 0;
    border-top: 0;
  }
  [dir=ltr] .profile-section-sorter {
    margin-left: 20px;
  }
  [dir=rtl] .profile-section-sorter {
    margin-right: 20px;
  }
  [dir="rtl"] .profile-section-sorter {
    margin-left: 0;
    margin-right: 20px;
  }
}

[dir] .profile-badges-items {
  margin-top: 24px;
}

.profile-badges-item {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: flex-start;
}

[dir] .profile-badges-item {
  border-top: 1px solid #ddd;
  padding: 24px 12px;
}

[dir=ltr] .profile-badges-item > div {
  padding-right: 12px;
  padding-left: 12px;
}

[dir=rtl] .profile-badges-item > div {
  padding-left: 12px;
  padding-right: 12px;
}

.profile-badges-item-image {
  height: 40px;
  width: 40px;
}

[dir=ltr] .profile-badges-item-image {
  margin-right: 12px;
}

[dir=rtl] .profile-badges-item-image {
  margin-left: 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;
}

[dir] .profile-badges-item-title, [dir] .profile-badges-item-metadata-title {
  margin-bottom: 8px;
}

.profile-badges-item-title {
  font-weight: 600;
  font-family: 'Ufficio Fireblocks', sans-serif;
}

.profile-badges-item-description, .profile-badges-item-metadata-description {
  color: #5a6d7c;
  font-size: 13px;
}

[dir] .profile-badges-item-description, [dir] .profile-badges-item-metadata-description {
  margin: 0;
}

[dir=ltr] .profile-badges-item-metadata {
  margin-left: auto;
  text-align: right;
}

[dir=rtl] .profile-badges-item-metadata {
  margin-right: auto;
  text-align: left;
}

[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;
  position: relative;
}

[dir] .profile-contribution {
  padding: 20px 0;
}

[dir] .profile-contribution-header {
  margin-bottom: 4px;
}

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

[dir] .profile-contribution-title {
  margin: 0 0 4px 0;
}

[dir] .profile-contribution-body {
  margin: 8px 0;
}

[dir] .profile-contribution-list > .profile-contribution {
  border-top: 1px solid #eee;
}

@media (min-width: 768px) {
  [dir=ltr] .profile-contribution-list > .profile-contribution {
    padding-left: 28px;
  }
  [dir=rtl] .profile-contribution-list > .profile-contribution {
    padding-right: 28px;
  }
  [dir="rtl"] .profile-contribution-list > .profile-contribution {
    padding-right: 28px;
    padding-left: 0;
  }
}

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

.profile-contribution-icon {
  position: absolute;
  color: #ccc;
  line-height: 25px;
}

[dir=ltr] .profile-contribution-icon {
  left: 0;
}

[dir=rtl] .profile-contribution-icon {
  right: 0;
}

[dir="rtl"] .profile-contribution-icon {
  right: 0;
}

.profile-contribution-icon svg {
  vertical-align: middle;
}

[dir=ltr] .profile-contribution-list .profile-contribution-header {
  margin-left: 28px;
}

[dir=rtl] .profile-contribution-list .profile-contribution-header {
  margin-right: 28px;
}

[dir="rtl"] .profile-contribution-list .profile-contribution-header {
  padding-right: 28px;
  padding-left: 0;
}

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

[dir=ltr] .profile-comments .profile-contribution-breadcrumbs {
  margin-left: 28px;
}

[dir=rtl] .profile-comments .profile-contribution-breadcrumbs {
  margin-right: 28px;
}

[dir="rtl"] .profile-comments .profile-contribution-breadcrumbs {
  padding-right: 28px;
  padding-left: 0;
}

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

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

[dir] .profile-section .no-activity, [dir] .profile-section .private-activity {
  margin-top: 40px;
}

[dir=ltr] .private-activity-icon {
  margin-right: 8px;
}

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

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

[dir] .profile-activity-list {
  margin-top: 24px;
}

.profile-activity {
  position: relative;
}

[dir] .profile-activity {
  padding-bottom: 28px;
}

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

@media (min-width: 768px) {
  [dir=ltr] .profile-activity:not(:last-child) {
    border-left: 1px solid #ddd;
  }
  [dir=rtl] .profile-activity:not(:last-child) {
    border-right: 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;
}

[dir=ltr] .profile-activity-header {
  margin-left: 32px;
}

[dir=rtl] .profile-activity-header {
  margin-right: 32px;
}

[dir="rtl"] .profile-activity-header {
  margin-left: 0;
  margin-right: 32px;
}

@media (min-width: 768px) {
  [dir=ltr] .profile-activity-header {
    margin-left: 0;
  }
  [dir=rtl] .profile-activity-header {
    margin-right: 0;
  }
  [dir="rtl"] .profile-activity-header {
    margin-right: 0;
  }
}

.profile-activity-header .user-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  align-self: flex-start;
}

[dir=ltr] .profile-activity-header .user-avatar {
  margin-right: 8px;
}

[dir=rtl] .profile-activity-header .user-avatar {
  margin-left: 8px;
}

[dir="rtl"] .profile-activity-header .user-avatar {
  margin-left: 8px;
  margin-right: 0;
}

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

[dir] .profile-activity-description {
  margin: 0;
}

.profile-activity-description span:first-child {
  font-weight: 700;
  font-family: 'Figtree', sans-serif;
  display: inline;
}

[dir] .profile-activity-contribution {
  padding: 20px;
  margin-top: 8px;
  border-radius: 12px;
  background-color: #f7f7f7;
}

@media (min-width: 768px) {
  [dir] .profile-activity-contribution {
    margin-top: 0;
  }
  [dir=ltr] .profile-activity-contribution {
    margin-left: 48px;
  }
  [dir=rtl] .profile-activity-contribution {
    margin-right: 48px;
  }
  [dir="rtl"] .profile-activity-contribution {
    margin-left: 0;
    margin-right: 48px;
  }
}

.profile-activity-icon {
  position: absolute;
  width: 28px;
  height: 28px;
  color: #ccc;
}

[dir] .profile-activity-icon {
  border-radius: 50%;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-color: #FFFFFF;
  background-position: 50% 50%;
  text-align: center;
}

[dir=ltr] .profile-activity-icon {
  left: 0;
}

[dir=rtl] .profile-activity-icon {
  right: 0;
}

[dir="rtl"] .profile-activity-icon {
  right: 0;
}

@media (min-width: 768px) {
  [dir=ltr] .profile-activity-icon {
    left: -14px;
  }
  [dir=rtl] .profile-activity-icon {
    right: -14px;
  }
  [dir="rtl"] .profile-activity-icon {
    right: -14px;
  }
}

.profile-activity-icon svg {
  position: relative;
  top: 50%;
  width: 1em;
  height: 1em;
}

[dir] .profile-activity-icon svg {
  transform: translateY(-50%);
  margin: auto;
}

/***** Search results *****/

.search-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}

@media (min-width: 1024px) {
  .search-results {
    flex-direction: row;
  }
  [dir] .search-results {
    margin-top: 56px;
  }
}

.search-results-column {
  flex: 1;
}

@media (min-width: 1024px) {
  .search-results-column {
    flex: 0 0 75%;
  }
}

.search-results-sidebar {
  flex: 1 0 auto;
  transition: all 0.3s ease;
  position: -webkit-sticky;
  position: sticky;
}

[dir] .search-results-sidebar {
  background-color: #fff;
  margin-bottom: 20px;
}

@media (max-width: 1023px) {
  .search-results-sidebar {
    width: calc(100% + 64px);
  }
  [dir] .search-results-sidebar {
    margin-bottom: 44px;
  }
  [dir=ltr] .search-results-sidebar {
    margin-right: -32px;
    margin-left: -32px;
  }
  [dir=rtl] .search-results-sidebar {
    margin-left: -32px;
    margin-right: -32px;
  }

    .search-results-sidebar:after {
      content: '';
      display: block;
      height: 1px;
      width: calc(100% + 32px);
      position: absolute;
      top: 57px;
    }

    [dir] .search-results-sidebar:after {
      background-color: #E5E7EC;
    }

    [dir=ltr] .search-results-sidebar:after {
    left: -32px;
    }

    [dir=rtl] .search-results-sidebar:after {
      right: -32px;
    }

    [dir] .search-results-sidebar .sidenav-item {
      padding: 4px 8px;   
      margin-bottom: 0;
    }

    [dir] .search-results-sidebar .sidenav-item.current {
      margin-bottom: 0;   
    }

    .search-results-sidebar .search-filter-title {
      position: relative;
    }

    [dir] .search-results-sidebar .search-filter-title {
      padding: 8px 32px;
      background: #fff;
      cursor: pointer;
    }

    [dir] .search-results-sidebar .multibrand-filter-list {
      padding: 32px;
      background: #FFFFFF;
      box-shadow: 0px 20px 48px rgba(0, 0, 0, 0.1471);  
    }
}

@media (min-width: 1024px) {
  .search-results-sidebar {
    flex: 0 0 25%;
    height: auto;
    position: static;
  }
  [dir] .search-results-sidebar {
    border: 0;
  }
  [dir=ltr] .search-results-sidebar {
    padding: 0 20px 0 0;
  }
  [dir=rtl] .search-results-sidebar {
    padding: 0 0 0 20px;
  }
}

.search-results-sidebar .sidenav-item.current {;
  text-decoration: none;
  font-weight: bold;
  color: #212647;
}

[dir] .search-results-sidebar .sidenav-item.current {
  background-color: rgba(137, 178, 255, 0.2);
}

.search-results-sidebar .sidenav-subitem {
  unicode-bidi: embed;
}

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

/* The .collapsible-sidebar-toggle button on the search-results sidebar is
   a dead UI element on desktop: the override above forces .multibrand-filter-list
   visible regardless of aria-expanded, so clicking the toggle has no visible
   effect. Hide it on desktop. The script.js:189 click handler continues to bind
   to the parent section, so clicks on the still-visible filter list will
   continue to flip aria-expanded silently — harmless residue, not a bug. */
@media (min-width: 1024px) {
  .search-results-sidebar .collapsible-sidebar-toggle {
    display: none;
  }
}

.search-results-sidebar .doc-count {
  font-weight: normal;
}

.search-results-sidebar .see-all-filters {
  display: block;
  color: rgb(69, 104, 243);
}

[dir] .search-results-sidebar .see-all-filters {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.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-weight: 700;
  font-size: 20px;
  line-height: 150%;
  font-family: 'Figtree', sans-serif;
}

[dir] .search-results-subheading {
  margin-bottom: 12px;
}

[dir] .search-results-list {
  margin-bottom: 24px;
}

[dir] .search-results-list > li {
  padding: 12px 0;
}

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

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

[dir] .search-results .meta-group {
  clear: both;
}

@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 {
  word-break: break-word;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #373737;
}

[dir] .search-results-description {
  margin-top: 8px;
  margin-bottom: 8px;
}

.search-result-title {
  font-weight: 700;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0.02em;
  display: inline-block;
}

.search-result-title a {
    color: #000; 
  }

[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;
  font-weight: 300;
  position: relative;
}

[dir] .search-result-votes, [dir] .search-result-meta-count {
  padding: 4px 4px;
}

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

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

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

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

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

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

[dir] .search-result-breadcrumbs {
  margin: 0;
}

.search-result-breadcrumbs li:first-child {
    display: none !important;
  }

.search-result-breadcrumbs li:first-child + li:before {
    display: none;
  }

.search-result-breadcrumbs li:last-child {
    pointer-events: none;
  }

.search-result-breadcrumbs li a {
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0.02em;    
    color: #747382;
  }

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

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

.search-result-breadcrumbs li, .search-result-breadcrumbs li a, .search-result-breadcrumbs li a:visited {
  color: inherit;
}

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

html[dir][lang|="zh"] .search-results-description em {
  background: yellow;
}

/* ============================================================
   NOTIFICATIONS
   Vendor flash-message styles: error / notice / alert variants,
   inline form notifications, dismiss control. The historical
   five-asterisk Notifications banner that lived here originally
   extended over ~1,690 lines of unrelated vendor scaffolding;
   this section now bounds only the actual notification rules
   and ends at the first non-notification rule.
   ============================================================ */

.notification {
  display: table;
  font-family: sans-serif;
  font-size: 12px;
  transition: height .2s;
  width: 100%;
  color: #555;
}

[dir] .notification {
  border: 1px solid;
  padding: 12px 12px;
}

.notification a {
  color: #158ec2;
}

.notification-inner {
  max-width: 980px;
}

[dir] .notification-inner {
  margin: 0 auto;
  padding: 0 20px;
}

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

.notification-text {
  width: 100%;
}

[dir] .notification-text {
  padding: 0 12px;
}

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

[dir] .notification + .notification {
  margin-bottom: 0;
}

/* Error */

[dir] .notification-error {
  background: #ffeded;
  border-color: #f7cbcb;
}

[dir] .notification-error .notification-icon::before, [dir] .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 */

[dir] .notification-notice {
  background: #dbf3ff;
  border-color: #b5e0f5;
}

[dir] .notification-notice .notification-icon::before, [dir] .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;
}

[dir] .notification-alert {
  background: #fff8ed;
  border-color: #fcdba9;
}

[dir] .notification-alert .notification-icon::before, [dir] .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 {
  content: "";
  display: inline-block;
  height: 14px;
  width: 14px;
  vertical-align: middle;
}

[dir] .notification-icon::before, [dir] .notification-inline.notification-error::before {
  background-size: cover;
}

/* Dismiss button */

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

[dir] .notification-dismiss, [dir] a.notification-dismiss {
  cursor: pointer;
}

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

/* Inline notifications */

.notification-inline {
  line-height: 14px;
  position: relative;
  vertical-align: middle;
}

[dir] .notification-inline {
  border-radius: 4px;
  margin-top: 4px;
  padding: 4px;
}

[dir=ltr] .notification-inline {
  text-align: left;
}

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

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

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

[dir] .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");
}

[dir=ltr] .notification-inline.notification-error::before {
  margin: 0 4px 0 0;
}

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

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

.notification-inline.notification-error {
  color: #cc3340;
}

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

[dir] .notification-inline.notification-large {
  padding: 12px 12px;
  margin-bottom: 24px;
}

[dir=ltr] .notification-left-aligned {
  text-align: left;
  padding-left: 0;
}

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

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

/* ============================================================
   GENERIC DROPDOWNS
   Zendesk vendor dropdown scaffolding: .dropdown, .dropdown-menu,
   [role="menuitem"] (including [aria-selected="true"] checkmark),
   .dropdown-menu-end / -top, .dropdown-chevron-icon. Pure vendor
   pattern — not visually re-themed in this stylesheet.
   ============================================================ */

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

.dropdown-toggle {
  display: inline-block;
  vertical-align: middle;
}

[dir] .dropdown-toggle {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  text-align: initial;
}

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

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

.dropdown-menu {
  display: none;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  min-width: 170px;
  position: absolute;
  z-index: 1000;
}

[dir] .dropdown-menu {
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  margin-top: 0;
  padding: 8px 0;
}

[dir=ltr] .dropdown-menu {
  left: 0;
  text-align: left;
}

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

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

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

.dropdown-menu [role="separator"] {
  color: #969696;
  display: block;
  font-weight: normal;
  font-size: 11px;
}

[dir] .dropdown-menu [role="separator"] {
  border-bottom: 1px solid #d8d8d8;
  padding: 4px 0;
  margin: 4px 20px 8px 20px;
}

.dropdown-menu [role="menuitem"] {
  color: #333;
  display: block;
  white-space: nowrap;
  -webkit-appearance: none;
  line-height: inherit;
  width: 100%;
}

[dir] .dropdown-menu [role="menuitem"] {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  text-align: start;
  margin-left: 0;
}

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

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

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

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

[dir] .dropdown-menu [role="menuitem"]:hover, [dir] .dropdown-menu [role="menuitem"]:focus {
  background: #f3f3f3;
}

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

.dropdown-menu [role="menuitem"][aria-selected="true"]::after {
  content: "";
  display: inline-block;
  height: 12px;
  width: 12px;
}

[dir] .dropdown-menu [role="menuitem"][aria-selected="true"]::after {
  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");
}

[dir=ltr] .dropdown-menu [role="menuitem"][aria-selected="true"]::after {
  margin-left: 8px;
}

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

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

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

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

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

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

[dir] .dropdown-menu-top {
  margin-bottom: 0;
}

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

/* ============================================================
   HEADER / HERO / LOGO / NAV VENDOR SCAFFOLDING
   Mixed vendor / theme rules for the fixed top bar, hero band,
   wordmark + tagline, user-nav links, mobile-search trigger,
   sticky [data-sidenav], and a footer margin tweak. No single
   component dominates this zone, so the banner covers the whole
   block; CROSSOVER comments mark off-component fragments inside.
   ============================================================ */

.header {
  max-width: 100%;
  width: 100%;

  height: auto;
  position: fixed;
  top: 0;
  z-index: 999;
}

[dir] .header {
  background: #FFFFFF;
  box-shadow: 0 1px 8px rgba(33, 38, 71, 0.08);
}
.menu-button-article {
  display: inline-block;
  width: auto;
}

[dir] .menu-button-article {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.menu-button-article, .menu-button-article svg {
  vertical-align: middle;
}

.user-nav, .nav-wrapper {
  display: flex;
  align-items: center;
}

.nav-wrapper a, .user-info > button,
.nav-wrapper .user-info {
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.200166px;
  color: #212647;
}

[dir] .nav-wrapper a, [dir] .user-info > button, 
  .nav-wrapper .user-info {
  padding: 0;
}

[dir=ltr] .nav-wrapper a, [dir=ltr] .user-info > button, 
  .nav-wrapper .user-info {
  margin-left: 32px;
}

.nav-wrapper .user-info > button {
  margin-left: 0;
}

[dir=rtl] .nav-wrapper a, [dir=rtl] .user-info > button,
  .nav-wrapper .user-info {
  margin-right: 32px;
}

/* Tighter gap between the "My requests" link and the user menu ("Demo User"),
   without changing the spacing between the other header items. The nav-wrapper
   is a flex row with a 12px gap; a -4px margin nets an 8px gap here. */
[dir=ltr] .nav-wrapper .user-info {
  margin-left: -4px;
}

[dir=rtl] .nav-wrapper .user-info {
  margin-right: -4px;
}

[data-user-name] {
  font-weight: bold;
}

/* Unified Fireblocks Help Center logo
   Wordmark SVG + vertical divider + Ufficio "Help Center" tagline */
.logo a {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.logo-wordmark {
  height: 20px;
}

/* White header: recolor logo + nav icons to Network Navy (overrides the
   inline white fills/strokes in header.hbs) */
.logo-wordmark svg path {
  fill: #212647;
}
.menu-button-article svg path {
  stroke: #212647;
}
.mobile-search path {
  fill: #212647;
}

.logo-divider {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: rgba(33, 38, 71, 0.25);
  flex-shrink: 0;
}

.logo-tagline {
  font-family: 'Ufficio Fireblocks', sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #212647;
  transform: translateY(2px);
}

[dir] .hero {
    background: #212647;
    padding: 24px 20px 260px;
}

.hero {
    height: auto;
}

.hero-inner-title {
  font-weight: bold; 
  color: #fff;
  font-size: 48px;
  line-height: 140%;
  letter-spacing: 0.313303px;
  font-family: 'Ufficio Fireblocks', sans-serif;
}

[dir] .hero-inner-title {
  margin-bottom: 32px;
}

@media (max-width: 1199px) {

[dir] .hero-inner-title {
    margin-bottom: 0
}
  }

@media (max-width: 708px) {

.hero-inner-title {
    font-size: 24px
}
  }

.hero-inner {
    position: static;
    max-width: 564px;
}

[dir] .hero-inner {
    transform: none;
}

.search {position: relative;}

.search:before {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  content: "";
}

[dir] .search:before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20' height='20' width='20'%3E%3Cpath fill='%23374151' clip-rule='evenodd' fill-rule='evenodd' d='M6.564 3.00113C7.36273 2.67028 8.2188 2.5 9.08333 2.5C9.94787 2.5 10.8039 2.67028 11.6027 3.00113C12.4014 3.33197 13.1271 3.81689 13.7385 4.42821C14.3498 5.03953 14.8347 5.76527 15.1655 6.564C15.4964 7.36273 15.6667 8.2188 15.6667 9.08333C15.6667 9.94787 15.4964 10.8039 15.1655 11.6027C14.9308 12.1694 14.6185 12.6994 14.2385 13.1778L17.2803 16.2197C17.5732 16.5126 17.5732 16.9874 17.2803 17.2803C16.9874 17.5732 16.5126 17.5732 16.2197 17.2803L13.1778 14.2385C12.6994 14.6185 12.1694 14.9308 11.6027 15.1655C10.8039 15.4964 9.94787 15.6667 9.08333 15.6667C8.2188 15.6667 7.36273 15.4964 6.564 15.1655C5.76527 14.8347 5.03953 14.3498 4.42821 13.7385C3.81689 13.1271 3.33197 12.4014 3.00113 11.6027C2.67028 10.8039 2.5 9.94787 2.5 9.08333C2.5 8.2188 2.67028 7.36273 3.00113 6.564C3.33197 5.76527 3.81689 5.03953 4.42821 4.42821C5.03953 3.81689 5.76527 3.33197 6.564 3.00113ZM9.08333 4C8.41578 4 7.75476 4.13148 7.13803 4.38695C6.52129 4.64241 5.9609 5.01684 5.48887 5.48887C5.01684 5.9609 4.64241 6.52129 4.38695 7.13803C4.13148 7.75476 4 8.41578 4 9.08333C4 9.75089 4.13148 10.4119 4.38695 11.0286C4.64241 11.6454 5.01684 12.2058 5.48887 12.6778C5.96091 13.1498 6.52129 13.5243 7.13803 13.7797C7.75476 14.0352 8.41578 14.1667 9.08333 14.1667C9.75089 14.1667 10.4119 14.0352 11.0286 13.7797C11.6454 13.5243 12.2058 13.1498 12.6778 12.6778C13.1498 12.2058 13.5243 11.6454 13.7797 11.0286C14.0352 10.4119 14.1667 9.75089 14.1667 9.08333C14.1667 8.41578 14.0352 7.75476 13.7797 7.13803C13.5243 6.52129 13.1498 5.96091 12.6778 5.48887C12.2058 5.01684 11.6454 4.64241 11.0286 4.38695C10.4119 4.13148 9.75089 4 9.08333 4Z'/%3E%3C/svg%3E") no-repeat center;
  transform: translateY(-50%);
}

[dir=ltr] .search:before {
  left: 24px;
}

[dir=rtl] .search:before {
  right: 24px;
}

.search input[type="search"] {
  color: #4570C4;
  height: 48px;
}

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

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

[dir] .knowledge-base {
  margin-top: -264px;
  margin-bottom: 16px;
}

.blocks-item:last-child {
  display: none;
}

/* CROSSOVER: homepage updates body limiter — see HOMEPAGE UPDATES / ANNOUNCEMENTS banner (currently near line 6099) */
.updates-inner-body * {
  display: none;
}

.updates-inner-body h2:nth-of-type(-n + 6), .updates-inner-body h2:nth-of-type(-n + 6) * {
  display: block;
}

@media (max-width: 1160px) {
  [dir=ltr] .header__inner {
    padding-left: 5%;
    padding-right: 5%;
  }
  [dir=rtl] .header__inner {
    padding-right: 5%;
    padding-left: 5%;
  }
}

@media (max-width: 1199px) {

  .logo {
    flex-grow: 2;
  }
  .logo a {
    justify-content: center;
	}
  
  .user-nav .search-container {
    display: none;
  }
  
  .logo-wordmark {
    height: 16px;
	}
  
  .logo-divider {
    height: 16px;
  }
  
  .logo-tagline {
    font-size: 14px;
	}
  
  .user-nav .search-container {
    top: -20px;
    z-index: 1;
    position: absolute;
    width: 250px;
  }
  
  [dir] .user-nav .search-container {
    background-color: #212647;
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 15%), 0 4px 10px 0 rgb(0 0 0 / 10%);
    border: solid 1px #212647;
  }
  
  [dir=ltr] .user-nav .search-container {
    right: -32px;
  }
  
  [dir=rtl] .user-nav .search-container {
    left: -32px;
  }
  

  

  
  .hero {
    height: auto;
	}
  

  
  [dir] .hero {
    padding: 8px 20px 128px;
	}
  
  [dir] .knowledge-base {
    margin-top: -148px;
	}
  
  @media (max-width: 707px) {
      [dir] .knowledge-base {
        margin-top: -260px;
      }
  }
  
  .blocks-item-icon {
    height: 64px;
    width: 64px;
	}
  
  [dir] .blocks-item-icon {
    margin-bottom: 8px;
	}
  
  .blocks-item-icon img {
    width: 100%;
  }
  
  .blocks-item {
    min-height: auto;
	}
  
  [dir] .blocks-item {
    padding: 24px;
	}
}

.user-nav[aria-expanded="true"] {
  top: 88px;
  z-index: 1;
}

[dir] .user-nav[aria-expanded="true"] {
  background-color: #212647;
  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 #212647;
}

[dir] .mobile-search {
  cursor: pointer;
}

@media (min-width: 1200px) {
  [data-sidenav] {
    position: -webkit-sticky;
    position: sticky;
    top: 112px;
    height: calc(100vh - 64px);
    overflow: auto;
    z-index: 2;
  }
  [dir] [data-sidenav] {
    padding-top: 0;
    background: #FFFFFF;
  }
  
  .is-user [data-sidenav] {
    top: 64px;
  }
}

[dir] footer {
    margin-top: 144px;
}

.nav-wrapper a:hover, .user-info > button:hover {
  text-decoration: none;
  color: #4568F3;
}

/* ============================================================
   HOMEPAGE UPDATES / ANNOUNCEMENTS
   The "Updates" homepage block: category wrapper, body card with
   F4F8FF tint, h1 / h2 typography, "more" link with arrow icon,
   updates title, plus a small `.hero` interlude inside the inner
   media queries. A short typography / section-list / base-color
   tail follows before the article reading surface — see CROSSOVER
   below. Companion fragment in banner #3 (`.updates-inner-body *`
   limiter rules currently near line 5945).
   ============================================================ */

.updates-inner-category {
  position: relative;
}

.updates-inner-icon {
  width: 203px;
	height: 122px;
  position: absolute;
  top: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.updates-inner-icon img {
  height: 70px;
}

[dir] .updates-inner-icon {
  background: #FFFFFF;
  box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
}

[dir=ltr] .updates-inner-icon {
  left: 0;
}

[dir=rtl] .updates-inner-icon {
  right: 0;
}

.updates-inner-body {
  display: flex;
  flex-wrap: wrap;
}

[dir] .updates-inner-body {
  background: #F4F8FF;
	border-radius: 12px;
  margin-bottom: 80px;
}

[dir=ltr] .updates-inner-body {
  margin-left: 100px;
  padding: 24px 40px 28px 136px;
}

[dir=rtl] .updates-inner-body {
  margin-right: 100px;
  padding: 24px 136px 28px 40px;
}

.updates-inner-body h1 {
  width: 100%;
  font-weight: 700;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.628571px;
  text-transform: uppercase;
  color: #212647;
}

[dir] .updates-inner-body h1 {
  margin-bottom: 16px;
}

.updates-inner-body h2 {
  width: 33%;
  font-weight: normal;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0.3px;
  color: #373737;
  position: relative;
}

[dir] .updates-inner-body h2 {
  padding: 0 20px;
  margin-bottom: 16px;
  cursor: pointer;
}

@media (max-width: 707px) {

.updates-inner-body h2 {
    width: 100%
}
  }

.updates-inner-body h2:hover {
 color: #4568F3;
}

.updates-inner-body h2:before {
  display: block; 
  content: '';
  width: 12px;
	height: 12px;
  position: absolute;
  top: 6px;
}

[dir] .updates-inner-body h2:before {
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.71385 9.78826L3.00567 11.71L3.71388 7.6397L0.713867 4.75708L4.85977 4.16323L6.71385 0.459961L8.56797 4.16323L12.7139 4.75708L9.71389 7.6397L10.4221 11.71L6.71385 9.78826Z' fill='%234570C4'/%3E%3C/svg%3E%0A");
}

[dir=ltr] .updates-inner-body h2:before {
  left: 0;
}

[dir=rtl] .updates-inner-body h2:before {
  right: 0;
}

.updates-inner-more {
  display: block; 
  width: 100%;
}

.updates-inner-more a {
    font-weight: 700;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0.9px;
    color: #4568F3;
    text-decoration: none;
    display: inline-block;
    width: auto;
  }

[dir] .updates-inner-more a {
    margin-top: 8px;
  }

.updates-inner-more a:hover {
  color: #4568F3;
}

.updates-inner-more a:after {
  display: inline-block; 
  vertical-align: middle;
  content: '';
  width: 24px;
	height: 6px;
  transition: all 0.2s ease-out;
}

[dir] .updates-inner-more a:after {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='6' viewBox='0 0 24 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.451 3L18.451 0.113249V5.88675L23.451 3ZM0.235352 3.5H18.951V2.5H0.235352V3.5Z' fill='%230075F2'/%3E%3C/svg%3E%0A");
}

[dir=ltr] .updates-inner-more a:after {
  margin-left: 12px;
}

[dir=rtl] .updates-inner-more a:after {
  margin-right: 12px;
}

[dir] .updates-inner-more:hover:after {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='6' viewBox='0 0 24 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.451 3L18.451 0.113249V5.88675L23.451 3ZM0.235352 3.5H18.951V2.5H0.235352V3.5Z' fill='%23212647'/%3E%3C/svg%3E%0A");
}

[dir=ltr] .updates-inner-more:hover:after {
  margin-left: 16px;
}

[dir=rtl] .updates-inner-more:hover:after {
  margin-right: 16px;
}

.updates-title {
  font-weight: bold;
  font-size: 20px;
  line-height: 40px;
  letter-spacing: 0.733333px;
  color: #000000;
  font-family: 'Ufficio Fireblocks', sans-serif;
}

[dir] .updates-title {
  text-align: center;
}

@media (max-width: 1160px) {
  .updates-inner-body h3 {
    width: 50%;
  }
}

@media (max-width: 707px) {
  .hero {
    min-height: 284px;
  }

  [dir] .hero {
    padding-top: 8px;
  }
  
  .updates-inner-body h3 {
    width: 50%;
  }
  
  .updates-inner-icon {
   position: relative;
    width: 80%;
    height: 99px;
    top: -50px;
	}
  
  [dir] .updates-inner-icon {
    margin: 88px auto -48px;
	}
  
  .updates-inner-icon svg {
    width: 48px;
		height: 48px;
	}
  
  .updates-inner-icon:before {

    display: none;
	}
  
  [dir] .updates-inner-category:last-child {
    background: #F4F8FF;
		border-radius: 12px;
  }
  
  .updates-title {
    line-height: 40px;
  }
  
  [dir] .updates-inner-body {
      padding: 24px;
  }
  
  [dir=ltr] .updates-inner-body {
    margin-left: 0;
  }
  
  [dir=rtl] .updates-inner-body {
      margin-right: 0;
  }
}

@media (max-width: 558px) {
  .updates-inner-body h3 {
      width: 100%;
    }
}

/* CROSSOVER: base typography, section-page article-list, body color, a:hover, meta-data — not separately banner-labeled */
h2, h3, h4, h5, h6 {
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
}

h1 {
  font-weight: 700;
  font-family: 'Ufficio Fireblocks', sans-serif;
}

[dir] .blocks-item-link:focus {
    box-shadow: none;
}

body, .section-tree-title a {
    color: #000;
}

[dir] .article-list-item {
  padding: 12px 0 0;
}

.article-list-item a {
  color: #01317C;
}

.article-list-item a:hover {
  color: #4568F3;
}

a:hover {
  text-decoration: none;
}

.meta-data:not(:last-child)::after {
    display: none;
}

/* ============================================================
   ARTICLE READING SURFACE
   Article-page typography and layout: container padding,
   `.article-title` Ufficio Fireblocks, `.article-meta` color,
   header/content margins, and `.article-body` Figtree base with
   `h1` / `h3` / `.h1-section` / `.h2-section` overrides. Note:
   a second, more recent set of `.article-body h1/h2/h3/h4/p/a`
   overrides lives further down inside the legacy block under
   `ARTICLE TABLES (LEGACY OVERRIDE — pre-Session-12)` banner.
   ============================================================ */

[dir] .article-container>*{
  padding-top:56px;
}

.article-title {
  font-weight: bold;
  font-size: 36px;
  line-height: 140%;
  letter-spacing: 0.200166px;
  color: #212647;
  font-family: 'Ufficio Fireblocks', sans-serif;
}

[dir] .article-title {
  margin-bottom: 4px;
}

.article-meta {
  font-size: 14px;
  line-height: 140%;
  letter-spacing: 0.5px;
  color: #747382;
}

[dir] .article-header {
    margin-bottom: 24px;
}

[dir] .article-content {
  margin-top: 24px;
}

.article-body h1 {
  font-size: 24px;
  line-height: 140%;
  color: #212647;
  font-family: 'Ufficio Fireblocks', sans-serif;
  font-weight: 600;
}

[dir] .article-body h1 {
  margin-bottom: 8px;
}

.article-body {
  font-family: 'Figtree', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0.3px;
  color: #373737;
}

.article-body h3 {
  font-family: 'Ufficio Fireblocks', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0.3px;
  color: #212647;
}

[dir] .article-body .h1-section {
  margin: 32px 0;
  padding-bottom: 32px;
  border-bottom: 1px solid #EDEFF2;
}

[dir] .article-body .h2-section {
  margin: 16px 0;
}

/* ============================================================
   TABLE OF CONTENTS
   Right-rail in-article ToC (`body .lt-toc--*`): title eyebrow,
   link rows, the 3px Bandwidth-tinted active indicator on
   `:before`, and the `.lt-toc_is-desktop` item spacing. A small
   `.lt-toc--list:before` / `body .lt-toc--list` fragment also
   appears later inside SIDENAV (currently near line 6907) — see
   CROSSOVER there.
   ============================================================ */

body .lt-toc--title {
  font-weight: 700;
  font-size: 12px !important;
  line-height: 20px;
  letter-spacing: 0.628571px;
  text-transform: uppercase;
  color: #747382;
}

[dir] body .lt-toc--title {
  margin-bottom: 4px;
}

body .lt-toc--link {
  font-size: 14px;
  line-height: 160%;
  letter-spacing: 0.200166px;
  color: #747382;
  text-replace: auto;
  text-decoration: none;
  position: relative;
}

[dir] body .lt-toc--link {
  padding: 4px 12px;
}

body .lt-toc--link:before {
    display: block;
    content: '';
    width: 2px;
    top: 2px;
    bottom: 2px;
    position: absolute;
    border-radius: 2px;
    opacity: 0;
  }

[dir] body .lt-toc--link:before {
    background: #4568F3;
  }

[dir=ltr] body .lt-toc--link:before {
  left: 0;
  }

[dir=rtl] body .lt-toc--link:before {
    right: 0;
  }

/* Active anchor text in the same Fireblocks blue as its own left
   indicator bar (the :before above, #4568F3) — owner request,
   Jul 2026, replacing navy #212647. Matches the equivalent
   treatment on the sidenav's selected article. Keep in sync with
   the :before background. */
body .lt-toc--link.is-active span {
  color: #4568F3;
  font-weight: 500;
}

body .lt-toc--link.is-active {
  position: relative;
}

[dir] body .lt-toc--link.is-active {
  background: transparent;
}

[dir] body .lt-toc_is-desktop .lt-toc--item {
  margin-bottom: 4px;
}

body .lt-toc--link.is-active:before {
  opacity: 1;
}

/* ============================================================
   SIDENAV
   Left-rail navigation (`body .sidenav__*`, `.sidenav-container
   *`): category / section / article name rows, hover/active
   states, accordion expand chevron, accordion list padding
   resets. This zone also absorbs several off-component fragments
   that follow before banner #8 (article-votes / button overrides,
   `.header.header--search`, `.lt-toc--list:before`, search-input
   cancel button, header search responsive). CROSSOVER comments
   mark the larger off-component runs.
   ============================================================ */

body .sidenav__category-name:after, body  .sidenav__section-name:after, html[dir="ltr"] .sidenav a:before, html[dir="ltr"] .sidenav span:before {
  display: none;
}

.sidenav-container .sidenav__category-name, .sidenav-container .sidenav__section-name, .sidenav-container .sidenav__article-name {
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: 0.02em;
  color: #404040;
  transition: all 0.3s;
}

[dir=ltr] .sidenav-container .sidenav__category-name, [dir=ltr] .sidenav-container .sidenav__section-name, [dir=ltr] .sidenav-container .sidenav__article-name {
  border-radius: 0px 12px 12px 0px;
}

[dir=rtl] .sidenav-container .sidenav__category-name, [dir=rtl] .sidenav-container .sidenav__section-name, [dir=rtl] .sidenav-container .sidenav__article-name {
  border-radius: 12px 0px 0px 12px;
}

[dir] .sidenav-container .sidenav__category-name:hover, [dir] .sidenav-container .sidenav__section-name:hover, [dir] .sidenav-container .sidenav__article-name:hover {
    background: rgba(191, 191, 197, 0.2);
  }

.sidenav-container .sidenav__section-name {
  font-size: 16px;
}

.sidenav-container .sidenav__section-name:before {
    content: '';
    display: inline-block !important;
    width: 24px;
    height: 24px; 
    vertical-align: middle;
    transform: rotate(-90deg);
    transition: transform 0.2s ease;
  }

[dir] .sidenav-container .sidenav__section-name:before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.8002 10.4L12.0002 13.6L15.2002 10.4' stroke='%23545360' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

[dir=ltr] .sidenav-container .sidenav__section-name:before {
  margin-right: 8px;
  }

[dir=rtl] .sidenav-container .sidenav__section-name:before {
    margin-left: 8px;
  }

[dir] .is-active > .sidenav__section-name:before {
    transform: rotate(0deg) !important;
  }

.sidenav-container .sidenav__category-name {
  font-size: 20px;
}

[dir] .sidenav-container .sidenav__category-name {
  padding-top: 16px;
  padding-bottom: 16px;
}

.sidenav__section.is-active > a, .sidenav__section.is-active > span, .sidenav__article.is-active > a, .sidenav__article.is-active > span {
    font-weight: 400;
    color: #000;
}

.sidenav__article.is-active > a, .sidenav__article.is-active > span {
	
  font-weight: 400 !important;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: 0.04em;
  color: #212647;

}

[dir] .sidenav__article.is-active > a, [dir] .sidenav__article.is-active > span {
  background: rgba(137, 178, 255, 0.2);

}

[dir] .sidenav-container .sidenav__article-name {  
  padding-top: 8px;
  padding-bottom: 8px;
}

.sidenav-container .sidenav__article-name:hover {
  color: #000;
}

[dir] .sidenav-container .sidenav__article-name:hover {
  background: rgba(84, 83, 96, 0.06);
}

/* CROSSOVER: ToC link hover — see TABLE OF CONTENTS banner (currently near line 6494) */
.lt-toc--link:hover {
  color: #404040;
}

/* Hover: show a light-grey indicator segment on non-active items
   (active keeps its blue segment) — matches the sidenav. */
body .lt-toc--link:not(.is-active):hover:before {
  opacity: 1;
  background: #B8B7C3;
}

html[dir="ltr"] .sidenav_accordion .sidenav__sections-list, 
html[dir="ltr"] .sidenav_accordion .sidenav__articles-list {
    padding-left: 0;
}

[dir=ltr] .sidenav_accordion > .sidenav__categories-list .sidenav__sections-list, [dir=ltr] .sidenav_accordion > .sidenav__categories-list .sidenav__articles-list, [dir=ltr] .sidenav_accordion > .sidenav__sections-list .sidenav__articles-list {
  padding-right: 0 !important;
}

[dir=rtl] .sidenav_accordion > .sidenav__categories-list .sidenav__sections-list, [dir=rtl] .sidenav_accordion > .sidenav__categories-list .sidenav__articles-list, [dir=rtl] .sidenav_accordion > .sidenav__sections-list .sidenav__articles-list {
  padding-left: 0 !important;
}

[dir=ltr] body .sidenav__categories-list {
  padding-right: 16px !important;
  padding-left: 0;
}

[dir=rtl] body .sidenav__categories-list {
    padding-left: 16px !important;
    padding-right: 0;
}

/* CROSSOVER: article-votes container + shared button/pagination override (`.button, ... .pagination-*-link`) — vendor scaffolding, not separately banner-labeled */
[dir] .article-votes {
    border-bottom: 1px solid #ddd;
    padding: 24px 0;
}

.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 {
    display: inline-block;
    transition: background-color .12s ease-in-out, border-color .12s ease-in-out, color .15s ease-in-out;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    white-space: nowrap;
    -webkit-touch-callout: none;
  
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0.3px;
  color: #212647;
  min-width: auto;
}

[dir] .button, [dir] .split-button button, [dir] .section-subscribe button, [dir] .article-subscribe button, [dir] .community-follow button, [dir] .requests-table-toolbar .organization-subscribe button, [dir] .subscriptions-subscribe button, [dir] .pagination-next-link, [dir] .pagination-prev-link, [dir] .pagination-first-link, [dir] .pagination-last-link {
    background-color: transparent;
    border: 1px solid #EDEFF2;
    border-radius: 12px;
    cursor: pointer;
    padding: 4px 16px;
    text-align: center;
}

[dir] .article-vote:hover {
  background-color: #212647;
}

.article-votes-question {
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0.3px;
  color: #000;
}

.article-votes-count {
  display: none;
}

@media (max-width: 1199px) {
  [dir=ltr] .article {
    border-left: none;
	}
  [dir=rtl] .article {
    border-right: none;
	}
  
  [dir] .article-sidebar {
    margin: 0;
  }
  
  [dir] .article-container>* {
    padding-top: 56px;
	}	
  
  .article-sidebar {
    display: none;
    position: absolute;
    z-index: 99999; 
  }
  
  [data-sidenav] {
    position: static;
    flex-grow: 2;
  }
  
  body .header-menu-sidebar {
    display: flex;
    flex-direction: column;
  }
  
  [dir] body .header-menu-sidebar {
    padding-top: 64px !important;
    background-color: #fff;
  }
  
  [dir=ltr] body .header-menu-sidebar {
    padding-left: 0 !important;
  }
  
  [dir=rtl] body .header-menu-sidebar {
    padding-right: 0 !important;
  }
  
  body .header-menu-sidebar {
    flex-grow: 2;
    overflow-y: auto;
  }
  
}

/* CROSSOVER: mobile `.header.header--search` panel + `input[type="search"]::-webkit-search-cancel-button` reset — see HEADER / HERO / LOGO / NAV VENDOR SCAFFOLDING banner (currently near line 5749) */
.header.header--search {
  display: none;
}

[dir] .header.header--search {
  margin-top: 0;
  padding: 16px 20px;
}

.header.header--search .search-container {
  display: flex;
}

.header.header--search .search {
  width: 100%;
}

.header.header--search .close {
  display: block;
  position: absolute;
  z-index: 2;
  top: 16px;
  width: 24px;
	height: 24px;
}

[dir] .header.header--search .close {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.3112 17.6569L6.99748 6.34315' stroke='white' stroke-linecap='round'/%3E%3Cpath d='M18.3111 6.34315L6.9974 17.6569' stroke='white' stroke-linecap='round'/%3E%3C/svg%3E%0A");
}

[dir=ltr] .header.header--search .close {
  right: 16px;
}

[dir=rtl] .header.header--search .close {
  left: 16px;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
   display: block;
  position: absolute;
  z-index: 2;
  top: 11px;
  width: 24px;
	height: 24px;
}

[dir] input[type="search"]::-webkit-search-cancel-button {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.6569 17.8443L6.34319 6.53059' stroke='%23373737' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M17.6568 6.53059L6.34311 17.8443' stroke='%23373737' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
}

[dir=ltr] input[type="search"]::-webkit-search-cancel-button {
  right: 16px;
}

[dir=rtl] input[type="search"]::-webkit-search-cancel-button {
  left: 16px;
}

.sidenav-btn {display: none !important;}

/* CROSSOVER: ToC list left-border bar — see TABLE OF CONTENTS banner (currently near line 6494) */
.lt-toc--list:before {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
}

[dir] .lt-toc--list:before {
  background: #E5E7EC;
}

[dir=ltr] .lt-toc--list:before {
  left:0;
}

[dir=rtl] .lt-toc--list:before {
  right: 0;
}

body .lt-toc--list {
    overflow: visible;
  border-left: none;
  position: relative;
}

body .header-menu-sidebar {
    width: calc(100% - 56px);
    max-width: 400px;
    position: fixed;
    top: 0;
    z-index: 99999;
    width: 85%;
    height: 100%;
    overflow-y: auto;
}

.sidenav-overlay.is-active {
    opacity: 0.66 !important;
}

/* CROSSOVER: header-search input sizing + cancel-button icon position — see HEADER / HERO / LOGO / NAV VENDOR SCAFFOLDING banner (currently near line 5749) */
.header .search input[type="search"] {
    height: 32px;
}

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

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

@media (min-width: 768px) {

.header .search input[type="search"] {
      min-width: 368px
}
    }

[dir=ltr] .header .search:before {
  left: 16px;
}

[dir=rtl] .header .search:before {
    right: 16px;
}

.header input[type="search"]::-webkit-search-cancel-button {
    top: 2px;
}

/* Header search: fit the input to its 240px pill so the right edge isn't
   clipped (input's default min-width 368px overflowed #user-nav). Only the
   input is touched — visibility rules stay intact. */
.header #user-nav .search input[type="search"] {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

[dir=ltr] .header input[type="search"]::-webkit-search-cancel-button {
  right: 13px;
}

[dir=rtl] .header input[type="search"]::-webkit-search-cancel-button {
    left: 13px;
}

@media (min-width: 1200px) {
  .header.header--search {
    display: none !important;
	}
}

@media (max-width: 1199px) {
  
  #article-container .article-sidebar {
    display: none !important;
  }
  
	[dir=ltr] .header__inner {
    padding-left: 20px;
    padding-right: 20px;
	}
  
	[dir=rtl] .header__inner {
    padding-right: 20px;
    padding-left: 20px;
	}
}

/* ============================================================
   ARTICLE TABLES (LEGACY OVERRIDE — pre-Session-12)
   Older `.article-body` typography overrides (h1/h2/h3/h4/p/a)
   plus the original `.table--bordered` rules and a stray
   `.article-body .btn--primary` pair. The Session 12
   consolidated `ARTICLE TABLES (Session 12 — revised)` banner
   (currently near line 7142) sits immediately after this block
   and is the live source of truth for table styling; this
   legacy block is what Session 12 redrew on top of and is
   kept here pending live-page coverage analysis before any
   safe pruning.
   ============================================================ */

.article-body h1 {
  font-family: 'Ufficio Fireblocks', sans-serif;
  font-weight: 600;
  color: #212647;
  letter-spacing: -0.01em;
}

[dir] .article-body h1 {
  margin-bottom: 8px;
}

[dir] .article-body h1:nth-of-type(n + 2) {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid #E4E9F2;
  }

.article-body h2, .wysiwyg-font-size-x-large {
  font-family: 'Ufficio Fireblocks', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 140%;
  color: #212647;
  letter-spacing: -0.01em;
}

[dir] .article-body h2, [dir] .wysiwyg-font-size-x-large {
  margin-bottom: 4px;
  margin-top: 20px;
}

.article-body h3, .wysiwyg-font-size-large {
  font-family: 'Ufficio Fireblocks', sans-serif;
  font-weight: 600;
	font-size: 16px;
  line-height: 150%;
  color: #212647;
  letter-spacing: 0.02em;
}

[dir] .article-body h3, [dir] .wysiwyg-font-size-large {
  margin-bottom: 4px;
  margin-top: 16px;
}

.article-body h4 {
  font-family: 'Figtree', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 150%;
  color: #373737;
  letter-spacing: 0.02em;
}

[dir] .article-body h4 {
  margin-bottom: 4px;
}

.article-body p {
    color: #373737;
    letter-spacing: 0;
}

[dir] .article-body p {
    margin: 16px 0 0;
}

.article-body a {
    color: #4568F3 !important;
}

.article-body a:hover {
  color: #212647 !important;
}

.table--bordered  {
  border-collapse: initial;
}

[dir] .table--bordered  {
  border: none !important;
}

[dir] .table--bordered tr {
  border: none !important;
}

.table--bordered th {
  font-weight: normal !important;
font-size: 16px;
line-height: 150%;
  color: #000000;
}

[dir] .table--bordered th {
  background: #F4F8FF;
}

[dir=ltr] .table--bordered tr:first-child th:first-child {
  border-top-left-radius: 8px;
}

[dir=rtl] .table--bordered tr:first-child th:first-child {
    border-top-right-radius: 8px;
}

[dir=ltr] .table--bordered tr:first-child th:last-child {
  border-top-right-radius: 8px;
}

[dir=rtl] .table--bordered tr:first-child th:last-child {
    border-top-left-radius: 8px;
}

.table--bordered td, .table--bordered th {
  border-spacing: 0;
}

[dir] .table--bordered td, [dir] .table--bordered th {
  border: 1px solid #EDEFF2 !important;
  padding: 8px;
}

[dir=ltr] .table--bordered tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}

[dir=rtl] .table--bordered tr:last-child td:first-child {
    border-bottom-right-radius: 8px;
}

[dir=ltr] .table--bordered tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

[dir=rtl] .table--bordered tr:last-child td:last-child {
    border-bottom-left-radius: 8px;
}

body .article-body a:hover {
    color: #212647 !important;
}

@media (min-width: 1200px) { 
  .header-menu-sidebar {
    display: none !important;
  }
  .mobile-buttons {
    display: none !important;
  }
}

.article-body .btn--primary {
  color: #fff !important;
}

[dir] .article-body .btn--primary {
  padding: 8px 12px;
}

/* ============================================================
   ARTICLE TABLES (Session 12 — revised)

   Consolidated replacement for three previously separate CSS
   blocks (base/cell/radius at ~line 7052, override at ~line 9458,
   and the implicit #F4F8FF first-row paint that was actually
   coming from vendor formatting-content.css).

   Markup-agnostic: same result whether the WYSIWYG editor emits
   <thead> or a plain <tbody>-only table. Header is decided via
   :has() / :not(:has()) rather than relying on editor markup.

   - Header       Bandwidth Blue (#4568F3), white, bold, centered.
   - Body         Zebra stripe with Genesis Grey 100 (#F4F5F7).
   - Borders      No cell borders. Rounded corners on cells.
   - Row hover    Hover-capable devices only; skips header.

   Scroll note: the theme already has `.article { overflow-x: auto }`
   at ~line 9635 which handles wide tables at the article-column
   level. We intentionally do NOT add overflow-x on the figure
   wrapper — stacking two overflow contexts fought itself and
   displaced the TOC sidebar.

   No sticky header — tested, blocked by a runtime `position:
   relative` inline style that a vendor script applies to
   .article-body (makes it the sticky containing block, so the
   thead sticks to .article-body not the viewport). Overriding
   it from JS still didn't resolve it, so we're not doing it.
   Can revisit if a future session removes the vendor script.

   Print rules are separate (search @media print).
   ============================================================ */

/* --- Figure wrapper (WYSIWYG editor always emits <figure>) ---
   No overflow-x here on purpose. .article already has overflow-x:
   auto (line ~9635) which handles wide-content scrolling for the
   whole article column. Adding a second overflow context on the
   figure competes with that and breaks layout. */
[dir] .article-body figure.wysiwyg-table {
  margin: 16px 0;
  max-width: 100%;
  /* Neutralize inline height="NNNpx" the editor sometimes sets;
     otherwise a too-short figure clips the table. */
  height: auto !important;
}

/* --- Table base ---
   Keep the table within the article column. The theme already
   handles horizontal scroll for wide content at the .article
   level (see rule near line 9635: `.article { overflow-x: auto }`).
   Our rules here intentionally do NOT add a second overflow
   context — stacking overflow:auto on both figure and .article
   fights itself and can push the layout outside the article
   column, displacing the TOC sidebar.

   Wide tables: rely on .article's existing overflow-x.
   Narrow tables: fit the column naturally.
   Sticky first column: still works — sticky position resolves
   against the nearest scroll container, which will be .article. */
.article-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  border: none;
}

[dir] .article-body table {
  margin: 16px 0;
}

/* --- Cell base (default white; zebra/header override as needed) --- */
.article-body table td,
.article-body table th {
  padding: 12px 16px;
  text-align: center;
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  color: #212647;
  vertical-align: middle;
  white-space: normal;
  max-width: none;
  /* Override vendor formatting-content.css word-break:break-all
     that chops labels mid-character ("Owne|r", "Non-Signin|g"). */
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none;
}

[dir] .article-body table td,
[dir] .article-body table th {
  background: #FFFFFF;
}

/* --- Border neutralization ---
   Vendor formatting-content.css paints cell borders via multiple
   selectors (generic .wysiwyg-table, plus .wysiwyg-table-resized
   for editor-resized tables). The individual-side declarations
   cover cases where vendor uses border-top/right/bottom/left
   rather than the shorthand. Scoping to .article-body keeps this
   from touching admin-area tables. */
.article-body table td,
.article-body table th,
.article-body .wysiwyg-table td,
.article-body .wysiwyg-table th,
.article-body figure.wysiwyg-table table td,
.article-body figure.wysiwyg-table table th,
.article-body table.wysiwyg-table-resized td,
.article-body table.wysiwyg-table-resized th,
.article-body figure.wysiwyg-table table.wysiwyg-table-resized td,
.article-body figure.wysiwyg-table table.wysiwyg-table-resized th {
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  outline: 0 !important;
}

/* --- Lists inside table cells ---
   When an author puts a <ul>/<ol> in a <td>, they want a list —
   not a centered paragraph. Center-alignment inherited from the
   cell separates bullet markers from their text (bullets stick
   left, text floats center). Override cell alignment to left for
   cells that contain lists, and tighten the default ul margin
   so lists don't have extra whitespace inside the cell. */
.article-body table td:has(ul),
.article-body table td:has(ol),
.article-body table th:has(ul),
.article-body table th:has(ol) {
  text-align: left;
}

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

.article-body table li {
  text-align: left;
}

@media (max-width: 786px) {
  .article-body table td,
  .article-body table th {
    font-size: 12px;
  }
  [dir] .article-body table td,
  [dir] .article-body table th {
    padding: 8px;
  }
}

/* --- Header styling (explicit <thead>) --- */
.article-body table thead tr th,
.article-body table thead tr td {
  font-weight: 700;
  text-align: center;
  color: #FFFFFF;
}

[dir] .article-body table thead tr th,
[dir] .article-body table thead tr td {
  background: #4568F3;
}

/* --- Header styling (implicit: first <tbody> row when no <thead>) --- */
.article-body table:not(:has(thead)) tbody tr:first-child td,
.article-body table:not(:has(thead)) tbody tr:first-child th {
  font-weight: 700;
  text-align: center;
  color: #FFFFFF;
}

[dir] .article-body table:not(:has(thead)) tbody tr:first-child td,
[dir] .article-body table:not(:has(thead)) tbody tr:first-child th {
  background: #4568F3;
}

/* Inline <strong>/<span>/<p> descendants in header cells inherit
   white. Vendor formatting-content.css sets color on .wysiwyg-*
   spans; force inherit so blue bg always has white text on top. */
.article-body table thead tr *,
.article-body table:not(:has(thead)) tbody tr:first-child * {
  color: inherit;
}

/* --- Zebra stripe: with <thead> (every other data row) --- */
[dir] .article-body table:has(thead) tbody tr:nth-child(even) td,
[dir] .article-body table:has(thead) tbody tr:nth-child(even) th {
  background: #F4F5F7;
}

/* --- Zebra stripe: without <thead> (skip pseudo-header, then stripe) --- */
[dir] .article-body table:not(:has(thead)) tbody tr:nth-child(odd):not(:first-child) td,
[dir] .article-body table:not(:has(thead)) tbody tr:nth-child(odd):not(:first-child) th {
  background: #F4F5F7;
}

/* --- Rounded outer corners (on cells — figure wrapper would need
   overflow:hidden to round itself, which would kill horizontal scroll) --- */
/* Top-left */
[dir=ltr] .article-body table thead tr:first-child th:first-child,
[dir=ltr] .article-body table thead tr:first-child td:first-child,
[dir=ltr] .article-body table:not(:has(thead)) tbody tr:first-child td:first-child,
[dir=ltr] .article-body table:not(:has(thead)) tbody tr:first-child th:first-child {
  border-top-left-radius: 8px;
}
[dir=rtl] .article-body table thead tr:first-child th:first-child,
[dir=rtl] .article-body table thead tr:first-child td:first-child,
[dir=rtl] .article-body table:not(:has(thead)) tbody tr:first-child td:first-child,
[dir=rtl] .article-body table:not(:has(thead)) tbody tr:first-child th:first-child {
  border-top-right-radius: 8px;
}
/* Top-right */
[dir=ltr] .article-body table thead tr:first-child th:last-child,
[dir=ltr] .article-body table thead tr:first-child td:last-child,
[dir=ltr] .article-body table:not(:has(thead)) tbody tr:first-child td:last-child,
[dir=ltr] .article-body table:not(:has(thead)) tbody tr:first-child th:last-child {
  border-top-right-radius: 8px;
}
[dir=rtl] .article-body table thead tr:first-child th:last-child,
[dir=rtl] .article-body table thead tr:first-child td:last-child,
[dir=rtl] .article-body table:not(:has(thead)) tbody tr:first-child td:last-child,
[dir=rtl] .article-body table:not(:has(thead)) tbody tr:first-child th:last-child {
  border-top-left-radius: 8px;
}
/* Bottom-left (always last tbody row) */
[dir=ltr] .article-body table tbody tr:last-child td:first-child,
[dir=ltr] .article-body table tbody tr:last-child th:first-child {
  border-bottom-left-radius: 8px;
}
[dir=rtl] .article-body table tbody tr:last-child td:first-child,
[dir=rtl] .article-body table tbody tr:last-child th:first-child {
  border-bottom-right-radius: 8px;
}
/* Bottom-right (always last tbody row) */
[dir=ltr] .article-body table tbody tr:last-child td:last-child,
[dir=ltr] .article-body table tbody tr:last-child th:last-child {
  border-bottom-right-radius: 8px;
}
[dir=rtl] .article-body table tbody tr:last-child td:last-child,
[dir=rtl] .article-body table tbody tr:last-child th:last-child {
  border-bottom-left-radius: 8px;
}

/* --- Sticky first column (all viewports) ---
   Scrolling the figure horizontally keeps the row label visible.
   background-clip: padding-box prevents a subtle bleed at the
   right edge of the sticky cell as data rows scroll past. */
.article-body table td:first-child,
.article-body table th:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 1;
  background-clip: padding-box;
}

/* Header's first cell must stack above both the rest of the
   header row AND the sticky column (otherwise it paints behind
   the adjacent scrolling cells). */
.article-body table thead tr th:first-child,
.article-body table thead tr td:first-child,
.article-body table:not(:has(thead)) tbody tr:first-child td:first-child,
.article-body table:not(:has(thead)) tbody tr:first-child th:first-child {
  z-index: 2;
}

/* --- Row hover tint (hover-capable devices; header preserved) ---
   Specificity must match zebra at (0,3,5) so source-order wins;
   :has()/:not(:has()) qualifiers do the bump. */
@media (hover: hover) {
  [dir] .article-body table:has(thead) tbody tr:hover td,
  [dir] .article-body table:has(thead) tbody tr:hover th,
  [dir] .article-body table:not(:has(thead)) tbody tr:hover:not(:first-child) td,
  [dir] .article-body table:not(:has(thead)) tbody tr:hover:not(:first-child) th {
    background: #EDF1FF;
    transition: background 0.15s;
  }
}


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

[dir] .article-body ul {
  margin: 0 0 16px;
}

[dir=ltr] .article-body ul {
  margin-left: 0;
}

[dir=rtl] .article-body ul {
  margin-right: 0;
}

[dir=ltr] .article-body > ul, 
[dir=ltr] .article-body > ol, 
[dir=ltr] .article-body p {
  margin: 0.25rem 0 0.75rem;
}

[dir=rtl] .article-body > ul, [dir=rtl] .article-body > ol,  [dir=rtr] .article-body p {
  margin: 0.25rem 0 0.75rem;
}

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

[dir] .article-body ul ul {
  margin-top: 4px;
}

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

[dir] .article-body ul ul ul {
  margin-top: 4px;
}

.article-body ol {
  list-style-type: decimal;
}

[dir] .article-body ol {
  margin: 0 0 16px;
}

[dir=ltr] .article-body ol {
  margin-left: 0;
}

[dir=rtl] .article-body ol {
  margin-right: 0;
}

.article-body ol ol {
  list-style-type: lower-latin;
}

[dir] .article-body ol ol {
  margin-top: 4px;
}

.article-body ol ol ol {
  list-style-type: lower-roman;
}

[dir] .article-body ol ol ol {
  margin-top: 4px;
}

.article-body .list-bullet li {
    list-style: none;
    font-size: 16px;
}

[dir] .article-body .list-bullet li {
    margin-bottom: 0;
}

[dir=ltr] .article-body .list-bullet li {
  padding-left: 20px;
}

[dir=rtl] .article-body .list-bullet li {
    padding-right: 20px;
}

.article-body .list-bullet li:before {
    content:"·";
    font-size:30px;
    vertical-align:middle;
    line-height:20px;
    top: 0;
}

[dir=ltr] .article-body .list-bullet li:before {
  padding: 0 4px 0 0;
}

[dir=rtl] .article-body .list-bullet li:before {
  	padding: 0 0 0 4px;
}

.image-container {
  overflow: hidden;

  overflow: hidden;
  line-height: 0;
}

[dir] .image-container {
  text-align: center;
  background-color: #f6f6f6;
  border: 1px solid #e5e7ec;
  border-radius: 12px;
  margin: 20px 0 !important;
}

.image-with-video-icon {
  height: 416px;
  overflow: hidden;
}

[dir] .image-with-video-icon {
  text-align: center;
  background-color: #f6f6f6;
  border: 1px solid #e5e7ec;
  border-radius: 12px;
  margin: 20px 0 !important;
}

.image-container img, .image-with-video-icon img {
  height: 100%;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.image-with-video-icon:after {
  display: none;
}

[dir=ltr] .sidenav .sidenav__section-name {
  padding-left: 72px !important;
  }

[dir=rtl] .sidenav .sidenav__section-name {
    padding-right: 72px !important;
  }

[dir=ltr] .sidenav .sidenav__section-name:before {
  transform: rotate(-90deg);
    }

[dir=rtl] .sidenav .sidenav__section-name:before {
      transform: rotate(90deg);
    }

[dir=ltr] .sidenav .sidenav__article-name {
  padding-left: 120px !important;
  }

[dir=rtl] .sidenav .sidenav__article-name {
    padding-right: 120px !important;
  }

.sidenav .sidenav__category-name {
    display: flex;
    align-items: center;
  }

[dir=ltr] .sidenav .sidenav__category-name {
  padding-left: 80px !important;
  }

[dir=rtl] .sidenav .sidenav__category-name {
    padding-right: 80px !important;
  }

.sidenav .sidenav__category-name .sidenav-icon--colored {
      display: none;
    }

.sidenav .sidenav__category-name .sidenav-icon--selected {
      display: none;
    }

.sidenav .sidenav__category-name .sidenav-icon {
      display: none;
    }

/* Category-page sidenav: flatten indentation so sections/articles align
   with the category names (no nested indent, no leading chevron offset). */
.article-sidebar .sidenav__categories-list,
.article-sidebar .sidenav__sections-list,
.article-sidebar .sidenav__articles-list {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
[dir=ltr] .article-sidebar .sidenav__section-name,
[dir=ltr] .article-sidebar .sidenav__article-name,
[dir=ltr] .article-sidebar .sidenav__category-name {
  padding-left: 8px !important;
}
/* Section accordion chevron, article indentation, selected-article style,
   equal row heights, and left-rail divider are all handled in the
   "ARTICLE-PAGE SIDENAV REFINEMENTS" block at the END of this file
   (placed there so source order wins over the scattered vendor rules). */

.sidenav .sidenav__category-name .sidenav-icon {
      display: block;
    }

.sidenav .sidenav__category-name img {
      width: 28px;
      height: 28px;
    }

[dir=ltr] .sidenav .sidenav__category-name img {
  margin-right: 12px;
    }

[dir=rtl] .sidenav .sidenav__category-name img {
      margin-left: 12px;
    }

.sidenav .sidenav__category.is-active .sidenav-icon {
      display: block;
    }

.sidenav .sidenav__category.is-active img {
      display: none;
    }

@media (max-width: 1199px) { 
  [dir=ltr] .sidenav .sidenav__category-name {
    padding-left: 64px !important;
  } 
  [dir=rtl] .sidenav .sidenav__category-name {
    padding-right: 64px !important;
  }
  [dir=ltr] .sidenav .sidenav__section-name {
    padding-left: 56px !important;
  }
  [dir=rtl] .sidenav .sidenav__section-name {
    padding-right: 56px !important;
  }
  [dir=ltr] .sidenav .sidenav__article-name {
    padding-left: 104px !important;
  }
  [dir=rtl] .sidenav .sidenav__article-name {
    padding-right: 104px !important;
  }

  [dir=ltr] body .sidenav__category-icon {
    left: 24px;
  }

  [dir=rtl] body .sidenav__category-icon {
    right: 24px;
  }
}

[dir] .lt-toc--container {
  margin-bottom: 24px;
  overflow: auto;
}

[dir] .related-articles {
  border: 1px solid #E5E7EC;
  border-radius: 12px;
  padding: 24px;
}

@media (max-width: 1023px) {

[dir] .related-articles {
    margin-top: 24px;
    margin-bottom: 88px
}
  }

[dir=ltr] .article-inner {
  padding-left: 32px;
  padding-right: 32px;
  }

[dir=rtl] .article-inner {
    padding-right: 32px;
    padding-left: 32px;
  }

@media (min-width: 1024px) {
  .article-inner {
    display: flex;
    justify-content: center;
    min-height: calc(100vh - 111px); 
  }
  [dir=ltr] .article-inner {
    padding-left: 32px;
    padding-right: 32px; 
  }
  [dir=rtl] .article-inner {
    padding-right: 32px;
    padding-left: 32px; 
  }

  .toc-container {
    flex: 0 0 288px;
  }
}

@media (min-width: 1200px) {
  [dir=ltr] .article-inner {
    padding-left: 56px;
    padding-right: 56px;
  }
  [dir=rtl] .article-inner {
    padding-right: 56px;
    padding-left: 56px;
  }
}

.related-articles__title {
  font-family: 'Ufficio Fireblocks', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.3px;
  color: #212647;
}

[dir] .related-articles__title {
  margin-bottom: 12px;
}

.related-articles__item a {
  display: flex;
  width: 100%;
  align-items: flex-start;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #545360; 
  transition: all 0.3s;
}

[dir] .related-articles__item a {
  margin-top: 12px;
}

.related-articles__item a svg {
    flex-shrink: 0;
  }

[dir] .related-articles__item a svg {
    margin-top: 0;
  }

[dir=ltr] .related-articles__item a svg {
  margin-right: 4px;
  }

[dir=rtl] .related-articles__item a svg {
    margin-left: 4px;
  }

.related-articles__item a:hover {
    color: #000;
  }

.related-articles__item a:hover svg path {
      fill: #000;
    }

@media (max-width: 1023px) {

  [dir] .article-header {
    margin-top: 0;
  }
  [dir] .article-author {
    margin-bottom: 0;
  }
    .custom-mobile-toc--button .lt-toc--container {
      display: none;

    }

    .custom-mobile-toc--button .lt-toc_is-mobile .lt-toc--container {
      position: relative;
      width: 100% !important;
      top: 0px !important;
    }

    [dir] .custom-mobile-toc--button .lt-toc_is-mobile .lt-toc--container {
      background: #fff;
      border: none;
      border-radius: 0;
    }

    [dir=ltr] .custom-mobile-toc--button .lt-toc_is-mobile .lt-toc--container {
    margin-left: -32px;
    }

    [dir=rtl] .custom-mobile-toc--button .lt-toc_is-mobile .lt-toc--container {
      margin-right: -32px;
    }
  
    .custom-mobile-toc--button .lt-toc--title {
      display: none !important;
    }
  
    .custom-mobile-toc--button .lt-toc .lt-toc--current {
      font-weight: 700;
      font-size: 26px;
      letter-spacing: 0.02em;
      color: #000000;
  
    }
  
    [dir] .custom-mobile-toc--button .lt-toc .lt-toc--current {
      padding: 8px 32px;
      border-bottom: 1px solid #E5E7EC;
  
    }

    [dir] .custom-mobile-toc--button .lt-toc_is-mobile .lt-toc--list {
      border: none;
      box-shadow: 0px 20px 48px rgba(0, 0, 0, 0.1471);
    }

  .lt-toc-mobile, .lt-toc_is-mobile {
    height: 0 !important;
  }
    .lt-toc_is-fixed .lt-toc--container {
      display: block;
    }

  
}

.section__header {
  color: #373737;
}

[dir] .section__header {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.13);
  margin-bottom: 24px;
}

.section__articles {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

[dir] .section__articles {
  margin-bottom: 40px;
}

[dir=ltr] .section__articles {
  margin-left: -52px;
  margin-right: -52px;
}

[dir=rtl] .section__articles {
  margin-right: -52px;
  margin-left: -52px;
}

.article-item {
  width: 50%;
  font-size: 16px;
  max-width: 454px;
}

[dir] .article-item {
  padding: 0 52px;
  margin-bottom: 24px;
}

@media (max-width: 768px) {

.article-item {
    width: 100%
}
  }

.article-item__link {
  font-weight: bold;
  color: #373737;
  letter-spacing: 0.02em;
  display: inline-block;
}

[dir] .article-item__link {
  margin-bottom: 8px;
}

.article-item__link:hover {
    color: #212647;
  }

.article-item__body span h1 {
    display: block;
    font-size: 14px;
    line-height: 150%;
    font-weight: normal;
    color: #747382;
    position: relative;
    font-family: 'Figtree', sans-serif;    
  }

[dir] .article-item__body span h1 {
    margin-bottom: 8px;
    cursor: pointer;    
  }

[dir=ltr] .article-item__body span h1 {
  text-align: left;
  padding-left: 12px;
  }

[dir=rtl] .article-item__body span h1 {
    text-align: right;
    padding-right: 12px;
  }

.article-item__body span h1:hover {
      color: #212647;
    }

.article-item__body span h1:before {
    content: '\2022';
    display: inline-block;
    vertical-align: middle;
    position: absolute;
  }

[dir=ltr] .article-item__body span h1:before {
  padding-left: 4px;
  padding-right: 4px;
  left: 0;
  }

[dir=rtl] .article-item__body span h1:before {
    padding-right: 4px;
    padding-left: 4px;
    right: 0;
  }

.article__see-all {
  font-weight: bold;
  font-size: 12px;
  line-height: 150%;
  color: #747382;
}

[dir] .article__see-all {
  padding: 0 8px;
}

.article__see-all:hover {
    color: #212647;
  }

.article-item__body h2:nth-of-type(n + 6) {
  display: none;
}

.sidenav__section-name {
  font-weight: normal !important;
}

.category-page .sidenav__category.current .category-wrapper {
    color: #4568F3;
  }

[dir] .category-page .sidenav__category.current .category-wrapper {
    background: transparent;
  }

[dir=ltr] .category-page .sidenav__category.current .category-wrapper {
  border-radius: 0px 16px 16px 0px;
  }

[dir=rtl] .category-page .sidenav__category.current .category-wrapper {
    border-radius: 16px 0px 0px 16px;
  }

.category-page .sidenav__category.current .category-wrapper img {
      display: none;
    }

.category-page .sidenav__category.current .category-wrapper .sidenav-icon--colored {
      display: block;
    }

.category-page .sidenav__category.current .sidenav__category-name img {
        display: none !important;
      }

.category-page .sidenav__category.current .sidenav__category-name .sidenav-icon--colored {
        display: block !important;
      }

.category-page .sidenav__category.current .category-title {
      color: #4568F3 !important;
    }

.sidenav__category.current .category-wrapper .sidenav-icon {
    display: none;
  }

.sidenav__category.current .category-wrapper .sidenav-icon--selected {
    display: block;
  }

.sidenav__category.current .category-title {
    font-weight: bold;
    color: #4568F3;
  }

.signin {
  letter-spacing: 0.04em;
  display: inline-block;
  color: #FFFFFF !important  ;
  font-weight: bold !important;
  font-size: 14px;
  line-height: 1.5 !important;
}

[dir] .signin {
  border-radius: 12px;
  padding: 8px 16px !important;
  margin-top: -4px;
  margin-bottom: -4px;
}

[dir=ltr] .signin {
  background: #4568F3;
}

[dir=rtl] .signin {
  background: #4568F3;
}

.mobile-buttons {
  display: flex;
  flex-direction: column;
}

[dir] .mobile-buttons {
  padding: 24px;
  box-shadow: 0px -1px 12px rgba(0, 0, 0, 0.06);
}

.mobile-buttons .activity {
    font-weight: bold;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0.04em;
    color: #373737;
  }

[dir] .mobile-buttons .activity {
    background: #FFFFFF;
    border-radius: 12px;
    text-align: center;
    padding: 12px;
    margin-bottom: 16px;
    border: none;
  }

[dir] .mobile-buttons .signin {
    text-align: center;
    padding: 12px;
  }

.container--new-request {
  position: fixed;
  width: 100%;
  min-height: 100%;
  z-index: 999;
  top: 0;
}

[dir] .container--new-request {
  background: #fff;
}

[dir=ltr] .container--new-request {
  left: 0;
}

[dir=rtl] .container--new-request {
  right: 0;
}

.container--new-request__close {
  position: absolute;
  top: 25px;
}

[dir] .container--new-request__close {
  cursor: pointer;
}

[dir=ltr] .container--new-request__close {
  right: 29px;
}

[dir=rtl] .container--new-request__close {
  left: 29px;
}

@media (max-width: 768px) {

.container--new-request__close {
    top: 10px
}

[dir=ltr] .container--new-request__close {
    right: 10px
}

[dir=rtl] .container--new-request__close {
    left: 10px
}
  }

.form-field label {
  font-size: 12px;
  letter-spacing: 0.03em;
  color: #545360;
  display: block;
}

[dir] .form-field label {
  margin-bottom: 4px;
}

.hc, .request_description #hc-wysiwyg {
  display: none;
}

.custom-toggle {
  display: flex;
}

.custom-toggle__wrapper {
  box-sizing: border-box;
  display: flex;
}

[dir] .custom-toggle__wrapper {
  border: 1px solid #E5E7EC;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.0001);
  border-radius: 12px;
  padding: 4px;
}

.custom-toggle__item {
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #B8B7C3;
  text-transform: capitalize;
  min-width: 60px;
}

[dir] .custom-toggle__item {
  border-radius: 4px;
  padding: 0;
  text-align: center;
  cursor: pointer;
}

.custom-toggle__item.is-active {
    color: #212647;
  }

[dir] .custom-toggle__item.is-active {
    background: rgba(137, 178, 255, 0.2);
  }

.request_type .custom-toggle__item {
    min-width: 124px;
  }

[dir] .request_type .custom-toggle__item {
    padding: 4px;
  }

.nesty-input {
  box-sizing: border-box;
}

[dir] .nesty-input {
  border: 1px solid #E5E7EC;
  border-radius: 12px;
}

.upload-dropzone {
  font-size: 14px;
  min-height: 56px;
  display: flex;
  align-items: center;
}

[dir] .upload-dropzone {
  border: 1px dashed #E5E7EC;
  border-radius: 12px;
}

[dir=ltr] .upload-dropzone {
  text-align: left;
}

[dir=rtl] .upload-dropzone {
  text-align: right;
}

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

[dir] .upload-dropzone span {
  padding: 16px;
}

.upload-dropzone span:before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
  }

[dir] .upload-dropzone span:before {
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.37716 18.9957H19.3736C21.9871 18.9971 24.1605 16.9849 24.3602 14.3791C24.5599 11.7732 22.7185 9.45335 20.1353 9.05643C19.7036 7.34388 18.7198 5.82119 17.3361 4.72364C15.927 3.60125 14.177 2.99325 12.3755 3.00006C9.48641 3.00362 6.82274 4.56157 5.40343 7.07798C2.31981 7.58338 0.14072 10.3714 0.395179 13.4858C0.649639 16.6002 3.25239 18.9975 6.37716 18.9957Z' fill='%23D3D3D3'/%3E%3Cpath d='M12.2031 13.7275L12.2031 8.07068' stroke='%23545360' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M10.0818 10.1209L12.2031 7.99955L14.3244 10.1209V10.1209' stroke='%23545360' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  }

[dir=ltr] .upload-dropzone span:before {
  margin-right: 12px;
  }

[dir=rtl] .upload-dropzone span:before {
    margin-left: 12px;
  }

.upload-dropzone a {
  color: #4568F3;
  font-size: 14px;
}

.upload-dropzone a:hover {
    color: #212647;
  }

input[type=search]::-webkit-input-placeholder {
  color: #373737;
  opacity: 1;
}

input[type=search]::-moz-placeholder {
  color: #373737;
  opacity: 1;
}

input[type=search]:-ms-input-placeholder {
  color: #373737;
  opacity: 1;
}

input[type=search]:-moz-placeholder {
  color: #373737;
  opacity: 1;
}

input[type=text]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #B8B7C3;
  opacity: 1;
}

input[type=text]::-moz-placeholder,
textarea::-moz-placeholder {
  color: #B8B7C3;
  opacity: 1;
}

input[type=text]:-ms-input-placeholder,
textarea:-ms-input-placeholder  {
  color: #B8B7C3;
  opacity: 1;
}

input[type=text]:-moz-placeholder,
textarea:-moz-placeholder {
  color: #B8B7C3;
  opacity: 1;
}

[dir] .form-field .nesty-input:hover, [dir] input[type=text]:hover, [dir] textarea:hover {
  border: 1px solid #747382 !important;
}

[dir] .form-field .nesty-input:focus, [dir] input[type=text]:focus, [dir] textarea:focus {
  border: 1px solid #4568F3 !important;
  box-shadow: 0px 0px 0px 4px rgba(69, 104, 243, 0.2);
}

.form-field .nesty-input, 
input[type=text], 
textarea {
  font-size: 14px;
}

.form-field .nesty-input {
  height: 56px;
  line-height: 56px;
}

[dir=ltr] .form-field .nesty-input {
  padding-left: 12px;
  padding-right: 12px;
}

[dir=rtl] .form-field .nesty-input {
  padding-right: 12px;
  padding-left: 12px;
}

.nesty-input:after {
  content: "";
  width: 32px;
  height: 32px;
  display: inline-block;
  position: absolute;
  top: 12px;
}

[dir] .nesty-input:after {
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='33' viewBox='0 0 32 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 14.5L16 18.5L20 14.5' stroke='%23545360' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

[dir=ltr] .nesty-input:after {
  right: 15px;
}

[dir=rtl] .nesty-input:after {
  left: 15px;
}

[dir] .form-field input[type="text"] {
  border: 1px solid #E5E7EC;
  border-radius: 12px;
  padding: 0 16px;
  height: 56px;
  line-height: 56px;
}

.request_description textarea {
  display: block !important;
  visibility: visible !important;
}

[dir] .request_description textarea {
  border: 1px solid #E5E7EC;
  border-radius: 12px;
  padding: 16px;
}

#new_request footer {
  display: none;
}

[dir] .button-large, [dir] input[type="submit"] {
  background: #4568F3;
  border-radius: 12px;
  font-weight: bold;
  font-size: 16px;
  line-height: 150%;
  text-align: center;
  letter-spacing: 0.03em;
  color: #FFFFFF;
  min-width: 170px;
  padding: 8px;
}

.suggestion-list {
  position: relative;
}

body .form .searchbox {
  position: absolute;
  z-index: 6;
}

[dir] body .form .searchbox {
  background: #FFFFFF;
  box-shadow: 0px 16px 28px rgba(6, 6, 6, 0.14);
  border-radius: 12px;

  margin-top: 4px;
}

body .form .searchbox label {
    display: none;
  }

[dir] body .form .searchbox .searchbox-suggestions {
    padding: 24px;
  }

body .form .searchbox .searchbox-suggestions:before {
      display: block;
      content: 'Related Articles';
      font-weight: bold;
      font-size: 16px;
      letter-spacing: 0.03em;
      color: #000000;
    }

[dir] body .form .searchbox .searchbox-suggestions:before {
      margin-bottom: 16px;
    }

[dir] body .form .searchbox .searchbox-suggestions li {
      padding: 0 0;
      margin-bottom: 12px;
    }

body .form .searchbox .searchbox-suggestions li a {
        font-size: 14px;
        line-height: 150%;
        letter-spacing: 0.02em;
        color: #545360;
        position: relative;

        

      }

body .form .searchbox .searchbox-suggestions li a:before {
          content: '';
          display: inline-block;
          vertical-align: middle;
          width: 24px;
          height: 24px;
        }

[dir] body .form .searchbox .searchbox-suggestions li a:before {
          margin-top: 0;
          background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.7148 3.5V9.5H19.7148' stroke='%23545360' stroke-linejoin='round'/%3E%3Cpath d='M19.7148 8.5L14.7148 3.5L5.71484 3.50002L5.71484 21.5L19.7148 21.5L19.7148 8.5Z' stroke='%23545360' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.21484 12.8H17.2148' stroke='%23545360' stroke-linecap='round'/%3E%3Cpath d='M8.21484 15.5H17.2148' stroke='%23545360' stroke-linecap='round'/%3E%3Cpath d='M8.21484 18.2H17.2148' stroke='%23545360' stroke-linecap='round'/%3E%3C/svg%3E%0A");
        }

[dir=ltr] body .form .searchbox .searchbox-suggestions li a:before {
  margin-right: 4px;
        }

[dir=rtl] body .form .searchbox .searchbox-suggestions li a:before {
          margin-left: 4px;
        }

body .form .searchbox .searchbox-suggestions li a:hover {
          color: #000;
        }

[dir] body .form .searchbox .searchbox-suggestions li a:hover:before {
            background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.7148 3.5V9.5H19.7148' stroke='%23000' stroke-linejoin='round'/%3E%3Cpath d='M19.7148 8.5L14.7148 3.5L5.71484 3.50002L5.71484 21.5L19.7148 21.5L19.7148 8.5Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.21484 12.8H17.2148' stroke='%23000' stroke-linecap='round'/%3E%3Cpath d='M8.21484 15.5H17.2148' stroke='%23000' stroke-linecap='round'/%3E%3Cpath d='M8.21484 18.2H17.2148' stroke='%23000' stroke-linecap='round'/%3E%3C/svg%3E%0A");
          }

.clear_input {
  font-size: 0;
  display: block;
  position: absolute;
  z-index: 2;
  top: 11px;
  width: 24px;
	height: 24px;

}

[dir] .clear_input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.6569 17.8443L6.34319 6.53059' stroke='%23373737' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M17.6568 6.53059L6.34311 17.8443' stroke='%23373737' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");

}

[dir=ltr] .clear_input {
  right: 16px;

}

[dir=rtl] .clear_input {
  left: 16px;

}

.nav-up {
  top: -200px;
}

.blue-logo {
  display: block;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

[dir] .blue-logo {
  padding-top: 40px;
  margin-top: -100px;
}

[dir=ltr] .blue-logo {
  padding-left: 40px;
}

[dir=rtl] .blue-logo {
  padding-right: 40px;
}

.nav-up .blue-logo {
    opacity: 1;
  }
.toc-container {
  position: -webkit-sticky;
  position: sticky;
  top: 86px;
}

.article-inner {
  align-items: flex-start;
  flex-grow:1;
}

.homepage-more {
  font-weight: bold;
  font-size: 16px;
  line-height: 150%;
  color: #373737;
  display: inline-block;
}

[dir] .homepage-more {
  margin-top: 8px;
}

.homepage-more:hover {
    color: #212647;
  }

@media (min-width: 1200px) {
   .category-page .article-inner {
    min-height: 76vh;
  }
   [dir=ltr] .category-page .article-inner {
    padding-left: 104px;
    padding-right: 104px;
  }
   [dir=rtl] .category-page .article-inner {
    padding-right: 104px;
    padding-left: 104px;
  }
}

@media (max-width: 1199px) {
    .category-page .logo, .article-page .logo {
      flex-grow: 2;
    }
    .category-page .logo a, .article-page .logo a {
      justify-content: center;
    }
    
    .category-page .user-nav .search-container, .article-page .user-nav .search-container {
      display: none;
    }
    
    .category-page .logo-wordmark, .article-page .logo-wordmark {
      height: 16px;
    }
    
    .category-page .logo-divider, .article-page .logo-divider {
      height: 16px;
    }
    
    .category-page .logo-tagline, .article-page .logo-tagline {
      font-size: 14px;
    }
    
    .category-page .user-nav .search-container, .article-page .user-nav .search-container {
      top: -20px;
      z-index: 1;
      position: absolute;
      width: 250px;
    }
    
    [dir] .category-page .user-nav .search-container, [dir] .article-page .user-nav .search-container {
      background-color: #212647;
      box-shadow: 0 0 4px 0 rgb(0 0 0 / 15%), 0 4px 10px 0 rgb(0 0 0 / 10%);
      border: solid 1px #212647;
    }
    
    [dir=ltr] .category-page .user-nav .search-container, [dir=ltr] .article-page .user-nav .search-container {
    right: -32px;
    }
    
    [dir=rtl] .category-page .user-nav .search-container, [dir=rtl] .article-page .user-nav .search-container {
      left: -32px;
    }

    .category-page .nav-wrapper a, .article-page .nav-wrapper a {
      display: none;
    }

    .category-page .menu-button-article,
    .category-page .mobile-search,
    .article-page .menu-button-article,
    .article-page .mobile-search {
      display: block !important;
    }
  }

.sidenav__category-name .category-title {
  position: relative;
  z-index: 2;
}

[dir] .sidenav__category-name .category-title {
  padding: 0;
  cursor: pointer;
}

.sidenav__category-name .category-title:hover {
    color: #212647 !important;
  }

.sidenav__category-icon {
  position: absolute;
}

[dir=ltr] .sidenav__category-icon {
  left: 40px;
}

[dir=rtl] .sidenav__category-icon {
  right: 40px;
}

.sidenav__category-name {
  display: inline-block !important;
  position: static !important;
  transition: all 0.3s ease;
}

[dir] .sidenav__category-name {
  cursor: default;
}

.sidenav__category-name .sidenav__category-icon-carrot {
    display: block;
    width: 32px;
    height: 32px;
    position: absolute;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 2;
    top: 16px;
  }

[dir] .sidenav__category-name .sidenav__category-icon-carrot {
    cursor: pointer;
  }

[dir=ltr] .sidenav__category-name .sidenav__category-icon-carrot {
  right: 16px;
  }

[dir=rtl] .sidenav__category-name .sidenav__category-icon-carrot {
    left: 16px;
  }

.category-wrapper {
  position: relative;
}

.category-wrapper:hover .sidenav__category-icon-carrot {
      opacity: 1;
    }

[dir] .category-wrapper:hover .sidenav__category-icon-carrot {
      background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='32' height='32' rx='16' fill='%23B8B7C3' fill-opacity='0'/%3E%3Cpath d='M12.7992 14.4L15.9992 17.6L19.1992 14.4' stroke='%23545360' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    }

[dir] .category-wrapper:hover .sidenav__category-icon-carrot:hover {
        background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='32' height='32' rx='16' fill='%23B8B7C3' fill-opacity='0.15'/%3E%3Cpath d='M12.7992 14.4L15.9992 17.6L19.1992 14.4' stroke='%23545360' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
      }

[dir] .sidenav .category-wrapper:hover {
  background: rgba(191, 191, 197, 0.2);
}

[dir=ltr] .sidenav .category-wrapper:hover {
  border-radius: 0px 16px 16px 0px;
}

[dir=rtl] .sidenav .category-wrapper:hover {;
  border-radius: 16px 0px 0px 16px;
}

.sidenav .sidenav__category.current:hover .category-wrapper .category-title {
    color: #000;
  }

[dir] .sidenav-container .sidenav__category-name:hover {
  background-color: transparent;
}

[dir=ltr] .sidenav__category.is-active .sidenav__category-icon-carrot {
  transform: rotate(180deg);
  }

[dir=rtl] .sidenav__category.is-active .sidenav__category-icon-carrot {
    transform: rotate(-180deg);
  }

[dir=ltr] .sidenav .sidenav__section-name {
  display: flex;
  width: 100%;
}

[dir] .homepage main {
    border-color: #212647;
  }

@media (min-width: 1024px) {
  .lt-toc-mobile, .lt-toc_is-mobile {
    width: 100%;
    height: 0 !important;
  }
  [dir] .lt-toc-mobile, [dir] .lt-toc_is-mobile {
    margin-bottom: 0;
  }
}

.banner {
  color: #fff;
  display: block;
  font-size: 16px;
  line-height: 1.5;
}

[dir] .banner {
  background-color: #4568F3;
  padding: 12px;
  text-align: center;
}

.body-nav-up .search-results-sidebar {
    top: 0;
  }

.body-nav-down .search-results-sidebar {
    top: 112px;
  }

.is-user.body-nav-down .search-results-sidebar {
    top: 64px;
  }

[dir] .is-user.body-nav-down .blue-logo {
    padding-top: 40px;
  }

.sidenav-mobile {
  width: 100%;
  z-index: 1 !important;
  max-width: unset !important;

}

[dir] .sidenav-mobile {
  padding: 16px 0 0 !important;

}

.sidenav-mobile.is-active {
  position: relative;
  width: 100%;
}

[dir] .sidenav-mobile.is-active {
  box-shadow: none !important;
}

.sidenav-overlay {
  z-index: 0 !important;
}

.header-menu-sidebar__top-menu, .header-menu-sidebar__bottom-menu {
  position: relative;
  z-index: 3;
  
}

.header-menu-sidebar__top-menu {
  align-items: center;
  width: 100%;

}

[dir] .header-menu-sidebar__top-menu {
  padding: 20px;
  background-color: #fff;
  border-bottom: 1px solid #E5E7EC;

}

.header-menu-sidebar__top-menu .user-avatar {
    flex-shrink: none;
    height: 32px;
    width: 32px;
  }

[dir=ltr] .header-menu-sidebar__top-menu .user-avatar {
  margin-right: 16px;
  }

[dir=rtl] .header-menu-sidebar__top-menu .user-avatar {
    margin-left: 16px;
  }

.header-menu-sidebar__top-menu [data-user-name] {
    color: #000;
    font-size: 16px;
  }

[dir] .header-menu-sidebar__top-menu [data-user-name] {
    margin-bottom: 8px;
  }

.header-menu-sidebar__top-link {
  font-size: 12px;
  line-height: 150%;
  letter-spacing: 0.03em;
  color: #373737;
}

[dir=ltr] .header-menu-sidebar__top-link {
  margin-right: 8px;
}

[dir=rtl] .header-menu-sidebar__top-link {
  margin-left: 8px;
}

.header-menu-sidebar__top-link:hover {
    color: #000;
  }

[dir=ltr] .header-menu-sidebar__top-link + a {
  border-left: 1px solid rgb(84 83 96 / 50%);
  padding-left: 8px;
  }

[dir=rtl] .header-menu-sidebar__top-link + a {
    border-right: 1px solid rgb(84 83 96 / 50%);
    padding-right: 8px;
  }

[dir] .header-menu-sidebar__bottom-menu {
  background: #FAFAFA;
  padding: 16px 20px;
}

.request_ticket_form_id {
  display: none;
}

.btn--primary {
  width: 166px;
  height: 40px;
  font-weight: 700;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0.03em;
  color: #FFFFFF;
}

[dir] .btn--primary {
  box-shadow: 0px 9px 25px 1px rgba(1, 22, 45, 0.0839434);
  border-radius: 12px;
  text-align: center;
  border: none;
}

[dir=ltr] .btn--primary {
  background: #4568F3;
}

[dir=rtl] .btn--primary {
  background: #4568F3;
}

#tooltip {
  /* ... */
  display: none;
  width: 93px;
  font-weight: 700;
  font-size: 12px;
  line-height: 150%;
  letter-spacing: 0.03em;
  color: #FFFFFF;
  z-index: 4;
}

[dir] #tooltip {
  background: #000000;
  box-shadow: 0px 5px 15px rgba(6, 6, 6, 0.1);
  border-radius: 4px;
  padding: 8px;
  text-align: center;
}

#tooltip[data-show] {
  display: block;
}

.optional i {
  vertical-align: middle;
}

[dir=ltr] .optional i {
  margin-left: 0;
}

[dir=rtl] .optional i {
  margin-right: 0;
}

[dir] .has-shadow {
  box-shadow: 0px -4px 10px rgba(6, 6, 6, 0.04);
  background-color: #fff;
}

.request-item {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s;
  position: relative;
  z-index: 2;
}

[dir] .request-item {
  background: #FFFFFF;
  border: 1px solid #E5E7EC;
  border-radius: 12px;
  padding: 12px 24px;
  margin-bottom: 8px;
}

.request-item:hover {
    filter: drop-shadow(0px 3px 32px rgba(6, 6, 6, 0.1));
  }

[dir] .request-item:hover {
    border: 1px solid #4568F3;
  }

.request-item:hover .request-item__title, .request-item:hover .request-item__date-updated {
      color: #4568F3;
    }

.request-item__title {
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0.03em;
  color: #000;
  transition: all 0.3s;
}

[dir] .request-item__title {
  margin-bottom: 8px;
}

.request-item__date-updated {
  font-weight: 400;
  font-size: 12px;
  line-height: 150%;
  letter-spacing: 0.03em;
  color: #000;
  transition: all 0.3s;
}

[dir] .request-item__date-updated {
  margin-bottom: 32px;
}

.request-item__meta-item {
  font-size: 12px;
  letter-spacing: 0.03em;
  color: #747382;
}

.request-item__meta-item + .request-item__meta-item:before {
    content: '';
    display: inline-block;
    height: 16px;
    width: 1px;
    vertical-align: middle;
  }

[dir] .request-item__meta-item + .request-item__meta-item:before {
    background-color: #B8B7C3;
  }

[dir=ltr] .request-item__meta-item + .request-item__meta-item:before {
  margin-left: 8px;
  margin-right: 8px;
  }

[dir=rtl] .request-item__meta-item + .request-item__meta-item:before {
    margin-right: 8px;
    margin-left: 8px;
  }

[dir] .my-activities-header {
  margin-top: 56px;
  margin-bottom: 32px;
}

/* My requests title + filters: Gray-700 (#374151) */
.my-activities-header h1 {
  color: #374151;
}
.requests-table-toolbar .lt-custom-dropdown summary,
.requests-table-toolbar .lt-custom-dropdown summary span,
.requests-table-toolbar a:not(.request-list-button) {
  color: #374151 !important;
}

.requests-table-toolbar .search input[type="search"] {
    height: 32px;
    font-size: 14px;
    max-width: 420px;
  }

[dir] .requests-table-toolbar .search input[type="search"] {
    background: #FFFFFF;
    border: 1px solid #E4E9F2;
    border-radius: 24px;
  }

[dir=ltr] .requests-table-toolbar .search input[type="search"] {
  padding-left: 32px;
  }

[dir=rtl] .requests-table-toolbar .search input[type="search"] {
    padding-right: 32px;
  }

[dir] .requests-table-toolbar .search:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20' height='16' width='16'%3E%3Cpath fill='%23374151' clip-rule='evenodd' fill-rule='evenodd' d='M6.564 3.00113C7.36273 2.67028 8.2188 2.5 9.08333 2.5C9.94787 2.5 10.8039 2.67028 11.6027 3.00113C12.4014 3.33197 13.1271 3.81689 13.7385 4.42821C14.3498 5.03953 14.8347 5.76527 15.1655 6.564C15.4964 7.36273 15.6667 8.2188 15.6667 9.08333C15.6667 9.94787 15.4964 10.8039 15.1655 11.6027C14.9308 12.1694 14.6185 12.6994 14.2385 13.1778L17.2803 16.2197C17.5732 16.5126 17.5732 16.9874 17.2803 17.2803C16.9874 17.5732 16.5126 17.5732 16.2197 17.2803L13.1778 14.2385C12.6994 14.6185 12.1694 14.9308 11.6027 15.1655C10.8039 15.4964 9.94787 15.6667 9.08333 15.6667C8.2188 15.6667 7.36273 15.4964 6.564 15.1655C5.76527 14.8347 5.03953 14.3498 4.42821 13.7385C3.81689 13.1271 3.33197 12.4014 3.00113 11.6027C2.67028 10.8039 2.5 9.94787 2.5 9.08333C2.5 8.2188 2.67028 7.36273 3.00113 6.564C3.33197 5.76527 3.81689 5.03953 4.42821 4.42821C5.03953 3.81689 5.76527 3.33197 6.564 3.00113ZM9.08333 4C8.41578 4 7.75476 4.13148 7.13803 4.38695C6.52129 4.64241 5.9609 5.01684 5.48887 5.48887C5.01684 5.9609 4.64241 6.52129 4.38695 7.13803C4.13148 7.75476 4 8.41578 4 9.08333C4 9.75089 4.13148 10.4119 4.38695 11.0286C4.64241 11.6454 5.01684 12.2058 5.48887 12.6778C5.96091 13.1498 6.52129 13.5243 7.13803 13.7797C7.75476 14.0352 8.41578 14.1667 9.08333 14.1667C9.75089 14.1667 10.4119 14.0352 11.0286 13.7797C11.6454 13.5243 12.2058 13.1498 12.6778 12.6778C13.1498 12.2058 13.5243 11.6454 13.7797 11.0286C14.0352 10.4119 14.1667 9.75089 14.1667 9.08333C14.1667 8.41578 14.0352 7.75476 13.7797 7.13803C13.5243 6.52129 13.1498 5.96091 12.6778 5.48887C12.2058 5.01684 11.6454 4.64241 11.0286 4.38695C10.4119 4.13148 9.75089 4 9.08333 4Z'/%3E%3C/svg%3E");
  }

[dir=ltr] .requests-table-toolbar .search:before {
  left: 8px;
  }

[dir=rtl] .requests-table-toolbar .search:before {
    right: 8px;
  }

.request-list-button {
  font-family: 'Figtree', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  color: #FFFFFF;
  vertical-align: middle;
  position: relative;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

[dir] .request-list-button {
  background: #4568F3;
  border: 1px solid #4568F3;
  border-radius: 12px;
  padding: 0 16px;
  height: 32px;
  box-sizing: border-box;
  text-align: center;
}

/* white "+" icon on the blue button */
.request-list-button svg path {
  stroke: #FFFFFF;
}

[dir=ltr] .request-list-button {
  margin-left: 32px;
}

[dir=rtl] .request-list-button {
  margin-right: 32px;
}

[dir] .request-list-button:hover {
    background: #212647;
    border-color: #212647;
  }

[dir] .request-list-button:active, [dir] .request-list-button:focus {
    background-color: rgba(137, 178, 255, 0.1);
  }

.request-list-button:active:after, .request-list-button:focus:after {
      content: '';
      display: block;
      position: absolute;
      width: 48px;
      height: 34px;
      top: 0;
    }

[dir] .request-list-button:active:after, [dir] .request-list-button:focus:after {
      background-image: url("data:image/svg+xml,%3Csvg width='48' height='34' viewBox='0 0 48 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='24' cy='18' r='23.5' fill='%2389B2FF' fill-opacity='0.2'/%3E%3C/svg%3E%0A");
    }

[dir=ltr] .request-list-button:active:after, [dir=ltr] .request-list-button:focus:after {
  left: 25px;
    }

[dir=rtl] .request-list-button:active:after, [dir=rtl] .request-list-button:focus:after {
      right: 25px;
    }

.request-list-button svg {
    vertical-align: middle;
  }

[dir=ltr] .request-list-button svg {
  margin-right: 0;
  }

[dir=rtl] .request-list-button svg {
    margin-left: 0;
  }

.request-list-button.desktop {
    display: none;
  }

@media (min-width: 956px) {
    .request-list-button.desktop {
      display: inline-flex;
    }

    .request-list-button.mobile {
      display: none;
    }
  }


.requests-sort-symbol {
  font-size: 0;
  vertical-align: middle;
  display: inline-block;
}

.requests-sort-symbol:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
  }

[dir] .requests-sort-symbol:after {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.00781 8.82953L9.68597 5.15137L13.3641 8.82953' stroke='%23545360' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.68568 6.24994L9.68568 14.3749' stroke='%23545360' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='0.5' y='0.5' width='19' height='19' rx='2.5' stroke='%23E5E7EC'/%3E%3C/svg%3E%0A");
  }

[dir] .requests-sort-symbol:hover:after {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1239_20478)'%3E%3Crect width='20' height='20' rx='3' fill='%23B8B7C3' fill-opacity='0.15'/%3E%3Cpath d='M6.00781 8.82953L9.68597 5.15137L13.3641 8.82953' stroke='%23545360' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.68568 6.25018L9.68568 14.3752' stroke='%23545360' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Crect x='0.5' y='0.5' width='19' height='19' rx='2.5' stroke='%23E5E7EC'/%3E%3Cdefs%3E%3CclipPath id='clip0_1239_20478'%3E%3Crect width='20' height='20' rx='3' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  }

[dir=ltr] [href*="sort_order=asc"] .requests-sort-symbol:after {
  transform: rotate(180deg);
}

[dir=rtl] [href*="sort_order=asc"] .requests-sort-symbol:after {
  transform: rotate(-180deg);
}

[dir=ltr] .requests-table-toolbar .requests-link {
  margin-left: 12px;
  }

[dir=rtl] .requests-table-toolbar .requests-link {
    margin-right: 12px;
  }

.requests-link {
  font-size: 12px;
  line-height: 150%;
  letter-spacing: 0.03em;
  color: #000000;
  font-weight: bold;
  vertical-align: middle;
  display: inline-block;
  text-decoration: none !important;
}

[dir=ltr] .requests-link span {
  margin-right: 4px;
  }

[dir=rtl] .requests-link span {
    margin-left: 4px;
  }

.lt-custom-dropdown {
  position: relative;
  

}

[dir=ltr] .lt-custom-dropdown {
  margin-right: 12px;
  margin-left: 12px;
  

}

[dir=rtl] .lt-custom-dropdown {
  margin-left: 12px;
  margin-right: 12px;
  

}

.lt-custom-dropdown:after {
    content: '';
    display: none;
    position: absolute;
    top: 8px;
    height: 16px;
    width: 1px;
  }

[dir] .lt-custom-dropdown:after {
    background-color: rgb(184 183 195 / 52%);
  }

[dir=ltr] .lt-custom-dropdown:after {
  right: -12px;
  }

[dir=rtl] .lt-custom-dropdown:after {
    left: -12px;
  }

.lt-custom-dropdown summary {
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 150%;
    letter-spacing: 0.03em;
    color: #000000;
    list-style: none;
    vertical-align: middle;
  }

[dir] .lt-custom-dropdown summary {
    padding: 0 8px;
    border-radius: 24px;
    cursor: pointer;
  }

/* Last activity: only taller (match Request button height), content centered.
   Font/size unchanged. */
.requests-table-toolbar > a:not(.request-list-button) {
  display: inline-flex;
  align-items: center;
  height: 32px;
  box-sizing: border-box;
  position: relative;
}

/* Extra gap before "Last activity" to give the divider breathing room
   (All statuses already has a 12px right margin; this adds another 24px
   for a ~36px total gap around the divider). */
[dir=ltr] .requests-table-toolbar > a:not(.request-list-button) {
  margin-left: 24px;
}

[dir=rtl] .requests-table-toolbar > a:not(.request-list-button) {
  margin-right: 24px;
}

/* Divider before "Last activity", separating the filter dropdowns
   (My requests / All statuses) from the Last activity sort + "+ Request".
   Centered in the ~24px gap. */
.requests-table-toolbar > a:not(.request-list-button)::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background-color: rgb(184 183 195 / 52%);
}

[dir=ltr] .requests-table-toolbar > a:not(.request-list-button)::before {
  left: -18px;
}

[dir=rtl] .requests-table-toolbar > a:not(.request-list-button)::before {
  right: -18px;
}


.lt-custom-dropdown summary svg {
      vertical-align: middle;
    }

.lt-custom-dropdown summary::marker, 
    .lt-custom-dropdown summary::-webkit-details-marker {
      display: none;
    }

[dir] .lt-custom-dropdown summary:hover {
      background: rgba(184, 183, 195, 0.15);
    }

.lt-custom-dropdown[open] summary {
    color: #212647;
  }

[dir] .lt-custom-dropdown[open] summary {
    background: rgba(137, 178, 255, 0.2);
  }

.lt-custom-dropdown[open] summary svg path {
      stroke: #212647;
    }

.lt-custom-dropdown ul {
    position: absolute;
    min-width: 247px;
    overflow: hidden;
    z-index: 999999;
    top: 32px;
  }

[dir] .lt-custom-dropdown ul {
    background-color: #fff;
    box-shadow: 0px 10px 50px rgba(6, 6, 6, 0.26);
    border-radius: 12px;
  }

.lt-custom-dropdown li {
    font-size: 14px;
    letter-spacing: 0.02em;
  }

[dir] .lt-custom-dropdown li {
    padding: 16px 16px;
    border-bottom: 1px solid #E5E7EC;
    cursor: pointer;
  }

.lt-custom-dropdown li a {
      color: #000000;
    }

[dir] .lt-custom-dropdown li:hover {
      background: rgba(184, 183, 195, 0.15);
    }

.lt-custom-dropdown li.current {
      font-weight: 700;
      letter-spacing: 0.04em;
      color: #212647;
    }

[dir] .lt-custom-dropdown li.current {
      background: rgba(137, 178, 255, 0.2);
    }

.lt-custom-dropdown li.current a {
        color: #212647;
      }

[dir] .lt-custom-dropdown li.current:hover {
        background: rgba(137, 178, 255, 0.1);
      }

[dir] .lt-custom-dropdown li:last-child {
      border-bottom: none;
    }

@media (min-width: 1200px) {
    .odd .lt-col-6:nth-last-child(-n + 3) {
      width: 33.3%;
    }
  }

/* Note & callout vendor overrides removed — superseded by
   CALLOUT & NOTE REDESIGN block at end of file */

[dir] body .accordion {
  border:  1px solid #EDEFF2;
}

body .accordion__item-title {
  position: relative;
  display: block;
  width: 100%;
  font-size: undefined;
  touch-action: manipulation;
  font-size: 16px;
  color: #545360;
  transition: all 0.3s;
  font-weight: 400;
}

[dir] body .accordion__item-title {
  cursor: pointer;
  background-color: transparent;
  background-image: none;
  border: 0;
  padding: 16px 36px;
}

[dir=ltr] body .accordion__item-title {
  text-align: left;
}

[dir=rtl] body .accordion__item-title {
  text-align: right;
}

body .accordion__item-title:hover {
    color: #000;
  }

[dir] .accordion__item + .accordion__item {
  border-top:  1px solid #EDEFF2;
}

.accordion__item-content {
  position: relative;
  z-index: 2;
}

[dir] .accordion__item-content {
  padding: 0 36px 16px;
  border: none !important;
  margin-top: -12px;
}

body .accordion--default .accordion__item-title:before {
  width: 16px;
  height: 16px;
  top:20px;
}

[dir] body .accordion--default .accordion__item-title:before {
  border: none;
  transform: none;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.40039 11.1998L9.60039 7.9998L6.40039 4.7998' stroke='%23545360' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

[dir=ltr] body .accordion--default .accordion__item-title:before {
  left: 12px;
}

[dir=rtl] body .accordion--default .accordion__item-title:before {
  right: 12px;
}

.accordion--default .accordion__item-title--active {
  color: #000;
}

[dir] .accordion--default .accordion__item-title--active, [dir] .accordion--default .accordion__item-title--active + .accordion__item-content {
  background: #FBFCFF;
}

body .tabs-link {
  color: #747382 !important;
}

[dir] body .tabs-link {
  padding: 8px 16px;
  cursor: pointer !important;
}

[dir] body .tabs-link.is-active, [dir] .tab {
  border-color: #EDEFF2;
}

body .tabs-link.is-active {
  color: #000 !important;
}

html body .tabs-link:hover {
  color: #373737 !important;
}

[dir] .tab {
  padding: 16px;
}

[dir] #form-submit {
  cursor: pointer;
}

.results-list-item-link:hover, .search-result-breadcrumbs li a:hover {
    color: #212647;
  }

body .lt-toc_is-mobile .lt-toc--current:before {
  display: none;
}

body .lt-toc_is-mobile .lt-toc--current:after {
  width: 24px;
  height: 24px;
}

[dir] body .lt-toc_is-mobile .lt-toc--current:after {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.19981 9.59998L11.9998 14.4L16.7998 9.59998' stroke='%23545360' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

body .lt-toc_is-mobile .lt-toc--container.is-active .lt-toc--current:after {
  opacity: 1;
}

[dir=ltr] body .lt-toc_is-mobile .lt-toc--container.is-active .lt-toc--current:after {
  transform: translate(50%,50%) rotate(-180deg);
}

[dir=rtl] body .lt-toc_is-mobile .lt-toc--container.is-active .lt-toc--current:after {
  transform: translate(-50%,50%) rotate(180deg);
}

[dir] .lt-toc_is-mobile .lt-toc--list {
  padding: 16px 0;
}

.lt-toc_is-mobile .lt-toc--link {
  color: #373737;
}

[dir] .lt-toc_is-mobile .lt-toc--link {
  margin-bottom: 4px;
  padding: 4px 32px;
}

.article-sidebar.header-menu-sidebar {
  transition: all 0.3s;
}

[dir=ltr] .article-sidebar.header-menu-sidebar {
  left: -400px;
}

[dir=rtl] .article-sidebar.header-menu-sidebar {
  right: -400px;
}

body .sidenav-mobile.is-active {
  transition: none;
}

.requests-table-toolbar .search input[type="search"]::-webkit-search-cancel-button {
  width: 16px;
  height: 16px;
  top: 7px;
}

[dir] .requests-table-toolbar .search input[type="search"]::-webkit-search-cancel-button {
  background-size: contain;
}

[dir=ltr] .requests-table-toolbar .search input[type="search"]::-webkit-search-cancel-button {
  right: 10px;
}

[dir=rtl] .requests-table-toolbar .search input[type="search"]::-webkit-search-cancel-button {
  left: 10px;
}

body .nesty-panel {
  box-shadow: 0px 10px 50px rgba(6, 6, 6, 0.26);
	border-radius: 12px; 
  max-height: 350px;
}

body .nesty-panel li {
    border-bottom: 1px solid #E5E7EC;
    color: #000;
    font-size: 14px;
    min-height: 56px;
    padding: 16px !important;
  line-height: 1.6;
}

body .nesty-panel li:last-child {
    border-bottom: none;
}

body .nesty-panel li:hover, 
body .nesty-panel li:focus  {
  background: rgba(184, 183, 195, 0.15);
  font-weight: normal;
}

body .nesty-panel li.nesty-selected {
  background: rgba(137, 178, 255, 0.2);
  color: #212647;  
  font-weight: bold
}

body .nesty-panel li.nesty-selected:hover {
  background: rgba(137, 178, 255, 0.1);
  color: #212647;  
  font-weight: bold
}

body ul[data-hc-pills-container] {
    background-color: #fff;
    border: 1px solid #ddd;
    min-height: 58px;
    padding: 0;
    overflow: hidden;
    border-radius: 12px;
}

body ul[data-hc-pills-container] li[data-hc-pill=true] {
    height: 40px;
    line-height: 40px;
    margin: 8px;
    background-color: #f2f2f2;
    cursor: default;
    border: 1px solid #f2f2f2;
    border-radius: 12px;
}
#request_collaborators_ {
  height: 40px;
  line-height: 40px;
  margin: 8px 16px;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.request_cc_emails [data-hc-pills-container]:hover {
  border: 1px solid #747382 !important;
}

.request_cc_emails [data-hc-focus="true"],
.request_cc_emails [data-hc-focus="true"]:hover {
  border: 1px solid #4568F3 !important;
  box-shadow: 0px 0px 0px 4px rgba(69, 104, 243, 0.2);
}

.note p {
  margin-top: 0 !important;
}

.form-field input[type="checkbox"] {
   width: auto;
   float: left;
   margin-top: 4px;
}

.form-field.boolean label {
  margin-bottom: 0;
  margin-top: 0;
  margin-left: 4px;
  display: inline-block;
}

[dir] body .accordion--default .accordion__item-title--active:before {
  -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
}

[dir] body .accordion__item-content p {
  margin-top: 0;
}

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

.article {
  overflow-x: auto;
}

@media (max-width: 1023px) {
  [dir] .custom-mobile-toc--button .lt-toc_is-mobile .lt-toc--container.is-active  {
    box-shadow: 0px 20px 48px rgba(0, 0, 0, 0.15);
  }
  [dir] .custom-mobile-toc--button .lt-toc_is-mobile .lt-toc--list {
    box-shadow: none;
  }
}

/* (Article tables: consolidated into the ARTICLE TABLES block earlier in file.) */

@media (min-width: 1200px) {
  .menu-button-article {
    display: none !important;
  }
  .mobile-search {
    display: none;
  }
}

.custom-header {
  height: 46px;
  background-color: #FFFFFF;
  color: #AF2C2C;
  padding: 4px 8px;
}

/* END style fixes */
/* ============================================================
   FIREBLOCKS BRAND COLOR OVERRIDES
   Overrides vendor formatting-content.css asset colors
   Old: #1F73B7 (Zendesk Garden blue) → New: #4568F3 (Bandwidth Blue)
   ============================================================ */

/* Blockquotes */
blockquote.is-colored {
  border-left-color: #4568F3;
}

/* Tables */
.table--color-header th {
  background-color: #4568F3;
}

/* Colored numbered lists */
.list-colored li:before {
  background-color: #4568F3;
}

/* Bullet lists (Font Awesome checkmarks) */
.list-bullet li:before {
  color: #4568F3;
}

/* Text utility */
.text-success {
  background-color: #4568F3;
}

/* Accordions - default chevron */
.accordion--default .accordion__item-title:before {
  border-bottom-color: #4568F3;
  border-left-color: #4568F3;
}

/* Accordions - colored variant active state */
.accordion--colored .accordion__item-title--active {
  background-color: #4568F3;
}

/* Tabs - hover and active states */
.tabs-link:hover {
  color: #4568F3;
}

.tabs-link.is-active {
  color: #4568F3;
}

.tabs-link.is-active:hover {
  color: #4568F3;
}

/* Tabs - colored variant 2 */
.tabs--colored-2 .tabs-link:hover {
  color: #4568F3;
}

.tabs--colored-2 .tabs-link.is-active {
  background-color: #4568F3;
  border-color: #4568F3;
}

/* ============================================================
   CALLOUT & NOTE REDESIGN
   Rounded bordered containers with tinted backgrounds and
   accent left border. Icons via ::before pseudo-elements.
   Brand palette: Info=#4568F3, Warning=#FFC64E,
   Danger=#FF648B, Success=#3DDBD1, Default=#A6B9CC
   ============================================================ */

/* --- Note base reset --- */
.note {
  border: 1px solid #A6B9CC;
  border-left-width: 4px;
  border-radius: 12px;
  padding: 16px 20px;
  background: #F9FAFC;
  color: #373737;
}

/* Suppress vendor-emitted pseudo-elements on note/callout titles.
   Vendor stylesheet (Zendesk formatting-content.css) emits
   .note-title::before with width:20px + margin-right:8px, creating
   an unwanted icon slot as a flex child. !important required
   because the vendor rule's specificity equals ours and we cannot
   rely on cascade order alone. See S26 R2 changelog. */
.note-title::before,
.note-title::after,
.callout__title::before,
.callout__title::after {
  content: none !important;
}

.note-title {
  display: flex;
  align-items: center;
  gap: 0;
  font-weight: 600;
  font-family: 'Ufficio Fireblocks', sans-serif;
  color: #212647;
  margin-bottom: 4px;
}

.note-title h1, .note-title h2, .note-title h3,
.note-title h4, .note-title h5, .note-title h6,
.note-title strong {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  display: inline;
}

/* Note - default */
.note-default,
.note--default {
  border-color: #A6B9CC;
  background: #F9FAFC;
}

.note-default .note-title,
.note--default .note-title {
  color: #212647;
}

/* Note - info */
.note-info,
.note--info {
  border-color: #4568F3;
  background: #F0F4FF;
}

.note-info .note-title,
.note--info .note-title {
  color: #212647;
}

/* Note - warning */
.note-warning,
.note--warning {
  border-color: #FFC64E;
  background: #FFFAF0;
}

.note-warning .note-title,
.note--warning .note-title {
  color: #212647;
}

/* Note - danger */
.note-danger,
.note--danger {
  border-color: #FF648B;
  background: #FFF5F7;
}

.note-danger .note-title,
.note--danger .note-title {
  color: #212647;
}

/* Note - success */
.note-success,
.note--success {
  border-color: #3DDBD1;
  background: #F0FCFB;
}

.note-success .note-title,
.note--success .note-title {
  color: #212647;
}

/* --- Callout base reset --- */
.callout {
  border: 1px solid #A6B9CC;
  border-left-width: 4px;
  border-radius: 12px;
  padding: 16px 20px;
  background: #F9FAFC;
}

.callout__title {
  display: flex;
  align-items: center;
  gap: 0;
  font-weight: 600;
  font-family: 'Ufficio Fireblocks', sans-serif;
  color: #212647;
  margin-bottom: 4px;
}

.callout__title h1, .callout__title h2, .callout__title h3,
.callout__title h4, .callout__title h5, .callout__title h6,
.callout__title strong {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  display: inline;
}

/* Callout - transparent (keep as card-like) */
.callout--transparent {
  background: transparent;
  border: 1px solid #E4E9F2;
  border-radius: 12px;
  box-shadow: none;
}

/* Callout - info */
.callout--info {
  border-color: #4568F3;
  background: #F0F4FF;
}

.callout--info .callout__title {
  color: #212647;
}

/* Callout - warning */
.callout--warning {
  border-color: #FFC64E;
  background: #FFFAF0;
}

.callout--warning .callout__title {
  color: #212647;
}

/* Callout - danger */
.callout--danger {
  border-color: #FF648B;
  background: #FFF5F7;
}

.callout--danger .callout__title {
  color: #212647;
}

/* Callout - success */
.callout--success {
  border-color: #3DDBD1;
  background: #F0FCFB;
}

.callout--success .callout__title {
  color: #212647;
}

/* Callout - primary (Bandwidth Blue) */
.callout--primary {
  border-color: #4568F3;
  background: #F0F4FF;
}

.callout--primary .callout__title {
  color: #212647;
}

/* ============================================================
   SUBSECTION HIERARCHY STYLES
   Category page: subsections render as indented sub-headers
   Section page: subsections distinguished with folder icon
   ============================================================ */

/* --- Category page subsections --- */
.section__subsections {
  margin-top: 8px;
}

.subsection {
  margin-bottom: 32px;
}

.subsection__header {
  font-size: 15px;
  font-weight: 600;
  font-family: 'Ufficio Fireblocks', sans-serif;
  color: #545360;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
  padding-left: 12px;
}
.subsection .section__articles {
  margin-left: 12px;
}

/* --- Section page subsection list --- */
.subsection-list-header {
  font-size: 11px;
  font-weight: 600;
  font-family: 'Ufficio Fireblocks', sans-serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #A6B9CC;
  margin-bottom: 8px;
}

.section-list--subsections .section-list-item--subsection a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-list--subsections .subsection-folder-icon {
  color: #4568F3;
  flex-shrink: 0;
}

.section-list--subsections .subsection-chevron {
  margin-left: auto;
  color: #A6B9CC;
  flex-shrink: 0;
}

/* ============================================================
   TOC H2 NESTING
   Lotus TOC adds heading tag name as class: lt-toc--item-h2
   ============================================================ */

.lt-toc--item-h2 .lt-toc--link {
  font-size: 13px;
  color: #747382;
}

[dir=ltr] .lt-toc--item-h2 .lt-toc--link {
  padding-left: 16px;
}

[dir=rtl] .lt-toc--item-h2 .lt-toc--link {
  padding-right: 16px;
}

/* ============================================================
   LANDING PAGE CARD REDESIGN
   Compact centered cards: icon pill + title, no section list
   ============================================================ */

/* Card grid - CSS grid for reliable 3-column layout */
.blocks-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
}

[dir] .blocks-list {
  column-gap: 24px;
  row-gap: 0;
  margin: 0;
  padding: 0 0 40px;
}

@media (max-width: 1199px) {
  .blocks-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1023px) {
  .blocks-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 707px) {
  .blocks-list {
    grid-template-columns: 1fr;
  }
}

/* Item base - minimal, left-aligned, divider under each (Figma 4560-775) */
.blocks-item {
  min-height: auto;
  text-align: left;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  display: flex;
  max-width: 100%;
}

[dir] .blocks-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0;
  padding: 24px 0;
  margin: 0;
}

[dir] .blocks-item:hover,
[dir] .blocks-item:focus,
[dir] .blocks-item:active {
  background: transparent;
  transform: none;
  box-shadow: none;
}

/* Item link - reset from absolute to normal flow, left-aligned */
.blocks-item-link {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-decoration: none;
  width: 100%;
  height: 100%;
}

[dir] .blocks-item-link {
  padding: 0;
}

/* Icon - smaller, left-aligned, blue */
.blocks-item-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

[dir] .blocks-item-icon {
  background: transparent;
  border-radius: 12px;
  margin: 0 0 12px;
}

.blocks-item-icon img,
.blocks-item-icon svg {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

/* Title - left-aligned, Ufficio */
.blocks-item-title {
  font-family: 'Ufficio Fireblocks', sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 130%;
  letter-spacing: -0.01em;
  color: #212647;
  display: block;
  text-align: left;
  transition: color 0.2s ease;
}

[dir] .blocks-item-title {
  margin: 0;
}

.blocks-item-link:hover .blocks-item-title,
.blocks-item-link:focus .blocks-item-title {
  color: #4568F3;
}

/* Hide section lists and "more" links (no longer in template, but safety net) */
.blocks-item-section,
.homepage-more {
  display: none;
}

/* Hero - full-bleed band holding the title, search bar and suggestion pills
   (design node 4560-775). Spans the full browser width with 32px of internal
   padding — .hero carries width:100%, so side margins here would add to that
   width and create horizontal scroll. The background image is dynamic — it
   comes from the theme setting, so it is never hardcoded here. Periwinkle is
   the base colour behind it, matching the design's solid fill. */
[dir] .hero {
  margin: 0 0 48px;
  padding: 32px;
  border-radius: 0;
  overflow: hidden;
  background-color: #678BFF;
  background-image: url(/hc/theming_assets/01KYMGWB4D54PK0ZTT59JMSJJ0);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 767px) {
  [dir] .hero {
    margin: 0 0 32px;
    padding: 32px 20px;
  }
}

[dir] .knowledge-base {
  margin-top: 0;
  padding-top: 8px;
}

/* ============================================================
   HOMEPAGE HERO — search bar + suggestion pills (Figma 4560-775)
   ============================================================ */

.hero .hero-inner {
  position: static;
  max-width: 1040px;
  text-align: center;
}

[dir] .hero .hero-inner {
  margin: 0 auto;
  transform: none;
}

/* Search bar — white pill with blue circular search button on the right */
.hero .search-full {
  position: relative;
  max-width: 720px;
}

[dir] .hero .search-full {
  margin: 0 auto;
}

.hero .search-full:before {
  display: none !important;
}

.hero .search-full input[type="search"] {
  width: 100%;
  height: 56px;
  color: #212647;
  font-size: 16px;
}

[dir] .hero .search-full input[type="search"] {
  background: #ffffff;
  border: none;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}

[dir=ltr] .hero .search-full input[type="search"] {
  padding: 0 64px 0 24px;
}

[dir=rtl] .hero .search-full input[type="search"] {
  padding: 0 24px 0 64px;
}

.hero .search-full input[type="search"]::placeholder {
  color: #6b7280;
  opacity: 1;
}

.hero .search-full:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  pointer-events: none;
}

[dir] .hero .search-full:after {
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: #4568F3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20' height='20' width='20'%3E%3Cpath fill='%23ffffff' clip-rule='evenodd' fill-rule='evenodd' d='M6.564 3.00113C7.36273 2.67028 8.2188 2.5 9.08333 2.5C9.94787 2.5 10.8039 2.67028 11.6027 3.00113C12.4014 3.33197 13.1271 3.81689 13.7385 4.42821C14.3498 5.03953 14.8347 5.76527 15.1655 6.564C15.4964 7.36273 15.6667 8.2188 15.6667 9.08333C15.6667 9.94787 15.4964 10.8039 15.1655 11.6027C14.9308 12.1694 14.6185 12.6994 14.2385 13.1778L17.2803 16.2197C17.5732 16.5126 17.5732 16.9874 17.2803 17.2803C16.9874 17.5732 16.5126 17.5732 16.2197 17.2803L13.1778 14.2385C12.6994 14.6185 12.1694 14.9308 11.6027 15.1655C10.8039 15.4964 9.94787 15.6667 9.08333 15.6667C8.2188 15.6667 7.36273 15.4964 6.564 15.1655C5.76527 14.8347 5.03953 14.3498 4.42821 13.7385C3.81689 13.1271 3.33197 12.4014 3.00113 11.6027C2.67028 10.8039 2.5 9.94787 2.5 9.08333C2.5 8.2188 2.67028 7.36273 3.00113 6.564C3.33197 5.76527 3.81689 5.03953 4.42821 4.42821C5.03953 3.81689 5.76527 3.33197 6.564 3.00113ZM9.08333 4C8.41578 4 7.75476 4.13148 7.13803 4.38695C6.52129 4.64241 5.9609 5.01684 5.48887 5.48887C5.01684 5.9609 4.64241 6.52129 4.38695 7.13803C4.13148 7.75476 4 8.41578 4 9.08333C4 9.75089 4.13148 10.4119 4.38695 11.0286C4.64241 11.6454 5.01684 12.2058 5.48887 12.6778C5.96091 13.1498 6.52129 13.5243 7.13803 13.7797C7.75476 14.0352 8.41578 14.1667 9.08333 14.1667C9.75089 14.1667 10.4119 14.0352 11.0286 13.7797C11.6454 13.5243 12.2058 13.1498 12.6778 12.6778C13.1498 12.2058 13.5243 11.6454 13.7797 11.0286C14.0352 10.4119 14.1667 9.75089 14.1667 9.08333C14.1667 8.41578 14.0352 7.75476 13.7797 7.13803C13.5243 6.52129 13.1498 5.96091 12.6778 5.48887C12.2058 5.01684 11.6454 4.64241 11.0286 4.38695C10.4119 4.13148 9.75089 4 9.08333 4Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

[dir=ltr] .hero .search-full:after {
  right: 8px;
}

[dir=rtl] .hero .search-full:after {
  left: 8px;
}

/* Suggestion pills — translucent chips of promoted articles */
.hero-suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 1040px;
}

[dir] .hero-suggestions {
  margin: 20px auto 0;
}

.hero-suggestion-pill {
  display: inline-flex;
  align-items: center;
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  line-height: 1.3;
  color: #ffffff;
  white-space: nowrap;
  max-width: 100%;
  text-decoration: none;
}

@media (max-width: 767px) {
  .hero-suggestion-pill {
    white-space: normal;
    text-align: center;
  }
}

[dir] .hero-suggestion-pill {
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.30);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.hero-suggestion-pill:hover,
.hero-suggestion-pill:focus {
  color: #ffffff;
}

[dir] .hero-suggestion-pill:hover,
[dir] .hero-suggestion-pill:focus {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.50);
}

/* ============================================================
   SIDENAV REDESIGN
   Compact typography, smaller icons, tighter spacing
   ============================================================ */

/* Category name - smaller, Ufficio */
.sidenav-container .sidenav__category-name {
  font-size: 15px !important;
  font-family: 'Ufficio Fireblocks', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

[dir] .sidenav-container .sidenav__category-name {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Category icon - hidden in sidebar sidenav */
.article-sidebar .sidenav .sidenav__category-name img,
.article-sidebar .sidenav__category-icon {
  display: none !important;
}

/* Reclaim the icon space on category names — 10px (level 1) */
.article-sidebar .sidenav .sidenav__category-name {
  padding-left: 8px !important;
}

[dir=rtl] .article-sidebar .sidenav .sidenav__category-name {
  padding-right: 8px !important;
  padding-left: 0 !important;
}

/* Section name - compact */
.sidenav-container .sidenav__section-name {
  font-size: 14px;
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
}

/* Section chevron - smaller */
.sidenav-container .sidenav__section-name:before {
  width: 18px;
  height: 18px;
  background-size: contain;
}

/* Article name - compact */
.sidenav-container .sidenav__article-name {
  font-size: 13px;
}

[dir] .sidenav-container .sidenav__article-name {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* Active article - brand aligned */
.sidenav__article.is-active > a,
.sidenav__article.is-active > span {
  font-size: 13px;
  color: #212647;
}

[dir] .sidenav__article.is-active > a,
[dir] .sidenav__article.is-active > span {
  background: rgba(69, 104, 243, 0.12);
}

/* Subsection styling — subsections render as .sidenav__section elements
   inside the parent's .sidenav__articles-list */
.sidenav__articles-list .sidenav__section-name {
  font-size: 13px;
  font-weight: 400;
  color: #747382;
}

/* Subsection chevron - smaller, properly scaled */
.sidenav__articles-list .sidenav__section-name:before {
  width: 16px;
  height: 16px;
  background-size: contain;
}

/* Category hover chevron - realign after padding reduction */
.sidenav__category-name .sidenav__category-icon-carrot {
  top: 50%;
  transform: translateY(-50%);
}

/* Rounded highlights on hover and active states */
[dir] .sidenav-container .sidenav__category-name:hover,
[dir] .sidenav-container .sidenav__section-name:hover,
[dir] .sidenav-container .sidenav__article-name:hover {
  border-radius: 4px;
}

[dir] .sidenav__article.is-active > a,
[dir] .sidenav__article.is-active > span {
  border-radius: 4px;
}

[dir] .sidenav__category.is-active > .category-wrapper,
[dir] .sidenav__category.is-active > .sidenav__category-name {
  border-radius: 4px !important;
}

[dir] .sidenav .category-wrapper:hover {
  border-radius: 4px !important;
}

/* Current/selected category highlight - round all corners */
[dir=ltr] .category-page .sidenav__category.current .category-wrapper,
[dir=ltr] .sidenav__category.current .category-wrapper {
  border-radius: 4px !important;
}

[dir=rtl] .category-page .sidenav__category.current .category-wrapper,
[dir=rtl] .sidenav__category.current .category-wrapper {
  border-radius: 4px !important;
}

/* Open accordion: 16px breathing room so the next category isn't glued to
   the last sub-item of the expanded category */
.article-sidebar .sidenav__category.is-active > .sidenav__sections-list {
  margin-bottom: 16px !important;
}

/* Sidenav: section names aligned with category names (no indentation) */
[dir="ltr"] .article-sidebar .sidenav .sidenav__section-name {
  padding-left: 8px !important;
}

[dir="rtl"] .article-sidebar .sidenav .sidenav__section-name {
  padding-right: 8px !important;
}

/* Sections are accordions: articles-list is collapsed by default and
   revealed when the section is expanded (is-active / is-visible). */
.article-sidebar .sidenav__articles-list {
  display: none !important;
}

.article-sidebar .sidenav__section.is-active > .sidenav__articles-list,
.article-sidebar .sidenav__articles-list.is-visible {
  display: block !important;
}

/* Section names in sidebar - no toggle cursor */
.article-sidebar .sidenav__section-name {
  cursor: pointer;
}

/* Subsection names — level 3 indent */
[dir="ltr"] .article-sidebar .sidenav__articles-list .sidenav__section-name {
  padding-left: 28px !important;
}

[dir="rtl"] .article-sidebar .sidenav__articles-list .sidenav__section-name {
  padding-right: 28px !important;
}

/* Active category hover chevron - combine rotation with centering */
[dir=ltr] .sidenav__category.is-active .sidenav__category-icon-carrot {
  transform: translateY(-50%) rotate(180deg);
}

[dir=rtl] .sidenav__category.is-active .sidenav__category-icon-carrot {
  transform: translateY(-50%) rotate(-180deg);
}

/* ============================================================
   FOOTER REDESIGN
   Compact two-row footer: logo + links + social, then copyright
   ============================================================ */

.page-footer {
  font-family: 'Figtree', sans-serif;
  color: #A6B9CC;
}

[dir] .page-footer {
  background: #212647;
  padding: 0;
  margin-top: 48px;
}

.page-footer .container,
.page-footer .flex-container,
.page-footer .menu,
.page-footer .column,
.page-footer .links,
.page-footer .social,
.page-footer .copyright,
.page-footer .footer-badge,
.page-footer .sub-menu {
  display: none;
}

.footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 24px;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-logo img {
  height: 20px;
  width: auto;
  opacity: 0.9;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-links a {
  font-size: 13px;
  color: #A6B9CC;
  text-decoration: none;
  transition: color 0.15s;
}

.footer-links a:hover {
  color: #4568F3;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-social a {
  color: #A6B9CC;
  text-decoration: none;
  transition: color 0.15s;
  display: flex;
}

.footer-social a:hover {
  color: #FFFFFF;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1160px;
  margin: 0 auto;
  padding: 12px 24px;
  border-top: 1px solid rgba(166, 185, 204, 0.15);
  font-size: 12px;
  color: #747382;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom a {
  color: #A6B9CC;
  text-decoration: none;
  transition: color 0.15s;
}

.footer-bottom a:hover {
  color: #4568F3;
}

@media (max-width: 768px) {
  .footer-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Footer z-index - ensure floating buttons stay above */
.page-footer,
footer.page-footer {
  position: relative;
  z-index: 0;
}

/* Footer logo - invert to white for dark background */
.footer-logo img {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* ============================================================
   ARTICLE WIDTH - wider content area, less wasted space
   ============================================================ */

@media (min-width: 1024px) {
  .article {
    flex: 1 1 auto;
    max-width: 820px;
  }
  [dir=ltr] .article {
    padding-right: 48px;
  }
  [dir=rtl] .article {
    padding-left: 48px;
  }
}

@media (min-width: 1200px) {
  [dir=ltr] .article-inner {
    padding-left: 40px;
    padding-right: 40px;
  }
  [dir=rtl] .article-inner {
    padding-right: 40px;
    padding-left: 40px;
  }
}

/* ============================================================
   IMAGE BORDER REMOVAL
   Remove gray borders from inline images and lightbox popups
   ============================================================ */

/* Inline article images - override borders and backgrounds */
.image-with-border {
  border: none;
  padding: 0;
}

[dir] .image-container {
  background-color: transparent;
  border: none;
}

[dir] .image-with-video-icon {
  background-color: transparent;
  border: none;
}

/* AutoLightbox popup - inline styles require !important */
.light-box {
  border: none !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Footer full-width - break out of article layout */
.page-footer {
  width: 100%;
  clear: both;
}

.footer-main,
.footer-bottom {
  max-width: 1160px;
  margin: 0 auto;
}

/* Footer sidebar offset - stop sidebar from extending into footer */
@media (min-width: 1200px) {
  [dir] .article-sidebar {
    margin-bottom: 0;
    margin-top: 0;
  }
}

[dir] footer.page-footer {
  margin-top: 0;
}

/* TOC - nudge right and fix scroll cutoff */
/* NUCLEAR scrollbar hiding — covers every possible scrollbar source */
.toc-container,
.toc-container__inner,
.toc-container .lt-toc,
.toc-container .lt-toc--container,
.toc-container .lt-toc--list {
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE/Edge */
}

.toc-container::-webkit-scrollbar,
.toc-container__inner::-webkit-scrollbar,
.toc-container .lt-toc::-webkit-scrollbar,
.toc-container .lt-toc--container::-webkit-scrollbar,
.toc-container .lt-toc--list::-webkit-scrollbar {
  display: none !important; /* Chrome/Safari */
  width: 0 !important;
  height: 0 !important;
}

[dir=ltr] .toc-container {
  padding-left: 16px;
}

[dir=rtl] .toc-container {
  padding-right: 16px;
}

/* ============================================================
   ARTICLE LAYOUT SWAP - votes in sidebar, related at bottom
   ============================================================ */

/* Votes in sidebar - compact styling below TOC */
.article-votes--sidebar {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #E4E9F2;
  text-align: center;
}

[dir] .article-votes--sidebar {
  border-bottom: none;
  padding: 24px 0 0;
}

.article-votes--sidebar .article-votes-question {
  font-size: 13px;
  display: block;
  margin-bottom: 8px;
}

/* Related articles at bottom - full width within article */
.related-articles--bottom {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid #E4E9F2;
}

.related-articles--bottom .related-articles-inner {
  max-width: 100%;
}

.related-articles--bottom .related-articles__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.related-articles--bottom .related-articles__item a {
  margin-top: 0;
}

@media (max-width: 768px) {
  .related-articles--bottom .related-articles__list {
    grid-template-columns: 1fr;
  }
}

/* Votes sidebar - remove bottom border, smaller buttons */
.article-votes--sidebar .article-votes-controls .button {
  font-size: 12px;
  padding: 4px 16px;
  min-width: auto;
}

/* Related articles bottom - line below title */
.related-articles--bottom .related-articles__title {
  padding-bottom: 12px;
  border-bottom: 1px solid #E4E9F2;
  margin-bottom: 16px;
}

/* ============================================================
   POPULAR ARTICLES - top-voted articles on landing page
   ============================================================ */

/* Popular articles — white bordered card that floats over the hero,
   per Figma design nodes 4523-31165 (card) + 4509-15306 (home context).
   Card: 1px border, 16px radius, 24px padding, soft shadow. No internal
   dividers. Pulled up with a negative margin so it overlaps the navy hero. */
.popular-articles {
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  text-align: left;
}

/* Float the card up into the hero's navy zone */
.popular-articles-wrapper {
  position: relative;
  z-index: 3;
  margin-top: -140px;
  margin-bottom: 16px;
}

.popular-articles__title {
  font-family: 'Ufficio Fireblocks', sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 130%;
  letter-spacing: -0.01em;
  color: #212647;
  margin: 0;
}

.popular-articles__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0;
  row-gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.popular-articles__item a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #2F3441;
  text-decoration: none;
  padding: 8px 0;
  transition: color 0.15s ease;
}

/* leading arrow marker (16px, visible) */
.popular-articles__item a::before {
  content: '';
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h8.5M8.5 4.5L12 8l-3.5 3.5' stroke='%234568F3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.15s ease;
}

.popular-articles__item a:hover {
  color: #4568F3;
}

.popular-articles__item a:hover::before {
  transform: translateX(3px);
}

@media (max-width: 707px) {
  .popular-articles__list {
    grid-template-columns: 1fr;
  }
  .popular-articles-wrapper {
    margin-top: -80px;
  }
}

/* ============================================================
   LAYOUT SHIFT REDUCTION (Phase 4)
   Reserve space for async-rendered elements
   ============================================================ */

/* Popular articles wrapper — reserve space until fetch resolves */
.popular-articles-wrapper {
  min-height: 256px;
  transition: min-height 0.3s ease;
}

.popular-articles-wrapper.is-collapsed {
  min-height: 256px; /* Keep space while fetching */
}

@media (max-width: 707px) {
  .popular-articles-wrapper {
    min-height: 384px; /* Taller on mobile: single-column layout */
  }
}

/* Fade-in transition for popular articles (Alpine x-transition) */
.popular-articles--fade-in {
  transition: opacity 0.3s ease;
}
.popular-articles--fade-start {
  opacity: 0;
}
.popular-articles--fade-end {
  opacity: 1;
}

/* Sidebar sidenav — skeleton height while content builds */
[data-sidenav]:empty {
  min-height: 400px;
}

/* Alpine FOUC prevention — hide x-cloak elements until Alpine initializes */
[x-cloak] {
  display: none !important;
}

/* Category page — reserve min-height instead of hiding (overrides global x-cloak) */
.cat-sections[x-cloak] {
  display: block !important;
  visibility: hidden;
  min-height: 300px;
}

/* Smooth reveal for Alpine-rendered containers */
.container--new-request,
.cat-sections,
.related-articles--bottom,
.status-dropdown {
  animation: alpine-reveal 0.2s ease-out;
}

@keyframes alpine-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Inline SVG spinner — replaces Font Awesome fa-spin */
.inline-spinner svg {
  animation: svg-spin 1s linear infinite;
  color: #747382;
}

@keyframes svg-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Article images — prevent reflow on lazy images without dimensions */
.article-body img:not([width]):not([height]) {
  aspect-ratio: auto;
  max-width: 100%;
  height: auto;
}

/* ============================================================
   HEADER FIXES - CTA buttons, dropdown, Sign in overrides
   Override .nav-wrapper a { display: none; border: 0 }
   Uses !important to beat vendor [dir] selectors
   ============================================================ */

/* CTA buttons container */
.nav-wrapper .header-cta {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

/* All CTA buttons - base override */
.nav-wrapper .header-cta__btn,
.nav-wrapper a.header-cta__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  box-sizing: border-box !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  /* One step up from 500 — owner request, Jul 2026. Covers all three
     header CTAs (outline / primary / sign-in) since they share this rule. */
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none !important;
  transition: all 0.15s;
  margin: 0 !important;
}

[dir=ltr] .nav-wrapper a.header-cta__btn {
  padding: 4px 16px !important;
}

[dir=rtl] .nav-wrapper a.header-cta__btn {
  padding: 4px 16px !important;
}

[dir=ltr] .nav-wrapper a.header-cta__btn--signin {
  padding: 4px 16px !important;
}

[dir=rtl] .nav-wrapper a.header-cta__btn--signin {
  padding: 4px 16px !important;
}

/* Primary - solid blue */
.nav-wrapper a.header-cta__btn--primary {
  background: #4568F3 !important;
  color: #FFFFFF !important;
  border: 1px solid #4568F3 !important;
}

.nav-wrapper a.header-cta__btn--primary:hover,
.nav-wrapper a.header-cta__btn--primary:focus {
  background: #212647 !important;
  border-color: #212647 !important;
  color: #FFFFFF !important;
}

/* Outline - grey border + navy text (matches category cards + Sign in) */
.nav-wrapper a.header-cta__btn--outline {
  background: transparent !important;
  color: #212647 !important;
  border: 1px solid #E4E9F2 !important;
}

/* Hover - border turns navy, no fill */
.nav-wrapper a.header-cta__btn--outline:hover,
.nav-wrapper a.header-cta__btn--outline:focus {
  background: transparent !important;
  color: #212647 !important;
  border-color: #212647 !important;
}

/* Sign in - borderless text button on white header */
.nav-wrapper a.header-cta__btn--signin {
  display: inline-flex !important;
  background: transparent !important;
  color: #212647 !important;
  border: none !important;
}

.nav-wrapper a.header-cta__btn--signin:hover,
.nav-wrapper a.header-cta__btn--signin:focus {
  background: rgba(33, 38, 71, 0.06) !important;
  color: #212647 !important;
}

/* Dropdown menu links - must be visible inside flyout */
.dropdown-menu a,
.nav-wrapper .dropdown-menu a {
  display: block !important;
  color: #373737 !important;
  padding: 4px 20px !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 14px;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus,
.nav-wrapper .dropdown-menu a:hover,
.nav-wrapper .dropdown-menu a:focus {
  color: #212647 !important;
  background: #F9FAFC !important;
}

@media (max-width: 1199px) {
  .nav-wrapper .header-cta,
  .nav-wrapper a.header-cta__btn--signin {
    display: none !important;
  }
}

/* Search container - user-nav width constrained via inline style in header.hbs */

/* CTA buttons - as direct nav-wrapper children */
.nav-wrapper .header-cta {
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Sign in - as direct nav-wrapper child */
.nav-wrapper > a.header-cta__btn--signin {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */

.article-breadcrumbs {
  margin-bottom: 12px;
}

.article-breadcrumbs ol,
.article-breadcrumbs ul {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.article-breadcrumbs li {
  font-size: 13px;
  color: #747382;
  display: flex;
  align-items: center;
  gap: 4px;
}

.article-breadcrumbs li:not(:last-child)::after {
  display: none;
}

.article-breadcrumbs a {
  color: #4568F3;
  text-decoration: none;
  font-size: 13px;
}

.article-breadcrumbs a:hover {
  color: #4568F3;
  text-decoration: underline;
}

/* Current page (last crumb): plain grey secondary text, not a link.
   Owner request, Jul 2026 — was bold navy #212647. `pointer-events: none`
   was already here and is what makes it unclickable; Zendesk's
   {{breadcrumbs}} helper always emits it as an <a>, so this can't be fixed
   in the template. It also suppresses :hover, so the underline rule above
   can't fire — `cursor: default` is belt-and-braces. */
.article-breadcrumbs li:last-child a,
.article-breadcrumbs li:last-child {
  color: #747382;
  font-weight: 400;
  pointer-events: none;
  cursor: default;
}

/* ============================================================
   ARTICLE META BAR - updated date + labels
   ============================================================ */

.article-meta-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.article-updated {
  font-size: 12px;
  color: #747382;
  font-family: 'Figtree', sans-serif;
}

.article-labels {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.article-label-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 0 8px;
  border-radius: 12px;
  background: #F0F4FF;
  color: #3A5FCC;
  text-decoration: none;
  font-family: 'Figtree', sans-serif;
  transition: background 0.15s;
}

.article-label-pill:hover {
  background: #E0E8FF;
  color: #3A5FCC;
}

/* ============================================================
   CODE BLOCK COPY BUTTON
   ============================================================ */

.code-block-wrapper {
  position: relative;
}

.code-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: 'Figtree', sans-serif;
  font-size: 11px;
  color: #A6B9CC;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 0 8px;
  cursor: pointer;
  transition: all 0.15s;
  z-index: 2;
}

.code-copy-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}

.code-copy-btn.is-copied {
  background: rgba(61, 219, 209, 0.15);
  border-color: rgba(61, 219, 209, 0.3);
  color: #3DDBD1;
}

/* ============================================================
   READING TIME ESTIMATE
   ============================================================ */

.article-reading-time {
  display: block;
  font-family: 'Figtree', sans-serif;
  font-size: 12px;
  /* Darkened from the very light #A6B9CC — owner request, Jul 2026. #747382
     is the palette's next step down and is what the breadcrumb directly
     above already uses, so the two lines of article meta now match. Only
     this rule changed; #A6B9CC stays the shared "default" token elsewhere. */
  color: #747382;
  margin-top: 4px;
}

/* ============================================================
   BACK TO TOP BUTTON
   ============================================================ */

.back-to-top {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #E4E9F2;
  color: #747382;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
  z-index: 99;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background: #F0F4FF;
  border-color: #4568F3;
  color: #4568F3;
}

[dir=rtl] .back-to-top {
  right: auto;
  left: 50%;
}

/* ============================================================
   PRINT STYLESHEET
   ============================================================ */

@media print {
  .header,
  .header--search,
  .article-sidebar,
  .header-menu-sidebar,
  .toc-container,
  .article-votes--sidebar,
  .article-breadcrumbs,
  .article-subscribe,
  .back-to-top,
  .page-footer,
  .mobile-search,
  .nav-wrapper,
  .menu-button-article,
  .sidenav-btn,
  .custom-mobile-toc,
  .custom-mobile-toc--button {
    display: none !important;
  }

  body, .article-inner, .article-container, .article {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    flex: none !important;
  }

  .article-body {
    font-size: 12pt;
    line-height: 1.6;
    color: #000;
  }

  .article-title {
    font-size: 20pt;
    color: #000;
    margin-bottom: 8pt;
  }

  .article-body h1 { font-size: 16pt; }
  .article-body h2 { font-size: 14pt; }
  .article-body h3 { font-size: 12pt; }

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

  .article-body a::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
    color: #666;
  }

  .article-body img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  .article-body table {
    page-break-inside: avoid;
  }

  .note, .callout {
    border: 1px solid #ccc;
    background: #f9f9f9 !important;
    page-break-inside: avoid;
  }

  .related-articles--bottom {
    page-break-before: always;
  }
}

/* ============================================================
   SEARCH RESULTS REDESIGN
   ============================================================ */

.search-results-subheading {
  font-family: 'Ufficio Fireblocks', sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: #212647;
  letter-spacing: -0.01em;
}

.search-result-list-item {
  border-bottom: 1px solid #E4E9F2;
  transition: background 0.15s;
}

[dir] .search-result-list-item {
  padding: 20px 0;
}

.search-result-title {
  font-family: 'Ufficio Fireblocks', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.search-result-title a {
  color: #212647;
  text-decoration: none;
}

.search-result-title a:hover {
  color: #4568F3;
}

.search-results-description {
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  color: #747382;
  line-height: 1.6;
}

[dir] .search-results-description {
  margin-top: 4px;
  margin-bottom: 8px;
}

.search-results-description em {
  color: #212647;
  font-weight: 700;
  font-style: normal;
}

.search-result-breadcrumbs li,
.search-result-breadcrumbs li a {
  font-size: 12px;
  color: #A6B9CC;
}

.search-result-breadcrumbs li a:hover {
  color: #4568F3;
}

/* ============================================================
   SEARCH AUTOCOMPLETE FLYOUT (Session 13)
   Styles for Zendesk's <zd-autocomplete> instant-search web
   component. Previously lived as an inline <style> block in
   document_head.hbs — consolidated here.
   Design: Option C (accent-bar-on-hover / Gmail style).
   ============================================================ */

/* Panel container — flat, brand-compliant (no drop shadow).
   box-shadow: none is explicit — vendor CSS applies a default shadow
   that the old inline rule used to mask; without an explicit override
   the vendor shadow leaks back through. */
zd-autocomplete {
  background: #FFFFFF;
  border: 1px solid #E4E9F2;
  border-radius: 12px;
  padding: 0;
  margin-top: 4px;
  overflow: hidden;
  box-shadow: none;
}

/* Each result row.
   - border: 0 zeros out all sides (vendor CSS applies defaults on
     some states), then border-left re-establishes just the 3px left.
   - Transparent baseline reserves space for the hover accent bar so
     text doesn't shift horizontally.
   - outline: none suppresses the browser's default focus ring, which
     would otherwise render as a thin dark line next to our accent bar
     when the row receives keyboard focus (tabindex="0" on the element).
   - box-shadow: none covers any vendor shadow on rows (Session 13
     round 3 diagnosis: rows themselves may have vendor shadow,
     not just the outer panel). */
zd-autocomplete zd-autocomplete-multibrand {
  padding: 12px 16px;
  border: 0;
  border-left: 3px solid transparent;
  outline: none;
  box-shadow: none;
  transition: background 0.2s, border-color 0.2s;
}

/* Hover & keyboard-selected row: soft Bandwidth Blue tint + accent bar.
   [aria-selected="true"] covers ARIA combobox keyboard navigation
   (confirmed in DevTools — Zendesk uses the standard ARIA pattern).
   
   !important on border-left to beat any vendor selected-state rule
   that may apply a conflicting border and draw a "double line" effect.
   
   box-shadow: none !important kills Zendesk's vendor inset shadow
   `var(--zd-color-blue-700, #1f73b7) 3px 0 inset` on selected rows —
   it draws a 3px Zendesk-blue line over our 3px Bandwidth Blue border,
   producing a darker composite line. Session 13 round 3 diagnosis. */
zd-autocomplete zd-autocomplete-multibrand:hover,
zd-autocomplete zd-autocomplete-multibrand[aria-selected="true"] {
  background: #EDF1FF;
  border-left: 3px solid #4568F3 !important;
  box-shadow: none !important;
}

/* When keyboard selection is active on ANY row in the flyout, suppress
   the :hover visual on other rows. Without this, moving the mouse over
   row A while arrow-keying to row B highlights both rows simultaneously.
   :has() has universal browser support (Chrome 105+, Safari 15.4+,
   Firefox 121+) — safe for a help-center audience. */
zd-autocomplete:has(zd-autocomplete-multibrand[aria-selected="true"]) zd-autocomplete-multibrand:hover:not([aria-selected="true"]) {
  background: transparent;
  border-left-color: transparent;
}

/* Belt-and-suspenders outline reset.
   The outer <zd-autocomplete-multibrand> had outline: none set above,
   but the inner <zd-autocomplete-title-multibrand> ALSO carries
   tabindex="0" per DOM inspection. If keyboard focus lands on the
   inner element, the browser's default focus ring draws a thin dark
   line next to our 3px Bandwidth Blue accent bar — the "blue-black
   double line" reported during QA. This covers every descendant.
   !important is justified: vendor CSS may set outline on :focus /
   :focus-visible, and we're providing our own focus indicator via
   the accent bar on the aria-selected row. */
zd-autocomplete *,
zd-autocomplete *:focus,
zd-autocomplete *:focus-visible {
  outline: 0 !important;
}

/* Exception: preserve a focus ring on our injected "See more" link.
   It's an independently interactive element (a real <a>), and keyboard
   users who tab to it need a visible focus indicator. */
zd-autocomplete .zd-autocomplete-see-more:focus-visible {
  outline: 2px solid #4568F3 !important;
  outline-offset: 2px;
}

/* Result title — Figtree 700 Navy */
zd-autocomplete zd-autocomplete-title-multibrand {
  font-family: 'Figtree', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  color: #212647;
  margin-bottom: 2px;
}

/* Matched query term inside the title — Bandwidth Blue */
zd-autocomplete zd-autocomplete-title-multibrand em {
  font-style: normal;
  font-weight: 700;
  color: #4568F3;
}

/* Breadcrumb path under each result title ("Category › Section").
   Default hidden — the script.js flyout enhancer replaces Zendesk's
   native "undefined" text with real breadcrumb text (built from ApiData's
   articles/sections/categories) and unhides via inline style.display.
   Starting hidden prevents a flash of "undefined" before JS populates.
   If ApiData isn't available on a page, breadcrumbs stay hidden. */
zd-autocomplete zd-autocomplete-breadcrumbs-multibrand {
  display: none;
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: #747382;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "See more results →" footer — injected by script.js at runtime.
   Sticky so it stays visible when the result list is long enough
   to exceed the flyout's max-height and scroll. */
zd-autocomplete .zd-autocomplete-footer-custom {
  padding: 12px 16px;
  background: #FFFFFF;
  border-top: 1px solid #F4F5F7;
  text-align: right;
  position: sticky;
  bottom: 0;
}

zd-autocomplete .zd-autocomplete-see-more {
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #4568F3;
  text-decoration: none;
  transition: color 0.2s;
}

zd-autocomplete .zd-autocomplete-see-more:hover {
  color: #4568F3;
}

/* ============================================================
   REQUEST FORM REDESIGN
   ============================================================ */

.btn--primary,
#form-submit {
  font-family: 'Figtree', sans-serif !important;
  font-weight: 700 !important;
  background: #4568F3 !important;
  border-color: #4568F3 !important;
  border-radius: 12px !important;
  color: #FFFFFF !important;
  transition: all 0.15s !important;
}

.btn--primary:hover,
#form-submit:hover {
  background: #212647 !important;
  border-color: #212647 !important;
}

.form-field label {
  font-family: 'Figtree', sans-serif;
  color: #212647;
  font-weight: 700;
  font-size: 14px;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea,
.form-field .nesty-input {
  font-family: 'Figtree', sans-serif;
  border-radius: 12px;
  border-color: #E4E9F2;
  font-size: 14px;
  transition: border-color 0.15s;
}

.form-field input[type="text"]:focus,
.form-field input[type="email"]:focus,
.form-field textarea:focus,
.form-field .nesty-input:focus {
  border-color: #4568F3;
  outline: none;
  box-shadow: 0 0 0 3px rgba(69, 104, 243, 0.15);
}

/* ============================================================
   HEADING ANCHOR LINKS
   ============================================================ */

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4 {
  position: relative;
}

.heading-anchor {
  display: inline-block;
  opacity: 0;
  margin-left: 8px;
  color: #A6B9CC;
  text-decoration: none;
  transition: opacity 0.15s, color 0.15s;
  vertical-align: middle;
}

.heading-anchor:hover {
  color: #4568F3;
}

.article-body h1:hover .heading-anchor,
.article-body h2:hover .heading-anchor,
.article-body h3:hover .heading-anchor,
.article-body h4:hover .heading-anchor {
  opacity: 1;
}

.heading-anchor.is-copied {
  color: #A6B9CC;
  opacity: 1;
}

.heading-anchor.is-copied::after {
  content: 'Copied!';
  font-family: 'Figtree', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #A6B9CC;
  margin-left: 4px;
  vertical-align: middle;
}

/* Remove old tooltip DOM styles */
.heading-anchor-tooltip {
  display: none;
}

/* ============================================================
   ARTICLE FEEDBACK - comment on No vote
   ============================================================ */

.vote-feedback {
  display: none;
  margin-top: 16px;
  text-align: left;
}

.vote-feedback.is-visible {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.vote-feedback__label {
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  color: #747382;
  display: block;
  margin-bottom: 4px;
  align-self: flex-start;
}

.vote-feedback__textarea {
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  width: 100%;
  min-height: 64px;
  padding: 8px 12px;
  border: 1px solid #E4E9F2;
  border-radius: 12px;
  resize: vertical;
  color: #373737;
  transition: border-color 0.15s;
  box-sizing: border-box;
  align-self: stretch;
}

.vote-feedback__textarea:focus {
  border-color: #4568F3;
  outline: none;
  box-shadow: 0 0 0 3px rgba(69, 104, 243, 0.15);
}

.vote-feedback__submit {
  font-family: 'Figtree', sans-serif;
  font-size: 12px;
  font-weight: 700;
  margin-top: 12px !important;
  padding: 4px 16px;
  background: #4568F3;
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}

.vote-feedback__submit:hover {
  background: #212647;
}

.vote-feedback__thanks {
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  color: #212647;
  display: none;
  text-align: center;
  margin-top: 8px;
  width: 100%;
}

.vote-feedback__thanks.is-visible {
  display: block;
}

/* Heading anchor - Copied indicator uses ::after pseudo-element */

/* Fix white line below header */
.header.header--search {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* ============================================================
   KEYBOARD SHORTCUT HINT - "/" in search bar
   ============================================================ */

.search-shortcut-hint {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Figtree', sans-serif;
  font-size: 12px;
  color: #A6B9CC;
  border: 1px solid #E4E9F2;
  border-radius: 4px;
  padding: 0 4px;
  pointer-events: none;
  line-height: 1.4;
}

.search-shortcut-hint.is-hidden {
  display: none;
}

/* ============================================================
   STICKY HEADER
   ============================================================ */

.header[data-header] {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: #FFFFFF !important;
  box-shadow: 0 1px 8px rgba(33, 38, 71, 0.08) !important;
}

/* Hide custom-header white bar injected by vendor JS */
.custom-header {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Consistent top padding for content and sidebar */

/* Remove any vendor padding on container children */
[dir] .article-container > *,
[dir] .category-container > * {
  padding-top: 0 !important;
}

/* All outer containers: no margin/padding shifts */
.container-article,
.category-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Sidebar: consistent top padding */
[dir] .article-sidebar {
  padding-top: 8px !important;
}

/* Content areas: consistent top padding */
[dir] .article-inner {
  padding-top: 32px !important;
}

[dir] .section-content {
  padding-top: 32px !important;
}

.category-content {
  padding-top: 32px !important;
}

/* Cap content width on section/category pages to prevent stretching */
.category-content,
.section-content {
  max-width: 920px;
}
[dir] .page-footer,
[dir] footer.page-footer {
  background: #212647 !important;
}

/* Remove gaps between sticky header and page content */
.container-divider {
  display: none !important;
}

/* Remove vendor white border-top that was compensating for old fixed header */
[dir] body > main {
  border-top: none !important;
}

[dir] .is-user > main {
  border-top: none !important;
}

/* Eliminate all remaining gaps between header and content */
body > main,
[dir] body > main,
[dir] .is-user > main {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* Hide header-menu-sidebar on desktop (it's the mobile slide-out menu).
   Breakpoint must match the hamburger that opens it: the button is hidden
   at min-width 1200px (~9834) and the vendor sidenav's mobileBreakpoint is
   1199 (templates/header.hbs). This rule used to say 1024px, which left
   1024-1199px with a visible hamburger and a display:none panel — the
   button appeared dead and `body.menu-is-open` silently froze page
   scrolling. Duplicates the correct rule at ~7202; kept in sync, not
   removed, so the height/overflow resets stay with it. */
@media (min-width: 1200px) {
  .header-menu-sidebar {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

/* ============================================================
   CATEGORY PAGE - HubSpot-style clean layout
   ============================================================ */

.cat-page-title {
  font-family: 'Ufficio Fireblocks', sans-serif;
  font-weight: 600;
  font-size: 28px;
  color: #212647;
  margin: 0 0 32px;
}

.cat-section {
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid #E4E9F2;
}

.cat-section:last-child {
  border-bottom: none;
}

.cat-section__name {
  font-family: 'Ufficio Fireblocks', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #212647;
  margin: 0 0 16px;
}

.cat-subsection {
  margin-bottom: 24px;
}

.cat-subsection__name {
  font-family: 'Figtree', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #747382;
  margin: 0 0 8px;
}

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

.cat-article-list li {
  padding: 4px 0;
}

.cat-article-list a {
  font-family: 'Figtree', sans-serif;
  font-size: 15px;
  color: #212647;
  text-decoration: none;
  transition: color 0.15s;
}

.cat-article-list a:hover {
  color: #4568F3;
}

.cat-see-more {
  display: inline-block;
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #4568F3 !important;
  background: transparent !important;
  padding: 0;
  border-radius: 0;
  text-decoration: none !important;
  margin-top: 12px;
  transition: color 0.15s;
}

.cat-see-more:hover {
  background: transparent !important;
  color: #4568F3 !important;
  text-decoration: underline !important;
}

/* Nuclear gap fix - pull content up to meet header */
.container-article,
.category-container.article-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* NUCLEAR sidenav font override - every possible selector */
.sidenav-container .sidenav__category-name,
.sidenav .sidenav__category-name,
.article-sidebar .sidenav__category-name,
[data-sidenav] .sidenav__category-name,
.sidenav__category-name,
.sidenav-container .sidenav > ul > li > a,
.sidenav-container .sidenav > ul > li > span,
.sidenav > ul > li > .category-wrapper > a,
.sidenav > ul > li > .category-wrapper > span,
.category-wrapper .sidenav__category-name {
  font-size: 15px !important;
  font-family: 'Ufficio Fireblocks', sans-serif !important;
  font-weight: 600 !important;
}

/* Fix sticky sidebar/TOC positioning for sticky header */
@media (min-width: 1200px) {
  [data-sidenav] {
    top: 70px !important;
    height: calc(100vh - 70px) !important;
  }
}

.toc-container {
  top: 70px !important;
  max-height: calc(100vh - 80px) !important;
}

/* Fix sidenav category-title span (same class as our old page title) */
.sidenav .category-title,
.sidenav__category-name .category-title,
.category-wrapper .category-title {
  font-size: 15px !important;
  font-family: 'Ufficio Fireblocks', sans-serif !important;
  font-weight: 600 !important;
}

/* ============================================================
   SECTION PAGE - inside tripane layout
   ============================================================ */

.section-description {
  font-family: 'Figtree', sans-serif;
  font-size: 15px;
  color: #747382;
  line-height: 1.6;
  margin: -20px 0 24px;
}

.section-empty-msg {
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  color: #A6B9CC;
  font-style: italic;
}

/* Section name links in subsection list */
.cat-section__name a {
  color: #212647;
  text-decoration: none;
}

.cat-section__name a:hover {
  color: #4568F3;
}

/* Promoted star icon alignment */
.cat-article-list .icon-star {
  vertical-align: -2px;
  margin-right: 4px;
}

.cat-article-list .icon-lock {
  vertical-align: -2px;
  margin-left: 4px;
  color: #A6B9CC;
}

/* ============================================================
   Submit a Request — Compact List Redesign
   ============================================================ */

/* Override the full-page fixed overlay so step 1 flows under the sticky header */
.container--new-request {
  position: relative;
  z-index: auto;
  top: auto;
}

[dir=ltr] .container--new-request { left: auto; }
[dir=rtl] .container--new-request { right: auto; }

/* List container */
.new-request__list-container {
  max-width: 580px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}

.new-request__list-header {
  font-family: 'Ufficio Fireblocks', sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: #212647;
  text-align: center;
  margin: 0 0 4px;
}

.new-request__list-subheader {
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  color: #747382;
  text-align: center;
  margin: 0 0 28px;
}

/* List stack */
.new-request__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Individual row */
.new-request__list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #FFFFFF;
  border: 1px solid #E4E9F2;
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.new-request__list-item:hover {
  border-color: #4568F3;
  box-shadow: 0 0 0 3px rgba(69, 104, 243, 0.1);
}

.new-request__list-item-text {
  flex: 1;
}

.new-request__list-item-title {
  display: block;
  font-family: 'Figtree', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #212647;
}

.new-request__list-item-desc {
  display: block;
  font-family: 'Figtree', sans-serif;
  font-size: 12px;
  color: #747382;
  margin-top: 0;
  line-height: 1.4;
}

.new-request__list-item-chevron {
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.new-request__list-item:hover .new-request__list-item-chevron {
  transform: translateX(2px);
}

.new-request__list-item:hover .new-request__list-item-chevron path {
  stroke: #4568F3;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .new-request__list-container {
    padding: 32px 16px 48px;
  }

  .new-request__list-header {
    font-size: 20px;
  }
}

/* ============================================================
   Submit a Request — Step 2: Single-Column Form Layout
   ============================================================ */

/* New form container */
.new-request__form-container {
  max-width: 620px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* Back link at top */
.new-request__form-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  color: #747382;
  text-decoration: none;
  margin-bottom: 24px;
  transition: color 0.15s ease;
}

.new-request__form-back:hover {
  color: #212647;
}

/* Header: label + title */
.new-request__form-header {
  margin-bottom: 32px;
}

.new-request__form-header-label {
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  color: #747382;
  margin: 0 0 4px;
}

.new-request__form-header-title {
  font-family: 'Ufficio Fireblocks', sans-serif;
  font-weight: 600;
  font-size: 22px;
  color: #212647;
  margin: 0;
}

/* Form body — style the Zendesk-rendered form */
.new-request__form-body {
  margin-bottom: 32px;
}

.new-request__form-body .form-field {
  margin-bottom: 20px;
}

.new-request__form-body label {
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #212647;
  margin-bottom: 4px;
  display: block;
}

.new-request__form-body .optional {
  font-weight: 400;
  color: #747382;
}

.new-request__form-body input[type="text"],
.new-request__form-body input[type="email"],
.new-request__form-body textarea,
.new-request__form-body .nesty-input {
  width: 100%;
  box-sizing: border-box;
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  color: #212647;
  background: #FFFFFF;
  border: 1px solid #E4E9F2;
  border-radius: 12px;
  padding: 8px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.new-request__form-body input[type="text"]:focus,
.new-request__form-body input[type="email"]:focus,
.new-request__form-body textarea:focus,
.new-request__form-body .nesty-input:focus {
  border-color: #4568F3;
  box-shadow: 0 0 0 3px rgba(69, 104, 243, 0.15);
  outline: none;
}

/* Nesty dropdowns: combined rule above sets 8px vertical padding, but this
   element also inherits `height: 56px; line-height: 56px` from the
   `.form-field .nesty-input` rule — conflict pushes the placeholder above
   center. Restore horizontal-only padding so line-height centering works. */
.new-request__form-body .nesty-input {
  padding: 0 12px;
  height: 56px;
  line-height: 56px;
}

.new-request__form-body textarea {
  min-height: 160px;
  resize: vertical;
  line-height: 1.5;
}

/* Dropzone styling */
.new-request__form-body .upload-dropzone {
  border: 1px dashed #E4E9F2;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  justify-content: center;
  background: #FFFFFF;
  transition: border-color 0.15s ease;
}

.new-request__form-body .upload-dropzone:hover,
.new-request__form-body .upload-dropzone.is-dragging-over {
  border-color: #4568F3;
}

.new-request__form-body .upload-dropzone span a {
  color: #4568F3;
  font-weight: 700;
}

/* CC field */
.new-request__form-body .request_cc_emails input[type="text"] {
  border: 1px solid #E4E9F2;
  border-radius: 12px;
}

.new-request__form-body .request_cc_emails input[type="text"]:focus {
  border-color: #4568F3;
  box-shadow: 0 0 0 3px rgba(69, 104, 243, 0.15);
}

/* Footer: back + submit inline */
.new-request__form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid #E4E9F2;
}

.new-request__form-footer-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  color: #747382;
  text-decoration: none;
  transition: color 0.15s ease;
}

.new-request__form-footer-back:hover {
  color: #212647;
}

.new-request__form-footer .btn--primary {
  width: auto;
  padding: 8px 32px;
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  font-weight: 700;
  border-radius: 12px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .new-request__form-container {
    padding: 24px 16px 48px;
  }

  .new-request__form-header-title {
    font-size: 20px;
  }
}

/* My Requests link - reduce spacing */
[dir=ltr] .nav-wrapper > a[href*="requests"] {
  margin-left: 20px;
  padding-right: 12px;
}

[dir=rtl] .nav-wrapper > a[href*="requests"] {
  margin-right: 20px;
  padding-left: 12px;
}

/* ============================================================
   SIDENAV CHEVRON SPACING + FLIP
   Section chevrons use ::before pseudo-elements.
   Category chevrons use inline SVGs injected by lotus-sidenav.js.
   Both need spacing from the text and rotation on expand/collapse.
   ============================================================ */

/* --- Category inline SVG chevrons --- */
[dir=ltr] .sidenav__category-name > svg,
[dir=ltr] .category-wrapper > .sidenav__category-name svg:not(.sidenav__category-icon img) {
  margin-left: 8px;
}

[dir=rtl] .sidenav__category-name > svg,
[dir=rtl] .category-wrapper > .sidenav__category-name svg:not(.sidenav__category-icon img) {
  margin-right: 8px;
}

/* Default (collapsed): points right */
.sidenav__category-name > svg,
.category-wrapper .sidenav__category-name > svg {
  transform: rotate(-90deg);
  transition: transform 0.2s ease;
  vertical-align: middle;
  position: relative;
  top: -1px;
  flex-shrink: 0;
}

/* Expanded: points down */
.sidenav__category.is-active > .category-wrapper .sidenav__category-name > svg,
.sidenav__category.is-active > .sidenav__category-name > svg {
  transform: rotate(0deg) !important;
}

/* --- Category carrot div (old JS fallback) --- */
/* If the carrot div is present, also handle its flip with translateY */
[dir=ltr] .sidenav__category.is-active .sidenav__category-icon-carrot {
  transform: translateY(-50%) rotate(180deg) !important;
}
[dir=rtl] .sidenav__category.is-active .sidenav__category-icon-carrot {
  transform: translateY(-50%) rotate(-180deg) !important;
}

/* ============================================================
   LAPTOP TIER (1200–1439px)
   Tighter columns and padding so the three-panel layout fits
   comfortably on average laptop screens (1280×800, 1366×768,
   MacBook Air default, etc.) without falling back to mobile.
   ============================================================ */

@media (min-width: 1200px) and (max-width: 1439px) {

  /* Let the layout fill the viewport instead of capping at 1280px */
  .article-container {
    max-width: 100%;
  }

  /* Narrower sidebar for laptops */
  .article-sidebar {
    flex: 0 0 220px !important;
  }

  /* Narrower TOC rail for laptops */
  .toc-container {
    flex: 0 0 220px !important;
  }

  /* Tighter article inner padding */
  [dir=ltr] .article-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  [dir=rtl] .article-inner {
    padding-right: 24px !important;
    padding-left: 24px !important;
  }

  /* Category/section page inner padding */
  [dir=ltr] .category-page .article-inner {
    padding-left: 48px;
    padding-right: 48px;
  }
  [dir=rtl] .category-page .article-inner {
    padding-right: 48px;
    padding-left: 48px;
  }

  /* Sidebar negative margin compensation - keep it flush */
  [dir] .article-sidebar {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }

  /* Sticky sidebar/TOC positioning for sticky header */
  [data-sidenav] {
    top: 70px !important;
    height: calc(100vh - 70px) !important;
  }

  /* Slightly smaller nav link spacing */
  .nav-wrapper a {
    font-size: 13px;
  }

  /* Tighten header padding */
  [dir=ltr] .header__inner {
    padding-left: 20px;
    padding-right: 20px;
  }
  [dir=rtl] .header__inner {
    padding-right: 20px;
    padding-left: 20px;
  }
}

/* ============================================================
   VOTE THANKS MESSAGE
   ============================================================ */

.article-votes-thanks {
  font-family: 'Figtree', sans-serif;
  font-size: 12px;
  color: #4568F3;
  margin-top: 8px;
}

/* ============================================================
   ERROR PAGE — STICKY FOOTER + CENTERED CONTENT (Session 20)
   Scoped via body:has() to error pages only. Establishes a
   three-level flex chain (body, main, #main-content.error-page)
   because Zendesk Guide injects a wrapping main element between
   body and #main-content that the template source does not show.
   Body becomes a flex column with min-height: 100vh; main flex-
   grows within body and is itself a flex column so the wrapper
   has vertical space to distribute; #main-content.error-page
   takes flex: 1 with vertical and horizontal centering and
   centered text. Adds modest breathing room between the
   message elements.
   ============================================================ */

body:has(#main-content.error-page) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body:has(#main-content.error-page) main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

body:has(#main-content.error-page) #main-content.error-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

body:has(#main-content.error-page) #main-content.error-page h1 {
  margin-bottom: 16px;
}

body:has(#main-content.error-page) #main-content.error-page h2 {
  margin-bottom: 32px;
}

body:has(#main-content.error-page) #main-content.error-page p {
  margin-bottom: 32px;
}

/* ============================================================
   ARTICLE PAGE - LEFT SIDENAV
   Scoped via the #article-container id, which is unique to
   article_page.hbs (category and section pages use the same
   .article-container class without the id). The id selector
   itself is the firewall — no body:has() wrapper needed.
   The child combinator targets only the article-page sidebar's
   direct relationship with #article-container, deliberately not
   matching the header partial's .article-sidebar.header-menu-
   sidebar drawer (rendered globally outside any #article-
   container, used as the mobile hamburger menu). The existing
   mobile and tablet hide rules at the early article-container
   layout block and at the late header-padding media block
   cover viewports below 1200px, where the sidebar becomes the
   mobile hamburger drawer. On desktop (>=1200px) it shows as a
   300px left column (see the min-width:1200 layout block).
   NOTE: the Session-23 all-viewport `display:none` was removed
   to restore the desktop left navigation.
   The article-inner flex:1 rule lets the reading column fill the
   space between the sidebar and the ToC; the article
   max-width: 920px rule from the ARTICLE WIDTH banner continues
   to constrain reading column width within article-inner.
   ============================================================ */

#article-container > .article-inner {
  flex: 1;
}

/* ============================================================
   NUCLEAR VOTE BUTTON OVERRIDE
   MUST remain last in the file — source-order wins for equal
   specificity with Zendesk's generic .button chains.

   Strategy: Zendesk persists past votes by adding button-primary
   on page load. We neutralize that with CSS so button-primary
   alone looks unselected. Only the js-voted class (added by our
   click handler) triggers the Bandwidth Blue selected state.
   ============================================================ */

/* Resting state — ALL vote buttons look unselected (including button-primary) */
[dir] .article-votes-controls .article-vote,
[dir] .article-votes-controls .article-vote.button-primary {
  background-color: transparent !important;
  color: #212647 !important;
  border: 1px solid #EDEFF2 !important;
}

/* Hover — any vote button */
[dir] .article-votes-controls .article-vote:hover {
  background-color: #4568F3 !important;
  border-color: #4568F3 !important;
  color: #FFFFFF !important;
}

/* Selected — only when user clicks in this session (js-voted added by script) */
[dir] .article-votes-controls .article-vote.js-voted {
  background-color: #4568F3 !important;
  border-color: #4568F3 !important;
  color: #FFFFFF !important;
}

/* Selected + hover / focus / active */
[dir] .article-votes-controls .article-vote.js-voted:hover,
[dir] .article-votes-controls .article-vote.js-voted:focus,
[dir] .article-votes-controls .article-vote.js-voted:active {
  background-color: #4568F3 !important;
  border-color: #4568F3 !important;
  color: #FFFFFF !important;
}

/* ============================================================
   ARTICLE-PAGE SIDENAV REFINEMENTS
   Placed last so source order wins over the many scattered
   vendor/legacy sidenav rules earlier in the file.
   (1) section chevron on the LEFT, leading the label; no chevron
       at all on the category (1st level)
   (2) articles indented clear of their vertical track line
   (3) selected article = blue, matching its own track segment
   (4) 12px vertical rhythm across category/section/article
   (5) left rail with a divider on its right edge
   (6) on article pages the article is the selected item — the
       parent category is not shown in blue
   NOTE: `transform` is blocked on these pseudo-elements in this
   theme, so the chevron state uses a background-image swap
   (▸ collapsed / ▾ expanded) instead of rotation.
   ============================================================ */

/* (5) Left rail: divider on the right edge */
[dir=ltr] .article-sidebar {
  border-right: 1px solid #E4E9F2 !important;
  padding-right: 0 !important;
}
[dir=rtl] .article-sidebar {
  border-left: 1px solid #E4E9F2 !important;
  padding-left: 0 !important;
}

/* Tabs: 8px right padding (text -> highlight box edge) */
[dir=ltr] .article-sidebar .sidenav__category-name,
[dir=ltr] .article-sidebar .sidenav__section-name,
[dir=ltr] .article-sidebar .sidenav__article-name {
  padding-right: 8px !important;
}
[dir=rtl] .article-sidebar .sidenav__category-name,
[dir=rtl] .article-sidebar .sidenav__section-name,
[dir=rtl] .article-sidebar .sidenav__article-name {
  padding-left: 8px !important;
}

/* (4) 12px vertical rhythm, identical at every level.
   Each row is a 20px line box with 6px of padding above and below, so
   the gap between one row's text and the next is 6 + 6 = 12px — owner
   request, Jul 2026. `min-height: 0` is what makes that exact: the
   earlier 36px floor left 15px gaps, because it padded the row out
   beyond its own content. Rows that wrap keep the same 20px per line.
   Anything that insets against the row box (the active/hover track
   segments, top/bottom 3px) is measured from the 32px row height. */
.article-sidebar .sidenav__category-name,
.article-sidebar .sidenav__section-name,
.article-sidebar .sidenav__article-name {
  display: flex !important;
  align-items: center !important;
  min-height: 0 !important;
  line-height: 20px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  box-sizing: border-box !important;
}
/* The category's label is a nested <span> that carries its own 1.2
   line-height, so without this the category rows come out 28.8px tall
   against everyone else's 32px and the rhythm limps by 3px. */
.article-sidebar .sidenav__category-name .category-title {
  line-height: 20px !important;
}

/* (1a) No chevron on the category (1st level) — owner request, Jul 2026.
   This one is real markup, not a pseudo-element: the Zendesk template emits
   <svg class="sidenav__category-chevron"> inside the category link (some
   categories carry two of them), so it has to be hidden rather than
   restyled. Expansion is still shown by the section list appearing. */
.article-sidebar .sidenav__category-name .sidenav__category-chevron {
  display: none !important;
}

/* (1b) Section accordion chevron LEADING the label on the left
   (background-swap), for every level below the category — owner request,
   Jul 2026, replacing the trailing chevron. `order: 0` puts the :before
   back in front of the text: in a flex row the text becomes an anonymous
   item pinned at order 0, and the :before is generated as the first child,
   so at equal order it sorts first. Kept as :before (rather than :after)
   so the collapsed/expanded background-swap rules below keep working.
   4px between the chevron and the label — owner spec.
   Stroke is the light grey #B8B7C3 (was the darker #747382) so the
   chevrons sit back from the labels; both the ▸ and ▾ artwork below must
   carry the same colour, they are two separate images. */
.article-sidebar .sidenav__section-name:after {
  display: none !important;
}
.article-sidebar .sidenav__section-name:before {
  content: '' !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  order: 0 !important;
  width: 20px !important;
  height: 20px !important;
  /* neutralize the vendor's rotate(-90deg) — direction is set by the
     background-image swap below, not by rotation */
  transform: none !important;
  /* collapsed: right chevron ▸ */
  background: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L1 9' stroke='%23B8B7C3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center !important;
}
[dir=ltr] .article-sidebar .sidenav__section-name:before { margin: 0 4px 0 0 !important; }
[dir=rtl] .article-sidebar .sidenav__section-name:before { margin: 0 0 0 4px !important; }

/* ---- INDENTATION LADDER (owner spec + "New 2.0" mock, Jul 2026) ----
   Every row's box starts at the rail's content edge — the nested <ul>s add
   no padding of their own, at any depth — so the whole hierarchy is drawn
   with padding-left on the rows. All figures below are from that content
   edge (itself 8px in from the rail, set by the LEFT RAIL: 8px INDENT
   block at the end of this file).

   One rule generates the whole ladder: each level starts 8px right of its
   parent's LABEL, and a row that has a chevron puts its label 24px past
   its own start (20px chevron + 4px gap).

     LEVEL 1  category label            8px   (no chevron)
     LEVEL 2  section chevron          16px   = category label + 8
              section label            40px   = 16 + 20 + 4
     LEVEL 3  article label            48px   = section label + 8
       -- or, where level 3 is a SUBSECTION rather than an article --
              subsection chevron       48px   (same slot as an article)
              subsection label         72px   = 48 + 20 + 4
     LEVEL 4  article label            80px   = subsection label + 8

   The single grey track line is NOT part of this ladder — it sits at 8px
   for the whole category, in the category label's own column, and does not
   step in with the levels. See the TRACK LINE block below.

   The 16px below has to be spelled out with this exact selector shape:
   `[dir="ltr"] .article-sidebar .sidenav .sidenav__section-name`
   (~line 10619) sets 8px, and its extra `.sidenav` outranks a plainer
   selector no matter how late it appears. */
[dir=ltr] .article-sidebar .sidenav .sidenav__section-name { padding-left: 16px !important; }
[dir=rtl] .article-sidebar .sidenav .sidenav__section-name { padding-right: 16px !important; }

/* (3) Chevron pinned to the first line, not vertically centred, so a
   section or subsection whose label wraps keeps its chevron beside the
   first line instead of floating to the middle of the block — owner
   request, Jul 2026. On single-line rows this changes nothing: the
   chevron is 20px and so is the line box. */
.article-sidebar .sidenav__section-name {
  align-items: flex-start !important;
}
.article-sidebar .sidenav__section.is-active > .sidenav__section-name:before {
  /* expanded: down chevron ▾ — same light grey as the collapsed ▸ above */
  background: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23B8B7C3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center !important;
}

/* (2) Level-3 articles: 8px right of the section label above them (40 + 8)
   — see the ladder above. */
[dir=ltr] .article-sidebar .sidenav__article-name { padding-left: 48px !important; }
[dir=rtl] .article-sidebar .sidenav__article-name { padding-right: 48px !important; }

/* (3) Selected article: weight 500, no background fill, and text in
   the same Fireblocks blue as its own left indicator bar (#4568F3,
   set on the :before further down this block) — owner request,
   Jul 2026, replacing the earlier navy #212647 so the label and its
   bar read as one highlight. Keep these two values in sync. */
.article-sidebar .sidenav__article.is-active > a,
.article-sidebar .sidenav__article.is-active > span {
  font-weight: 500 !important;
  color: #4568F3 !important;
  background: transparent !important;
  letter-spacing: 0 !important;
}

/* (1)+(2) Categories are never primary/navy — they stay dark grey whether
   on their own category page (.current) or expanded (.is-active). */
.article-sidebar .sidenav__category.current .category-title,
.article-sidebar .sidenav__category.is-active .category-title,
#article-container .article-sidebar .sidenav__category.current .category-title,
#article-container .article-sidebar .sidenav__category.is-active .category-title,
.category-page .article-sidebar .sidenav__category.current .category-title {
  color: #404040 !important;
}

/* Smaller category label */
.article-sidebar .sidenav__category-name,
.article-sidebar .sidenav__category-name .category-title {
  font-size: 14px !important;
}

/* ============================================================
   TRACK LINE — ONE PER CATEGORY, AT THE FAR LEFT
   Owner request + "New 2.0" mock, Jul 2026: a single light
   vertical line per expanded category, NOT one per list at each
   depth. It hangs on the category's sections list, so it appears
   only while that category is open and spans everything inside it
   — every section, subsection and article, however deep.
   Colours match the "ON THIS PAGE" ToC: #E5E7EC line, #4568F3
   for the selected segment.

   It sits at 8px — the category label's own column, to the LEFT of
   the entire indentation ladder, which is why it does not step in
   with the levels. The selected (blue) and hovered (grey) segments
   further down are separate elements drawn at the same 8px, and
   they are positioned against their own row, whose box also starts
   at the content edge at every depth. So all three numbers are 8
   and must stay equal, or the segments drift off the line.

   Note the previous per-list lines are gone: nothing draws on
   .sidenav__articles-list any more. If a line ever reappears at a
   deeper indent, look for a rule targeting that class.
   ============================================================ */
.article-sidebar .sidenav__sections-list {
  position: relative !important;
}
[dir=ltr] .article-sidebar .sidenav__sections-list:before {
  content: '' !important;
  position: absolute !important;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #E5E7EC !important;
}
[dir=rtl] .article-sidebar .sidenav__sections-list:before {
  content: '' !important;
  position: absolute !important;
  right: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #E5E7EC !important;
}
.article-sidebar .sidenav__article-name {
  position: relative !important;
}
[dir=ltr] .article-sidebar .sidenav__article.is-active > .sidenav__article-name:before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 8px;
  top: 3px;
  bottom: 3px;
  width: 2px;
  border-radius: 2px;
  background: #4568F3 !important;
}
[dir=rtl] .article-sidebar .sidenav__article.is-active > .sidenav__article-name:before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  right: 8px;
  top: 3px;
  bottom: 3px;
  width: 2px;
  border-radius: 2px;
  background: #4568F3 !important;
}

/* Articles rest in the same primary dark grey as the section and category
   labels above them (#404040) — owner request, Jul 2026, replacing the
   lighter #747382 so only the selected article reads as highlighted.
   Note this makes the hover rule below a no-op — it also sets #404040 — so
   the grey track segment beside the hovered row is now the only hover
   feedback on these rows.
   Letter-spacing zeroed here (the shared .sidenav-container rule sets
   0.02em) and on the selected article below (which set 0.04em) — both, so
   the row doesn't reflow when it becomes selected. */
.article-sidebar .sidenav__article-name {
  color: #404040 !important;
  letter-spacing: 0 !important;
}

/* Hover: no background fill; text darkens to dark grey */
.article-sidebar .sidenav__category-name:hover,
.article-sidebar .category-wrapper:hover,
.article-sidebar .sidenav__section-name:hover,
.article-sidebar .sidenav__article-name:hover {
  background: transparent !important;
  border-radius: 0 !important;
}
.article-sidebar .sidenav__section-name:hover,
.article-sidebar .sidenav__article-name:hover {
  color: #404040 !important;
}

/* Category hover: the label turns brand blue — owner request, Jul 2026,
   replacing the previous no-op (it used to re-state the resting #404040).
   Hovering anywhere on the row does it, since the :hover is on the row and
   the label just inherits the trigger.
   The #article-container and .category-page copies are not decoration:
   the rules that pin category labels to #404040 (~line 13005) include
   ID-prefixed selectors, and a single ID outranks any number of classes,
   so a plain selector would silently lose on exactly those pages. */
.article-sidebar .sidenav__category-name:hover .category-title,
#article-container .article-sidebar .sidenav__category-name:hover .category-title,
.category-page .article-sidebar .sidenav__category-name:hover .category-title {
  color: #4568F3 !important;
}

/* Hover: the track segment beside the hovered article turns a light-medium
   grey — lighter than the text so the line stays subtle. The active article
   keeps its blue segment via higher specificity. */
[dir=ltr] .article-sidebar .sidenav__article-name:hover:before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 8px;
  top: 3px;
  bottom: 3px;
  width: 2px;
  border-radius: 2px;
  background: #B8B7C3 !important;
}
[dir=rtl] .article-sidebar .sidenav__article-name:hover:before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  right: 8px;
  top: 3px;
  bottom: 3px;
  width: 2px;
  border-radius: 2px;
  background: #B8B7C3 !important;
}

/* ============================================================
   HOMEPAGE HERO — 240px BAND, REDRAWN TO SPEC
   Design decision (owner, Jul 2026), after the suggestion pills
   were removed from templates/home_page.hbs. Desktop vertical
   rhythm, totalling 240px:
       72px  space above the title
       56px  "How can we help?"  (40px type x 140% line-height)
       24px  gap
       48px  search bar
       40px  space below
   Search bar also narrowed to 560px wide.

   Notes for whoever edits this next:
   - The [dir] prefix is required on the padding and margin rules:
     the rules these override ([dir] .hero ~10322, [dir]
     .hero-inner-title ~5920) are prefixed, so a plain selector
     would silently lose to them.
   - Side padding stays 32px. .hero carries width:100%, so lateral
     margins here would overflow the viewport.
   - The three media queries at the end re-assert pre-existing
     small-screen values. They are NOT new design decisions: the
     rules they duplicate sit earlier in this file, and since media
     queries add no specificity, the desktop rules above would
     otherwise leak down and change tablet/mobile.
   ============================================================ */
[dir] .hero {
  padding: 72px 32px 40px;
}

.hero-inner-title {
  font-size: 40px;
}

[dir] .hero-inner-title {
  margin-bottom: 24px;
}

.hero .search-full {
  max-width: 560px;
}

.hero .search-full input[type="search"] {
  height: 48px;
}

/* Keep the text clear of the search button AND of the clear (X)
   button, which floats over the text area at 58..78px from the
   right edge — see the CLEAR (X) BUTTON block below. */
[dir=ltr] .hero .search-full input[type="search"] {
  padding: 0 86px 0 24px;
}

[dir=rtl] .hero .search-full input[type="search"] {
  padding: 0 24px 0 86px;
}

/* Button scaled 40px -> 36px so its inset stays even in a 48px bar */
.hero .search-full:after {
  width: 36px;
  height: 36px;
}

[dir=ltr] .hero .search-full:after {
  right: 6px;
}

[dir=rtl] .hero .search-full:after {
  left: 6px;
}

/* ---- Below: unchanged pre-existing behaviour, re-asserted ---- */
@media (max-width: 1199px) {
  [dir] .hero-inner-title {
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  [dir] .hero {
    padding: 32px 20px;
  }
}

@media (max-width: 708px) {
  .hero-inner-title {
    font-size: 24px;
  }
}

/* ============================================================
   HOMEPAGE CATEGORY GRID — BACK TO CARDS
   Design decision (owner, Jul 2026): revert the flat divider rows
   introduced by "LANDING PAGE CARD REDESIGN" (~line 10184) to
   filled cards, per the reference design.

   Card = light grey fill, 12px radius, no border, no divider.
   Hover = slightly darker fill + blue title, on a light 0.2s
   ease transition (no lift, no shadow — the earlier base-theme
   translateY/box-shadow at ~line 1500 stays neutralised).

   Geometry derived from the reference screenshot:
   - 16px gap: the design's column pitch matched this grid, and
     4 cards + 3 gaps fill the 1152px row exactly at 276px wide.
   - 28px padding: reproduces the design's 130px card height
     (28 + 44 icon + 12 + ~19.5 title + 28 = 131.5).
   Padding sits on the link, not the item, so the whole card
   surface is clickable rather than just the inner content box.
   ============================================================ */
[dir] .blocks-list {
  column-gap: 16px;
  row-gap: 16px;
}

.blocks-item {
  transition: background-color 0.2s ease;
}

[dir] .blocks-item {
  background: #F5F6F8;
  border: none;
  border-radius: 12px;
  padding: 0;
}

[dir] .blocks-item:hover,
[dir] .blocks-item:focus-within {
  background: #EAECF0;
  transform: none;
  box-shadow: none;
}

[dir] .blocks-item-link {
  padding: 28px;
  border-radius: inherit;
}

/* Title turns brand blue on card hover, not just direct link hover */
.blocks-item:hover .blocks-item-title,
.blocks-item-link:hover .blocks-item-title,
.blocks-item-link:focus .blocks-item-title {
  color: #4568F3;
}

/* ============================================================
   HOMEPAGE HERO — CLEAR (X) BUTTON
   Design decision (owner, Jul 2026): while typing, the clear
   control is a small circled X sitting 16px to the left of the
   blue search button, instead of a bare X on top of it.

   The X is the browser's native search-cancel button. The theme
   styles it globally near line 6900 as an absolutely positioned
   24px bare-X icon at right:16px — absolute against .search-full,
   which is the nearest positioned ancestor. At right:16px it
   spans 16..40px from the bar's right edge, colliding with the
   blue button at 6..42px. Hence:
       blue button left edge = 6 + 36 = 42px from the right edge
       + 16px gap            = 58px  -> the X's right edge
   The icon is 20px (down from 24px), so it occupies 58..78px.
   The input's padding-right is therefore 86px (see the 240px
   HERO block above) so typed text stops clear of it rather than
   sliding underneath — the X is absolutely positioned and does
   not reserve space in the text flow.

   Artwork is overridden below: a circled X in #B8B7C3, the
   theme's light grey — the lighter sibling of the secondary grey
   #747382 in the same purple-tinted family, already used
   elsewhere in this file. Replaces the global bare-X glyph.
   Cursor is still inherited from the global rule.

   Caveat worth knowing: ::-webkit-search-cancel-button is a
   Chrome/Safari-only pseudo-element. Firefox renders no clear
   control at all — that is pre-existing across this whole theme,
   not specific to this block.
   ============================================================ */
.hero .search-full input[type="search"]::-webkit-search-cancel-button {
  top: 50%;
  width: 20px;
  height: 20px;
}

[dir] .hero .search-full input[type="search"]::-webkit-search-cancel-button {
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23B8B7C3' stroke-width='1.5'/%3E%3Cpath d='M7.25 7.25L12.75 12.75' stroke='%23B8B7C3' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M12.75 7.25L7.25 12.75' stroke='%23B8B7C3' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

[dir=ltr] .hero .search-full input[type="search"]::-webkit-search-cancel-button {
  right: 58px;
}

[dir=rtl] .hero .search-full input[type="search"]::-webkit-search-cancel-button {
  left: 58px;
}

/* Always visible while there is text.
   Chrome's own stylesheet keeps this button at opacity:0 with
   pointer-events:none unless the field is focused OR hovered,
   which made the X appear only on hover once focus was lost.
   :not(:placeholder-shown) is the CSS way to ask "does this field
   have text?" — the placeholder only renders while the value is
   empty, so this matches exactly when something is typed and
   leaves the button hidden on an empty field. Depends on the
   input keeping its placeholder attribute, which the Zendesk
   {{search}} helper supplies in templates/home_page.hbs. */
.hero .search-full input[type="search"]:not(:placeholder-shown)::-webkit-search-cancel-button {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   HEADER SEARCH PLACEHOLDER
   Lighter than the global input[type=search] placeholder (#373737,
   set around line 8364) so "Search" reads as a hint rather than as
   typed-in text — owner request, Jul 2026. Scoped to the header
   field only; the global rule still covers other search inputs,
   and the hero field keeps its own #6b7280 rule.
   `opacity: 1` because Firefox dims placeholders by default.
   ============================================================ */

.nav-wrapper .search-container input[type="search"]::placeholder {
  color: #747382;
  opacity: 1;
}

/* ============================================================
   LEFT RAIL: 8px INDENT
   Shifts the whole rail's contents 8px right — owner request,
   Jul 2026. Applied as padding on the .sidenav wrapper rather
   than by bumping each row's padding, so the three-level
   indentation set up above (category/section flush, article
   track under the section's first letter, article label 24px
   clear of the track) all move together and stay in step.
   The article track and its blue/grey indicator segments are
   positioned against elements INSIDE this wrapper, so they
   travel with it automatically.
   ============================================================ */

[dir=ltr] .article-sidebar .sidenav-container .sidenav { padding-left: 8px; }
[dir=rtl] .article-sidebar .sidenav-container .sidenav { padding-right: 8px; }

/* ============================================================
   LEFT RAIL TYPE
   Owner request, Jul 2026: category labels one weight up with
   0.2px letter-spacing, article labels up to 14px.

   Weight is already 600 from several rules above (10492, 12158,
   12189) — what was fighting it was script.js stamping an inline
   `font-weight: 500 !important`, which no stylesheet rule can
   outrank. That stamp now says 600 too, so the two agree.

   The other two values had to be overridden here because the
   winning rules live earlier in the file:
     letter-spacing  -0.01em  .sidenav-container .sidenav__category-name  (~10495)
     font-size       13px     .sidenav-container .sidenav__article-name   (~10534)
   Both are 2-class selectors, so the extra .article-sidebar wins.

   Keep these in sync with the matching values in script.js
   (fixSidenavFonts) — it stamps the same properties inline for a
   few seconds after load, and a mismatch shows up as a flicker.
   Letter-spacing is set on the row; the .category-title span
   inherits it.
   ============================================================ */

.article-sidebar .sidenav-container .sidenav__category-name {
  letter-spacing: 0.2px !important;
}

.article-sidebar .sidenav-container .sidenav__article-name {
  font-size: 14px !important;
}

/* ============================================================
   LEFT RAIL: LEVELS 3 AND 4 (nested subsections)
   Owner request + "New 2.0" mock, Jul 2026: the deep case repeats
   the same pattern as the shallow one — chevron on the left, label
   24px past it, children 8px right of the label. It draws NO line
   of its own: there is exactly one track line per category, at the
   far left, on the sections list (see the TRACK LINE block above).

   Zendesk renders a subsection as a .sidenav__section INSIDE the
   parent's .sidenav__articles-list — so "a section nested in an
   articles list" is the only way to recognise level 3, and one
   more nesting of the same list recognises level 4. Rare: the
   only current example is
   Transactions & Fees > Transaction Statuses > Primary
   transaction statuses / Transaction substatuses.

   Figures continue the ladder documented in the ARTICLE-PAGE
   SIDENAV REFINEMENTS block above:
     subsection chevron  48px   (the slot a level-3 article uses)
     subsection label    72px   = 48 + 20 + 4
     level-4 article     80px   = 72 + 8
   The selected/hovered segments are NOT repeated here — they stay
   at 8px on the one line, at every depth.

   The selectors need the doubled .sidenav__articles-list to be
   specific enough: the rules they override are themselves 4-class
   [dir]-prefixed selectors (subsection padding at ~10640 and the
   16px section padding earlier in this file), and in this file
   specificity, not source order, decides. Same reason the type
   rule below carries .sidenav.
   ============================================================ */

/* Level 3: subsection row — chevron at 48px, label at 72px */
[dir=ltr] .article-sidebar .sidenav .sidenav__articles-list .sidenav__section-name {
  padding-left: 48px !important;
}
[dir=rtl] .article-sidebar .sidenav .sidenav__articles-list .sidenav__section-name {
  padding-right: 48px !important;
}

/* Level 3: subsection type matches a level-2 section rather than the
   smaller, lighter treatment it used to get (13px / #747382 at ~10557) —
   the indent alone carries the hierarchy, as at the level above. */
.article-sidebar .sidenav .sidenav__articles-list .sidenav__section-name {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #404040 !important;
}

/* Level 4: article label 8px right of the subsection label above it */
[dir=ltr] .article-sidebar .sidenav__articles-list .sidenav__articles-list .sidenav__article-name {
  padding-left: 80px !important;
}
[dir=rtl] .article-sidebar .sidenav__articles-list .sidenav__articles-list .sidenav__article-name {
  padding-right: 80px !important;
}

/* ============================================================
   LEFT RAIL: EXTRA AIR BETWEEN CATEGORIES
   Owner request, Jul 2026: categories — and only categories —
   sit further apart than the rows inside them. 8px on top of the
   shared 12px rhythm, so 20px between one category label and the
   next against 12px everywhere else.

   `+` means "only between two categories", never above the first
   one, so the rail doesn't gain a stray 8px at the top. The
   [dir] prefix is here to outrank the many [dir]-prefixed margin
   resets earlier in the file.

   Where a category is expanded, this 8px does NOT add to the 16px
   that `.sidenav__category.is-active > .sidenav__sections-list`
   (~line 10610) puts below the open group — the two are adjacent
   vertical margins, so they collapse and only the larger applies.
   Measured: 28px of clearance after an open category, not 36px.
   Still more than the 20px between closed ones, so the grouping
   reads correctly; noted here so nobody hunts for a missing 8px.
   ============================================================ */

[dir] .article-sidebar .sidenav__categories-list > .sidenav__category + .sidenav__category {
  margin-top: 8px;
}

/* ============================================================
   EXPAND / COLLAPSE ANIMATION
   Owner request, Jul 2026: opening and closing a category or a
   section should glide rather than snap. 180ms, ease-out.

   The list is a plain block, clipped by max-height: 0 when closed.
   CSS cannot transition to a height of `auto`, so the open value
   has to be measured — script.js does that (see "Sidenav accordion
   slide") and sets a pixel max-height inline for the length of the
   slide, then clears it so a nested section opened later is not
   clipped by a stale number.

   This is the SECOND attempt. The first used the CSS grid
   0fr -> 1fr trick, which needs no JS at all, and it measured and
   looked correct in Chrome — but engines disagree about where the
   content sits inside a track mid-animation, and the owner saw the
   list slide up from the bottom instead of unrolling from the top.
   A max-height clip on a normal block pins the content's top edge
   to the top of the box in every engine, so the reveal always runs
   top to bottom. Do not "simplify" this back to the grid trick
   without checking it in Safari.

   This REPLACES the earlier display:none/display:block pair
   (~line 10625 here and in assets/sidenav.css, both overridden
   below) — display cannot be animated at all, which is why the
   behaviour used to be instant. Both of those rules are still in
   place for anything outside .article-sidebar.

   `visibility` keeps the a11y behaviour the display switch used
   to give: collapsed links stay out of tab order and out of
   screen readers. It flips to visible instantly on open, and is
   held back until the slide finishes on close (the 0s duration
   with a 180ms delay) so nothing vanishes mid-glide.

   Durations here and in script.js must stay in step.
   ============================================================ */

.article-sidebar .sidenav__sections-list,
.article-sidebar .sidenav__articles-list {
  display: block !important;
  overflow: hidden;
  max-height: 0;
  visibility: hidden;
  /* margin-bottom rides along: an open category gets 16px of clearance
     below it (~line 10610), and a margin sits OUTSIDE the clipped box,
     so without this the slide began with a 16px jump. Measured before
     adding it: the box started at 16px instead of 0.
     `!important` is required, not defensive: the vendor sidenav script
     stamps `transition: transform 300ms` as an INLINE style on every one
     of these lists (148 of them on a typical page), and inline styles
     outrank an ordinary stylesheet rule. Without it this whole
     declaration is silently dead — which is exactly what happened the
     first time round. */
  transition: max-height 180ms ease-out, margin-bottom 180ms ease-out,
              visibility 0s linear 180ms !important;
}

.article-sidebar .sidenav__category.is-active > .sidenav__sections-list,
.article-sidebar .sidenav__section.is-active > .sidenav__articles-list {
  /* `none`, not a pixel value, so an open list always fits its content
     — including a subsection the reader expands inside it afterwards.
     The pixel value that actually animates is set inline by script.js
     and removed again when the slide ends. */
  max-height: none;
  visibility: visible;
  /* `!important` for the same reason as above — the inline
     `transition: transform 300ms` the vendor stamps on these lists. */
  transition: max-height 180ms ease-out, margin-bottom 180ms ease-out,
              visibility 0s !important;
}

/* Readers who ask their system to reduce motion get the old instant
   open/close rather than a 180ms slide. script.js clears its inline
   max-height on a timer as well as on transitionend, so the lists still
   end up uncapped even though no transition ever fires here. */
@media (prefers-reduced-motion: reduce) {
  .article-sidebar .sidenav__sections-list,
  .article-sidebar .sidenav__articles-list {
    transition: none !important;
  }
}

/* ============================================================
   HOMEPAGE HERO — THE SEARCH BUTTON IS NOW A REAL BUTTON
   Owner report, Jul 2026: clicking the blue magnifier did
   nothing (pressing Enter always worked). The circle was pure
   decoration — an :after on .search-full carrying
   `pointer-events: none`, which a pseudo-element needs anyway
   since it can never receive a click.

   The look moves onto a real <button type="submit"> that
   script.js appends to the form (see "Hero search submit
   button"). templates/home_page.hbs calls
   {{search submit=false}}, so Zendesk renders no button of its
   own, and the preview server's search stub never renders one
   either — hence adding it ourselves rather than flipping the
   helper, which would also change the markup this whole block
   is built around.

   Geometry is deliberately identical to the old circle: 36px,
   6px in from the right edge. That keeps it clear of the X
   button at 58..78px and matches the input's 86px of right
   padding — see the CLEAR (X) BUTTON block above.

   Hover goes to #212647, the same navy the header's primary
   CTA uses, so both blue buttons in the theme behave alike.
   The selectors cover a native submit control as well, so
   nothing breaks if the helper is ever switched to submit=true.
   ============================================================ */

.hero .search-full:after {
  display: none !important;
}

.hero .search-full .search-submit,
.hero .search-full button[type="submit"],
.hero .search-full input[type="submit"] {
  position: absolute;
  top: 50%;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  /* A native input[type=submit] carries value="Search"; this hides that
     text without hiding the element from screen readers. */
  font-size: 0;
  color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

[dir] .hero .search-full .search-submit,
[dir] .hero .search-full button[type="submit"],
[dir] .hero .search-full input[type="submit"] {
  transform: translateY(-50%);
  background-color: #4568F3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20' height='20' width='20'%3E%3Cpath fill='%23ffffff' clip-rule='evenodd' fill-rule='evenodd' d='M6.564 3.00113C7.36273 2.67028 8.2188 2.5 9.08333 2.5C9.94787 2.5 10.8039 2.67028 11.6027 3.00113C12.4014 3.33197 13.1271 3.81689 13.7385 4.42821C14.3498 5.03953 14.8347 5.76527 15.1655 6.564C15.4964 7.36273 15.6667 8.2188 15.6667 9.08333C15.6667 9.94787 15.4964 10.8039 15.1655 11.6027C14.9308 12.1694 14.6185 12.6994 14.2385 13.1778L17.2803 16.2197C17.5732 16.5126 17.5732 16.9874 17.2803 17.2803C16.9874 17.5732 16.5126 17.5732 16.2197 17.2803L13.1778 14.2385C12.6994 14.6185 12.1694 14.9308 11.6027 15.1655C10.8039 15.4964 9.94787 15.6667 9.08333 15.6667C8.2188 15.6667 7.36273 15.4964 6.564 15.1655C5.76527 14.8347 5.03953 14.3498 4.42821 13.7385C3.81689 13.1271 3.33197 12.4014 3.00113 11.6027C2.67028 10.8039 2.5 9.94787 2.5 9.08333C2.5 8.2188 2.67028 7.36273 3.00113 6.564C3.33197 5.76527 3.81689 5.03953 4.42821 4.42821C5.03953 3.81689 5.76527 3.33197 6.564 3.00113ZM9.08333 4C8.41578 4 7.75476 4.13148 7.13803 4.38695C6.52129 4.64241 5.9609 5.01684 5.48887 5.48887C5.01684 5.9609 4.64241 6.52129 4.38695 7.13803C4.13148 7.75476 4 8.41578 4 9.08333C4 9.75089 4.13148 10.4119 4.38695 11.0286C4.64241 11.6454 5.01684 12.2058 5.48887 12.6778C5.96091 13.1498 6.52129 13.5243 7.13803 13.7797C7.75476 14.0352 8.41578 14.1667 9.08333 14.1667C9.75089 14.1667 10.4119 14.0352 11.0286 13.7797C11.6454 13.5243 12.2058 13.1498 12.6778 12.6778C13.1498 12.2058 13.5243 11.6454 13.7797 11.0286C14.0352 10.4119 14.1667 9.75089 14.1667 9.08333C14.1667 8.41578 14.0352 7.75476 13.7797 7.13803C13.5243 6.52129 13.1498 5.96091 12.6778 5.48887C12.2058 5.01684 11.6454 4.64241 11.0286 4.38695C10.4119 4.13148 9.75089 4 9.08333 4Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  transition: background-color 0.2s ease;
}

[dir=ltr] .hero .search-full .search-submit,
[dir=ltr] .hero .search-full button[type="submit"],
[dir=ltr] .hero .search-full input[type="submit"] {
  right: 6px;
}

[dir=rtl] .hero .search-full .search-submit,
[dir=rtl] .hero .search-full button[type="submit"],
[dir=rtl] .hero .search-full input[type="submit"] {
  left: 6px;
}

[dir] .hero .search-full .search-submit:hover,
[dir] .hero .search-full .search-submit:focus,
[dir] .hero .search-full button[type="submit"]:hover,
[dir] .hero .search-full button[type="submit"]:focus,
[dir] .hero .search-full input[type="submit"]:hover,
[dir] .hero .search-full input[type="submit"]:focus {
  background-color: #212647;
}

/* Keyboard users get a visible ring; mouse users don't (:focus-visible). */
.hero .search-full .search-submit:focus-visible,
.hero .search-full button[type="submit"]:focus-visible,
.hero .search-full input[type="submit"]:focus-visible {
  outline: 2px solid #212647;
  outline-offset: 2px;
}

/* ============================================================
   MOBILE + TABLET HEADER AND FULL-SCREEN MENU (<= 1199px)
   Owner spec + Mintlify reference, Jul 2026. Below 1200px the
   header is nothing but the logo on the left and a hamburger on
   the right. Tapping it brings a full-screen panel in from the
   right holding the category navigation, with the CTAs stacked and
   pinned to the bottom, and an X sitting exactly where the
   hamburger was.

   1199px is the theme's own mobile line: it is where the inline
   left rail gives way to this panel (~7028) and what
   `"mobileBreakpoint": 1199` in templates/header.hbs is set to. So
   the whole range below it now behaves identically rather than
   splitting phone and tablet.

   Two earlier attempts are gone rather than layered over: the
   first hid the hamburger on the homepage and put the CTAs under
   the hero search; the second slid an 85%-wide panel in from the
   left, and applied only below 767px.

   Why the header was broken to begin with: `.article-page
   .nav-wrapper a` (~8718) already hid the CTAs below 1200px, but
   the CTA base override (~11147) forces `display: inline-flex
   !important`, which no plain rule can beat. Hiding the whole
   .nav-wrapper below 1200px settles it, and takes the top-right
   search icon with it since that lives inside the wrapper too.
   ============================================================ */

@media (max-width: 1199px) {
  /* ---- Header: logo left, hamburger right ---- */

  /* `order` rather than moving markup: .header__inner is already a flex
     row with space-between, and the hamburger happens to be the first
     child in header.hbs. */
  .header__inner > .logo {
    order: 1;
  }

  /* The buttons sit between the two from 768px up (see below); the
     hamburger stays last, hard against the right edge. */
  .header__inner > .nav-wrapper {
    order: 2;
  }

  /* Hamburger stays last. The magnifier that appears below 900px sits just
     inside it — it is a child of .nav-wrapper (order 2), so it lands there
     naturally without needing an order of its own. */
  .header__inner > .menu-button-article {
    order: 3;
  }

  /* Breathing room and a real touch target.
     The button had no margin at all (~5800 sets padding: 0), and because it
     sits OUTSIDE .nav-wrapper the `gap: 12px` in templates/header.hbs never
     reached it — so its box was flush against the "Sign in" button, 0px, at
     every width from 768 to 1199. The row read 8px / 12px / 0px.

     Geometry, measured at 768-1199px:
     - padding: 10px turns the 24x24 icon into a 44x44 hit area, the minimum
       Apple and Google both recommend. Fits the 64px header row easily.
     - margin-right: -10px pulls the enlarged box back into the header's 20px
       right padding, so the ICON keeps its original 20px inset from the
       viewport edge instead of sitting 10px further in.
     - margin-left: 2px + the 10px of new padding = a 12px gap between the
       "Sign in" box and the icon, matching the 12px already used between
       "Get a demo" and "Sign in". The row now reads 8px / 12px / 12px.
     There is room to spend: at 768px the logo box carries ~162px of slack,
     so this shrinks the logo box rather than pushing anything off-screen.
     Below 768px .nav-wrapper is hidden and only the -10px matters, which
     keeps the icon's inset identical at phone widths.

     [dir]-prefixed to outrank `[dir] .menu-button-article { padding: 0 }`
     (~5800), which would otherwise win at equal specificity. */
  [dir] .header__inner > .menu-button-article {
    padding: 10px;
    margin-left: 2px;
    margin-right: -10px;
  }

  /* Mirrored: in RTL the row reverses, so the hamburger lands on the left. */
  [dir=rtl] .header__inner > .menu-button-article {
    margin-right: 2px;
    margin-left: -10px;
  }

  /* The logo box fills the row (flex: 2 1 auto), and below 1199px the link
     inside it is centred — `.logo a` at ~6017 and again for article and
     category pages at ~8678, which is why this needs the body-class copies
     to outrank it. Left-aligned per the owner spec; the wide box is what
     pushes the hamburger to the right edge, so it stays as it is. */
  .header__inner > .logo a,
  .category-page .header__inner > .logo a,
  .article-page .header__inner > .logo a {
    justify-content: flex-start;
  }

  /* The top-right search icon stays out of the header at every size
     below 1200px — part of the same cleanup. On article and category
     pages the theme forces it back with
     `.article-page .mobile-search { display: block !important }`
     (~8723), so this needs the extra class and !important to win. */
  .header .mobile-search,
  .category-page .header .mobile-search,
  .article-page .header .mobile-search {
    display: none !important;
  }

  /* The desktop search field goes with it — and this is what makes the
     header FIT at 768px. templates/header.hbs gives <nav class="user-nav">
     an inline `width: 240px; flex: 0 0 240px`, so it holds 240px of the row
     open even here, where the field inside it is absolutely positioned off
     above the header and the icon that reveals it is hidden. Measured at
     768px: without this the header's contents ran 55px past the viewport
     and the browser was coping by wrapping "Help Center" onto two lines.
     `!important` because the width is inline. */
  .header .nav-wrapper > .user-nav {
    display: none !important;
  }

  /* ---- Below 768px: logo + magnifier + hamburger only ---- */

  /* The CTAs live in the panel at phone sizes (script.js moves them), so
     they go here too — which also covers them if that ever fails, rather
     than letting them overflow a 400px header. From 768px up they stay in
     the header, per the owner's spec.

     This used to hide `.nav-wrapper` wholesale. It can't any more: the
     magnifier that reveals the search bar below 900px lives INSIDE the
     wrapper (templates/header.hbs) and has to survive. Listing the
     children instead keeps the same safety net for the buttons — every
     child except .mobile-search is named — and leaves the wrapper as a
     thin flex box holding just the icon. Keeping the icon in the wrapper
     also preserves the anchor `placeMobileCtas()` looks for when it moves
     the buttons back into the header at 768px (script.js ~1224). */
  @media (max-width: 767px) {
    .header .nav-wrapper > .user-nav,
    .header .nav-wrapper > .header-cta,
    .header .nav-wrapper > .header-cta__btn--signin,
    .header .nav-wrapper > .user-info,
    .header .nav-wrapper > a {
      display: none !important;
    }
  }

  /* ---- The panel: full screen, entering from the right ---- */

  /* The theme parks the panel off-canvas with `left: -400px` (~9681) and
     sizes it to 85%/400px (~6958); script.js used to slide it by writing
     an inline `left`. All of that is replaced here by a transform, which
     is also what lets it animate without touching layout. `!important`
     on the box properties because the rules being replaced are
     [dir]-prefixed and would otherwise outrank these. */
  body .header-menu-sidebar {
    top: 0 !important;
    left: auto !important;
    right: 0 !important;
    width: 100% !important;
    /* Capped at 480px — owner request, Jul 2026. Anchored to the right
       edge, which is what keeps the X exactly where the hamburger was:
       it is positioned 12px in from the panel's right edge, and that
       edge is the viewport's. Below 480px the panel is still full width. */
    max-width: 480px !important;
    height: 100% !important;
    transform: translateX(100%);
    transition: transform 0.3s;

    /* Above the site header (z-index 1000) so the panel covers it
       completely — the X below stands in for the hamburger underneath. */
    z-index: 100000;
  }

  [dir=rtl] body .header-menu-sidebar {
    left: 0 !important;
    right: auto !important;
    transform: translateX(-100%);
  }

  [dir=rtl] body.menu-is-open .article-sidebar.header-menu-sidebar {
    transform: translateX(0);
    box-shadow: 8px 0 24px rgba(33, 38, 71, 0.12);
  }

  /* Opened by script.js putting `menu-is-open` on <body>. Four classes
     deep so it beats anything above, including the [dir]-prefixed
     off-canvas rules. */
  body.menu-is-open .article-sidebar.header-menu-sidebar {
    transform: translateX(0);
    /* Lifts the drawer off the page beside it — the dim overlay cannot do
       that job, see the note further down. Only while open: parked off to
       the right, a 24px blur bleeds a faint grey strip back into view. */
    box-shadow: -8px 0 24px rgba(33, 38, 71, 0.12);
  }

  /* The 64px of top padding is deliberate — it is the row the X sits in,
     mirroring the header it replaces. Nothing shows through it now that
     the panel is full-screen and opaque. */
  [dir] body .header-menu-sidebar {
    padding-top: 64px !important;
    background-color: #FFFFFF;
  }

  /* No page scrolling behind an open full-screen menu. */
  body.menu-is-open {
    overflow: hidden;
  }

  /* The dim overlay is a CHILD of the panel — a quirk of the vendor
     sidenav — and it is fixed and full-viewport at 66% black. That is what
     made the panel's top row look grey: it paints over the panel's own
     white background everywhere the nav content does not cover it. A
     full-screen panel has nothing left to dim, so it goes.
     It stays hidden now the panel is capped at 480px, because it is a
     CHILD of the panel: any dimming it painted would land on the panel's
     own background, not on the page beside it. The page is separated by
     the drawer's shadow instead, and tapping outside to close is handled
     in script.js.
     Closing still routes a programmatic click through this element, and a
     click dispatched from code fires handlers on a hidden element. */
  .header-menu-sidebar .sidenav-overlay {
    display: none !important;
  }
}

/* ------------------------------------------------------------
   The panel's pinned CTA footer — buttons stacked, full width.
   `margin-top: auto` pins it to the bottom edge when the nav is
   short; `position: sticky; bottom: 0` keeps it in view when the
   nav is long enough to scroll (the panel itself is the scroll
   container — `overflow-y: auto`, ~line 6958).

   Every rule that styles these buttons in the header is scoped to
   .nav-wrapper, so they arrive here unstyled and this block has to
   restate the geometry. The colours are deliberately the header's
   own — the panel is white, so they carry over unchanged.

   No media query: script.js only builds this container below
   768px, so there is nothing for these rules to match above it.
   ------------------------------------------------------------ */

.header-menu-sidebar__cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  position: sticky;
  bottom: 0;
  padding: 16px 20px;
  background: #FFFFFF;
  border-top: 1px solid #E4E9F2;
  /* 4, not 2: the panel's existing "Fireblocks.com | Console App" row sits
     at z-index 3 (~line 8907), and mid-scroll — while this footer is lifted
     to the panel's bottom edge and that row is still further down the flow —
     the two overlap. Whichever is higher wins, and it needs to be this one
     (owner report: the links were covering the buttons).
     Once scrolled to the very end there is no overlap at all: a sticky
     element still occupies its own space, so the links land just above it. */
  z-index: 4;
}

.header-menu-sidebar__cta .header-cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.header-menu-sidebar__cta .header-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  padding: 0 16px;
  box-sizing: border-box;
  border-radius: 12px;
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  transition: all 0.15s;
}

.header-menu-sidebar__cta .header-cta__btn--primary {
  background: #4568F3;
  border: 1px solid #4568F3;
  color: #FFFFFF;
}

.header-menu-sidebar__cta .header-cta__btn--primary:hover,
.header-menu-sidebar__cta .header-cta__btn--primary:focus {
  background: #212647;
  border-color: #212647;
  color: #FFFFFF;
}

.header-menu-sidebar__cta .header-cta__btn--outline {
  background: transparent;
  border: 1px solid #E4E9F2;
  color: #212647;
}

.header-menu-sidebar__cta .header-cta__btn--outline:hover,
.header-menu-sidebar__cta .header-cta__btn--outline:focus {
  border-color: #212647;
  color: #212647;
}

/* ------------------------------------------------------------
   "Sign in" sits in the panel's top row instead of the footer —
   owner request, Jul 2026 — on the same line as the X and mirroring
   it from the left. Same 40px height and same 12px inset, so the two
   read as a pair; the 8px of padding lands the text at 20px, which is
   where the header's logo starts.
   It is a direct child of the panel (script.js puts it there), so
   none of the .nav-wrapper styling reaches it and this restates
   everything it needs.
   ------------------------------------------------------------ */

.header-menu-sidebar > .header-cta__btn--signin {
  position: absolute;
  top: 12px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #212647;
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
  z-index: 5;
}

[dir=ltr] .header-menu-sidebar > .header-cta__btn--signin {
  left: 12px;
}

[dir=rtl] .header-menu-sidebar > .header-cta__btn--signin {
  right: 12px;
}

.header-menu-sidebar > .header-cta__btn--signin:hover,
.header-menu-sidebar > .header-cta__btn--signin:focus {
  background: rgba(33, 38, 71, 0.06);
  color: #212647;
}

/* ------------------------------------------------------------
   The X, standing in for the hamburger while the menu is open.
   Same 40px box at the same 20px inset, and the panel's 64px of
   top padding centres it on the same line, so it reads as the
   hamburger changing rather than a new control appearing.
   Absolutely positioned, so it never pushes the nav down.
   ------------------------------------------------------------ */

.header-menu-sidebar__close {
  position: absolute;
  top: 12px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  color: #212647;
  cursor: pointer;
  z-index: 5;
}

[dir=ltr] .header-menu-sidebar__close {
  right: 12px;
}

[dir=rtl] .header-menu-sidebar__close {
  left: 12px;
}

@media (min-width: 1200px) {
  .header-menu-sidebar__close {
    display: none !important;
  }
}

/* ============================================================
   HOMEPAGE HERO ON SMALL SCREENS (<= 707px)
   Owner report, Jul 2026: below 708px the blue band was far taller
   than its contents and the title sat almost on top of the search
   bar. Both come from one pre-existing rule pair at ~line 6349:

     .hero { min-height: 284px }   <- 160px of empty band below the
                                      search bar, since the content
                                      only needs ~120px here
     [dir] .hero { padding-top: 8px }  <- pulls the title up, and the
                                      title's own margin-bottom is 0
                                      below 1200px (~13177), so the
                                      two ended up almost touching

   Undone rather than edited in place, to keep every change to this
   theme in the appended blocks: same selectors, same specificity,
   later in the file, so these win.
   Padding goes back to the 32px top and bottom used from 768px
   down, so the band is symmetrical again, and the title gets 16px
   of clearance — two thirds of the 24px it has on desktop, which
   suits the smaller 24px type here.

   Note the same zero gap still applies from 708 to 1199px, where
   the title is 40px; untouched because it was not reported.
   ============================================================ */

@media (max-width: 707px) {
  .hero {
    min-height: 0;
  }

  [dir] .hero {
    padding: 32px 20px;
  }

  [dir] .hero-inner-title {
    margin-bottom: 16px;
  }
}

/* ============================================================
   HOMEPAGE CATEGORY GRID ON SMALL SCREENS (<= 707px)
   Owner request, Jul 2026: two cards per row at phone widths
   instead of one full-width card each.

   `.blocks-list` is a CSS grid — `grid-template-columns: 1fr` at
   ~line 10222 is what stacked them one per row, and two columns is
   the whole fix. Worth knowing for next time: the items also carry
   `flex-basis` rules from the vendor theme (~1488, ~1508, ~1514)
   which look like they set the column count and do nothing at all,
   because the list stopped being a flexbox. Changing those has no
   effect; this is the rule that counts.

   The 24px bottom margin that came with that same rule goes too —
   the list's 16px row-gap already spaces the rows, and the two
   together left the vertical gaps 40px against the horizontal 16px.
   ============================================================ */

@media (max-width: 707px) {
  /* `minmax(0, 1fr)`, not plain `1fr`: a bare fr track refuses to go below
     its content's minimum width, and "Announcements" is one long unbreakable
     word — so the left column was 170px against the right's 152px (owner
     report). The 0 minimum lets both halves stay equal and makes the words
     wrap instead of widening the column. */
  .blocks-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [dir] .blocks-item {
    margin-bottom: 0;
  }

  /* Screen margins 32px -> 16px (`[dir] .container` at ~line 403), which the
     owner offered to buy the titles more room: each card goes from 170 to
     177px, enough for "Announcements" to sit on one line.
     Scoped to the container that holds the category grid rather than every
     .container in the theme — the community and error pages use the same
     class and were not part of this. Written twice on purpose: an engine
     without :has() support would discard the whole selector list, taking
     the body.homepage copy with it. */
  body.homepage .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .container:has(.knowledge-base) {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Safety net for the narrowest phones: at 320px a half-column leaves ~80px
     of text width, less than "Announcements" needs, and an unbreakable word
     would otherwise spill out of the card. */
  .blocks-item-title {
    overflow-wrap: break-word;
  }
}

/* ============================================================
   "HELP CENTER" NEVER WRAPS
   Owner report, Jul 2026: the tagline beside the logo was
   breaking onto two lines. It happens whenever the logo has to
   share the header row — most visibly from 768px up, now that
   the CTAs are back in the header and competing for space.
   Applied at every width, not per breakpoint, since there is no
   width at which breaking it is wanted.
   ============================================================ */

.logo-tagline {
  white-space: nowrap;
}

/* ============================================================
   ARTICLE TITLE ON SMALL SCREENS (<= 767px)
   Owner request, Jul 2026: 32px instead of the 36px set at
   ~line 6467, which is a lot of type on a ~360px column — the
   longest titles were running to three lines.
   ============================================================ */

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

/* ============================================================
   HEADER SEARCH BELOW 1200px  —  the 900px hybrid
   ------------------------------------------------------------
   The uplift removed header search entirely below 1200px: the
   field with `.header .nav-wrapper > .user-nav { display: none }`
   (~13753) and the magnifier with `.header .mobile-search
   { display: none }` (~13739). Nothing replaced either, so on
   article, category, section and search-result pages the only
   way to search was to go back to the homepage hero.

   Restored in two bands, because the field needs 240px of row and
   the icon needs 44px:

     900-1199px  the real search field, exactly as on desktop
     below 900   a magnifier that reveals a full-width bar

   900px is measured, not guessed. With the field shown, the row runs
   out of room at exactly 860px, where the logo text ends flush
   against the field with 0px between them, and 768px overflowed the
   viewport by 92px. 860 therefore fits but reads cramped, so the
   switch sits at 900, which leaves ~30px of clearance. Nothing else
   has to move to make the 900-1199 band work — the CTAs stay in the
   header and still move into the panel at 767px as before.
   ============================================================ */

/* ---- 900-1199px: the desktop search field ---- */

@media (min-width: 900px) and (max-width: 1199px) {

  /* Undo the two hides. `!important` because the rules being beaten
     are themselves !important (and .user-nav's width is inline). */
  .header .nav-wrapper > .user-nav {
    display: flex !important;
    align-items: center;
  }

  .header .nav-wrapper .search-container {
    display: inline-block !important;
  }

  /* The homepage keeps its exception: no field in the header, because
     the hero carries the search. Same as desktop (set in the inline
     <style> in templates/header.hbs). Hiding the whole .user-nav also
     gives back the 240px it would otherwise hold open. */
  body.homepage .header .nav-wrapper > .user-nav,
  body.homepage .header .nav-wrapper .search-container {
    display: none !important;
  }

  /* Below 1200px, article and category pages restyle this field as the
     flyout the magnifier used to reveal: absolutely positioned, 250px
     wide, dark navy, with a drop shadow (~8705). Left alone it renders
     as a dark pill floating out of alignment with the row. Reset it to
     the static white field it is on desktop. */
  [dir] .category-page .user-nav .search-container,
  [dir] .article-page .user-nav .search-container,
  [dir=ltr] .category-page .user-nav .search-container,
  [dir=ltr] .article-page .user-nav .search-container,
  [dir=rtl] .category-page .user-nav .search-container,
  [dir=rtl] .article-page .user-nav .search-container {
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* One or the other, never both. */
  .header .mobile-search,
  .category-page .header .mobile-search,
  .article-page .header .mobile-search {
    display: none !important;
  }
}

/* ---- Below 900px: magnifier + revealed bar ---- */

@media (max-width: 899px) {

  /* 44x44 hit area around the 20x20 icon, matching the hamburger it sits
     next to (see the note at ~13697 for the geometry). No negative margin
     here: the hamburger owns the right edge, this sits inside it. */
  .header .mobile-search,
  .category-page .header .mobile-search,
  .article-page .header .mobile-search {
    display: block !important;
    box-sizing: content-box;
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
  }

  [dir] .header .mobile-search {
    padding: 12px;
  }

  /* Not on the homepage: the hero search sits right below the header, so a
     magnifier here would be a second route to the same thing. Same reasoning
     as the 900-1199px band above, where the homepage keeps its field hidden.
     One class more specific than the rule above, so it wins. */
  body.homepage .header .mobile-search {
    display: none !important;
  }

  /* The revealed bar. Default closed; `search-is-open` on <body> opens it
     (script.js, "Header search reveal"). This restates the box because
     the rule at ~11966 — added to kill a white line under the header —
     sets display/height/padding/margin/overflow to zero with !important,
     which is what left the magnifier's reveal permanently dead. Scoped
     to this band so that fix keeps working everywhere else. */
  .header.header--search {
    display: none !important;
  }

  /* Exactly 64px — the height of the header row it stands in for — so
     opening and closing does not nudge the page up and down. */
  body.search-is-open .header.header--search {
    display: flex !important;
    align-items: center;
    gap: 8px;
    height: 64px !important;
    box-sizing: border-box;
    overflow: visible !important;
    position: relative;
    z-index: 1001;
  }

  [dir] body.search-is-open .header.header--search {
    padding: 0 20px !important;
    margin: 0 !important;
    background-color: #FFFFFF;
    border-bottom: 1px solid #E4E9F2;
  }

  /* The "/" badge stays. It was hidden while the placeholder read "What do
     you need help with?", which collided with it in a phone-width field;
     with the placeholder now "Search" there is room, and keeping it means
     this bar matches the field shown from 900px up. Widths in this band
     include small desktop windows, where the shortcut does work. */

  /* The bar replaces the header row rather than stacking under it, so the
     page does not jump by 64px when it opens. */
  body.search-is-open .header:not(.header--search) {
    display: none !important;
  }

  body.search-is-open .header.header--search .search-container {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
    position: static !important;
    width: auto !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  body.search-is-open .header.header--search input[type="search"] {
    width: 100% !important;
    color: #212647;
  }

  /* The theme's own `.close` (~6883) is a white x on a dark bar and is not
     in the markup anyway; this is the button added in header.hbs. */
  .header--search__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    color: #212647;
  }

  [dir] .header--search__close {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  .header--search__close:hover,
  .header--search__close:focus {
    color: #4568F3;
  }
}

/* At 900px and up the reveal can never open, so make sure a stale body
   class from a resize cannot hide the real header. */
@media (min-width: 900px) {
  body.search-is-open .header:not(.header--search) {
    display: block !important;
  }
}