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

body {
  margin: 0;
}

main {
  display: block;
}

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

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

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

a {
  background-color: transparent;
}

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

b,
strong {
  font-weight: bolder;
}

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

small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

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

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

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

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

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

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

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

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

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

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

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

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

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

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined", sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: inherit;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  color: currentColor;
  user-select: none;
  pointer-events: none;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
}
.material-symbols-outlined.sm {
  font-size: 18px;
  line-height: 18px;
  padding: 0;
}

.icon-filled {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20;
}

/***** Base *****/
:root {
  --shadow-elevation-low: 0 1px 8px rgba(20, 20, 20, 0.08), 0 0 1px rgba(20, 20, 20, 0.12);
  --shadow-elevation-medium: 0 4px 12px 2px rgba(20, 20, 20, 0.08), 0 0 1px rgba(20, 20, 20, 0.12);
}

* {
  box-sizing: border-box;
}

body {
  -webkit-user-select: none;
  user-select: none;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
input,
textarea,
button,
label {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

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

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

h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

h4 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

h5 {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

h6 {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

a {
  color: #373bc1;
  text-decoration: none;
}
a:visited {
  color: #9358B0;
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}

.hbs-form input,
.hbs-form textarea,
.search input,
.search textarea {
  color: #000;
  font-size: 16px;
}
.hbs-form input,
.search input {
  max-width: 100%;
  box-sizing: border-box;
  transition: border 0.12s ease-in-out;
  /* We use the :where selector to not increase the specificity of the selector */
}
.hbs-form input:where(:not([type=checkbox])),
.search input:where(:not([type=checkbox])) {
  outline: none;
}
.hbs-form input:where(:not([type=checkbox])):focus,
.search input:where(:not([type=checkbox])):focus {
  border: 1px solid #373bc1;
}
.hbs-form input[disabled],
.search input[disabled] {
  background-color: #ddd;
}
.hbs-form select,
.search select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") no-repeat #fff;
  background-position: right 16px center;
  border: 1px solid #E6E9EB;
  border-radius: 8px;
  box-sizing: border-box;
  color: #131214;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  min-height: 48px;
  outline: none;
  padding: 0 44px 0 16px;
  width: 100%;
}
.hbs-form select:hover,
.search select:hover {
  border-color: #DADDDE;
}
.hbs-form select:focus,
.search select:focus {
  border-color: #373BC1;
  box-shadow: 0 0 0 1px #373BC1;
  outline: none;
}
.hbs-form select::-ms-expand,
.search select::-ms-expand {
  display: none;
}
.hbs-form .hc-multiselect select,
.search .hc-multiselect select {
  all: revert;
}
.hbs-form textarea,
.search textarea {
  border: 1px solid #848F99;
  border-radius: 2px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}
.hbs-form textarea:focus,
.search textarea:focus {
  border: 1px solid #373bc1;
}

input:focus {
  border: 2px solid #373bc1;
}

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

.container-divider {
  margin-bottom: 20px;
}

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

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

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

/***** Button variants *****/
.button-large, .outlined, .text, .soft-primary, .filled-primary {
  appearance: none;
  align-items: center;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  justify-content: center;
  line-height: 1.2;
  min-height: 48px;
  padding: 0 24px;
  transition: background-color 0.15s ease-in-out;
  user-select: none;
  white-space: nowrap;
  gap: 8px;
}
.button-large:hover, .outlined:hover, .text:hover, .soft-primary:hover, .filled-primary:hover, .button-large:active, .outlined:active, .text:active, .soft-primary:active, .filled-primary:active {
  text-decoration: none;
}

.filled-primary {
  background-color: #373BC1;
  color: #FFFFFF !important;
}
.filled-primary:visited {
  color: #FFFFFF;
}
.filled-primary:hover {
  background-color: #2E32A8;
}
.filled-primary:active {
  background-color: #2E32A8;
}

.soft-primary {
  background-color: #DDE0FB;
  color: #2E32A8 !important;
}
.soft-primary:visited {
  color: #2E32A8;
}
.soft-primary:hover {
  background-color: #BCC2F5;
}
.soft-primary:active {
  background-color: #8F98EA;
}

.text {
  background-color: transparent !important;
  color: #2E32A8;
}
.text:visited {
  color: #2E32A8;
}
.text:hover {
  background-color: #DDE0FB !important;
}
.text:active {
  background-color: #BCC2F5 !important;
}
.text:focus {
  box-shadow: 0 0 0 2px rgba(55, 59, 193, 0.8);
  outline: none;
}

.outlined {
  background-color: #ffffff;
  border: 1px solid #BCC2F5;
  color: #2E32A8;
}
.outlined:visited {
  color: #2E32A8;
}
.outlined:hover {
  background-color: #DDE0FB;
  border-color: #BCC2F5;
}
.outlined:active {
  background-color: #BCC2F5;
  border-color: #BCC2F5;
}
.outlined:focus-visible {
  outline: 2px solid #373BC1;
  outline-offset: 2px;
}
.outlined[data-disabled], .outlined:disabled {
  border-color: #DADDDE;
  color: #898D8F;
  pointer-events: none;
}

.full-width {
  width: 100%;
}

.button-large.text {
  min-width: unset;
  color: #2E32A8;
}
.button-large.text:visited {
  color: #2E32A8;
}
.button-large.text:hover {
  background-color: #DDE0FB !important;
  color: #2E32A8;
}
.button-large.text:active {
  background-color: #BCC2F5 !important;
  color: #2E32A8;
}

.sm {
  height: 32px;
  min-height: unset;
  padding: 8px 12px;
}

.md {
  height: 40px;
  min-height: unset;
  padding: 10px 24px;
}

.lg {
  height: 48px;
  min-height: unset;
  padding: 10px 24px;
}

.icon-only {
  border-radius: 9999px;
  min-height: unset;
}
.icon-only, .icon-only.lg {
  height: 48px;
  padding: 12px;
  width: 48px;
}
.icon-only.sm {
  height: 32px;
  padding: 8px;
  width: 32px;
}
.icon-only.md {
  height: 40px;
  padding: 8px;
  width: 40px;
}

/***** Buttons *****/
@media (min-width: 768px) {
  .button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
    width: auto;
  }
}
.button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
  background-color: transparent;
  border: 1px solid #2E32A8;
  border-radius: 8px;
  color: #2E32A8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
  padding: 8px 20px;
  text-align: center;
  transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out, color 0.15s ease-in-out;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  -webkit-touch-callout: none;
}
.button:visited, .pagination-next-link:visited, .pagination-prev-link:visited, .pagination-first-link:visited, .pagination-last-link:visited, .subscriptions-subscribe button:visited, .requests-table-toolbar .organization-subscribe button:visited, .community-follow button:visited, .article-subscribe button:visited, .section-subscribe button:visited, .split-button button:visited {
  color: #2E32A8;
}
.button:hover, .pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover, .subscriptions-subscribe button:hover, .requests-table-toolbar .organization-subscribe button:hover, .community-follow button:hover, .article-subscribe button:hover, .section-subscribe button:hover, .split-button button:hover, .button:active, .pagination-next-link:active, .pagination-prev-link:active, .pagination-first-link:active, .pagination-last-link:active, .subscriptions-subscribe button:active, .requests-table-toolbar .organization-subscribe button:active, .community-follow button:active, .article-subscribe button:active, .section-subscribe button:active, .split-button button:active {
  text-decoration: none;
}
.button:focus, .pagination-next-link:focus, .pagination-prev-link:focus, .pagination-first-link:focus, .pagination-last-link:focus, .subscriptions-subscribe button:focus, .requests-table-toolbar .organization-subscribe button:focus, .community-follow button:focus, .article-subscribe button:focus, .section-subscribe button:focus, .split-button button:focus {
  background-color: #FFFFFF;
  text-decoration: none;
}
.button.button-primary, .button-primary.pagination-next-link, .button-primary.pagination-prev-link, .button-primary.pagination-first-link, .button-primary.pagination-last-link, .subscriptions-subscribe button.button-primary, .subscriptions-subscribe button[data-selected=true], .requests-table-toolbar .organization-subscribe button.button-primary, .requests-table-toolbar .organization-subscribe button[data-selected=true], .community-follow button.button-primary, .article-subscribe button.button-primary, .article-subscribe button[data-selected=true], .section-subscribe button.button-primary, .section-subscribe button[data-selected=true], .split-button button.button-primary, .split-button button:hover {
  background-color: #373BC1;
  border-color: #373BC1;
  color: #FFFFFF;
}
.button.button-primary:visited, .button-primary.pagination-next-link:visited, .button-primary.pagination-prev-link:visited, .button-primary.pagination-first-link:visited, .button-primary.pagination-last-link:visited, .subscriptions-subscribe button.button-primary:visited, .subscriptions-subscribe button[data-selected=true]:visited, .requests-table-toolbar .organization-subscribe button.button-primary:visited, .requests-table-toolbar .organization-subscribe button[data-selected=true]:visited, .community-follow button.button-primary:visited, .article-subscribe button.button-primary:visited, .article-subscribe button[data-selected=true]:visited, .section-subscribe button.button-primary:visited, .section-subscribe button[data-selected=true]:visited, .split-button button.button-primary:visited, .split-button button:visited:hover {
  color: #FFFFFF;
}
.button.button-primary:hover, .button-primary.pagination-next-link:hover, .button-primary.pagination-prev-link:hover, .button-primary.pagination-first-link:hover, .button-primary.pagination-last-link:hover, .subscriptions-subscribe button.button-primary:hover, .subscriptions-subscribe button[data-selected=true]:hover, .requests-table-toolbar .organization-subscribe button.button-primary:hover, .requests-table-toolbar .organization-subscribe button[data-selected=true]:hover, .community-follow button.button-primary:hover, .article-subscribe button.button-primary:hover, .article-subscribe button[data-selected=true]:hover, .section-subscribe button.button-primary:hover, .section-subscribe button[data-selected=true]:hover, .split-button button:hover, .button.button-primary:focus, .button-primary.pagination-next-link:focus, .button-primary.pagination-prev-link:focus, .button-primary.pagination-first-link:focus, .button-primary.pagination-last-link:focus, .subscriptions-subscribe button.button-primary:focus, .subscriptions-subscribe button[data-selected=true]:focus, .requests-table-toolbar .organization-subscribe button.button-primary:focus, .requests-table-toolbar .organization-subscribe button[data-selected=true]:focus, .community-follow button.button-primary:focus, .article-subscribe button.button-primary:focus, .article-subscribe button[data-selected=true]:focus, .section-subscribe button.button-primary:focus, .section-subscribe button[data-selected=true]:focus, .split-button button.button-primary:focus {
  background-color: #2E32A8;
  border-color: #2E32A8;
  color: #FFFFFF;
}
.button.button-primary:active, .button-primary.pagination-next-link:active, .button-primary.pagination-prev-link:active, .button-primary.pagination-first-link:active, .button-primary.pagination-last-link:active, .subscriptions-subscribe button.button-primary:active, .subscriptions-subscribe button[data-selected=true]:active, .requests-table-toolbar .organization-subscribe button.button-primary:active, .requests-table-toolbar .organization-subscribe button[data-selected=true]:active, .community-follow button.button-primary:active, .article-subscribe button.button-primary:active, .article-subscribe button[data-selected=true]:active, .section-subscribe button.button-primary:active, .section-subscribe button[data-selected=true]:active, .split-button button.button-primary:active, .split-button button:active:hover {
  background-color: #2E32A8;
  border-color: #2E32A8;
  color: #FFFFFF;
}
.button[data-disabled], [data-disabled].pagination-next-link, [data-disabled].pagination-prev-link, [data-disabled].pagination-first-link, [data-disabled].pagination-last-link, .subscriptions-subscribe button[data-disabled], .requests-table-toolbar .organization-subscribe button[data-disabled], .community-follow button[data-disabled], .article-subscribe button[data-disabled], .section-subscribe button[data-disabled], .split-button button[data-disabled] {
  cursor: default;
}

.button-large {
  font-size: inherit;
  padding: 10px 1.9286em;
  height: 48px;
  box-sizing: border-box;
  width: auto;
}
.button-large:visited {
  color: #FFFFFF;
}
.button-large:hover, .button-large:focus {
  background-color: #2E32A8;
}
.button-large:active {
  background-color: #2E32A8;
}
.button-large[disabled] {
  background-color: #DADDDE;
  color: #898D8F;
}

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

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

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

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

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

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

.form-field label {
  color: #2E32A8;
  display: block;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.form-field input {
  border: 1px solid #E6E9EB;
  border-radius: 8px;
  color: #131214;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  min-height: 48px;
  padding: 16px;
  width: 100%;
}
.form-field input::placeholder {
  color: #898D8F;
}
.form-field input:hover {
  border-color: #DADDDE;
}
.form-field input:focus {
  border-color: #373BC1;
  box-shadow: 0 0 0 1px #373BC1;
  outline: none;
}
.form-field input:disabled {
  background-color: #DADDDE;
  border-color: #C1C4C6;
  color: #898D8F;
}

.form-field input[type=text] {
  border: 1px solid #E6E9EB;
  border-radius: 8px;
}
.form-field input[type=text]:hover {
  border-color: #DADDDE;
}
.form-field input[type=text]:focus {
  border-color: #373BC1;
  box-shadow: 0 0 0 1px #373BC1;
  outline: none;
}

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

.form-field .nesty-input {
  border: 1px solid #E6E9EB;
  border-radius: 8px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  min-height: 48px;
  line-height: 48px;
  outline: none;
  padding: 0 44px 0 16px;
  width: 100%;
}
.form-field .nesty-input:hover {
  border-color: #DADDDE;
}
.form-field .nesty-input:focus {
  border-color: #373BC1;
  box-shadow: 0 0 0 1px #373BC1;
  outline: none;
  text-decoration: none;
}

.form-field .hc-multiselect-toggle {
  border: 1px solid #E6E9EB;
  border-radius: 8px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  min-height: 48px;
  outline: none;
  padding: 0 44px 0 16px;
  width: 100%;
}
.form-field .hc-multiselect-toggle:hover {
  border-color: #DADDDE;
}
.form-field .hc-multiselect-toggle:focus {
  border-color: #373BC1;
  box-shadow: 0 0 0 1px #373BC1;
  outline: none;
  text-decoration: none;
}

.form-field textarea {
  border: 1px solid #E6E9EB;
  border-radius: 8px;
  vertical-align: middle;
}
.form-field textarea:hover {
  border-color: #DADDDE;
}
.form-field textarea:focus {
  border-color: #373BC1;
  box-shadow: 0 0 0 1px #373BC1;
  outline: none;
}

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

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

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

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

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

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

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

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

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

.logo a {
  display: inline-block;
}

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

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

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

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

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

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

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

/***** Header frame (section/category page card) *****/
.header-frame {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #E6E9EB;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px;
  padding: 24px;
}
.header-frame-name {
  color: #131214;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}
.header-frame-description {
  color: #53575A;
  font-size: 14px;
  margin: 0;
}

/***** User info in header *****/
.user-info {
  display: inline-block;
}
@media (min-width: 768px) {
  .user-info .dropdown-toggle::after {
    display: inline-block;
  }
}
.user-info .dropdown-toggle::after {
  display: none;
}
.user-info > button {
  border: 0;
  color: #373bc1;
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: #373bc1;
  background-color: transparent;
}
.user-info > button::after {
  color: #373bc1;
  padding-right: 15px;
}
[dir=rtl] .user-info > button::after {
  padding-left: 15px;
  padding-right: 0;
}

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

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

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

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

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

/***** Breadcrumbs *****/
@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
  display: flex;
}
.breadcrumbs li {
  display: flex;
  align-items: center;
  color: #46424a;
  font-size: 12px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.breadcrumbs li + li::before {
  content: ">";
  margin: 0 4px;
  flex-shrink: 0;
}
.breadcrumbs li a:visited {
  color: #373bc1;
}

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

.hero-search-container {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-bottom: 40px;
  margin-top: 20px;
  width: 100%;
  box-sizing: border-box;
}

.hero-search-input-wrapper {
  flex: 1 1 auto;
  position: relative;
}
.hero-search-input-wrapper .search {
  width: 100%;
}

.hero-search-submit {
  flex: none;
}

.search {
  border-color: #E6E9EB;
  border-radius: 8px;
  border-style: solid;
  border-width: 1px;
  display: flex;
  position: relative;
  transition: border 0.12s ease-in-out;
}
.search:hover {
  border-color: #DADDDE;
}
.search:focus-within {
  border-color: #373BC1;
  box-shadow: 0 0 0 1px #373BC1;
}
.search input[type=search],
.search .clear-button {
  background-color: #fff;
  border-radius: 8px;
  border: none;
}
.search-full input[type=search], .search-full .clear-button {
  border-color: #fff;
}
.search input[type=search] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  color: #131214;
  flex: 1 1 auto;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  min-height: 48px;
  width: 100%;
}
.search input[type=search]:focus {
  color: #131214;
}
.search input[type=search]::-webkit-search-decoration, .search input[type=search]::-webkit-search-cancel-button, .search input[type=search]::-webkit-search-results-button, .search input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
.search input[type=search]:-webkit-autofill, .search input[type=search]:-webkit-autofill:hover, .search input[type=search]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
.search .clear-button {
  align-items: center;
  box-sizing: border-box;
  color: #777;
  cursor: pointer;
  display: none;
  flex: none;
  justify-content: center;
  padding: 0 15px;
  transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
}
.search .clear-button .material-symbols-outlined {
  display: flex;
}
.search .clear-button:hover {
  background-color: #2E32A8;
  color: #fff;
}
.search .clear-button:active {
  background-color: #2E32A8;
  color: #fff;
}
.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #373bc1;
}
.search-has-value .clear-button {
  display: flex;
}

[dir=ltr] .search input[type=search] {
  padding-left: 40px;
  padding-right: 20px;
}
[dir=ltr] .search-has-value input[type=search] {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}
[dir=ltr] .search-has-value input[type=search]:focus {
  border-right-color: #373bc1;
}
[dir=ltr] .search .clear-button {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}
[dir=ltr] .search .clear-button:focus {
  border-left-color: #373bc1;
}

[dir=rtl] .search input[type=search] {
  padding-left: 20px;
  padding-right: 40px;
}
[dir=rtl] .search-has-value input[type=search] {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}
[dir=rtl] .search-has-value input[type=search]:focus {
  border-left-color: #373bc1;
}
[dir=rtl] .search .clear-button {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}
[dir=rtl] .search .clear-button:focus {
  border-right-color: #373bc1;
}

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

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

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

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

.sub-nav-title {
  color: #131214;
  font-size: 18px;
  font-weight: 700;
  left: 50%;
  margin: 0;
  pointer-events: none;
  position: absolute;
  text-align: center;
  transform: translateX(-50%);
  white-space: nowrap;
}

/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
}
.blocks-item {
  background-color: #fff;
  border: 1px solid #E6E9EB;
  border-radius: 16px;
  box-sizing: border-box;
  color: #131214;
  cursor: pointer;
  display: flex;
  flex: 1 0 100%;
  margin: 0 0 12px;
  max-width: 100%;
  text-align: left;
  transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.1s ease-in-out;
}
.blocks-item:hover {
  border-color: #373BC1;
  box-shadow: 0 0 0 1px #373BC1;
}
.blocks-item:hover * {
  text-decoration: none;
}
.blocks-item:focus-within {
  border-color: #373BC1;
  box-shadow: 0 0 0 1px #373BC1;
  outline: none;
}
.blocks-item:active {
  background-color: #f0f0fb;
  border-color: #2E32A8;
  box-shadow: 0 0 0 1px #2E32A8;
}
.blocks-item:active * {
  text-decoration: none;
}
.blocks-item-internal {
  background-color: transparent;
  border: 1px solid #E6E9EB;
}
.blocks-item-internal .icon-lock {
  height: 15px;
  width: 15px;
  bottom: 5px;
  position: relative;
}
.blocks-item-internal a {
  color: #131214;
}
.blocks-item-link {
  align-items: center;
  border-radius: inherit;
  color: #131214;
  display: flex;
  flex: 1;
  flex-direction: row;
  gap: 16px;
  justify-content: space-between;
  padding: 20px 24px;
  position: relative;
}
.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active {
  color: inherit;
  text-decoration: none;
}
.blocks-item-link:focus {
  outline: none;
  text-decoration: none;
}
.blocks-item-icon {
  font-size: 24px;
  flex: none;
  opacity: 0.5;
  color: inherit;
}
.blocks-item-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.blocks-item-title {
  color: #131214;
  display: block;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 0;
}
.blocks-item-description {
  color: #6e7375;
  display: block;
  font-size: 14px;
  font-weight: 400;
  margin: 0;
}
.blocks-item-description:not(:empty) {
  margin-top: 6px;
}

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

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

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

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

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

/***** Recent activity *****/
.recent-activity-header {
  margin-bottom: 10px;
  text-align: center;
}
.recent-activity-list {
  padding: 0;
}
.recent-activity-item {
  border-bottom: 1px solid #E6E9EB;
  overflow: auto;
  padding: 20px 0;
}
.recent-activity-item h3 {
  margin: 0;
}
.recent-activity-item-parent {
  font-size: 18px;
  font-weight: 600;
}
@media (min-width: 768px) {
  .recent-activity-item-parent, .recent-activity-item-link {
    width: 70%;
    margin: 0;
  }
}
.recent-activity-item-parent, .recent-activity-item-link {
  margin: 6px 0;
  display: inline-block;
  width: 100%;
}
.recent-activity-item-link {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-activity-item-meta {
  color: #131214;
}
@media (min-width: 768px) {
  .recent-activity-item-meta {
    margin: 0;
    float: right;
  }
  [dir=rtl] .recent-activity-item-meta {
    float: left;
  }
}
.recent-activity-item-meta {
  margin: 15px 0 0 0;
  float: none;
}
.recent-activity-item-time, .recent-activity-item-comment {
  display: inline-block;
  font-size: 12px;
}
.recent-activity-item-comment {
  padding-left: 5px;
}
[dir=rtl] .recent-activity-item-comment {
  padding: 0 5px 0 0;
}
.recent-activity-item-comment::before {
  display: inline-block;
}
.recent-activity-controls {
  padding-top: 15px;
}
.recent-activity-controls a {
  color: #373bc1;
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: #9358B0;
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: #0F3554;
}
.recent-activity-accessibility-label {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.recent-activity-comment-icon svg {
  vertical-align: middle;
  color: #373bc1;
  width: 16px;
  height: 16px;
}
.recent-activity-comment-icon:after {
  content: attr(data-comment-count);
  margin-left: 3px;
}
[dir=rtl] .recent-activity-comment-icon:after {
  margin-left: 0;
  margin-right: 3px;
}

/***** Category pages *****/
.category-container {
  display: flex;
  justify-content: center;
  margin: 0 8px;
}
.category-content {
  flex: 1;
  max-width: 100%;
}

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

.article-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #E6E9EB;
}
.article-list-item:first-child {
  border-top: none;
}
.article-list-item .article-link-icon {
  margin-left: auto;
  flex-shrink: 0;
}
.article-list-link {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #131214;
  flex: 1;
}

/***** Section pages *****/
.section-container {
  display: flex;
  justify-content: center;
  margin: 0 8px;
}
.section-content {
  flex: 1;
  max-width: 100%;
}
.section-list {
  margin: 40px 0;
}

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

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

/***** Article *****/
.article {
  /*
  * The article grid is defined this way to optimize readability:
  * Sidebar | Content | Free space
  * 17%     | 66%     | 17%
  */
}
@media (min-width: 1024px) {
  .article {
    flex: 1 0 100%;
    min-width: 640px;
    padding: 0 30px;
  }
}
.article {
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .article-container {
    flex-direction: row;
  }
}
.article-container {
  display: flex;
  flex-direction: column;
  margin: 0 8px;
}
@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}
.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 40px;
  margin-top: 20px;
}
.article-avatar {
  margin-right: 10px;
}
.article-author {
  margin-bottom: 10px;
}
.article-title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (min-width: 768px) {
  .article-title {
    flex-basis: 100%;
    /* Take entire row */
  }
}
.article-title .icon-lock {
  position: relative;
  left: -5px;
  vertical-align: baseline;
}
@media (min-width: 768px) {
  .article [role=button] {
    width: auto;
  }
}
.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%;
}
.article-info {
  max-width: 100%;
}
.article-meta {
  display: inline-block;
  vertical-align: middle;
}
.article-body a {
  color: #373bc1;
  text-decoration: underline;
}
.article-body a:visited {
  color: #9358B0;
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: #0F3554;
}
.article-body {
  display: flow-root;
}
.article-body img {
  height: auto;
  max-width: 100%;
}
.article-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figure.image {
  display: table;
  margin: 0 auto;
}
.article-body figure.image > img {
  display: block;
  width: 100%;
}
.article-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.article-body ul,
.article-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .article-body ul,
[dir=rtl] .article-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.article-body ul > ul,
.article-body ol > ol,
.article-body ol > ul,
.article-body ul > ol,
.article-body li > ul,
.article-body li > ol {
  margin: 0;
}
.article-body ul {
  list-style-type: disc;
}
.article-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #E6E9EB;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: #f7f7f7;
  border: 1px solid #E6E9EB;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.article-body blockquote {
  border-left: 1px solid #E6E9EB;
  color: #46424a;
  font-style: italic;
  padding: 0 15px;
}
.article-body > p:last-child {
  margin-bottom: 0;
}
.article-content {
  line-height: 1.6;
  margin: 40px 0;
  word-wrap: break-word;
}
.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.article-comment-count {
  color: #46424a;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: #373bc1;
  width: 18px;
  height: 18px;
}
@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    flex: 0 0 17%;
    height: auto;
    max-width: 17%;
  }
}
.article-sidebar {
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 768px) {
  .article-relatives {
    flex-direction: row;
  }
}
.article-relatives {
  border-top: 1px solid #E6E9EB;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}
.article-relatives > * {
  flex: 1 0 50%;
  min-width: 50%;
  overflow-wrap: break-word;
  margin-right: 0;
}
.article-relatives > *:last-child {
  padding: 0;
}
@media (min-width: 768px) {
  .article-relatives > * {
    padding-right: 20px;
  }
}
.article-votes {
  border-top: 1px solid #E6E9EB;
  padding: 30px 0;
  text-align: center;
}
.article-votes-question {
  font-size: 16px;
  font-weight: normal;
  margin-bottom: 0;
}
.article-vote {
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}
.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}
.article-more-questions a {
  color: #373bc1;
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: #9358B0;
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: #0F3554;
}
.article-return-to-top {
  display: flex;
  justify-content: center;
}
@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}
.article-return-to-top .article-return-to-top-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8pxpx;
  color: #2E32A8;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  background-color: transparent;
  transition: background-color 0.12s ease-in-out;
}
.article-return-to-top .article-return-to-top-link .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}
.article-return-to-top .article-return-to-top-link:hover, .article-return-to-top .article-return-to-top-link:focus {
  background-color: #DDE0FB;
  text-decoration: none;
}
.article-return-to-top-icon {
  transform: rotate(0.5turn);
}
.article td > p:first-child,
.article th > p:first-child {
  margin-top: 0;
}
.article td > p:last-child,
.article th > p:last-child {
  margin-bottom: 0;
}

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

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

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

.upload-dropzone span {
  color: #46424a;
}

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

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

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

.share a {
  color: #46424a;
}
.share a:hover {
  text-decoration: none;
  color: #373bc1;
}
.share a svg {
  height: 18px;
  width: 18px;
  display: block;
}

/***** Comments *****/
/* Styles comments inside articles, posts and requests */
.comment {
  border-bottom: 1px solid #E6E9EB;
  padding: 20px 0;
}
.comment-heading, .recent-articles-title,
.related-articles-title {
  margin-bottom: 5px;
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
}
.comment-overview {
  border-bottom: 1px solid #E6E9EB;
  border-top: 1px solid #E6E9EB;
  padding: 20px 0;
}
.comment-overview p {
  margin-top: 0;
}
.comment-callout {
  color: #46424a;
  display: inline-block;
  font-size: 12px;
  margin-bottom: 0;
}
.comment-callout a {
  color: #373bc1;
  text-decoration: underline;
}
.comment-callout a:visited {
  color: #9358B0;
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: #0F3554;
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: #46424a;
  font-size: 12px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
@media (min-width: 768px) {
  .comment-wrapper.comment-official {
    padding-top: 20px;
  }
}
.comment-wrapper.comment-official {
  border: 1px solid #373bc1;
  padding: 40px 20px 20px;
}
.comment-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .comment-info {
  padding-right: 0;
  padding-left: 20px;
}
.comment-author {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .comment-author {
    justify-content: space-between;
  }
}
.comment-avatar {
  margin-right: 10px;
}
[dir=rtl] .comment-avatar {
  margin-left: 10px;
  margin-right: 0;
}
.comment-avatar.visibility-hidden {
  display: none;
}
.comment-meta {
  flex: 1 1 auto;
}
.comment-labels {
  flex-basis: 100%;
}
@media (min-width: 768px) {
  .comment-labels {
    flex-basis: auto;
  }
}
.comment .status-label:not(.status-label-official) {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .comment .status-label:not(.status-label-official) {
    margin-top: 0;
  }
}
.comment-form {
  display: flex;
  padding-top: 30px;
  word-wrap: break-word;
}
.comment-container {
  width: 100%;
}
@media (min-width: 768px) {
  [dir=ltr] .comment-form-controls {
    text-align: right;
  }
}
.comment-form-controls {
  margin-top: 10px;
  text-align: left;
}
@media (min-width: 1024px) {
  .comment-form-controls input[type=submit] {
    margin-left: 15px;
  }
  [dir=rtl] .comment-form-controls input[type=submit] {
    margin-left: 0;
    margin-right: 15px;
  }
}
.comment-form-controls input[type=submit] {
  margin-top: 15px;
}
.comment-form-controls input[type=checkbox] {
  margin-right: 5px;
}
.comment-form-controls input[type=checkbox] [dir=rtl] {
  margin-left: 5px;
}
.comment-ccs {
  display: none;
}
.comment-ccs + textarea {
  margin-top: 10px;
}
.comment-attachments {
  margin-top: 10px;
}
.comment-attachments a {
  color: #373bc1;
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
}
.comment-body a {
  color: #373bc1;
  text-decoration: underline;
}
.comment-body a:visited {
  color: #9358B0;
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: #0F3554;
}
.comment-body {
  display: flow-root;
}
.comment-body img {
  height: auto;
  max-width: 100%;
}
.comment-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figure.image {
  display: table;
  margin: 0 auto;
}
.comment-body figure.image > img {
  display: block;
  width: 100%;
}
.comment-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.comment-body ul,
.comment-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .comment-body ul,
[dir=rtl] .comment-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.comment-body ul > ul,
.comment-body ol > ol,
.comment-body ol > ul,
.comment-body ul > ol,
.comment-body li > ul,
.comment-body li > ol {
  margin: 0;
}
.comment-body ul {
  list-style-type: disc;
}
.comment-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #E6E9EB;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.comment-body pre {
  background: #f7f7f7;
  border: 1px solid #E6E9EB;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.comment-body blockquote {
  border-left: 1px solid #E6E9EB;
  color: #46424a;
  font-style: italic;
  padding: 0 15px;
}
.comment-body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body img {
  max-width: 100%;
}
.comment-mark-as-solved {
  display: inline-block;
}

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

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

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

.vote-up:hover,
.vote-down:hover {
  color: #373bc1;
}

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

.vote-voted {
  color: #373bc1;
}

.vote-voted:hover {
  color: #2E32A8;
}

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

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

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

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

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

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

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

/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  padding: 0;
}
@media (min-width: 768px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}
.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #E6E9EB;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}
.striped-list-info {
  flex: 2;
}
.striped-list-title {
  color: #373bc1;
  margin-bottom: 10px;
  margin-right: 5px;
}
.striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active {
  text-decoration: underline;
}
.striped-list-title:visited {
  color: #9358B0;
}
.striped-list .meta-group {
  margin: 5px 0;
}
@media (min-width: 768px) {
  .striped-list-count {
    display: flex;
    flex: 1;
    justify-content: space-around;
  }
}
.striped-list-count {
  color: #46424a;
  font-size: 12px;
  justify-content: flex-start;
  text-transform: capitalize;
}
@media (min-width: 768px) {
  .striped-list-count-item::after {
    display: none;
  }
}
.striped-list-count-item::after {
  content: "·";
  display: inline-block;
  padding: 0 5px;
}
.striped-list-count-item:last-child::after {
  display: none;
}
@media (min-width: 768px) {
  .striped-list-number {
    color: #131214;
    display: block;
  }
}
.striped-list-number {
  text-align: center;
}

/***** Chip *****/
.chip, .status-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 9999px;
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  cursor: default;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.chip:hover, .status-label:hover, .chip:active, .status-label:active, .chip:focus, .status-label:focus {
  text-decoration: none;
}

.chip--filled, .status-label {
  background-color: #dde0fb;
  color: #2e32a8;
}
.chip--filled:hover, .status-label:hover {
  background-color: #bcc2f5;
  color: #2e32a8;
}
.chip--filled:active, .status-label:active {
  background-color: #8f98ea;
  color: #2e32a8;
}
.chip--filled.chip--active, .chip--filled.status-label-official, .chip--filled.status-label-pinned, .chip--filled.status-label-featured, .chip--filled.status-label-pending, .chip--filled.status-label-pending-moderation, .chip--active.status-label, .status-label.status-label-official, .status-label.status-label-pinned, .status-label.status-label-featured, .status-label.status-label-pending, .status-label.status-label-pending-moderation {
  background-color: #373bc1;
  color: #fff;
}
.chip--filled.chip--active:hover, .chip--filled.status-label-official:hover, .chip--filled.status-label-pinned:hover, .chip--filled.status-label-featured:hover, .chip--filled.status-label-pending:hover, .chip--filled.status-label-pending-moderation:hover, .chip--active.status-label:hover, .status-label.status-label-official:hover, .status-label.status-label-pinned:hover, .status-label.status-label-featured:hover, .status-label.status-label-pending:hover, .status-label.status-label-pending-moderation:hover {
  background-color: #2e32a8;
  color: #fff;
}
.chip--filled.chip--active:active, .chip--filled.status-label-official:active, .chip--filled.status-label-pinned:active, .chip--filled.status-label-featured:active, .chip--filled.status-label-pending:active, .chip--filled.status-label-pending-moderation:active, .chip--active.status-label:active, .status-label.status-label-official:active, .status-label.status-label-pinned:active, .status-label.status-label-featured:active, .status-label.status-label-pending:active, .status-label.status-label-pending-moderation:active {
  background-color: #25288a;
  color: #fff;
}
.chip--filled.chip--error, .chip--filled.status-label-open, .chip--error.status-label, .status-label.status-label-open {
  background-color: #fef2f2;
  color: #f04a4a;
}
.chip--filled.chip--disabled, .chip--filled.status-label-not-planned, .chip--filled.status-label-closed, .chip--filled.status-label-hold, .chip--disabled.status-label, .status-label.status-label-not-planned, .status-label.status-label-closed, .status-label.status-label-hold, .chip--filled[disabled], [disabled].status-label, .chip--filled[aria-disabled=true], [aria-disabled=true].status-label {
  background-color: #daddde;
  color: #898d8f;
  pointer-events: none;
}

.chip--outlined {
  background-color: #fff;
  border-color: #bcc2f5;
  color: #2e32a8;
}
.chip--outlined:focus {
  border-color: #8f98ea;
}
.chip--outlined.chip--active, .chip--outlined.status-label-official, .chip--outlined.status-label-pinned, .chip--outlined.status-label-featured, .chip--outlined.status-label-pending, .chip--outlined.status-label-pending-moderation {
  background-color: #373bc1;
  border-color: #373bc1;
  color: #fff;
}
.chip--outlined.chip--active:hover, .chip--outlined.status-label-official:hover, .chip--outlined.status-label-pinned:hover, .chip--outlined.status-label-featured:hover, .chip--outlined.status-label-pending:hover, .chip--outlined.status-label-pending-moderation:hover {
  background-color: #2e32a8;
  border-color: #2e32a8;
  color: #fff;
}
.chip--outlined.chip--active:active, .chip--outlined.status-label-official:active, .chip--outlined.status-label-pinned:active, .chip--outlined.status-label-featured:active, .chip--outlined.status-label-pending:active, .chip--outlined.status-label-pending-moderation:active {
  background-color: #25288a;
  border-color: #25288a;
  color: #fff;
}
.chip--outlined.chip--error, .chip--outlined.status-label-open {
  background-color: #fef2f2;
  border-color: #f77c7c;
  color: #f04a4a;
}
.chip--outlined.chip--disabled, .chip--outlined.status-label-not-planned, .chip--outlined.status-label-closed, .chip--outlined.status-label-hold, .chip--outlined[disabled], .chip--outlined[aria-disabled=true] {
  background-color: #daddde;
  border-color: transparent;
  color: #898d8f;
  pointer-events: none;
}

.chip--sm, .status-label {
  padding: 4px 8px;
  font-size: 14px;
}

.chip--leading-icon {
  padding-left: 12px;
}

.chip--trailing-icon {
  padding-right: 12px;
}

.chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
  color: inherit;
  text-decoration: none;
}

/***** Status labels *****/
/*
 * Status labels now use the filled chip design system.
 * .status-label maps to .chip + .chip--filled
 */
@media (max-width: 768px) {
  .status-label-request {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.status-label-solved {
  background-color: #E8FAF0;
  color: #008557;
  border-color: transparent;
}
.status-label-official {
  border-radius: 0;
  margin-right: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .status-label-official {
    border-radius: 0 0 9999px 9999px;
    right: 30px;
    width: auto;
  }
}
[dir=rtl] .status-label-official {
  left: 30px;
  right: auto;
}

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

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

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

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

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

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

.community-badge {
  margin: 2px;
}

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

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

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

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

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

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

/* Sidebar navigation that collapses on mobile */
@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 0;
  }
}
.collapsible-sidebar {
  flex: 1;
  max-height: 45px;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
}
.collapsible-sidebar-title {
  margin-top: 0;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-toggle {
    display: none;
  }
}
.collapsible-sidebar-toggle {
  position: absolute;
  top: 22.5px;
  transform: translateY(-50%);
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
[dir=rtl] .collapsible-sidebar-toggle {
  left: 0;
  right: auto;
}
.collapsible-sidebar-toggle-icon {
  display: block;
  flex-shrink: 0;
  font-size: 20px;
  color: #373BC1;
  transition: transform 0.2s ease-in-out;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-toggle-icon {
    display: none;
  }
}
.collapsible-sidebar-toggle[aria-expanded=false] .chevron-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle[aria-expanded=true] .x-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle:focus-visible {
  outline: 2px solid #373bc1;
  outline-offset: 2px;
  border-radius: 4px;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-body {
    display: block;
  }
}
.collapsible-sidebar-body {
  display: none;
}
.collapsible-sidebar[aria-expanded=true] {
  max-height: none;
}
.collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-body {
  display: block;
}

.collapsible-sidebar {
  max-height: none;
  overflow: visible;
  padding: 0;
  position: static;
  border-bottom: 1px solid #E6E9EB;
}
.collapsible-sidebar .collapsible-sidebar-toggle {
  position: static;
  top: auto;
  transform: none;
  right: auto;
  width: 100%;
  height: auto;
  border-radius: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  transition: box-shadow 0.2s ease;
}
@media (min-width: 1024px) {
  .collapsible-sidebar .collapsible-sidebar-toggle {
    display: flex;
  }
}
.collapsible-sidebar .collapsible-sidebar-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #373BC1;
  border-radius: 4px;
}
.collapsible-sidebar .collapsible-sidebar-toggle[aria-expanded=true] .collapsible-sidebar-toggle-icon {
  transform: rotate(-180deg);
}
.collapsible-sidebar .collapsible-sidebar-title {
  font-size: 18px;
  font-weight: 700;
  color: #131214;
  margin: 0;
}
.collapsible-sidebar .collapsible-sidebar-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
@media (min-width: 1024px) {
  .collapsible-sidebar .collapsible-sidebar-body {
    grid-template-rows: 1fr;
  }
}
.collapsible-sidebar .collapsible-sidebar-body-inner {
  overflow: hidden;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  transition: padding-top 0.3s ease, padding-bottom 0.3s ease;
}
.collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-body {
  grid-template-rows: 1fr;
}

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

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

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

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

.no-activities {
  color: #46424a;
}

/***** Request *****/
.request-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
.request-container .comment-container {
  min-width: 0;
}
@media (min-width: 1024px) {
  .request-container {
    align-items: flex-start;
    flex-direction: row;
  }
}
@media (min-width: 1024px) {
  .request-breadcrumbs {
    margin-bottom: 60px;
  }
}
.request-breadcrumbs {
  margin-bottom: 40px;
}
.request-main {
  flex: 1 0 auto;
  order: 1;
}
@media (min-width: 1024px) {
  .request-main {
    flex: 0 0 66%;
    order: 0;
    min-width: 0;
  }
}
.request-main .comment-submit-row {
  margin-top: 12px;
}
.request-main .comment-submit-row input[type=submit] {
  width: auto;
}
.request-main .comment-ccs {
  display: block;
}
.request-main .comment-show-container {
  border-radius: 2px;
  border: 1px solid #E6E9EB;
  color: #46424a;
  text-align: inherit;
  padding: 8px 25px;
  width: 100%;
}
.request-main .comment-show-container.hidden {
  display: none;
}
.request-main .form-field.comment-ccs > ul {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.request-main .form-field.comment-ccs > ul[data-hc-focus=true] {
  border: 1px solid #373bc1;
}
.request-main .form-field.comment-ccs > input[type=text] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.request-main .comment-ccs + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}
.request-main .comment-ccs + textarea:focus {
  border-top: 1px solid #373bc1;
}
.request-main input#mark_as_solved {
  display: none;
}
.request-main .awaiting-reply-notice {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0px;
  margin: 4px 0 0;
  font-size: 12px;
  font-style: italic;
  color: #898D8F;
  text-align: right;
}
.request-main .has-awaiting-reply .comment--customer:last-child .awaiting-reply-notice {
  display: block;
}
.request-main {
  /***** Chat-style comments (request page) *****/
}
.request-main .comment-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 16px 0;
  margin: 0;
}
.request-main .comment {
  border-bottom: none;
  padding: 0;
}
.request-main .comment .comment-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  position: relative;
}
.request-main .comment .comment-avatar {
  flex-shrink: 0;
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
}
.request-main .comment .comment-avatar .user-avatar {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 50%;
}
.request-main .comment .comment-avatar .icon-agent {
  display: none;
}
.request-main .comment .comment-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 75%;
}
.request-main .comment .comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.request-main .comment .comment-author-name {
  font-weight: 600;
  color: #131214;
}
.request-main .comment .comment-bubble {
  padding: 12px 16px;
  border-radius: 16px;
}
.request-main .comment .comment-bubble .comment-body {
  overflow-x: auto;
}
.request-main .comment--agent .comment-wrapper {
  flex-direction: row;
  justify-content: flex-start;
}
.request-main .comment--agent .comment-bubble {
  background-color: #F4F6F7;
  border-radius: 0 16px 16px 16px;
}
.request-main .comment--customer .comment-wrapper {
  flex-direction: row-reverse;
  justify-content: flex-start;
}
.request-main .comment--customer .comment-content {
  align-items: flex-end;
}
.request-main .comment--customer .comment-header {
  flex-direction: row-reverse;
}
.request-main .comment--customer .comment-bubble {
  background-color: #DDE0FB;
  border-radius: 16px 16px 0 16px;
}
@media (min-width: 1024px) {
  .request-title {
    margin-bottom: 0;
    max-width: 66%;
  }
}
.request-title {
  width: 100%;
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .request-sidebar {
    border-radius: 8px;
    border: 0;
    font-size: 12px;
    flex: 0 0 auto;
    padding: 0 16px;
    margin: 0 0 0 24px;
    width: 30%;
    box-shadow: 0 1px 8px rgba(20, 20, 20, 0.08), 0 0 1px rgba(20, 20, 20, 0.12);
    position: sticky;
    top: 16px;
    align-self: flex-start;
  }
}
.request-sidebar {
  border-bottom: 1px solid #E6E9EB;
  flex: 1 0 auto;
  order: 0;
}
@media (min-width: 1024px) {
  .request-sidebar h2 {
    display: none;
  }
}
.request-sidebar h2 {
  font-size: 16px;
  font-weight: 600;
  position: relative;
}
.request-details {
  border-bottom: 1px solid #E6E9EB;
  font-size: 0;
  margin: 0;
  padding-bottom: 20px;
}
.request-details:last-child {
  border: 0;
}
.request-details dt,
.request-details dd {
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  margin: 12px 0 0 0;
}
.request-details dd {
  padding: 0 10px;
  width: 60%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  overflow: hidden;
}
.request-details dd::after {
  content: "\a";
  white-space: pre;
}
.request-details dt {
  line-break: strict;
  color: #46424a;
  width: 40%;
}
.request-details .request-collaborators {
  display: inline-block;
}
.request-details .mark-as-solved-container {
  width: 100%;
}
.request-attachments dt,
.request-attachments dd {
  width: 100%;
}
.request-attachments dd {
  margin: 10px 0 0 0;
}
.request-form textarea {
  min-height: 120px;
}
.request-follow-up {
  padding-top: 20px;
}

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

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

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

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

.meta-group * {
  display: inline;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.search-result-title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-result-title {
  font-size: 18px;
  margin-bottom: 0;
}
.search-result-votes, .search-result-meta-count {
  color: #46424a;
  font-size: 12px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: #373bc1;
  vertical-align: middle;
  width: 13px;
  height: 13px;
}
[dir=ltr] .search-result-votes, [dir=ltr] .search-result-meta-count {
  margin-left: 20px;
}
[dir=rtl] .search-result-votes, [dir=rtl] .search-result-meta-count {
  margin-right: 20px;
}
.search-result-meta-container {
  color: #666;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .search-result-meta-container {
    flex-direction: row;
    align-items: center;
  }
}
@media (min-width: 1024px) {
  .search-result-meta-container nav {
    flex: 1;
  }
}
@media (min-width: 1024px) {
  [dir=ltr] .search-result-meta-container .meta-data {
    margin-left: 20px;
  }
}
@media (min-width: 1024px) {
  [dir=rtl] .search-result-meta-container .meta-data {
    margin-right: 20px;
  }
}
.search-result-meta-container .meta-data::after {
  content: none;
}
.search-result-breadcrumbs {
  margin: 0;
}
.search-result-description {
  margin-top: 10px;
  margin-bottom: 0;
  word-break: break-word;
}

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

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

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

.notification a {
  color: #158ec2;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/***** WYSIWYG Editor *****/
[data-test-id=zd-wysiwyg-editor] {
  --ck-color-base-border: #E6E9EB;
  --ck-color-base-focus: #373BC1;
  --ck-color-base-active-focus: #373BC1;
  --ck-color-focus-border: #373BC1;
  --ck-border-radius: 8px;
  --ck-font-face: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --ck-spacing-unit: 1em;
  --ck-color-toolbar-background: transparent;
  --ck-color-base-foreground: #131214;
  --ck-content-font-color: #131214;
  --ck-focus-ring: none;
  --ck-color-base-active: #DADDDE;
}
[data-test-id=zd-wysiwyg-editor]:hover {
  border-color: #DADDDE;
}
[data-test-id=zd-wysiwyg-editor]:has(.ck-focused) {
  border-color: #373BC1;
  box-shadow: 0 0 0 2px rgba(55, 59, 193, 0.8);
  border-radius: var(--ck-border-radius);
}
[data-test-id=zd-wysiwyg-editor]:has([aria-invalid=true]):has(.ck-focused) {
  border-color: #F04A4A;
  box-shadow: 0 0 0 2px #F04A4A;
  border-radius: var(--ck-border-radius);
}
[data-test-id=zd-wysiwyg-editor] .ck.ck-toolbar__grouped-dropdown .ck-button.ck-on .ck-icon_inherit-color * {
  fill: currentColor !important;
}
[data-test-id=zd-wysiwyg-editor] .ck.ck-editor__main > .ck-editor__editable:not(.ck-focused) {
  border: none;
}
[data-test-id=zd-wysiwyg-editor] .ck.ck-sticky-panel {
  border-bottom: 1px solid #E6E9EB;
}
[data-test-id=zd-wysiwyg-editor] .ck.ck-editor__editable:not(.ck-editor__nested-editable) {
  padding-right: 96px;
}
.wysiwyg-send-wrapper:not(:has(.wysiwyg-send-btn)) [data-test-id=zd-wysiwyg-editor] .ck.ck-editor__editable:not(.ck-editor__nested-editable) {
  padding-right: 48px;
}
.wysiwyg-send-wrapper:not(:has(.wysiwyg-attach-btn)):not(:has(.wysiwyg-send-btn)) [data-test-id=zd-wysiwyg-editor] .ck.ck-editor__editable:not(.ck-editor__nested-editable) {
  padding-right: revert;
}
[data-test-id=zd-wysiwyg-editor] .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
[data-test-id=zd-wysiwyg-editor] .ck.ck-editor__editable:not(.ck-editor__nested-editable) > .ck-placeholder::before {
  color: #898D8F;
}
[data-test-id=zd-wysiwyg-editor] .ck-button {
  --ck-color-button-on-background: #373BC1;
  --ck-color-button-on-color: #FFFFFF;
  --ck-color-button-on-border: #373BC1;
  --ck-color-button-on-active-background: #2E32A8;
  --ck-color-button-on-disabled-background: #DADDDE;
  --ck-color-button-on-disabled-color: #898D8F;
  --ck-color-button-on-disabled-border: transparent;
  --ck-color-button-off-hover-border: #DADDDE;
}
[data-test-id=zd-wysiwyg-editor] .ck-button.ck-off:not([role=menuitemradio]):not(:disabled):hover {
  background: #DDE0FB;
  border-color: #DDE0FB;
  color: #2E32A8;
}
[data-test-id=zd-wysiwyg-editor] .ck.ck-splitbutton {
  border-radius: var(--ck-border-radius);
}
[data-test-id=zd-wysiwyg-editor] .ck.ck-splitbutton:not(:disabled):hover {
  background: #DDE0FB;
  border-color: #DDE0FB;
  color: #2E32A8;
  border: none;
}
[data-test-id=zd-wysiwyg-editor] .ck.ck-splitbutton:not(:disabled):hover .ck.ck-button:not(:disabled) {
  border-color: #DDE0FB;
  color: #2E32A8;
}

.wysiwyg-send-wrapper textarea {
  padding-right: 96px;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.wysiwyg-send-wrapper textarea:focus {
  outline: none !important;
  box-shadow: none !important;
}
.wysiwyg-send-wrapper:has(textarea:focus) {
  border-color: #373BC1;
  box-shadow: 0 0 0 2px rgba(55, 59, 193, 0.8);
}
.wysiwyg-send-wrapper:not(:has(.wysiwyg-send-btn)) textarea {
  padding-right: 48px;
}
.wysiwyg-send-wrapper:not(:has(.wysiwyg-attach-btn)):not(:has(.wysiwyg-send-btn)) textarea {
  padding-right: revert;
}

.wysiwyg-send-wrapper {
  position: relative;
  border: 1px solid #E6E9EB;
  border-radius: 8px;
  overflow: hidden;
}
.wysiwyg-send-wrapper .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content {
  border: 0;
}
.wysiwyg-send-wrapper:has(.ck-focused) {
  border-color: #373BC1;
  box-shadow: 0 0 0 2px rgba(55, 59, 193, 0.8);
}
.wysiwyg-send-wrapper [data-test-id=zd-wysiwyg-editor] {
  border: none !important;
  box-shadow: none !important;
}
.wysiwyg-send-wrapper [data-test-id=zd-wysiwyg-editor] .ck.ck-editor__main {
  border: none;
}
.wysiwyg-send-wrapper [data-test-id=zd-wysiwyg-editor] .ck.ck-editor__editable:not(.ck-editor__nested-editable) {
  max-height: 200px;
  overflow-y: auto;
}

.wysiwyg-attachments {
  position: relative;
  min-height: 56px;
}
.wysiwyg-attachments .upload-dropzone,
.wysiwyg-attachments input[type=file] {
  display: none;
}
.wysiwyg-attachments:has(.upload-item) {
  padding: 8px 12px 56px;
}
.wysiwyg-attachments .wysiwyg-attach-btn {
  position: absolute;
  bottom: 8px;
  right: 56px;
  z-index: 2;
}
.wysiwyg-attachments:not(:has(.wysiwyg-send-btn)) .wysiwyg-attach-btn {
  right: 8px;
}
.wysiwyg-attachments .wysiwyg-send-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 2;
}
.wysiwyg-attachments ul:not([data-garden-id]) {
  display: contents;
}
.wysiwyg-attachments li.upload-item {
  display: none !important;
}
.wysiwyg-attachments:has(.chip, .status-label) {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
}
.wysiwyg-attachments .chip, .wysiwyg-attachments .status-label {
  max-width: 220px;
}

/***** Upload Dropzone *****/
.upload-dropzone {
  border-radius: 8px;
  border: 1px dashed #E6E9EB;
}
.upload-dropzone:hover {
  border-color: #DADDDE;
  background-color: #f4f5fe;
  color: #373BC1;
}

/***** Top App Bar *****/
.top-app-bar {
  background-color: #ffffff;
  width: 100%;
  box-sizing: border-box;
}
.top-app-bar__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #373BC1;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  text-decoration: none;
}
.top-app-bar__action:focus {
  outline: none;
}
.top-app-bar__action .material-symbols-outlined {
  font-size: 24px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-app-bar__title {
  color: #131214;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
}

.top-app-bar--center {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 64px;
  padding: 0 8px;
  gap: 4px;
}
.top-app-bar--center .top-app-bar__action--left {
  justify-self: start;
}
.top-app-bar--center .top-app-bar__action--right {
  justify-self: end;
}
.top-app-bar--center .top-app-bar__title {
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
}

.top-app-bar--left {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 16px 16px 16px 8px;
  gap: 8px;
}
.top-app-bar--left.top-app-bar--no-leading {
  padding-left: 16px;
}
.top-app-bar--left .top-app-bar__title {
  font-size: 18px;
  line-height: 1.2;
  flex: 1;
}
.top-app-bar--left .top-app-bar__action--right {
  margin-left: auto;
  flex-shrink: 0;
}

.top-app-bar--large .top-app-bar__nav {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 12px 8px;
  gap: 8px;
}
.top-app-bar--large .top-app-bar__nav:has(.top-app-bar__action--right) {
  padding-right: 16px;
}
.top-app-bar--large .top-app-bar__nav .top-app-bar__action--right {
  margin-left: auto;
}
.top-app-bar--large .top-app-bar__headline {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 0 16px 16px;
}
.top-app-bar--large.top-app-bar--no-nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 16px 0;
}
.top-app-bar--large.top-app-bar--no-nav .top-app-bar__headline {
  padding: 0;
}
.top-app-bar--large .top-app-bar__title {
  font-size: 32px;
  line-height: 1.2;
}
.top-app-bar--large .top-app-bar__caption {
  font-size: 12px;
  color: #46424a;
  line-height: 1.4;
}

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

.service-catalog-hero {
  background-image: url(/hc/theming_assets/01KGMB5NBEHNSDNBM6R0G276ZS);
  margin-bottom: 10px;
  height: 320px;
}
.service-catalog-description a {
  color: #373bc1;
  text-decoration: underline;
}
.service-catalog-description a:visited {
  color: #9358B0;
}
.service-catalog-description a:hover, .service-catalog-description a:active, .service-catalog-description a:focus {
  color: #0F3554;
}
.service-catalog-description {
  display: flow-root;
}
.service-catalog-description img {
  height: auto;
  max-width: 100%;
}
.service-catalog-description p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.service-catalog-description p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.service-catalog-description p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.service-catalog-description p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.service-catalog-description figure.image {
  display: table;
  margin: 0 auto;
}
.service-catalog-description figure.image > img {
  display: block;
  width: 100%;
}
.service-catalog-description figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.service-catalog-description figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.service-catalog-description figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.service-catalog-description figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.service-catalog-description figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.service-catalog-description ul,
.service-catalog-description ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .service-catalog-description ul,
[dir=rtl] .service-catalog-description ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.service-catalog-description ul > ul,
.service-catalog-description ol > ol,
.service-catalog-description ol > ul,
.service-catalog-description ul > ol,
.service-catalog-description li > ul,
.service-catalog-description li > ol {
  margin: 0;
}
.service-catalog-description ul {
  list-style-type: disc;
}
.service-catalog-description :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #E6E9EB;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.service-catalog-description pre {
  background: #f7f7f7;
  border: 1px solid #E6E9EB;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.service-catalog-description blockquote {
  border-left: 1px solid #E6E9EB;
  color: #46424a;
  font-style: italic;
  padding: 0 15px;
}
.service-catalog-main-content {
  display: flex;
  gap: 32px;
}
.service-catalog-list {
  width: 100%;
}
.service-catalog-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ==========================================================================
   Veesion — request page customizations (consolidated 2026-06-04)
   Single source of truth for the chat-style composer, message bubbles and
   header. Supersedes the earlier iterative appends. Pairs with the inline JS
   in templates/request_page.hbs (auto-grow + send visibility + Cmd/Ctrl+Enter
   + Details toggle).
   ========================================================================== */

/* --- Sticky reply composer (pinned to viewport bottom) --- */
.request-main .comment-form {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: #FFFFFF;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 24px -12px rgba(20, 23, 26, 0.18);
}
.request-main .comment-form .comment-container {
  max-width: 780px;  /* a touch narrower than the 820px conversation column */
  margin-left: auto;
  margin-right: auto;
}
.request-container {
  padding-bottom: 96px;
}

/* Anchor a short conversation to the bottom (chat-style): few messages sit just
   above the composer instead of floating at the top with a big empty gap. */
.request-main {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 128px);
}
.request-main .comment-list {
  margin-top: auto;
}

/* --- Center the conversation column ---
   The page is a 2-column layout (main + details sidebar). The collapsed
   sidebar still reserved its right column, pushing the conversation to the
   left with empty space on the right. Collapse to a single column and center
   the conversation at the same 820px width as the composer. */
.request-container {
  display: block !important;
}
.request-main {
  width: 100% !important;
  max-width: none !important;
}
.request-main .comment-list,
.request-main .vsn-request-header,
.request-main .top-app-bar {
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* collapsed details panel stacks below (full width) only when opened */
.request-sidebar {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.request-main .comment-form .comment-section-title {  /* visually hidden, kept for a11y */
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.request-main .comment-list {
  padding-bottom: 16px;
}

/* --- Editor: pill, ~1 line at rest, smooth auto-grow (height set by JS) --- */
.request-main .wysiwyg-send-wrapper {
  border-radius: 24px;
  /* G2-continuous (squircle/superellipse) corners instead of a plain circular arc.
     Falls back to a normal round 24px corner where corner-shape isn't supported. */
  corner-shape: superellipse(4);
}
.request-main .wysiwyg-send-wrapper .ck-editor__editable,
.request-main .wysiwyg-send-wrapper .ck-editor__editable_inline,
.request-main .wysiwyg-send-wrapper .ck-content {
  min-height: 46px !important;   /* one line tall enough to hold the inline 36px controls (Telegram row) */
}
.request-main .wysiwyg-send-wrapper [data-test-id=zd-wysiwyg-editor] .ck.ck-editor__editable:not(.ck-editor__nested-editable) {
  max-height: 40vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: height 200ms ease !important;
  padding: 4px 14px !important;
}

/* --- WhatsApp-style controls: attach bottom-left, send bottom-right --- */
.request-main .wysiwyg-attachments .wysiwyg-attach-btn {
  left: 8px;
  right: auto;
}
.request-main .wysiwyg-attachments .wysiwyg-send-btn {
  left: auto;
  right: 8px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #373BC1 !important;
  color: #FFFFFF !important;
  opacity: 0;                /* hidden until there's content; JS sets inline opacity/transform */
  transform: scale(0.85);
  pointer-events: none;
  transition: opacity 160ms ease-out, transform 160ms ease-out !important;
}
.request-main .wysiwyg-attachments .wysiwyg-send-btn:hover {
  background: #2E32A8 !important;
}
.request-main .wysiwyg-attachments .wysiwyg-send-btn .material-symbols-outlined {
  color: #FFFFFF !important;
  font-size: 20px;
}

/* --- Message bubbles: agent left (grey), customer right (indigo), both snug --- */
/* The wrapper is the row; the content column hugs its side and the bubble shrinks
   to its text via align-items (NOT width:fit-content, which char-wraps on a flex column). */
.request-main .comment .comment-wrapper {
  display: flex !important;
  align-items: flex-end !important;   /* avatar sits beside the bubble's last line */
  gap: 8px;
  width: 100%;
}
.request-main .comment--customer .comment-wrapper {
  flex-direction: row-reverse;        /* no avatar → content hugs the right edge */
}
.request-main .comment .comment-content {
  display: flex !important;
  flex-direction: column !important;
  max-width: 78% !important;
  width: auto !important;             /* override the old agent width:100% */
  min-width: 0;
}
.request-main .comment--agent .comment-content   { align-items: flex-start !important; margin-right: auto; }
.request-main .comment--customer .comment-content { align-items: flex-end !important;  margin-left: auto; }
.request-main .comment--customer .comment-header  { text-align: right; }
.request-main .comment .comment-bubble {
  padding: 8px 12px !important;
  max-width: 100%;
}
.request-main .comment--agent .comment-bubble    { border-radius: 16px 16px 16px 2px !important; }
.request-main .comment--customer .comment-bubble { border-radius: 16px 16px 2px 16px !important; }
.request-main .comment .comment-bubble .comment-body p:first-child { margin-top: 0 !important; }
.request-main .comment .comment-bubble .comment-body p:last-child { margin-bottom: 0 !important; }
/* ticket message text smaller (16 → 14) */
.request-main .comment .comment-bubble .comment-body,
.request-main .comment .comment-bubble .comment-body p { font-size: 14px; }
/* The conversation column. CRITICAL: .request-main is display:flex (bottom-anchor), so
   .comment-list is a flex ITEM — its base `margin:0 auto` would SHRINK it to content width
   and centre it (bubbles end up centre-ish, can't reach the edges). Force it to fill the
   column (width:100% capped at 820, centred) so agent→left / customer→right actually separate.
   Use margin-left/right (NOT shorthand) to preserve the margin-top:auto bottom-anchor. */
.request-main .comment-list {
  width: 100%;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding-left: 8px;    /* tighter left gutter → agent bubble + avatar use more width (avatar centered, see below) */
  padding-right: 14px;  /* keep the right gutter so the customer bubble (no avatar) isn't flush to the edge */
}
/* keep the name+time header compact and on the bubble's side (don't stretch full width) */
.request-main .comment-header { width: auto !important; flex-wrap: wrap; column-gap: 8px; row-gap: 0; }
.request-main .comment--customer .comment-header { justify-content: flex-end; }

/* --- Header: smaller title + round "i" Details button (top-right) --- */
.vsn-request-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  text-align: left !important;
  /* Persistent on scroll so the title + ⓘ stay reachable (the page auto-scrolls to the
     latest message; without this the header — and the ⓘ — scroll off the top on mobile). */
  position: sticky;
  top: 0;
  z-index: 50;
  background: #FFFFFF;
  border-bottom: 1px solid #EDEFF1;
  /* GPU-promote so iOS WKWebView keeps repainting the header during momentum scroll
     (without this its content can vanish mid-scroll on the device — a known sticky glitch). */
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
/* The empty global footer sits BELOW .container and adds scroll height past it, which lets the
   sticky header detach when scrolling to the very bottom. Hide it on the request page only
   (scoped via :has so every other page keeps its footer). */
body:has(.vsn-request-header) .footer { display: none; }
/* iOS rubber-band: when you overscroll past the bottom, the scroll exceeds its max and the
   bounce drags the sticky header off-screen (the title vanishes during the "spring"). Killing
   the vertical overscroll bounce on this page keeps the header pinned. Scoped via :has. */
html:has(.vsn-request-header),
body:has(.vsn-request-header) { overscroll-behavior-y: none; }
.vsn-request-header .top-app-bar__title {
  font-size: 20px !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  flex: 1 1 auto;
  min-width: 0;
  /* Clamp the subject to 2 lines with an ellipsis. A very long subject (e.g. a long store
     slug like "…— veesion-test-dev-cloud-preprod") otherwise makes the sticky header 3+ lines
     tall and — on iOS — the overflowing line collides with the conversation intro below.
     line-clamp + overflow:hidden bounds it so it can never spill into the intro. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Back button (desktop only — on mobile the native app controller handles back) */
.vsn-request-header .vsn-back-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  border: 1px solid #e6e9eb;
  background: #ffffff;
  color: #131214;
  text-decoration: none;
}
.vsn-request-header .vsn-back-btn:hover {
  background: #f4f6f7;
}
.vsn-request-header .vsn-back-btn .material-symbols-outlined {
  font-size: 20px;
}
@media (max-width: 768px) {
  .vsn-request-header .vsn-back-btn {
    display: none !important;
  }
}
.vsn-request-header .vsn-details-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid #E6E9EB;
  background: #FFFFFF;
  color: #373BC1;
  cursor: pointer;
}
.vsn-request-header .vsn-details-btn .material-symbols-outlined {
  font-size: 18px;
}
.vsn-request-header .vsn-details-btn:hover {
  background: #F4F5FB;
}
/* ===== Ticket details: the ⓘ button opens a bottom-sheet MODAL (not an inline panel) =====
   The stock toggle is hidden; the panel lives off-screen and slides up over a backdrop
   when .vsn-details-open is set (by the ⓘ script in request_page.hbs). */
.request-sidebar .collapsible-sidebar-toggle { display: none !important; }

.request-sidebar.collapsible-sidebar {
  position: fixed;
  top: auto;   /* override the desktop sticky `top:16px` so the sheet pins to the bottom */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  max-height: 85vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #FFFFFF;
  border: 0 !important;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 44px rgba(20, 23, 26, 0.22);
  padding: 4px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  visibility: hidden;
  /* slide out, then flip visibility off after the slide finishes */
  transition: transform 0.30s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.30s;
}
.request-sidebar.collapsible-sidebar.vsn-details-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
}
/* grabber handle at the top of the sheet */
.request-sidebar.collapsible-sidebar::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: #DADDDE;
  margin: 8px auto 2px;
}
/* sticky header: localized title + close button (both injected by the script) */
.request-sidebar .vsn-details-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  background: #FFFFFF;
  padding: 6px 0 12px;
  z-index: 1;
}
.request-sidebar .vsn-details-title {
  font-size: 17px;
  font-weight: 700;
  color: #131214;
}
.request-sidebar .vsn-details-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #F4F6F7;
  color: #6E7375;
  cursor: pointer;
}
.request-sidebar .vsn-details-close:hover { background: #E6E9EB; }
.request-sidebar .vsn-details-close .material-symbols-outlined { font-size: 20px; }
/* the panel content is always expanded inside the modal (the sheet handles show/hide) */
.request-sidebar .collapsible-sidebar-body {
  display: block !important;
  max-height: none !important;
  opacity: 1 !important;
  overflow: visible !important;
}
/* status badge: the long localized status (e.g. "En attente de votre réponse") was clipped —
   the mobile rule caps .status-label-request at 150px and text-overflow:ellipsis can't work on
   an inline-flex chip. Let it size to content / wrap instead of hard-clipping. */
.request-sidebar .status-label-request {
  max-width: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.3 !important;
}
/* dim + lock the page behind the sheet */
html.vsn-modal-lock, html.vsn-modal-lock body { overflow: hidden !important; }
.vsn-details-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(19, 18, 20, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}
.vsn-details-backdrop.vsn-show {
  opacity: 1;
  pointer-events: auto;
}

/* (restored in consolidation) collapse the composer editor's outer <p> margins (CKEditor adds 13.5px) so it rests at ~1 line */
.request-main .wysiwyg-send-wrapper .ck-content p:first-child { margin-top: 0 !important; }
.request-main .wysiwyg-send-wrapper .ck-content p:last-child { margin-bottom: 0 !important; }

/* awaiting-reply notice -> clean centered "system chip" below the last message */
.request-main .has-awaiting-reply .comment--customer:last-child {
  position: relative;
}
.request-main .has-awaiting-reply .comment--customer:last-child .awaiting-reply-notice {
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  margin-top: 10px;
  width: max-content;
  max-width: 95vw;
  padding: 6px 14px;
  background: #F1F2F4;
  border-radius: 14px;
  color: #6B7076;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
}
.request-main .has-awaiting-reply .comment--customer:last-child .awaiting-reply-notice::before {
  content: "\2713\00a0";   /* ✓ + nbsp */
  color: #2FA36B;
  font-weight: 700;
}

/* ===== Request list (React/Garden component) — maintainable CSS, STABLE hooks only =====
   The list is built with @zendeskgarden styled-components (hashed classes); only the
   container hooks (.requests-app / .ccd-requests) are stable. We just de-uglify the
   title links (Copenhagen renders them as blue underlined <a>). Cards/pills/tabs are
   Garden-hashed → intentionally NOT targeted (would be brittle). */
.vsn-requests-list a {
  text-decoration: none !important;
  color: #131214 !important;
  font-weight: 600 !important;
}
.vsn-requests-list a:hover {
  color: #373BC1 !important;
}

/* ===== Telegram-style single-row composer: hide toolbar, attach inner-left + send inner-right ===== */
/* hide the entire CKEditor top bar (Paragraph/B/I… toolbar + its border) */
.request-main .wysiwyg-send-wrapper [data-test-id=zd-wysiwyg-editor] .ck.ck-editor__top {
  display: none !important;
}
/* collapse the attachments strip and anchor attach/send onto the editor row (single line),
   both as centered 36px boxes inset enough to clear overflow:hidden + the 20px corners */
.request-main .wysiwyg-send-wrapper { position: relative; }
.request-main .wysiwyg-attachments { position: static !important; min-height: 0 !important; }
.request-main .wysiwyg-attachments .wysiwyg-attach-btn {
  position: absolute; left: 6px; right: auto; bottom: 5px; top: auto;
  width: 36px; height: 36px; min-width: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.request-main .wysiwyg-attachments .wysiwyg-send-btn {
  left: auto; right: 6px; bottom: 5px; top: auto;
}
/* room on both inner edges for the controls; vertical padding centers a single line in the row */
.request-main .wysiwyg-send-wrapper [data-test-id=zd-wysiwyg-editor] .ck.ck-editor__editable:not(.ck-editor__nested-editable) {
  padding: 11px 48px !important;
}

/* ===== Conversation intro: top-of-thread header so a short thread doesn't look empty ===== */
.request-main .vsn-convo-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 16px 16px 22px;
}
.request-main .vsn-convo-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #EEF0FF;
  color: #373BC1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}
.request-main .vsn-convo-avatar .material-symbols-outlined { font-size: 30px; }
.request-main .vsn-convo-name { font-size: 15px; font-weight: 600; color: #131214; }
.request-main .vsn-convo-started { font-size: 12px; color: #6B7076; }

/* ===== Prettier flash notification ("Your reply was successfully added") =====
   Garden React component appended to <body>; targeted via its STABLE data-garden-id
   hooks (notification/global/alert). Refine the card; keep Garden's type colour on the icon. */
[data-garden-id="notifications.notification"],
[data-garden-id="notifications.global"],
[data-garden-id="notifications.alert"] {
  border: 1px solid #E6E9EB !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 28px -12px rgba(20, 23, 26, 0.28) !important;
  background: #FFFFFF !important;
  padding: 12px 14px !important;
  margin: 12px auto !important;
  max-width: 540px !important;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  align-items: center !important;
}
[data-garden-id="notifications.title"] {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #131214 !important;
}
[data-garden-id="notifications.paragraph"] {
  font-size: 14px !important;
  color: #41464B !important;
}
[data-garden-id="notifications.close"] { opacity: 0.55; }
[data-garden-id="notifications.close"]:hover { opacity: 1; }

/* ===== Requests list: "All / Incidents / Requests" segmented control → full width =====
   The React Track (data-test-id="requests-category-filter") is display:inline-flex, so it
   shrinks to its content. Stretch it full-width and let the 3 segments share the row equally.
   Targeted via the component's STABLE data-test-id hooks (no bundle rebuild needed). */
[data-test-id="requests-category-filter"] {
  display: flex !important;
  width: 100% !important;
}
[data-test-id="requests-category-filter"] > [data-test-id^="category-"] {
  flex: 1 1 0 !important;
  min-width: 0;
  text-align: center;
}

/* ============================================================================
   New-request "Help-first / deflection" page (#4) — préprod  [beautified]
   Hero article search above the form; the ticket form is revealed on demand.
   Scoped to .vsn-nr / .vsn-nr-deflect / .vsn-* so it can't leak to other pages.
   ============================================================================ */
.container.vsn-nr { max-width: 640px; }

/* Hero — soft tinted panel with a support badge */
.vsn-hero {
  margin-top: 16px;
  padding: 30px 22px 24px;
  text-align: center;
  background: radial-gradient(120% 140% at 50% 0%, #eef0ff 0%, #f7f8ff 46%, #ffffff 100%);
  border: 1px solid #e7e9ff;
  border-radius: 22px;
}
.vsn-hero__badge {
  width: 52px; height: 52px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  background: linear-gradient(135deg, #5a68ee, #3f4fdb);
  color: #fff; box-shadow: 0 8px 20px rgba(72, 88, 229, 0.35);
}
.vsn-hero__badge svg { width: 26px; height: 26px; }
.vsn-hero__title {
  font-size: 25px; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 6px; color: #131214; line-height: 1.15;
}
.vsn-hero__sub { margin: 0 auto 18px; max-width: 360px; font-size: 14px; color: #53575a; line-height: 1.5; }
.vsn-hero__search { position: relative; display: flex; align-items: center; }
.vsn-hero__icon { position: absolute; left: 17px; width: 19px; height: 19px; color: #898d8f; pointer-events: none; }
.vsn-hero__input {
  width: 100%; height: 54px;
  border: 1px solid #e0e3f0; border-radius: 9999px;
  padding: 0 18px 0 46px;
  font-size: 16px; font-family: inherit; color: #131214; background: #fff;
  outline: none; box-shadow: 0 4px 14px rgba(19, 18, 20, 0.06);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.vsn-hero__input:focus { border-color: #4858e5; box-shadow: 0 0 0 4px rgba(72, 88, 229, 0.15); }
.vsn-hero__input::placeholder { color: #9aa0a6; }

/* Suggested results (inside the hero panel) */
.vsn-deflect { margin-top: 18px; text-align: left; }
.vsn-deflect[hidden] { display: none; }
.vsn-deflect__head {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: #6b7280; margin: 0 2px 9px;
}
.vsn-deflect__count { margin-left: auto; font-size: 11.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #9aa0a6; }
.vsn-deflect__list { display: flex; flex-direction: column; gap: 9px; }
.vsn-art {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid #ebedf2; border-radius: 14px;
  background: #fff; text-decoration: none; color: #131214;
  box-shadow: 0 1px 2px rgba(19, 18, 20, 0.04);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.vsn-art:hover { transform: translateY(-1px); border-color: #c8cdf7; box-shadow: 0 6px 16px rgba(19, 18, 20, 0.08); }
.vsn-art:active { transform: none; background: #f7f8fc; }
.vsn-art__ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  background: #eef0ff; color: #4858e5;
  display: flex; align-items: center; justify-content: center;
}
.vsn-art__ic svg { width: 15px; height: 15px; }
.vsn-art__t { flex: 1 1 auto; font-size: 14px; font-weight: 500; line-height: 1.35; }
.vsn-art__chev { flex: 0 0 auto; color: #c2c8e8; font-size: 18px; }

/* Contact-support affordance */
.vsn-contact-sep {
  display: flex; align-items: center; gap: 12px;
  margin: 24px 0 12px; color: #9aa0a6; font-size: 13px;
}
.vsn-contact-sep::before, .vsn-contact-sep::after { content: ""; flex: 1; height: 1px; background: #e6e9eb; }
.vsn-contact-btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 14px 16px; border: 1px solid #dfe2ff; border-radius: 16px;
  background: #f0f1ff; font-family: inherit; font-size: 15px; font-weight: 600;
  color: #3f4fdb; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, border-color 0.12s;
}
.vsn-contact-btn:hover { background: #e7e9ff; border-color: #c8cdf7; }
.vsn-contact-btn__label { display: flex; align-items: center; gap: 11px; }
.vsn-contact-btn__ic {
  width: 28px; height: 28px; flex: 0 0 auto; border-radius: 9999px;
  background: #4858e5; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.vsn-contact-btn__ic svg { width: 15px; height: 15px; }
.vsn-contact-btn__chev { color: #4858e5; font-size: 18px; }
.vsn-contact-btn--hidden { display: none; }

/* Revealed form */
.vsn-form-wrap { max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.vsn-form-wrap--open { max-height: none; overflow: visible; opacity: 1; pointer-events: auto; margin-top: 12px; }
.vsn-form-title { font-size: 19px; font-weight: 700; margin: 6px 0 14px; color: #131214; }

/* Full-width sticky submit — shared by both new-request variants via .vsn-nr */
.vsn-nr #main-content { padding-bottom: 8px; }
.vsn-nr #new-request-form button[type="submit"] {
  width: 100%; min-height: 50px; border-radius: 12px;
  font-size: 15px; font-weight: 600;
  position: sticky; bottom: 12px; margin-top: 0;
  box-shadow: 0 6px 18px rgba(55, 59, 193, 0.28);
}

/* Description (CKEditor) writing frame — the base theme renders this editor
   borderless on the new-request form. Restore a visible frame matching the
   Subject input. Scoped to .vsn-nr-deflect so the request-detail Telegram
   composer (.request-main) is NOT affected. No overflow:hidden (would clip the
   toolbar dropdowns). */
.vsn-nr .ck.ck-editor {
  border: 1px solid #848f99;
  border-radius: 8px;
}
.vsn-nr .ck.ck-editor:focus-within {
  border-color: #4858e5;
  box-shadow: 0 0 0 3px rgba(72, 88, 229, 0.15);
}
.vsn-nr .ck.ck-editor .ck.ck-editor__top,
.vsn-nr .ck.ck-editor .ck.ck-editor__top .ck-toolbar {
  border-bottom: 1px solid #e6e9eb;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.vsn-nr .ck.ck-editor .ck-content {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* ============================================================================
   New-request "Refined form" (#1) — préprod
   Clean single-column form + header; inline Suggested Articles (the React
   showSuggestedArticles feature) styled as a card under the Subject; full-width
   sticky submit. Scoped to .vsn-nr-refined.
   ============================================================================ */
.container.vsn-nr-refined { max-width: 640px; }

.vsn-rf-head { padding: 24px 0 4px; }
.vsn-rf-title {
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 6px; color: #131214; line-height: 1.15;
}
.vsn-rf-sub { margin: 0 0 8px; font-size: 14px; color: #53575a; line-height: 1.5; }

/* Inline Suggested Articles (React showSuggestedArticles, keyed off the Subject)
   styled like the #4 result cards: doc-icon tile + title + chevron, hover lift. */
.vsn-nr-refined [data-test-id="suggested-articles"] { margin-top: -6px; }
.vsn-nr-refined [data-test-id="suggested-articles"] h2 {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: #6b7280; margin: 0 2px 9px;
}
.vsn-nr-refined [data-test-id="suggested-articles"] ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 9px;
}
.vsn-nr-refined [data-test-id="suggested-articles"] li { margin: 0; }
.vsn-nr-refined [data-test-id="suggested-articles"] a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid #ebedf2; border-radius: 14px;
  background: #fff; text-decoration: none; color: #131214;
  font-size: 14px; font-weight: 500; line-height: 1.35;
  box-shadow: 0 1px 2px rgba(19, 18, 20, 0.04);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.vsn-nr-refined [data-test-id="suggested-articles"] a:hover {
  transform: translateY(-1px); border-color: #c8cdf7; color: #131214;
  box-shadow: 0 6px 16px rgba(19, 18, 20, 0.08);
}
/* leading doc-icon tile (inline SVG via data-URI) */
.vsn-nr-refined [data-test-id="suggested-articles"] a::before {
  content: ""; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  background: #eef0ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234858e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E") center / 15px no-repeat;
}
/* hide Garden's external-link glyph; add our own trailing chevron */
.vsn-nr-refined [data-test-id="suggested-articles"] a svg { display: none; }
.vsn-nr-refined [data-test-id="suggested-articles"] a::after {
  content: "\203A"; flex: 0 0 auto; margin-left: auto; color: #c2c8e8; font-size: 18px; line-height: 1;
}
/* Cap the inline list to the 4 most relevant (the React module renders all hits). */
.vsn-nr-refined [data-test-id="suggested-articles"] li:nth-child(n+5) { display: none; }
/* "still need to file?" hint, kept inside the animated inner wrapper */
.vsn-nr-refined [data-test-id="suggested-articles"] > div::after {
  content: "None of these? Just complete the form below.";
  display: block; margin: 12px 2px 0; font-size: 11.5px; color: #898d8f; text-align: center;
}
:lang(fr) .vsn-nr-refined [data-test-id="suggested-articles"] > div::after { content: "Aucun ne convient ? Complétez le formulaire ci-dessous."; }
:lang(de) .vsn-nr-refined [data-test-id="suggested-articles"] > div::after { content: "Nichts dabei? Füllen Sie einfach das Formular unten aus."; }
:lang(es) .vsn-nr-refined [data-test-id="suggested-articles"] > div::after { content: "¿Ninguno te sirve? Completa el formulario a continuación."; }
:lang(it) .vsn-nr-refined [data-test-id="suggested-articles"] > div::after { content: "Nessuno di questi? Compila il modulo qui sotto."; }
:lang(pt) .vsn-nr-refined [data-test-id="suggested-articles"] > div::after { content: "Nenhum destes? Preencha o formulário abaixo."; }

/* Full-width, sticky submit */
.vsn-nr-refined #main-content { padding-bottom: 8px; }
.vsn-nr-refined #new-request-form button[type="submit"] {
  width: 100%; min-height: 50px; border-radius: 12px;
  font-size: 15px; font-weight: 600;
  position: sticky; bottom: 12px; margin-top: 0;
  box-shadow: 0 6px 18px rgba(55, 59, 193, 0.28);
}

/* Hide the redundant green "Your request was successfully submitted" / reply
   toast on the request detail page only — the in-thread "Message received" chip
   already confirms it. Scoped via the request page's .vsn-request-header so
   toasts on other pages are untouched. The flash module appends to <body>. */
body:has(.vsn-request-header) [data-garden-id="notifications.notification"] {
  display: none !important;
}

/* ============================================================================
   Create-request form — Veesion DS V2 styling + #3 "Sectioned" layout
   Sourced from the real DS (~/dev/paddock; see memory veesion-ds-tokens):
   labels muted, inputs 48/radius-8/2px-accent focus, DS card shadow, filled
   submit. Targets stable Garden hooks. Scoped to .vsn-nr-refined (this page).
   Verified live on the sandbox new-request page (2026-06-19).
   ============================================================================ */
/* Remove the "Fields marked with an asterisk (*) are required." line. */
.vsn-nr-refined #new-request-form > p[aria-hidden="true"] { display: none !important; }
/* Remove the Description field's helper text ("Please enter the details…"). */
.vsn-nr-refined [data-garden-id="forms.field"]:has(.ck-editor) [data-garden-id="forms.input_hint"] { display: none !important; }

/* consistent field spacing */
/* The React <form> is already a flex column with a 20px gap; tighten it and
   drop the per-field margin (was double-counting → too much space). */
.vsn-nr-refined #new-request-form form { gap: 16px !important; }
.vsn-nr-refined [data-garden-id="forms.field"] { margin-bottom: 0 !important; }

/* labels → DS muted */
.vsn-nr-refined [data-garden-id="forms.input_label"],
.vsn-nr-refined [data-garden-id="dropdowns.combobox.label"] {
  color: #6E7375 !important; font-weight: 500 !important; font-size: 14px !important;
}
/* hide the redundant "Customer Reason" sub-label (combobox hint) */
.vsn-nr-refined [data-garden-id="dropdowns.combobox.hint"] { display: none !important; }

/* text inputs (Subject / email) → DS TextField */
.vsn-nr-refined [data-garden-id="forms.input"] {
  min-height: 48px !important; border: 1px solid #E6E9EB !important; border-radius: 8px !important;
  background: #fff !important; color: #131214 !important; box-shadow: none !important;
}
.vsn-nr-refined [data-garden-id="forms.input"]:hover { border-color: #DADDDE !important; }
.vsn-nr-refined [data-garden-id="forms.input"]:focus {
  border: 2px solid #4858E5 !important; box-shadow: 0 0 0 4px rgba(72,88,229,.25) !important; outline: none !important;
}

/* Customer Reason combobox → DS */
.vsn-nr-refined [data-garden-id="dropdowns.combobox.input"] {
  min-height: 48px !important; border: 1px solid #E6E9EB !important; border-radius: 8px !important; background: #fff !important;
}
.vsn-nr-refined [data-garden-id="dropdowns.combobox.input"]:focus-within {
  border: 2px solid #4858E5 !important; box-shadow: 0 0 0 4px rgba(72,88,229,.25) !important;
}

/* Description editor → DS frame (DS border colour, overriding the .vsn-nr rule) */
.vsn-nr-refined .ck.ck-editor { border: 1px solid #E6E9EB !important; border-radius: 8px !important; }
.vsn-nr-refined .ck.ck-editor:focus-within {
  border: 2px solid #4858E5 !important; box-shadow: 0 0 0 4px rgba(72,88,229,.25) !important;
}

/* Attachments dropzone → DS */
.vsn-nr-refined [data-garden-id="forms.file_upload"] {
  border: 1.5px dashed #DADDDE !important; border-radius: 8px !important; background: #F4F6F7 !important;
}

/* Submit → DS filled button */
.vsn-nr-refined [data-garden-id="buttons.button"][type="submit"] {
  background: #4858E5 !important; border-radius: 8px !important; min-height: 48px !important; font-weight: 600 !important;
}
.vsn-nr-refined [data-garden-id="buttons.button"][type="submit"]:hover { background: #1F31D1 !important; }

/* Suggested-article cards → DS ListItem card (shadow, no border) */
.vsn-nr-refined [data-test-id="suggested-articles"] a {
  border-color: transparent !important;
  box-shadow: 0 0 .5px rgba(20,20,20,.12), 0 1px 4px rgba(20,20,20,.08) !important;
}

/* ============================================================================
   Theme font → Plus Jakarta Sans (loaded via Google Fonts in document_head).
   Overrides the system -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif/-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif across Curlybars pages AND the
   React/Garden modules (their styled-components set an explicit font, hence
   !important). Code stays monospace; the Material Symbols icon font is kept.
   ============================================================================ */
body, input, textarea, select, button, optgroup,
h1, h2, h3, h4, h5, h6, p, a, li, td, th, label, blockquote, figcaption,
.ck-content, .ck.ck-content {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
[data-garden-id], [class^="sc-"], [class*=" sc-"], [class^="Styled"], [class*=" Styled"] {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
code, pre, kbd, samp, tt, .ck-code_block, .ck-code_block * {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace !important;
}
.material-symbols-outlined { font-family: "Material Symbols Outlined" !important; }


/* ============================================================================
   Request detail page — 3 tweaks (2026-06-19)
   ============================================================================ */
/* 1) Title sat too low: the large header inherits padding:16px 0 from
      .top-app-bar--large.--no-nav. Trim the top space so the subject sits higher. */
.vsn-request-header { padding: 6px 0 8px !important; }

/* 2) Agent (support) reply bubble was capped at 78% like the customer's, leaving
      too much empty space on its right. Let the support side run wider. */
.request-main .comment--agent .comment-content { max-width: 100% !important; }
/* center the agent avatar in the left gutter: edge→avatar (8px column padding) == avatar→bubble
   (margin-right 0 + wrapper gap 8). Drops the default 10px avatar margin so the two sides match. */
.request-main .comment--agent .comment-avatar { margin-right: 0 !important; }

/* 3) ⓘ details: now opens a bottom-sheet MODAL — see the
      ".request-sidebar.collapsible-sidebar" / ".vsn-details-backdrop" block above. */

/* ============================================================================
   New-request: keyboard-glued Action Bar (Piste 3) — attach (left) + Submit (right).
   The native submit stays in the form (native submit + Garden validation) but is
   visually hidden; a fixed bar relays to it. Glued to the iOS keyboard via a
   visualViewport script in new_request_page.hbs. Send label mirrors the platform-
   localized submit text (fallback dict in the template). Scoped to .vsn-nr* / the bar.
   ============================================================================ */
/* hide the native submit (kept functional for relay + native validation) */
.vsn-nr-refined #new-request-form button[type="submit"],
.vsn-nr #new-request-form button[type="submit"] {
  position: absolute !important; width: 1px !important; height: 1px !important;
  min-height: 0 !important; padding: 0 !important; margin: -1px !important; border: 0 !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; box-shadow: none !important;
}
/* room so the last field isn't hidden behind the fixed bar */
.vsn-nr-refined #main-content { padding-bottom: 92px !important; }

.vsn-nr-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #FFFFFF; border-top: 1px solid #E6E9EB;
  box-shadow: 0 -10px 24px -12px rgba(20, 23, 26, 0.18);
  will-change: transform;
  transform: translateZ(0);      /* stable GPU layer: no shadow re-paint jank during scroll */
  backface-visibility: hidden;
}
.vsn-nr-bar .vsn-nr-attach {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: #EEF0FF; color: #373BC1; border: 1px solid #E6E9EB;
}
.vsn-nr-bar .vsn-nr-attach:hover { background: #E2E4F9; }
.vsn-nr-bar .vsn-nr-attach svg { width: 22px; height: 22px; }
.vsn-nr-bar .vsn-nr-send {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: none;
  min-height: 44px; padding: 0 22px; border-radius: 22px; corner-shape: superellipse(4);
  background: #373BC1; color: #FFFFFF; font-family: inherit; font-weight: 700; font-size: 15px;
  box-shadow: 0 6px 18px -6px rgba(55, 59, 193, 0.45);
}
.vsn-nr-bar .vsn-nr-send:hover { background: #2E32A8; }
.vsn-nr-bar .vsn-nr-send svg { width: 18px; height: 18px; }
.vsn-nr-bar .vsn-nr-send[disabled] { background: #C7C9E8; box-shadow: none; cursor: default; }