@charset "UTF-8";
/***** Normalize.css *****/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
main {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}
a {
  background-color: transparent;
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img {
  border-style: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}
[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
details {
  display: block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none;
}
/***** Base *****/
* {
  box-sizing: border-box;
}
body {
  background-color: #F8F7FC;
  color: #1E1E2F;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  margin-top: 0;
}
h1 {
  font-size: 32px;
}
h2 {
  font-size: 22px;
}
h3 {
  font-size: 18px;
  font-weight: 600;
}
h4 {
  font-size: 16px;
}
a {
  color: #5B2D8E;
  text-decoration: none;
}
a:visited {
  color: #A87FD4;
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}
.hbs-form input,
.hbs-form textarea, .search input,
.search textarea {
  color: #000;
  font-size: 14px;
}
.hbs-form input, .search input {
  max-width: 100%;
  box-sizing: border-box;
  transition: border 0.12s ease-in-out;
  /* We use the :where selector to not increase the specificity of the selector */
}
.hbs-form input:where(:not([type=checkbox])), .search input:where(:not([type=checkbox])) {
  outline: none;
}
.hbs-form input:where(:not([type=checkbox])):focus, .search input:where(:not([type=checkbox])):focus {
  border: 1px solid #5B2D8E;
}
.hbs-form input[disabled], .search input[disabled] {
  background-color: #ddd;
}
.hbs-form select, .search select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") no-repeat #fff;
  background-position: right 10px center;
  border: 1px solid #848F99;
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: #555;
  width: 100%;
}
.hbs-form select:focus, .search select:focus {
  border: 1px solid #5B2D8E;
}
.hbs-form select::-ms-expand, .search select::-ms-expand {
  display: none;
}
.hbs-form textarea, .search textarea {
  border: 1px solid #848F99;
  border-radius: 2px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}
.hbs-form textarea:focus, .search textarea:focus {
  border: 1px solid #5B2D8E;
}
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}
@media (min-width: 1160px) {
  .container {
    padding: 0;
    width: 90%;
  }
}
.container-divider {
  border-top: 1px solid #ddd;
  margin-bottom: 20px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.error-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}
@media (min-width: 1160px) {
  .error-page {
    padding: 0;
    width: 90%;
  }
}
.visibility-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
/***** Buttons *****/
.button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
  background-color: transparent;
  border: 1px solid #5B2D8E;
  border-radius: 4px;
  color: #5B2D8E;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  line-height: 2.34;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out, color 0.15s ease-in-out;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  -webkit-touch-callout: none;
}
@media (min-width: 768px) {
  .button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
    width: auto;
  }
}
.button:visited, .pagination-next-link:visited, .pagination-prev-link:visited, .pagination-first-link:visited, .pagination-last-link:visited, .subscriptions-subscribe button:visited, .requests-table-toolbar .organization-subscribe button:visited, .community-follow button:visited, .article-subscribe button:visited, .section-subscribe button:visited, .split-button button:visited {
  color: #5B2D8E;
}
.button:hover, .pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover, .subscriptions-subscribe button:hover, .requests-table-toolbar .organization-subscribe button:hover, .community-follow button:hover, .article-subscribe button:hover, .section-subscribe button:hover, .split-button button:hover, .button:active, .pagination-next-link:active, .pagination-prev-link:active, .pagination-first-link:active, .pagination-last-link:active, .subscriptions-subscribe button:active, .requests-table-toolbar .organization-subscribe button:active, .community-follow button:active, .article-subscribe button:active, .section-subscribe button:active, .split-button button:active, .button:focus, .pagination-next-link:focus, .pagination-prev-link:focus, .pagination-first-link:focus, .pagination-last-link:focus, .subscriptions-subscribe button:focus, .requests-table-toolbar .organization-subscribe button:focus, .community-follow button:focus, .article-subscribe button:focus, .section-subscribe button:focus, .split-button button:focus, .button.button-primary, .button-primary.pagination-next-link, .button-primary.pagination-prev-link, .button-primary.pagination-first-link, .button-primary.pagination-last-link, .subscriptions-subscribe button.button-primary, .subscriptions-subscribe button[data-selected=true], .requests-table-toolbar .organization-subscribe button.button-primary, .requests-table-toolbar .organization-subscribe button[data-selected=true], .community-follow button.button-primary, .article-subscribe button.button-primary, .article-subscribe button[data-selected=true], .section-subscribe button.button-primary, .section-subscribe button[data-selected=true], .split-button button.button-primary {
  background-color: #5B2D8E;
  color: #FFFFFF;
  text-decoration: none;
}
.button.button-primary:hover, .button-primary.pagination-next-link:hover, .button-primary.pagination-prev-link:hover, .button-primary.pagination-first-link:hover, .button-primary.pagination-last-link:hover, .subscriptions-subscribe button.button-primary:hover, .subscriptions-subscribe button[data-selected=true]:hover, .requests-table-toolbar .organization-subscribe button.button-primary:hover, .requests-table-toolbar .organization-subscribe button[data-selected=true]:hover, .community-follow button.button-primary:hover, .article-subscribe button.button-primary:hover, .article-subscribe button[data-selected=true]:hover, .section-subscribe button.button-primary:hover, .section-subscribe button[data-selected=true]:hover, .split-button button:hover, .button.button-primary:focus, .button-primary.pagination-next-link:focus, .button-primary.pagination-prev-link:focus, .button-primary.pagination-first-link:focus, .button-primary.pagination-last-link:focus, .subscriptions-subscribe button.button-primary:focus, .subscriptions-subscribe button[data-selected=true]:focus, .requests-table-toolbar .organization-subscribe button.button-primary:focus, .requests-table-toolbar .organization-subscribe button[data-selected=true]:focus, .community-follow button.button-primary:focus, .article-subscribe button.button-primary:focus, .article-subscribe button[data-selected=true]:focus, .section-subscribe button.button-primary:focus, .section-subscribe button[data-selected=true]:focus, .split-button button.button-primary:focus, .button.button-primary:active, .button-primary.pagination-next-link:active, .button-primary.pagination-prev-link:active, .button-primary.pagination-first-link:active, .button-primary.pagination-last-link:active, .subscriptions-subscribe button.button-primary:active, .subscriptions-subscribe button[data-selected=true]:active, .requests-table-toolbar .organization-subscribe button.button-primary:active, .requests-table-toolbar .organization-subscribe button[data-selected=true]:active, .community-follow button.button-primary:active, .article-subscribe button.button-primary:active, .article-subscribe button[data-selected=true]:active, .section-subscribe button.button-primary:active, .section-subscribe button[data-selected=true]:active, .split-button button.button-primary:active {
  background-color: #291441;
  border-color: #291441;
}
.button[data-disabled], [data-disabled].pagination-next-link, [data-disabled].pagination-prev-link, [data-disabled].pagination-first-link, [data-disabled].pagination-last-link, .subscriptions-subscribe button[data-disabled], .requests-table-toolbar .organization-subscribe button[data-disabled], .community-follow button[data-disabled], .article-subscribe button[data-disabled], .section-subscribe button[data-disabled], .split-button button[data-disabled] {
  cursor: default;
}
.button-large, .hbs-form input[type=submit] {
  cursor: pointer;
  background-color: #5B2D8E;
  border: 0;
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 14px;
  line-height: 2.72;
  min-width: 190px;
  padding: 0 1.9286em;
  width: 100%;
}
@media (min-width: 768px) {
  .button-large, .hbs-form input[type=submit] {
    width: auto;
  }
}
.button-large:visited, .hbs-form input[type=submit]:visited {
  color: #FFFFFF;
}
.button-large:hover, .button-large:active, .button-large:focus, .hbs-form input[type=submit]:hover, .hbs-form input[type=submit]:active, .hbs-form input[type=submit]:focus {
  background-color: #291441;
}
.button-large[disabled], .hbs-form input[type=submit][disabled] {
  background-color: #ddd;
}
.button-secondary {
  color: #46466d;
  border: 1px solid #848F99;
  background-color: transparent;
}
.button-secondary:visited {
  color: #46466d;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: #1E1E2F;
  border: 1px solid #848F99;
  background-color: #eeecf8;
}
/***** Split button *****/
.split-button {
  display: flex;
}
.split-button button {
  background-color: #5B2D8E;
  border: 0;
  color: #FFFFFF;
  height: 32px;
  line-height: 16px;
  outline-color: #5B2D8E;
}
[dir=rtl] .split-button button:not(:only-child):first-child {
  border-left: 1px solid #FFFFFF;
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):first-child {
  border-right: 1px solid #FFFFFF;
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}
.split-button button:not(:only-child):last-child {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  min-width: 26px;
  max-width: 26px;
  padding: 0;
}
[dir=rtl] .split-button button:not(:only-child):last-child {
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):last-child {
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}
/***** Tables *****/
.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
@media (min-width: 768px) {
  .table {
    table-layout: auto;
  }
}
.table th,
.table th a {
  color: #46466d;
  font-size: 13px;
  text-align: left;
}
[dir=rtl] .table th,
[dir=rtl] .table th a {
  text-align: right;
}
.table tr {
  border-bottom: 1px solid #ddd;
  display: block;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .table tr {
    display: table-row;
  }
}
.table td {
  display: block;
}
@media (min-width: 768px) {
  .table td {
    display: table-cell;
  }
}
@media (min-width: 1024px) {
  .table td, .table th {
    padding: 20px 30px;
  }
}
@media (min-width: 768px) {
  .table td, .table th {
    padding: 10px 20px;
    height: 60px;
  }
}
/***** Forms *****/
.form {
  max-width: 650px;
}
.form-field ~ .form-field {
  margin-top: 25px;
}
.form-field label {
  display: block;
  font-size: 13px;
  margin-bottom: 5px;
}
.form-field input {
  border: 1px solid #848F99;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}
.form-field input:focus {
  border: 1px solid #5B2D8E;
}
.form-field input[type=text] {
  border: 1px solid #848F99;
  border-radius: 8px;
}
.form-field input[type=text]:focus {
  border: 1px solid #5B2D8E;
}
.form-field input[type=checkbox] {
  width: auto;
}
.form-field .nesty-input {
  border-radius: 8px;
  border: 1px solid #848F99;
  height: 44px;
  line-height: 44px;
  outline: none;
  vertical-align: middle;
  padding-left: 16px;
  padding-right: 16px;
}
.form-field .nesty-input:focus {
  border: 1px solid #5B2D8E;
  text-decoration: none;
}
.form-field .hc-multiselect-toggle {
  border: 1px solid #848F99;
}
.form-field .hc-multiselect-toggle:focus {
  outline: none;
  border: 1px solid #5B2D8E;
  text-decoration: none;
}
.form-field textarea {
  vertical-align: middle;
}
.form-field input[type=checkbox] + label {
  margin: 0 0 0 10px;
}
.form-field .optional {
  color: #46466d;
  margin-left: 4px;
}
.form-field p {
  color: #46466d;
  font-size: 12px;
  margin: 5px 0;
}
.form footer {
  margin-top: 40px;
  padding-top: 30px;
}
.form footer a {
  color: #46466d;
  cursor: pointer;
  margin-right: 15px;
}
.form .suggestion-list {
  font-size: 13px;
  margin-top: 30px;
}
.form .suggestion-list label {
  border-bottom: 1px solid #ddd;
  display: block;
  padding-bottom: 5px;
}
.form .suggestion-list li {
  padding: 10px 0;
}
.form .suggestion-list li a:visited {
  color: #A87FD4;
}
/***** Header *****/
.header {
  width: 100%;
  position: relative;
}
@media (min-width: 1160px) {
  .header {
    /* no extra overrides needed */
  }
}
.logo img {
  max-height: 37px;
  vertical-align: middle;
}
.logo span {
  margin: 0 10px;
  color: #5B2D8E;
}
.logo a {
  display: inline-block;
}
.logo a:hover, .logo a:focus, .logo a:active {
  text-decoration: none;
}
.user-nav {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .user-nav {
    position: relative;
  }
}
.user-nav[aria-expanded=true] {
  background-color: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  border: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 1;
}
.user-nav[aria-expanded=true] > a {
  display: block;
  margin: 20px;
}
.user-nav[aria-expanded=true] > .user-nav-list li {
  display: block;
}
.user-nav[aria-expanded=true] > .user-nav-list a {
  display: block;
  margin: 20px;
}
.user-nav-list {
  display: block;
  list-style: none;
}
.user-nav-list > li {
  display: inline-block;
}
@media (max-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: inline-block;
  }
}
.nav-wrapper-desktop a {
  border: 0;
  color: #5B2D8E;
  display: none;
  font-size: 14px;
  padding: 0 20px 0 0;
  width: auto;
}
@media (min-width: 768px) {
  .nav-wrapper-desktop a {
    display: inline-block;
  }
}
[dir=rtl] .nav-wrapper-desktop a {
  padding: 0 0 0 20px;
}
.nav-wrapper-desktop a:hover, .nav-wrapper-desktop a:focus, .nav-wrapper-desktop a:active {
  background-color: transparent;
  color: #5B2D8E;
  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: #1E1E2F;
  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: #1E1E2F;
}
.nav-wrapper-mobile .menu-list-mobile-items a:active, .nav-wrapper-mobile .menu-list-mobile-items a:focus, .nav-wrapper-mobile .menu-list-mobile-items a:hover {
  background-color: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile {
  display: flex;
  line-height: 1.5;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile .my-profile-tooltip {
  font-size: 12px;
  color: #68737D;
}
.nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  margin-top: 1px;
}
[dir=rtl] .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  margin-right: 0;
  margin-left: 8px;
}
.skip-navigation {
  align-items: center;
  background-color: black;
  color: white;
  display: flex;
  font-size: 14px;
  justify-content: center;
  left: -999px;
  margin: 20px;
  padding: 20px;
  overflow: hidden;
  position: absolute;
  top: auto;
  z-index: -999;
}
[dir=rtl] .skip-navigation {
  left: initial;
  right: -999px;
}
.skip-navigation:focus, .skip-navigation:active {
  left: auto;
  overflow: auto;
  text-align: center;
  text-decoration: none;
  top: auto;
  z-index: 999;
}
[dir=rtl] .skip-navigation:focus, [dir=rtl] .skip-navigation:active {
  left: initial;
  right: auto;
}
#zd-modal-container ~ .skip-navigation {
  display: none;
}
/***** User info in header *****/
.user-info {
  display: inline-block;
}
.user-info .dropdown-toggle::after {
  display: none;
}
@media (min-width: 768px) {
  .user-info .dropdown-toggle::after {
    display: inline-block;
  }
}
.user-info > button {
  border: 0;
  color: #5B2D8E;
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: #5B2D8E;
  background-color: transparent;
}
.user-info > button::after {
  color: #5B2D8E;
  padding-right: 15px;
}
[dir=rtl] .user-info > button::after {
  padding-left: 15px;
  padding-right: 0;
}
#user #user-name {
  display: none;
  font-size: 14px;
}
@media (min-width: 768px) {
  #user #user-name {
    display: inline-block;
  }
}
#user #user-name:hover {
  text-decoration: underline;
}
/***** User avatar *****/
.user-avatar {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}
.avatar {
  display: inline-block;
  position: relative;
}
.avatar img {
  height: 40px;
  width: 40px;
}
.avatar .icon-agent {
  color: #5B2D8E;
  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 (base spacing — colors/layout finalized further down) *****/
.footer {
  border-top: 0;
  margin-top: 60px;
}
.footer a {
  color: #46466d;
}
@media (min-width: 1160px) {
  .footer-inner {
    padding: 0;
    width: 90%;
  }
}
.footer-language-selector button {
  color: #46466d;
  display: inline-block;
}
.powered-by-zendesk a,
.powered-by-zendesk a:visited {
  color: #46466d;
}
/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
  display: flex;
}
@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}
.breadcrumbs li {
  color: #46466d;
  font-size: 13px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.breadcrumbs li + li::before {
  content: ">";
  margin: 0 8px;
}
.breadcrumbs li a:visited {
  color: #5B2D8E;
}
/***** Search field *****/
.search-container {
  position: relative;
}
.search {
  border-color: #848F99;
  border-radius: 30px;
  border-style: solid;
  border-width: 1px;
  display: flex;
  position: relative;
  transition: border 0.12s ease-in-out;
}
.search:focus-within {
  border-color: #5B2D8E;
}
.search input[type=search],
.search .clear-button {
  background-color: #fff;
  border-radius: 30px;
  border: none;
}
.search-full input[type=search], .search-full .clear-button {
  border-color: #fff;
}
.search input[type=search] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  color: #666;
  flex: 1 1 auto;
  height: 40px;
  width: 100%;
}
.search input[type=search]:focus {
  color: #555;
}
.search input[type=search]::-webkit-search-decoration, .search input[type=search]::-webkit-search-cancel-button, .search input[type=search]::-webkit-search-results-button, .search input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
.search input[type=search]:-webkit-autofill, .search input[type=search]:-webkit-autofill:hover, .search input[type=search]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
.search .clear-button {
  align-items: center;
  box-sizing: border-box;
  color: #777;
  cursor: pointer;
  display: none;
  flex: none;
  justify-content: center;
  padding: 0 15px;
}
.search .clear-button:hover {
  background-color: #5B2D8E;
  color: #fff;
}
.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #5B2D8E;
}
.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: #5B2D8E;
}
[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: #5B2D8E;
}
[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: #5B2D8E;
}
[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: #5B2D8E;
}
.search-icon {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  left: 15px;
  z-index: 1;
  width: 18px;
  height: 18px;
  color: #777;
  pointer-events: none;
}
[dir=rtl] .search-icon {
  left: auto;
  right: 15px;
}
/***** Hero component *****/
.hero {
  background-image: url($homepage_background_image);
  background-position: center;
  background-size: cover;
  height: 300px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}
.hero-inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-width: 610px;
  margin: 0 auto;
}
.page-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 10px 0;
}
@media (min-width: 768px) {
  .page-header {
    align-items: baseline;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
  }
}
.page-header .section-subscribe {
  flex-shrink: 0;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .page-header .section-subscribe {
    margin-bottom: 0;
  }
}
.page-header h1 {
  flex-grow: 1;
  margin-bottom: 10px;
}
.page-header-description {
  font-style: italic;
  margin: 0 0 30px 0;
  word-break: break-word;
}
@media (min-width: 1024px) {
  .page-header-description {
    flex-basis: 100%;
  }
}
.page-header .icon-lock {
  height: 20px;
  width: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}
.sub-nav {
  align-items: baseline;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 15px 30px;
  justify-content: space-between;
  margin-bottom: 55px;
}
@media (min-width: 768px) {
  .sub-nav {
    flex-direction: row;
  }
}
.sub-nav .breadcrumbs {
  margin: 0;
}
.sub-nav .search-container {
  max-width: 300px;
  width: 100%;
}
@media (min-width: 768px) {
  .sub-nav .search-container {
    flex: 0 1 300px;
  }
}
.sub-nav input[type=search]::after {
  font-size: 15px;
}
/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
}
@media (min-width: 768px) {
  .blocks-list {
    margin: 0 -15px;
  }
}
.blocks-item {
  border: 1px solid #5B2D8E;
  border-radius: 4px;
  box-sizing: border-box;
  color: #5B2D8E;
  display: flex;
  flex: 1 0 340px;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
}
@media (min-width: 768px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  background-color: #5B2D8E;
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: #FFFFFF;
  text-decoration: none;
}
.blocks-item-internal {
  background-color: transparent;
  border: 1px solid #ddd;
}
.blocks-item-internal .icon-lock {
  height: 15px;
  width: 15px;
  bottom: 5px;
  position: relative;
}
.blocks-item-internal a {
  color: #1E1E2F;
}
.blocks-item-link {
  color: #5B2D8E;
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  border-radius: inherit;
}
.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active {
  color: inherit;
  text-decoration: none;
}
.blocks-item-link:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #5B2D8E;
  text-decoration: none;
}
.blocks-item-title {
  margin-bottom: 0;
  font-size: 16px;
}
.blocks-item-description {
  margin: 0;
}
.blocks-item-description:not(:empty) {
  margin-top: 10px;
}
/***** Homepage *****/
.section {
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .section {
    margin-bottom: 60px;
  }
}
.home-section h2 {
  margin-bottom: 10px;
  text-align: center;
}
/***** Promoted articles *****/
.promoted-articles {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
@media (min-width: 1024px) {
  .promoted-articles {
    flex-direction: row;
  }
}
.promoted-articles-item {
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .promoted-articles-item {
    align-self: flex-end;
    flex: 0 0 auto;
    padding-right: 30px;
    width: 33%; /* Three columns on desktop */
  }
  [dir=rtl] .promoted-articles-item {
    padding: 0 0 0 30px;
  }
}
.promoted-articles-item:nth-child(3n) {
  padding-right: 0;
}
.promoted-articles-item a {
  display: block;
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
}
.promoted-articles-item .icon-lock {
  vertical-align: baseline;
}
.promoted-articles-item:last-child a {
  border: 0;
}
@media (min-width: 1024px) {
  .promoted-articles-item:last-child a {
    border-bottom: 1px solid #ddd;
  }
}
/***** Community section in homepage *****/
.community {
  text-align: center;
}
.community-image {
  min-height: 300px;
  margin-top: 32px;
  background-image: url($community_image);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}
.community a {
  color: #5B2D8E;
  text-decoration: underline;
}
.community a:visited {
  color: #A87FD4;
}
.community a:hover, .community a:active, .community a:focus {
  color: #3D1A6E;
}
.community,
.activity {
  border-top: 1px solid #ddd;
  padding: 30px 0;
}
/***** Recent activity *****/
.recent-activity-header {
  margin-bottom: 10px;
  text-align: center;
}
.recent-activity-list {
  padding: 0;
}
.recent-activity-item {
  border-bottom: 1px solid #ddd;
  overflow: auto;
  padding: 20px 0;
}
.recent-activity-item h3 {
  margin: 0;
}
.recent-activity-item-parent {
  font-size: 16px;
  font-weight: 600;
}
.recent-activity-item-parent, .recent-activity-item-link {
  margin: 6px 0;
  display: inline-block;
  width: 100%;
}
@media (min-width: 768px) {
  .recent-activity-item-parent, .recent-activity-item-link {
    width: 70%;
    margin: 0;
  }
}
.recent-activity-item-link {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-activity-item-meta {
  color: #1E1E2F;
  margin: 15px 0 0 0;
  float: none;
}
@media (min-width: 768px) {
  .recent-activity-item-meta {
    margin: 0;
    float: right;
  }
  [dir=rtl] .recent-activity-item-meta {
    float: left;
  }
}
.recent-activity-item-time, .recent-activity-item-comment {
  display: inline-block;
  font-size: 13px;
}
.recent-activity-item-comment {
  padding-left: 5px;
}
[dir=rtl] .recent-activity-item-comment {
  padding: 0 5px 0 0;
}
.recent-activity-item-comment::before {
  display: inline-block;
}
.recent-activity-controls {
  padding-top: 15px;
}
.recent-activity-controls a {
  color: #5B2D8E;
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: #A87FD4;
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: #3D1A6E;
}
.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: #5B2D8E;
  width: 16px;
  height: 16px;
}
.recent-activity-comment-icon:after {
  content: attr(data-comment-count);
  margin-left: 3px;
}
[dir=rtl] .recent-activity-comment-icon:after {
  margin-left: 0;
  margin-right: 3px;
}
/***** Category pages *****/
.category-container {
  display: flex;
  justify-content: flex-end;
}
.category-content {
  flex: 1;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .category-content {
    flex: 0 0 80%;
  }
}
.section-tree {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .section-tree {
    flex-direction: row;
  }
}
.section-tree .section {
  flex: initial;
  max-width: 100%;
}
@media (min-width: 768px) {
  .section-tree .section {
    flex: 0 0 45%; /* Two columns for tablet and desktop. Leaving 5% separation between columns */
  }
}
.section-tree-title {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 600;
}
.section-tree-title a {
  color: #1E1E2F;
}
.section-tree .see-all-articles {
  display: block;
  padding: 15px 0;
}
.article-list-item {
  font-size: 16px;
  padding: 15px 0;
  text-overflow: ellipsis;
  overflow: hidden;
}
.article-list-item a {
  color: #1E1E2F;
}
.icon-star {
  color: #5B2D8E;
  font-size: 18px;
}
/***** Section pages *****/
.section-container {
  display: flex;
  justify-content: flex-end;
}
.section-content {
  flex: 1;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .section-content {
    flex: 0 0 80%;
  }
}
/* Base list spacing/borders — superseded by the card-grid rules further down */
.section-list {
  margin: 40px 0;
}
.section-list-item:first-child {
  border-top: 0;
}
.see-all-sections-trigger {
  cursor: pointer;
  display: block;
  padding: 15px;
  text-align: center;
}
.see-all-sections-trigger[aria-hidden=true] {
  display: none;
}
/***** Article *****/
.article {
  /*
  * The article grid is defined this way to optimize readability:
  * Sidebar | Content | Free space
  * 17%     | 66%     | 17%
  */
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .article {
    flex: 1 0 66%;
    max-width: 66%;
    min-width: 640px;
    padding: 0 30px;
  }
}
.article-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .article-container {
    flex-direction: row;
  }
}
.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
  margin-top: 0;
}
@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}
.article-avatar {
  margin-right: 10px;
}
.article-author {
  margin-bottom: 10px;
}
.article-title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (min-width: 768px) {
  .article-title {
    flex-basis: 100%; /* Take entire row */
  }
}
.article-title .icon-lock {
  position: relative;
  left: -5px;
  vertical-align: baseline;
}
.article [role=button] {
  flex-shrink: 0; /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
  width: 100%;
}
@media (min-width: 768px) {
  .article [role=button] {
    width: auto;
  }
}
.article-info {
  max-width: 100%;
}
.article-meta {
  display: inline-block;
  vertical-align: middle;
}
.article-body {
  display: flow-root;
}
.article-body a {
  color: #5B2D8E;
  text-decoration: underline;
}
.article-body a:visited {
  color: #A87FD4;
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: #3D1A6E;
}
.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: #e8e4f5;
}
.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: #eeecf8;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: #eeecf8;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.article-body blockquote {
  border-left: 1px solid #ddd;
  color: #46466d;
  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: #46466d;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: #5B2D8E;
  width: 18px;
  height: 18px;
}
.article-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    flex: 0 0 17%;
    height: auto;
    max-width: 17%;
  }
}
.article-relatives {
  border-top: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .article-relatives {
    flex-direction: row;
  }
}
.article-relatives > * {
  flex: 1 0 50%;
  min-width: 50%;
  overflow-wrap: break-word;
  margin-right: 0;
}
.article-relatives > *:last-child {
  padding: 0;
}
@media (min-width: 768px) {
  .article-relatives > * {
    padding-right: 20px;
  }
}
.article-votes {
  border-top: 1px solid #ddd;
  padding: 30px 0;
  text-align: center;
}
.article-votes-question {
  font-size: 15px;
  font-weight: normal;
  margin-bottom: 0;
}
.article-vote {
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}
.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}
.article-more-questions a {
  color: #5B2D8E;
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: #A87FD4;
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: #3D1A6E;
}
.article-return-to-top {
  border-top: 1px solid #848F99;
}
@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}
.article-return-to-top a {
  color: #1E1E2F;
  display: block;
  padding: 20px 0;
}
.article-return-to-top a:hover, .article-return-to-top a:focus {
  text-decoration: none;
}
.article-return-to-top-icon {
  transform: rotate(0.5turn);
}
.article td > p:first-child,
.article th > p:first-child {
  margin-top: 0;
}
.article td > p:last-child,
.article th > p:last-child {
  margin-bottom: 0;
}
.sidenav-title {
  font-size: 15px;
  position: relative;
  font-weight: 600;
}
.sidenav-item {
  display: block;
  margin-top: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-articles li,
.related-articles li {
  margin-bottom: 15px;
}
/***** Attachments *****/
/* Styles attachments inside posts, articles and comments */
.attachments .attachment-item {
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}
.attachments .attachment-item:last-child {
  margin-bottom: 0;
}
.attachments .attachment-item .attachment-icon {
  color: #1E1E2F;
  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: #46466d;
}
/***** 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: #46466d;
}
.share a:hover {
  text-decoration: none;
  color: #5B2D8E;
}
.share a svg {
  height: 18px;
  width: 18px;
  display: block;
}
/***** Comments *****/
/* Styles comments inside articles, posts and requests */
.comment {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}
.comment-heading, .recent-articles-title,
.related-articles-title {
  margin-bottom: 5px;
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
}
.comment-overview {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 20px 0;
}
.comment-overview p {
  margin-top: 0;
}
.comment-callout {
  color: #46466d;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}
.comment-callout a {
  color: #5B2D8E;
  text-decoration: underline;
}
.comment-callout a:visited {
  color: #A87FD4;
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: #3D1A6E;
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: #46466d;
  font-size: 13px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid #5B2D8E;
  padding: 40px 20px 20px;
}
@media (min-width: 768px) {
  .comment-wrapper.comment-official {
    padding-top: 20px;
  }
}
.comment-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .comment-info {
  padding-right: 0;
  padding-left: 20px;
}
.comment-author {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .comment-author {
    justify-content: space-between;
  }
}
.comment-avatar {
  margin-right: 10px;
}
[dir=rtl] .comment-avatar {
  margin-left: 10px;
  margin-right: 0;
}
.comment-meta {
  flex: 1 1 auto;
}
.comment-labels {
  flex-basis: 100%;
}
@media (min-width: 768px) {
  .comment-labels {
    flex-basis: auto;
  }
}
.comment .status-label:not(.status-label-official) {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .comment .status-label:not(.status-label-official) {
    margin-top: 0;
  }
}
.comment-form {
  display: flex;
  padding-top: 30px;
  word-wrap: break-word;
}
.comment-container {
  width: 100%;
}
.comment-form-controls {
  display: none;
  margin-top: 10px;
  text-align: left;
}
@media (min-width: 768px) {
  [dir=ltr] .comment-form-controls {
    text-align: right;
  }
}
.comment-form-controls input[type=submit] {
  margin-top: 15px;
}
@media (min-width: 1024px) {
  .comment-form-controls input[type=submit] {
    margin-left: 15px;
  }
  [dir=rtl] .comment-form-controls input[type=submit] {
    margin-left: 0;
    margin-right: 15px;
  }
}
.comment-form-controls input[type=checkbox] {
  margin-right: 5px;
}
.comment-form-controls input[type=checkbox] [dir=rtl] {
  margin-left: 5px;
}
.comment-ccs {
  display: none;
}
.comment-ccs + textarea {
  margin-top: 10px;
}
.comment-attachments {
  margin-top: 10px;
}
.comment-attachments a {
  color: #5B2D8E;
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  color: #5B2D8E;
  text-decoration: underline;
}
.comment-body a:visited {
  color: #A87FD4;
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: #3D1A6E;
}
.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: #e8e4f5;
}
.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: #eeecf8;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.comment-body pre {
  background: #eeecf8;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.comment-body blockquote {
  border-left: 1px solid #ddd;
  color: #46466d;
  font-style: italic;
  padding: 0 15px;
}
.comment-mark-as-solved {
  display: inline-block;
}
/***** Vote *****/
/* Used in article comments, post comments and post */
.vote {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.vote a:active, .vote a:hover, .vote a:focus {
  text-decoration: none;
}
.vote-sum {
  color: #46466d;
  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: #5B2D8E;
}
.vote-up, .vote-down {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  color: #46466d;
  cursor: pointer;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vote-voted {
  color: #5B2D8E;
}
.vote-voted:hover {
  color: #291441;
}
/***** 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($community_background_image);
  margin-bottom: 10px;
}
.community-footer {
  padding-top: 50px;
  text-align: center;
}
.community-footer-title {
  font-size: 16px;
  margin-bottom: 20px;
}
.community-featured-posts .title {
  font-size: 18px;
  font-weight: 600;
}
.community-featured-posts, .community-activity {
  padding-top: 40px;
  width: 100%;
}
.community-header {
  margin-bottom: 30px;
}
.community-header .title {
  margin-bottom: 0;
  font-size: 16px;
}
.post-to-community {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .post-to-community {
    margin: 0;
  }
}
/* Community topics grid */
.topics {
  max-width: none;
  width: 100%;
}
.topics-item .meta-group {
  justify-content: center;
  margin-top: 20px;
}
/* Community topic page */
.topic-header {
  border-bottom: 1px solid #ddd;
  font-size: 13px;
}
@media (min-width: 768px) {
  .topic-header {
    padding-bottom: 10px;
  }
}
.topic-header .dropdown {
  display: block;
  border-top: 1px solid #ddd;
  padding: 10px 0;
}
@media (min-width: 768px) {
  .topic-header .dropdown {
    border-top: 0;
    display: inline-block;
    margin-right: 20px;
    padding: 0;
  }
}
.no-posts-with-filter {
  margin-top: 20px;
  margin-bottom: 20px;
}
/* Topic, post and user follow button */
.community-follow {
  margin-bottom: 10px;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow {
    margin-bottom: 0;
    width: auto;
  }
}
.community-follow button {
  line-height: 30px;
  padding: 0 10px 0 15px;
  position: relative;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow button {
    width: auto;
  }
}
.community-follow button:hover {
  background-color: #5B2D8E;
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: #FFFFFF;
  color: #FFFFFF;
}
.community-follow button[data-selected=true] {
  background-color: #5B2D8E;
  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: #291441;
  border-color: #291441;
}
.community-follow button::after {
  border-left: 1px solid #5B2D8E;
  content: attr(data-follower-count);
  color: #5B2D8E;
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}
@media (min-width: 768px) {
  .community-follow button::after {
    position: static;
  }
}
[dir=rtl] .community-follow button::after {
  border-left: 0;
  border-right: 1px solid #5B2D8E;
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
}
/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  padding: 0;
}
.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}
.striped-list-info {
  flex: 2;
}
.striped-list-title {
  color: #5B2D8E;
  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: #A87FD4;
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #46466d;
  font-size: 13px;
  justify-content: flex-start;
  text-transform: capitalize;
}
@media (min-width: 768px) {
  .striped-list-count {
    display: flex;
    flex: 1;
    justify-content: space-around;
  }
}
.striped-list-count-item::after {
  content: "·";
  display: inline-block;
  padding: 0 5px;
}
@media (min-width: 768px) {
  .striped-list-count-item::after {
    display: none;
  }
}
.striped-list-count-item:last-child::after {
  display: none;
}
.striped-list-number {
  text-align: center;
}
@media (min-width: 768px) {
  .striped-list-number {
    color: #1E1E2F;
    display: block;
  }
}
/***** Status labels *****/
/* Styles labels used in posts, articles and requests */
.status-label {
  background-color: #038153;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  margin-right: 2px;
  padding: 3px 10px;
  vertical-align: middle;
  white-space: nowrap;
  display: inline-block;
}
.status-label:hover, .status-label:active, .status-label:focus {
  text-decoration: none;
}
.status-label-pinned, .status-label-featured, .status-label-official {
  background-color: #5B2D8E;
}
.status-label-official {
  border-radius: 0;
  margin-right: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .status-label-official {
    border-radius: 0 0 4px 4px;
    right: 30px;
    width: auto;
  }
}
[dir=rtl] .status-label-official {
  left: 30px;
  right: auto;
}
.status-label-not-planned {
  background-color: #e9ebed;
  color: #46466d;
}
.status-label-closed {
  background-color: #038153;
  color: #fff;
}
.status-label-pending, .status-label-pending-moderation {
  background-color: #1f73b7;
  text-align: center;
}
.status-label-open {
  background-color: #c72a1c;
}
.status-label-solved {
  background-color: #038153;
}
.status-label-new {
  background-color: #ffb648;
  color: #703b15;
}
.status-label-hold {
  background-color: #000;
}
.status-label-request {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .status-label-request {
    max-width: 150px;
  }
}
/***** Post *****/
/*
* The post grid is defined this way:
* Content | Sidebar
* 70%     | 30%
*/
.post {
  flex: 1;
  margin-bottom: 10px;
}
@media (min-width: 1024px) {
  .post {
    flex: 1 0 70%;
    max-width: 70%;
  }
}
.post-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .post-container {
    flex-direction: row;
  }
}
.post-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .post-header {
    align-items: baseline;
    flex-direction: row;
  }
}
.post-header .status-label {
  vertical-align: super;
}
.post-title {
  margin-bottom: 20px;
  width: 100%;
}
@media (min-width: 768px) {
  .post-title {
    margin-bottom: 0;
    padding-right: 10px;
  }
}
.post-title h1 {
  display: inline;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .post-title h1 {
    margin-right: 5px;
  }
}
.post-author {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}
.post-avatar {
  margin-bottom: 30px;
}
.post-content {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  word-break: break-word;
}
.post-info-container {
  display: flex;
  margin-bottom: 40px;
}
.post-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .post-info {
  padding-right: 0;
  padding-left: 20px;
}
.post-meta {
  display: inline-block;
  flex: 1;
  margin-left: 10px;
  vertical-align: middle;
}
[dir=rtl] .post-meta {
  margin-left: 0;
  margin-right: 10px;
}
.post-body {
  display: flow-root;
}
.post-body a {
  color: #5B2D8E;
  text-decoration: underline;
}
.post-body a:visited {
  color: #A87FD4;
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: #3D1A6E;
}
.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: #e8e4f5;
}
.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: #eeecf8;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.post-body pre {
  background: #eeecf8;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.post-body blockquote {
  border-left: 1px solid #ddd;
  color: #46466d;
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: #46466d;
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: #5B2D8E;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 5px;
  vertical-align: middle;
}
.post-sidebar {
  border-top: 1px solid #ddd;
  flex: 1;
  padding: 30px 0;
  text-align: center;
}
@media (min-width: 1024px) {
  .post-sidebar {
    border: 0;
    flex: 1 0 30%;
    padding: 0 0 0 50px;
    text-align: initial;
  }
  [dir=rtl] .post-sidebar {
    padding: 0 50px 0 0;
  }
}
.post-sidebar-title {
  font-size: 18px;
  font-weight: 600;
}
.post-comments {
  margin-bottom: 20px;
}
@media (min-width: 1024px) {
  .post-comments {
    margin-bottom: 0;
  }
}
/***** Community Badges *****/
/* Styles labels used next to the authors of article comments, community posts, and community comments */
.community-badge-title {
  background-color: #04444d;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 0px 8px;
  vertical-align: top;
  white-space: nowrap;
  display: inline-block;
  line-height: 18px;
  vertical-align: middle;
}
.community-badge-titles {
  display: inline;
}
.community-badge-achievement {
  display: block;
  height: 16px;
  white-space: nowrap;
  width: 16px;
}
.community-badge-achievement img {
  width: 100%;
  height: 100%;
}
.community-badge-achievements {
  display: flex;
}
.community-badge-achievements-rest {
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  vertical-align: top;
}
.community-badge {
  margin: 2px;
}
.profile-info .community-badge-title {
  padding: 2px 8px;
  line-height: 20px;
}
.profile-info .community-badge-achievement {
  height: 40px;
  width: 40px;
}
.profile-info .community-badge-achievements-rest {
  line-height: 40px;
  font-size: 20px;
}
/* Navigation element that collapses on mobile */
.collapsible-nav {
  flex-direction: column;
  font-size: 14px;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav {
    flex-direction: row;
  }
}
.collapsible-nav-border {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
}
@media (min-width: 768px) {
  .collapsible-nav-border {
    border-top: 0;
  }
}
.collapsible-nav-toggle {
  top: 22.5px;
  transform: translateY(-50%);
  position: absolute;
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 768px) {
  .collapsible-nav-toggle {
    display: none;
  }
}
[dir=rtl] .collapsible-nav-toggle {
  left: 0;
  right: auto;
}
.collapsible-nav-toggle-icon {
  display: none;
}
.collapsible-nav-toggle[aria-expanded=false] .chevron-icon {
  display: inline-block;
}
.collapsible-nav-toggle[aria-expanded=true] .x-icon {
  display: inline-block;
}
.collapsible-nav-toggle:focus {
  outline: none;
  border: 1px solid #5B2D8E;
}
.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}
.collapsible-nav-list li {
  color: #1E1E2F;
  line-height: 45px;
  order: 1;
}
@media (min-width: 768px) {
  .collapsible-nav-list li {
    line-height: normal;
    margin-right: 30px;
  }
  [dir=rtl] .collapsible-nav-list li {
    margin-left: 30px;
    margin-right: 0;
  }
  .collapsible-nav-list li a {
    text-decoration: none;
    padding: 15px 0;
  }
}
.collapsible-nav-list li a {
  color: #1E1E2F;
  display: block;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:hover {
    border-bottom: 4px solid #ddd;
  }
  .collapsible-nav-list li:hover a:not([aria-current=page]) {
    padding: 15px 0 11px 0;
    text-decoration: none;
  }
}
.collapsible-nav-list li:not([aria-selected=true]),
.collapsible-nav-list li:not(.current) {
  display: none;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:not([aria-selected=true]),
  .collapsible-nav-list li:not(.current) {
    display: block;
  }
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true] {
    padding: 15px 0 11px 0;
  }
}
.collapsible-nav-list li[aria-selected=true],
.collapsible-nav-list li.current {
  order: 0;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true],
  .collapsible-nav-list li.current {
    border-bottom: 4px solid #5B2D8E;
    order: 1;
  }
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
  color: #1E1E2F;
}
.collapsible-nav[aria-expanded=true] li:not([aria-selected=true]),
.collapsible-nav[aria-expanded=true] li:not(.current) {
  display: block;
}
/* Sidebar navigation that collapses on mobile */
.collapsible-sidebar {
  flex: 1;
  max-height: 45px;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
}
@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 0;
  }
}
.collapsible-sidebar-title {
  margin-top: 0;
}
.collapsible-sidebar-toggle {
  position: absolute;
  top: 22.5px;
  transform: translateY(-50%);
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-toggle {
    display: none;
  }
}
[dir=rtl] .collapsible-sidebar-toggle {
  left: 0;
  right: auto;
}
.collapsible-sidebar-toggle-icon {
  display: none;
}
.collapsible-sidebar-toggle[aria-expanded=false] .chevron-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle[aria-expanded=true] .x-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle:focus {
  outline: none;
  border: 1px solid #5B2D8E;
}
.collapsible-sidebar-body {
  display: none;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-body {
    display: block;
  }
}
.collapsible-sidebar[aria-expanded=true] {
  max-height: none;
}
.collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-body {
  display: block;
}
/***** My activities *****/
.my-activities-nav {
  background-color: #e8e4f5;
  margin-bottom: 20px;
}
.my-activities-sub-nav {
  margin-bottom: 30px;
}
.my-activities-table .striped-list-title { /* My activities tables */
  display: block;
  margin-bottom: 10px;
  max-width: 350px;
  white-space: normal;
}
@media (min-width: 1024px) {
  .my-activities-table .striped-list-title {
    margin-bottom: 0;
    max-width: 500px;
    min-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.my-activities-table thead {
  display: none;
}
@media (min-width: 768px) {
  .my-activities-table thead {
    display: table-header-group;
  }
}
.my-activities-table th:first-child,
.my-activities-table td:first-child {
  padding-left: 0;
}
@media (min-width: 1024px) {
  .my-activities-table th:first-child,
  .my-activities-table td:first-child {
    width: 500px;
  }
}
.my-activities-table th:last-child,
.my-activities-table td:last-child {
  padding-right: 0;
}
.my-activities-table td:not(:first-child) {
  display: none;
}
@media (min-width: 768px) {
  .my-activities-table td:not(:first-child) {
    display: table-cell;
  }
}
/* Requests table */
.requests-search {
  width: 100%;
}
.requests-table-toolbar {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .requests-table-toolbar {
    flex-direction: row;
  }
}
.requests-table-toolbar .search {
  flex: 1;
  width: 100%;
}
.requests-table-toolbar .request-table-filter {
  width: 100%;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-table-filter {
    width: auto;
  }
}
.requests-table-toolbar .request-filter {
  display: block;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-filter {
    margin: 0 0 0 30px;
  }
  [dir=rtl] .requests-table-toolbar .request-filter {
    margin: 0 30px 0 0;
  }
}
.requests-table-toolbar .request-filter-label {
  font-size: 13px;
  margin-top: 30px;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-filter-label {
    margin-top: 0;
  }
}
.requests-table-toolbar select {
  max-height: 40px;
  margin-bottom: 30px;
  width: 100%;
}
@media (min-width: 768px) {
  .requests-table-toolbar select {
    margin-bottom: 0;
    max-width: 300px;
    width: auto;
  }
}
@media (min-width: 768px) {
  .requests-table-toolbar .organization-subscribe {
    margin-left: 10px;
  }
  [dir=rtl] .requests-table-toolbar .organization-subscribe {
    margin: 0 10px 0 0;
  }
}
.requests-table-toolbar .organization-subscribe button {
  line-height: 40px;
  max-height: 40px;
  padding: 0 20px;
}
.requests-table-toolbar + .requests-search-info {
  margin-top: 15px;
}
.requests-table-toolbar + .requests-search-info.meta-data::after {
  content: "";
  margin: 0;
}
.requests-table-toolbar + .requests-search-info + .requests {
  margin-top: 20px;
}
.requests-table-toolbar + .requests {
  margin-top: 40px;
}
.requests .requests-table-meta {
  display: block;
}
@media (min-width: 768px) {
  .requests .requests-table-meta {
    display: none;
  }
}
.requests .requests-table thead {
  display: none;
}
@media (min-width: 768px) {
  .requests .requests-table thead {
    display: table-header-group;
  }
}
.requests .requests-table-info {
  display: block;
}
@media (min-width: 768px) {
  .requests .requests-table-info {
    display: table-cell;
    vertical-align: middle;
    width: auto;
  }
}
.requests .requests-table .requests-link {
  position: relative;
}
.requests .requests-table .requests-sort-symbol {
  position: absolute;
  left: calc(100% + 3px);
  bottom: 0;
  font-size: 10px;
}
/* Following table */
@media (min-width: 768px) {
  .subscriptions-subscribe button {
    width: auto;
  }
}
.subscriptions-table td:last-child {
  display: block;
}
@media (min-width: 768px) {
  .subscriptions-table td:last-child {
    display: table-cell;
  }
}
.subscriptions-table td:first-child {
  display: flex;
  align-items: center;
}
.subscriptions-table .user-avatar {
  margin-right: 10px;
}
.subscriptions .striped-list-title {
  display: inline-block;
  vertical-align: middle;
}
/* Contributions table */
.contributions-table td:last-child {
  color: #46466d;
  font-size: 13px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}
.no-activities {
  color: #46466d;
}
/***** Request *****/
.request-container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .request-container {
    align-items: flex-start;
    flex-direction: row;
    gap: 32px;
  }
}
.request-container .comment-container {
  min-width: 0;
}
.request-breadcrumbs {
  margin-bottom: 16px;
  padding-top: 16px;
}
@media (min-width: 1024px) {
  .request-breadcrumbs {
    margin-bottom: 20px;
  }
}
.request-main {
  flex: 1 0 auto;
  order: 1;
}
.request-main .comment-fields, .request-main .request-submit-comment {
  display: none;
}
.request-main .comment-fields.shown {
  display: block;
}
.request-main .request-submit-comment.shown {
  display: inline;
}
@media (min-width: 1024px) {
  .request-main {
    flex: 1 1 auto;
    order: 0;
    min-width: 0;
  }
}
.request-main .comment-form-controls {
  display: block;
}
.request-main .comment-ccs {
  display: block;
}
.request-main .comment-show-container {
  border-radius: 2px;
  border: 1px solid #ddd;
  color: #46466d;
  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 #5B2D8E;
}
.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 #5B2D8E;
}
.request-main input#mark_as_solved {
  display: none;
}
.request-title {
  width: 100%;
}
@media (min-width: 1024px) {
  .request-title {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    max-width: 100%;
    padding-bottom: 20px;
  }
}
.request-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  order: 0;
}
@media (min-width: 1024px) {
  .request-sidebar {
    background-color: #eeecf8;
    border: 0;
    font-size: 13px;
    flex: 0 0 300px;
    padding: 20px;
    border-radius: var(--radius-md);
    order: 1;
  }
}
.request-sidebar h2 {
  font-size: 15px;
  font-weight: 600;
  position: relative;
}
@media (min-width: 1024px) {
  .request-sidebar h2 {
    display: none;
  }
}
.request-details {
  border-bottom: 1px solid #ddd;
  font-size: 0;
  margin: 0;
  padding-bottom: 20px;
}
.request-details:last-child {
  border: 0;
}
.request-details dt, .request-details dd {
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  margin: 20px 0 0 0;
}
.request-details dd {
  padding: 0 10px;
  width: 60%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.request-details dd::after {
  content: "\a";
  white-space: pre;
}
.request-details dt {
  line-break: strict;
  color: #46466d;
  width: 40%;
}
.request-details .request-collaborators {
  display: inline-block;
}
.request-attachments dt, .request-attachments dd {
  width: 100%;
}
.request-attachments dd {
  margin: 10px 0 0 0;
}
.request-form textarea {
  min-height: 120px;
}
.request-follow-up {
  padding-top: 20px;
}
/***** Pagination *****/
.pagination {
  margin: 20px 0;
  text-align: center;
}
.pagination-next, .pagination-prev, .pagination-first, .pagination-last {
  display: inline-block;
}
.pagination-first-link, .pagination-last-link {
  padding: 0 10px;
}
.pagination-first-text, .pagination-last-text {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.pagination-next-link {
  padding-right: 10px;
}
.pagination-next-text {
  margin-right: 10px;
}
[dir=rtl] .pagination-next-link {
  padding-left: 10px;
}
[dir=rtl] .pagination-next-text {
  margin-left: 10px;
}
.pagination-prev-link {
  padding-left: 10px;
}
.pagination-prev-text {
  margin-left: 10px;
}
[dir=rtl] .pagination-prev-link {
  padding-right: 10px;
}
[dir=rtl] .pagination-prev-text {
  margin-right: 10px;
}
/***** Metadata *****/
.meta-group {
  display: block;
}
.meta-group-opposite {
  float: right;
}
[dir=rtl] .meta-group-opposite {
  float: left;
}
.meta-group * {
  display: inline;
}
.meta-data {
  color: #46466d;
  font-size: 13px;
}
.meta-data:not(:last-child)::after {
  content: "·";
  margin: 0 5px;
}
/* User Profiles */
.profile-header {
  padding: 30px 0;
  background-color: #eeecf8;
}
.profile-header .container {
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .profile-header .container {
    flex-wrap: nowrap;
  }
}
.profile-header .profile-info {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}
.profile-avatar {
  position: relative;
  line-height: 0;
  align-self: center;
  margin-right: 10px;
}
[dir=rtl] .profile-avatar {
  margin-left: 10px;
  margin-right: 0;
}
.profile-avatar .user-avatar {
  width: 80px;
  height: 80px;
}
.profile-avatar .icon-agent {
  bottom: 0;
  right: 0;
}
.profile-header .basic-info {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}
.profile-header .basic-info .name {
  margin: 0;
  line-height: 25px;
  vertical-align: middle;
  display: inline;
}
.profile-header .options {
  display: flex;
  flex-basis: 100%;
  margin-top: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .profile-header .options {
    flex-wrap: nowrap;
    flex-basis: auto;
    margin-top: 0;
    margin-left: 10px;
  }
  [dir=rtl] .profile-header .options {
    margin-left: 0;
    margin-right: 10px;
  }
  .profile-header .options > :not(:last-child) {
    margin-bottom: 0;
    margin-right: 10px;
  }
  [dir=rtl] .profile-header .options > :not(:last-child) {
    margin-left: 10px;
    margin-right: 0;
  }
}
.user-profile-actions {
  width: 100%;
  margin-bottom: 15px;
}
.profile-header .description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  margin: 15px 0;
  flex-basis: 100%;
}
.profile-stats {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}
.profile-stats .stat {
  display: flex;
  margin-bottom: 10px;
}
.profile-stats .stat-label {
  color: #46466d;
  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 #5B2D8E;
  border-radius: 4px;
  color: #5B2D8E;
  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: #e8e4f5;
  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: #46466d;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .profile-section-description {
    flex: 1 0 50%;
    padding-bottom: 0;
  }
}
.profile-section-sorter {
  flex-basis: 100%;
  border-top: solid 1px #eee;
  font-size: 13px;
}
.profile-section-sorter .dropdown-toggle {
  padding: 10px 0;
  width: 100%;
}
.profile-section-sorter .dropdown-toggle::after {
  position: absolute;
  right: 0;
}
[dir=rtl] .profile-section-sorter .dropdown-toggle::after {
  left: 0;
  right: initial;
}
@media (min-width: 768px) {
  .profile-section-sorter .dropdown-toggle::after {
    position: relative;
  }
}
@media (min-width: 768px) {
  .profile-section-sorter {
    flex: 0 1 auto;
    padding-top: 0;
    border-top: 0;
    margin-left: 20px;
  }
  [dir=rtl] .profile-section-sorter {
    margin-left: 0;
    margin-right: 20px;
  }
}
.profile-badges-items {
  margin-top: 25px;
}
.profile-badges-item {
  border-top: 1px solid #ddd;
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: flex-start;
  padding: 27px 12px;
}
.profile-badges-item > div {
  padding-right: 12px;
  padding-left: 12px;
}
.profile-badges-item-image {
  height: 40px;
  width: 40px;
  margin-right: 12px;
}
.profile-badges-item-image img {
  max-height: 40px;
}
[dir=rtl] .profile-badges-item-image {
  margin-left: 12px;
  margin-right: 0;
}
.profile-badges-item-title, .profile-badges-item-metadata-title {
  font-size: 15px;
  margin-bottom: 10px;
}
.profile-badges-item-title {
  font-weight: 600;
}
.profile-badges-item-description, .profile-badges-item-metadata-description {
  color: #46466d;
  font-size: 13px;
  margin: 0;
}
.profile-badges-item-metadata {
  margin-left: auto;
  text-align: right;
}
[dir=rtl] .profile-badges-item-metadata {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}
.profile-contribution {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  padding: 20px 0;
  position: relative;
}
.profile-contribution-header {
  margin-bottom: 5px;
}
.profile-contribution-title {
  margin: 0 0 5px 0;
  display: inline;
  line-height: 21px;
  font-size: 15px;
  vertical-align: middle;
}
.profile-contribution-body {
  margin: 10px 0;
}
.profile-contribution-list > .profile-contribution {
  border-top: 1px solid #eee;
}
@media (min-width: 768px) {
  .profile-contribution-list > .profile-contribution {
    padding-left: 30px;
  }
  [dir=rtl] .profile-contribution-list > .profile-contribution {
    padding-right: 30px;
    padding-left: 0;
  }
}
.profile-contribution-list > .profile-contribution:last-child {
  border-bottom: 1px solid #eee;
}
.profile-contribution-icon {
  left: 0;
  position: absolute;
  color: #ccc;
  line-height: 25px;
}
[dir=rtl] .profile-contribution-icon {
  right: 0;
}
.profile-contribution-icon svg {
  vertical-align: middle;
}
.profile-contribution-list .profile-contribution-header {
  margin-left: 30px;
}
[dir=rtl] .profile-contribution-list .profile-contribution-header {
  padding-right: 30px;
  padding-left: 0;
}
@media (min-width: 768px) {
  .profile-contribution-list .profile-contribution-header {
    margin-left: 0;
  }
  [dir=rtl] .profile-contribution-list .profile-contribution-header {
    padding-right: 0;
  }
}
.profile-comments .profile-contribution-breadcrumbs {
  margin-left: 30px;
}
[dir=rtl] .profile-comments .profile-contribution-breadcrumbs {
  padding-right: 30px;
  padding-left: 0;
}
@media (min-width: 768px) {
  .profile-comments .profile-contribution-breadcrumbs {
    margin-left: 0;
  }
  [dir=rtl] .profile-comments .profile-contribution-breadcrumbs {
    padding-right: 0;
  }
}
.profile-section .no-activity,
.profile-section .private-activity {
  display: block;
  margin-top: 40px;
  color: #999;
}
.private-activity-icon {
  margin-right: 10px;
}
[dir=rtl] .private-activity-icon {
  margin-right: 0;
  margin-left: 10px;
}
.profile-activity-list {
  margin-top: 25px;
}
.profile-activity {
  position: relative;
  padding-bottom: 30px;
}
@media (min-width: 768px) {
  .profile-activity {
    padding-left: 20px;
  }
  [dir=rtl] .profile-activity {
    padding-right: 20px;
    padding-left: 0;
  }
}
@media (min-width: 768px) {
  .profile-activity:not(:last-child) {
    border-left: 1px solid #ddd;
  }
  [dir=rtl] .profile-activity:not(:last-child) {
    border-left: 0;
    border-right: 1px solid #ddd;
  }
}
.profile-activity-header {
  display: flex;
  align-items: center;
  margin-left: 35px;
}
[dir=rtl] .profile-activity-header {
  margin-left: 0;
  margin-right: 35px;
}
@media (min-width: 768px) {
  .profile-activity-header {
    margin-left: 0;
  }
  [dir=rtl] .profile-activity-header {
    margin-right: 0;
  }
}
.profile-activity-header .user-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  min-width: 40px;
  align-self: flex-start;
}
[dir=rtl] .profile-activity-header .user-avatar {
  margin-left: 10px;
  margin-right: 0;
}
.profile-activity-description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  margin: 0;
  min-width: 0;
  width: 100%;
}
.profile-activity-description span:first-child {
  font-weight: 600;
  display: inline;
}
.profile-activity-contribution {
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background-color: #eeecf8;
}
@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: #F8F7FC;
  background-position: 50% 50%;
  text-align: center;
  color: #ccc;
}
[dir=rtl] .profile-activity-icon {
  right: 0;
}
@media (min-width: 768px) {
  .profile-activity-icon {
    left: -14px;
  }
  [dir=rtl] .profile-activity-icon {
    right: -14px;
  }
}
.profile-activity-icon svg {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  margin: auto;
}
/***** Search results *****/
.search-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .search-results {
    flex-direction: row;
  }
}
.search-results-column {
  flex: 1;
}
@media (min-width: 1024px) {
  .search-results-column {
    flex: 0 0 75%;
  }
}
.search-results-sidebar {
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .search-results-sidebar {
    border: 0;
    flex: 0 0 20%;
    height: auto;
  }
}
.search-results-sidebar .sidenav-item {
  border-radius: 4px;
  padding: 10px 36px;
  margin-bottom: 4px;
  color: #1E1E2F;
}
.search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current {
  background-color: #e9ebed;
  text-decoration: none;
}
.search-results-sidebar .sidenav-subitem {
  unicode-bidi: embed;
}
.search-results-sidebar .sidenav-tag {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-grow: 0;
}
.search-results-sidebar .sidenav-tag .content-tag {
  background: #E9EBED;
  border-radius: 4px;
  padding: 4px 12px;
  text-decoration: none;
}
.search-results-sidebar .sidenav-tag .content-tag .label {
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  letter-spacing: -0.000427656px;
  color: #49545C;
  flex-grow: 0;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .sidenav-tag .content-tag .close-icon {
  color: #555555;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .collapsible-sidebar {
  margin-bottom: 30px;
}
.search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
  display: none;
}
@media (min-width: 1024px) {
  .search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
    display: block;
  }
}
.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n+6) {
  display: none;
}
.search-results-sidebar .multibrand-filter-list .doc-count {
  color: #666;
}
.search-results-sidebar .see-all-filters {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  padding: 10px;
  color: #5B2D8E;
}
.search-results-sidebar .see-all-filters[aria-hidden=true] {
  display: none;
}
.search-results-sidebar .see-all-filters:hover {
  text-decoration: underline;
}
.search-results-sidebar .see-all-filters::after {
  content: " ⌄";
  font-weight: bold;
}
.search-results-subheading {
  font-size: 18px;
  font-weight: 600;
}
.search-results-list {
  margin-bottom: 25px;
}
.search-results-list > li {
  padding: 20px 0;
}
.search-results-list > li:first-child {
  border-top: 1px solid #ddd;
}
.search-results .no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rem;
}
.search-results .no-results .headline {
  color: #2F3941;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.45px;
}
.search-results .no-results .action-prompt {
  color: #68737D;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.154px;
}
.search-results .no-results .action-prompt a {
  color: #5B2D8E;
}
.search-results .no-results .action-prompt a:visited {
  color: #5B2D8E;
}
.search-result-title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-result-title {
  font-size: 16px;
  margin-bottom: 0;
}
.search-result-votes, .search-result-meta-count {
  color: #46466d;
  font-size: 13px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: #5B2D8E;
  vertical-align: middle;
  width: 13px;
  height: 13px;
}
[dir=ltr] .search-result-votes, [dir=ltr] .search-result-meta-count {
  margin-left: 20px;
}
[dir=rtl] .search-result-votes, [dir=rtl] .search-result-meta-count {
  margin-right: 20px;
}
.search-result-meta-container {
  color: #666;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .search-result-meta-container {
    flex-direction: row;
    align-items: center;
  }
}
@media (min-width: 1024px) {
  .search-result-meta-container nav {
    flex: 1;
  }
}
@media (min-width: 1024px) {
  [dir=ltr] .search-result-meta-container .meta-data {
    margin-left: 20px;
  }
}
@media (min-width: 1024px) {
  [dir=rtl] .search-result-meta-container .meta-data {
    margin-right: 20px;
  }
}
.search-result-meta-container .meta-data::after {
  content: none;
}
.search-result-breadcrumbs {
  margin: 0;
}
.search-result-description {
  margin-top: 10px;
  margin-bottom: 0;
  word-break: break-word;
}
/* By default use bold instead of italic to highlight */
.search-results-description em {
  font-style: normal;
  font-weight: bold;
}
/* Add a yellow background for Chinese */
html[lang|=zh] .search-results-description em {
  font-style: normal;
  background: yellow;
}
/***** Notifications *****/
.notification {
  border: 1px solid;
  display: table;
  font-family: sans-serif;
  font-size: 12px;
  padding: 13px 15px;
  transition: height 0.2s;
  width: 100%;
  color: #555;
}
.notification a {
  color: #158ec2;
}
.notification-inner {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 980px;
}
.notification-icon, .notification-inline.notification-error::before, .notification-text, .notification-dismiss {
  display: table-cell;
  vertical-align: middle;
}
.notification-text {
  padding: 0 15px;
  width: 100%;
}
.notification + .notification {
  margin-bottom: -1px;
  position: relative;
  top: -1px;
}
/* Error */
.notification-error {
  background: #ffeded;
  border-color: #f7cbcb;
}
.notification-error .notification-icon::before, .notification-error .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23555555'/%3E%3C/svg%3E");
}
/* Notice */
.notification-notice {
  background: #dbf3ff;
  border-color: #b5e0f5;
}
.notification-notice .notification-icon::before, .notification-notice .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l2 2L9 4.5'/%3E%3Ccircle cx='6' cy='6' r='5.5'/%3E%3C/g%3E%3C/svg%3E");
}
/* Alert / Lock */
.notification-alert {
  color: #ad5e18;
  background: #fff8ed;
  border-color: #fcdba9;
}
.notification-alert .notification-icon::before, .notification-alert .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ad5e18' stroke-linecap='round' d='M5.06 1.27l-4.5 8.5c-.18.33.06.73.44.73h9c.38 0 .62-.4.44-.73l-4.5-8.5a.494.494 0 00-.88 0zM5.5 4v2'/%3E%3Ccircle cx='5.5' cy='8' r='.8' fill='%23ad5e18'/%3E%3C/svg%3E");
}
.notification-icon::before, .notification-inline.notification-error::before {
  background-size: cover;
  content: "";
  display: inline-block;
  height: 14px;
  width: 14px;
  vertical-align: middle;
}
/* Dismiss button */
.notification-dismiss, a.notification-dismiss {
  color: #555;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 100ms ease;
  text-decoration: none !important;
}
.notification-dismiss:hover {
  opacity: 1;
}
/* Inline notifications */
.notification-inline {
  border-radius: 4px;
  line-height: 14px;
  margin-top: 5px;
  padding: 5px;
  position: relative;
  text-align: left;
  vertical-align: middle;
}
[dir=rtl] .notification-inline {
  text-align: right;
}
.notification-inline[aria-hidden=true] {
  display: none;
}
.notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23e35b66'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23e35b66'/%3E%3C/svg%3E");
  margin: -2px 5px 0 0;
}
[dir=rtl] .notification-inline.notification-error::before {
  margin: 0 0 0 5px;
}
.notification-inline.notification-error {
  background-color: #fff0f1;
  border: 1px solid #e35b66;
  color: #cc3340;
}
.notification-inline.notification-large {
  padding: 13px 15px;
  margin-bottom: 25px;
}
.notification-left-aligned {
  text-align: left;
  padding-left: 0;
}
html[dir=rtl] .notification-left-aligned {
  text-align: right;
  padding-left: auto;
  padding-right: 0;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-toggle {
  cursor: pointer;
  background: none;
  border: 0;
  display: inline-block;
  padding: 0;
  text-align: initial;
  vertical-align: middle;
}
.dropdown-toggle:hover {
  text-decoration: none;
}
.dropdown-toggle > * {
  display: inline-block;
}
.dropdown-toggle[aria-expanded=true] + .dropdown-menu {
  display: block;
}
.dropdown-menu {
  background: #fff;
  border: 1px solid #d8dcde;
  border-radius: 3px;
  box-shadow: 0px 20px 30px 0px rgba(23, 73, 77, 0.15);
  display: none;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  left: 0;
  margin-top: 1px;
  min-width: 170px;
  padding: 10px 0;
  position: absolute;
  text-align: left;
  z-index: 1000;
}
[dir=rtl] .dropdown-menu {
  text-align: right;
}
.dropdown-menu [role=separator] {
  border-bottom: 1px solid #e9ebed;
  margin: 4px 0;
}
.dropdown-menu [role=menuitem],
.dropdown-menu [role=menuitemradio] {
  color: #2f3941;
  cursor: pointer;
  display: block;
  padding: 7px 40px 7px 20px;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  text-align: start;
  line-height: inherit;
  width: 100%;
}
[dir=rtl] .dropdown-menu [role=menuitem],
[dir=rtl] .dropdown-menu [role=menuitemradio] {
  padding: 7px 20px 7px 40px;
}
.dropdown-menu [role=menuitem]:hover, .dropdown-menu [role=menuitem]:focus,
.dropdown-menu [role=menuitemradio]:hover,
.dropdown-menu [role=menuitemradio]:focus {
  background: rgba(31, 115, 183, 0.08);
  text-decoration: none;
  color: #2f3941;
}
.dropdown-menu [role=menuitem][aria-selected=true], .dropdown-menu [role=menuitem][aria-checked=true],
.dropdown-menu [role=menuitemradio][aria-selected=true],
.dropdown-menu [role=menuitemradio][aria-checked=true] {
  cursor: default;
}
.dropdown-menu [role=menuitem][aria-selected=true]::after, .dropdown-menu [role=menuitem][aria-checked=true]::after,
.dropdown-menu [role=menuitemradio][aria-selected=true]::after,
.dropdown-menu [role=menuitemradio][aria-checked=true]::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 7l3 3 7-7'%3E%3C/path%3E%3C/svg%3E");
  display: inline-block;
  height: 12px;
  margin-left: 10px;
  width: 12px;
}
[dir=rtl] .dropdown-menu [role=menuitem][aria-selected=true]::after, [dir=rtl] .dropdown-menu [role=menuitem][aria-checked=true]::after,
[dir=rtl] .dropdown-menu [role=menuitemradio][aria-selected=true]::after,
[dir=rtl] .dropdown-menu [role=menuitemradio][aria-checked=true]::after {
  margin-left: 0;
  margin-right: 10px;
  float: left;
}
.dropdown-menu [role=menuitem][hidden], .dropdown-menu [role=menuitem][aria-hidden=true],
.dropdown-menu [role=menuitemradio][hidden],
.dropdown-menu [role=menuitemradio][aria-hidden=true] {
  display: none !important;
}
.dropdown-menu-end {
  left: auto;
  right: 0;
}
.dropdown-menu-top {
  bottom: 100%;
  margin-bottom: 1px;
}
[dir=rtl] .dropdown-menu {
  left: auto;
  right: 0;
  text-align: right;
}
[dir=rtl] .dropdown-menu-end {
  left: 0;
  right: auto;
}
.dropdown-chevron-icon {
  vertical-align: middle;
}
.content-tags > p {
  color: #68737D;
  margin-top: 32px;
  margin-bottom: 4px;
}
.content-tags-add-hint {
  color: #68737D;
  font-size: 14px;
}
.content-tag-list {
  display: flex;
  flex-wrap: wrap;
  word-break: break-word;
}
.content-tag-list li {
  border-right: 1px solid #C2C8CC;
  margin-bottom: 4px;
}
[dir=ltr] .content-tag-list li {
  padding-right: 8px;
  margin-right: 8px;
}
[dir=rtl] .content-tag-list li {
  padding-left: 8px;
  margin-left: 8px;
}
.content-tag-list li:last-child {
  border: none;
}
/***** WYSIWYG Editor *****/
#hc-wysiwyg {
  border: 1px solid #848F99;
}
/***** Upload Dropzone *****/
.upload-dropzone {
  border: 1px solid #848F99;
}
/***** Summary component *****/
zd-summary-block {
  background: #f3f6f6;
}
[dir=ltr] zd-summary-block {
  border-left-color: #859fa1;
}
[dir=rtl] zd-summary-block {
  border-right-color: #859fa1;
}
/* $service_catalog_hero_image is not a real theme setting (no such variable
   in manifest.json), so this was rendering as a blank 320px box at the top
   of the Services page. No hero banner is used elsewhere in this theme
   (category/section pages have none either), so drop it entirely. */
.service-catalog-hero {
  display: none;
}
.service-catalog-description {
  display: flow-root;
}
.service-catalog-description a {
  color: #5B2D8E;
  text-decoration: underline;
}
.service-catalog-description a:visited {
  color: #A87FD4;
}
.service-catalog-description a:hover, .service-catalog-description a:active, .service-catalog-description a:focus {
  color: #3D1A6E;
}
.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: #e8e4f5;
}
.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: #eeecf8;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.service-catalog-description pre {
  background: #eeecf8;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.service-catalog-description blockquote {
  border-left: 1px solid #ddd;
  color: #46466d;
  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;
}
/* =============================================
   Service Catalog — React widget restyle
   The catalog (sidebar, search, cards) is rendered client-side by
   Zendesk's own service-catalog-bundle.js and injects its own styles at
   runtime, so these use !important to win against that. Selectors are
   scoped to the two stable container classes the bundle exposes
   (.service-catalog-sidebar / .service-catalog-list); card links are
   targeted via their real href pattern (/services/{id}), confirmed from
   the bundle source, since no stable class is exposed on the card itself.
   ============================================= */
.service-catalog-sidebar {
  padding: 4px;
}
.service-catalog-sidebar button,
.service-catalog-sidebar a {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 16px !important;
  border-radius: var(--radius-md) !important;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700);
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  margin-bottom: 2px;
  transition: background var(--transition), color var(--transition);
}
.service-catalog-sidebar button:hover,
.service-catalog-sidebar a:hover {
  background: var(--brand-50) !important;
}
/* The active/selected item's highlight color is fixed via JS
   (fixServiceCatalogSidebar in script.js) — the widget gives no reliable
   attribute or class to select it by, so guessing here didn't work. */
/* The widget wraps the icon + input in its own container div with a
   border, and the input has no stable class — styling the input alone
   left a pill nested inside a separate square box. :has() lets us grab
   the real wrapper structurally instead of guessing its class name, and
   make THAT the pill, while stripping the input back to plain text. */
.service-catalog-list div:has(> input[type="search"]),
.service-catalog-list div:has(> input[type="text"]) {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100%;
  height: 48px !important;
  background: var(--white) !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 0 20px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
  box-sizing: border-box !important;
}
.service-catalog-list div:has(> input[type="search"]) svg,
.service-catalog-list div:has(> input[type="text"]) svg {
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
  color: var(--gray-400) !important;
  /* Final position is forced via JS (fixServiceCatalogSearchIcon in
     script.js) — CSS nudges here kept losing to the widget's own layout. */
}
.service-catalog-list input[type="search"],
.service-catalog-list input[type="text"] {
  flex: 1;
  width: 100%;
  height: auto !important;
  line-height: normal !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 15px;
  box-shadow: none !important;
  box-sizing: border-box;
}
.service-catalog-list input[type="search"]:focus,
.service-catalog-list input[type="text"]:focus {
  outline: none !important;
  box-shadow: none !important;
}
.service-catalog-list a[href*="/services/"] {
  display: block;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--gray-200) !important;
  transition: all var(--transition);
}
.service-catalog-list a[href*="/services/"]:hover {
  border-color: var(--brand-200) !important;
  box-shadow: var(--shadow-md);
}
/* =============================================
   SYNTHESIS HEALTH CUSTOM OVERRIDES
   (Added on top of Copenhagen base theme)
   ============================================= */
/* ============================================
   Synthesis Health - Zendesk Help Center Theme
   ============================================ */
/* --- CSS Custom Properties --- */
:root {
  --brand: #5B2D8E;
  --brand-dark: #3D1A6E;
  --brand-light: #7B4DAE;
  --brand-accent: #A87FD4;
  --text: #1E1E2F;
  --bg: #F8F7FC;
  --brand-50: #F3EEFA;
  --brand-100: #E4D6F4;
  --brand-200: #C9ADE9;
  --brand-300: #A87FD4;
  --brand-400: #8B5CC0;
  --brand-500: #5B2D8E;
  --brand-600: #4A2476;
  --brand-700: #3D1A6E;
  --brand-800: #2D1254;
  --brand-900: #1A0A33;
  --gray-50: #FAFAFA;
  --gray-100: #F4F4F5;
  --gray-200: #E4E4E7;
  --gray-300: #D4D4D8;
  --gray-400: #A1A1AA;
  --gray-500: #71717A;
  --gray-600: #52525B;
  --gray-700: #3F3F46;
  --gray-800: #27272A;
  --gray-900: #18181B;
  --white: #FFFFFF;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* --- Reset & Base --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--font-sans);
  color: var(--text);
  background-color: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* Push footer to bottom of page */
.footer {
  margin-top: auto;
}
/* Spacing between ticket submission form and footer */
.container:has(#new-ticket-form),
.container:has(.request-form),
.container:has(#service-catalog-item),
.container:has(#service-catalog-main-content) {
  padding-bottom: 60px;
}
/* Fallback for the request detail page form area */
.request-container .request-main {
  padding-bottom: 40px;
}
a {
  color: var(--brand);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover {
  color: var(--brand-700);
}
img {
  max-width: 100%;
  height: auto;
}
/* --- Header --- */
.header {
  background: var(--brand-900);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: none;
  width: 100%;
  max-width: none;
  padding: 0;
  height: auto;
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.header .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.header .logo img,
.header .logo .logo-composite {
  height: 36px;
  width: auto;
  border-radius: 0;
  object-fit: contain;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.header-nav a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  text-decoration: none;
}
.header-nav a:hover {
  color: var(--white);
  background: rgba(255,255,255,0.1);
}
.header-nav .nav-submit-ticket {
  background: var(--white);
  color: var(--brand-900) !important;
  border-radius: var(--radius-md);
  padding: 8px 20px;
  font-weight: 600;
  font-size: 14px;
}
.header-nav .nav-submit-ticket:hover {
  background: rgba(255,255,255,0.9);
  color: var(--brand-900) !important;
}
.header-nav .nav-sign-in,
.header-nav .nav-services {
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-md);
  padding: 7px 18px;
  font-weight: 600;
  font-size: 14px;
  color: var(--white) !important;
}
.header-nav .nav-sign-in:hover,
.header-nav .nav-services:hover {
  border-color: rgba(255,255,255,0.8);
  color: var(--white) !important;
  background: rgba(255,255,255,0.1);
}
/* --- User Profile Dropdown --- */
.user-menu {
  position: relative;
}
.user-menu-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 50px;
  padding: 4px 10px 4px 4px;
  cursor: pointer;
  transition: all var(--transition);
}
.user-menu-toggle:hover {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.15);
}
.header-user-avatar,
.header-user-avatar img,
.user-menu-toggle .user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.dropdown-caret {
  color: rgba(255,255,255,0.7);
  transition: transform var(--transition);
}
.user-menu-toggle[aria-expanded="true"] .dropdown-caret {
  transform: rotate(180deg);
}
.user-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 240px;
  padding: 8px 0;
  z-index: 200;
  display: none;
}
.user-menu.is-open .user-dropdown-menu,
.user-menu-toggle[aria-expanded="true"] + .user-dropdown-menu {
  display: block;
}
.user-dropdown-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
.dropdown-avatar,
.dropdown-avatar img,
.user-dropdown-header .user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.dropdown-user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
}
.user-dropdown-divider {
  height: 1px;
  background: var(--gray-100);
  margin: 4px 0;
}
.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700) !important;
  text-decoration: none;
  transition: all var(--transition);
  cursor: pointer;
}
.user-dropdown-item:hover {
  background: var(--brand-50);
  color: var(--brand) !important;
}
.user-dropdown-item svg {
  color: var(--gray-400);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.user-dropdown-item:hover svg {
  color: var(--brand);
}
.user-dropdown-signout {
  color: var(--gray-500) !important;
}
.user-dropdown-signout:hover {
  color: #dc2626 !important;
  background: #fef2f2;
}
/* --- Mobile Header --- */
.mobile-nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--white);
}
@media (max-width: 768px) {
  .mobile-nav-toggle {
    display: flex;
  }
  .header-nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--brand-900);
    flex-direction: column;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  }
  .header-nav.is-open {
    display: flex;
  }
  .header-nav a {
    width: 100%;
    text-align: center;
    padding: 12px 16px;
  }
}
/* --- Hero Section --- */
.hero-section {
  background: linear-gradient(135deg, var(--brand-900) 0%, var(--brand-700) 30%, var(--brand-500) 70%, var(--brand-400) 100%);
  position: relative;
  overflow: hidden;
  padding: 72px 24px 72px;
  text-align: center;
}
.hero-inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  top: auto;
  transform: none;
  z-index: 2;
}
.hero-gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.3;
  pointer-events: none;
}
.hero-orb-1 {
  width: 400px;
  height: 400px;
  background: var(--brand-300);
  top: -100px;
  right: -50px;
}
.hero-orb-2 {
  width: 300px;
  height: 300px;
  background: var(--brand-accent);
  bottom: -80px;
  left: -30px;
}
.hero-title {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -1px;
  margin-bottom: 12px;
  line-height: 1.15;
}
.hero-subtitle {
  font-size: 18px;
  color: rgba(255,255,255,0.8);
  margin-bottom: 36px;
  font-weight: 400;
  line-height: 1.5;
}
/* --- Search Bar (old custom - overridden by Zendesk widget styles below) --- */
.search-icon {
  width: 20px;
  height: 20px;
  color: var(--gray-400);
  flex-shrink: 0;
}
.hero-search input[type="search"] {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  padding: 12px 16px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
}
.hero-search input[type="search"]::placeholder {
  color: var(--gray-400);
}
.hero-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.search-submit {
  background: var(--brand);
  color: var(--white);
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition);
  flex-shrink: 0;
  padding: 0;
}
.search-submit svg {
  width: 20px;
  height: 20px;
}
.search-submit:hover {
  background: var(--brand-700);
}
/* --- Quick Links --- */
.hero-quick-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.quick-links-label {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
}
.quick-link-tag {
  font-size: 13px;
  color: rgba(255,255,255,0.85) !important;
  background: rgba(255,255,255,0.12);
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.15);
  transition: all var(--transition);
  font-weight: 500;
}
.quick-link-tag:hover {
  background: rgba(255,255,255,0.22);
  color: var(--white) !important;
  border-color: rgba(255,255,255,0.3);
}
/* --- Main Content --- */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}
/* --- Section Headers --- */
.section-header {
  margin-bottom: 28px;
}
.section-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.title-icon {
  width: 22px;
  height: 22px;
  color: var(--brand);
}
.section-description {
  font-size: 15px;
  color: var(--gray-500);
  margin-top: 6px;
}
/* --- KB + Promoted Row --- */
.kb-promoted-row {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: stretch;
  margin-bottom: 48px;
}
@media (max-width: 1024px) {
  .kb-promoted-row {
    grid-template-columns: 1fr;
  }
}
/* --- KB Grid --- */
.kb-section {
  margin-bottom: 0;
}
.kb-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 700px) {
  .kb-grid {
    grid-template-columns: 1fr;
  }
}
.kb-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  min-height: 88px;
  background: var(--white);
  border: 1px solid var(--brand-200);
  border-radius: var(--radius-lg);
  transition: all var(--transition);
  text-decoration: none;
  color: var(--text);
}
.kb-card:hover,
.kb-card:active,
.kb-card:focus,
.kb-card:visited {
  border-color: var(--brand-200);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  color: var(--text);
  text-decoration: none;
}
.kb-card:hover .kb-card-arrow {
  transform: translateX(4px);
  color: var(--brand);
}
.kb-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kb-card-icon svg {
  width: 24px;
  height: 24px;
  color: var(--brand);
}
.kb-card-content {
  flex: 1;
  min-width: 0;
}
.kb-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 4px;
}
.kb-card-desc {
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kb-card-arrow {
  width: 20px;
  height: 20px;
  color: var(--gray-300);
  flex-shrink: 0;
  transition: all var(--transition);
}
/* --- Promoted Sidebar --- */
.promoted-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}
.promoted-section-full {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.promoted-section-full .promoted-list {
  flex: 1;
}
/* --- Promoted Articles --- */
.promoted-section {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.promoted-sidebar .promoted-section .section-header {
  margin-bottom: 16px;
}
.promoted-sidebar .promoted-section .section-title {
  font-size: 18px;
}
.promoted-sidebar .promoted-item {
  padding: 12px 20px;
}
.promoted-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.promoted-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--text) !important;
  transition: all var(--transition);
}
.promoted-item:hover {
  background: var(--brand-50);
  border-color: var(--brand-200);
  color: var(--brand) !important;
}
.promoted-item:hover .chevron-icon {
  transform: translateX(3px);
  color: var(--brand);
}
.promoted-item-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.promoted-icon {
  width: 18px;
  height: 18px;
  color: var(--brand-300);
  flex-shrink: 0;
}
.promoted-item-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}
.chevron-icon {
  width: 16px;
  height: 16px;
  color: var(--gray-300);
  flex-shrink: 0;
  transition: all var(--transition);
}
/* --- Activity Section (Full Width) --- */
/* Main styles for .activity-section-full are in the Zendesk Built-in Recent Activity section below */
.activity-tables-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 4px;
}
@media (max-width: 1024px) {
  .activity-tables-row {
    grid-template-columns: 1fr;
  }
}
.activity-table-block {
  min-width: 0;
}
.activity-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.activity-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.activity-table thead th {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 2px solid var(--gray-200);
  white-space: nowrap;
}
.activity-table tbody td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
  vertical-align: middle;
}
.activity-table tbody tr:hover td {
  background: var(--gray-50);
}
.activity-table .col-subject {
  min-width: 160px;
}
.activity-table .col-subject a {
  font-weight: 500;
  color: var(--text);
}
.activity-table .col-subject a:hover {
  color: var(--brand);
}
.activity-table .col-id {
  width: 70px;
  color: var(--gray-400);
  font-family: monospace;
  font-size: 12px;
}
.activity-table .col-status {
  width: 90px;
}
.activity-table .col-priority {
  width: 80px;
}
.activity-table .col-date,
.activity-table .col-updated {
  width: 100px;
  white-space: nowrap;
  font-size: 12px;
  color: var(--gray-400);
}
.activity-table .col-activity {
  width: 110px;
  font-size: 12px;
}
.activity-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 20px;
  display: inline-block;
}
.activity-badge.activity-comment {
  background: #EEF2FF;
  color: #4F46E5;
}
.activity-badge.activity-status-change {
  background: #FEF3C7;
  color: #D97706;
}
.activity-badge.activity-assigned {
  background: #E0E7FF;
  color: #4338CA;
}
.activity-badge.activity-created {
  background: #D1FAE5;
  color: #059669;
}
.activity-table .col-action {
  width: 40px;
  text-align: center;
}
.ticket-open-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  color: var(--gray-400);
  transition: all var(--transition);
}
.ticket-open-link:hover {
  background: var(--brand-50);
  color: var(--brand);
}
.ticket-open-link svg {
  width: 16px;
  height: 16px;
}
/* Remove two-table row since we only have one table now */
.activity-tables-row {
  display: block;
}
.activity-subsection {
  margin-top: 20px;
}
.activity-subsection:first-of-type {
  margin-top: 0;
}
.subsection-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-100);
}
.ticket-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ticket-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.ticket-item:hover {
  background: var(--gray-50);
}
.ticket-item a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ticket-item a:hover {
  color: var(--brand);
}
.ticket-status {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  margin-left: 12px;
}
.ticket-status.status-new {
  background: #EEF2FF;
  color: #4F46E5;
}
.ticket-status.status-open {
  background: #FEF3C7;
  color: #D97706;
}
.ticket-status.status-pending {
  background: #FEE2E2;
  color: #DC2626;
}
.ticket-status.status-solved {
  background: #D1FAE5;
  color: #059669;
}
.ticket-date {
  font-size: 12px;
  color: var(--gray-400);
  flex-shrink: 0;
  margin-left: 12px;
}
.ticket-placeholder {
  font-size: 14px;
  color: var(--gray-400);
  padding: 8px 0;
}
.view-all-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand) !important;
  margin-top: 12px;
  transition: all var(--transition);
}
.view-all-link:hover {
  color: var(--brand-700) !important;
}
/* --- Sign In Prompt --- */
.sign-in-prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background: var(--brand-50);
  border-radius: var(--radius-md);
  border: 1px dashed var(--brand-200);
}
.sign-in-prompt svg {
  width: 24px;
  height: 24px;
  color: var(--brand);
  flex-shrink: 0;
}
.sign-in-prompt p {
  font-size: 14px;
  color: var(--gray-600);
}
.sign-in-prompt a {
  font-weight: 600;
}
/* --- Community Items --- */
.community-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.community-item {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text) !important;
  transition: background var(--transition);
}
.community-item:hover {
  background: var(--gray-50);
}
.community-item-title {
  font-size: 14px;
  font-weight: 500;
}
.community-item-meta {
  font-size: 12px;
  color: var(--gray-400);
  margin-top: 2px;
}
/* --- Footer --- */
.footer {
  background: var(--gray-900);
  color: var(--gray-400);
  padding: 32px 24px;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.footer-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 10px;
  max-width: 640px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-brand img,
.footer-brand .footer-logo-img {
  height: 24px;
  width: auto;
  object-fit: contain;
  opacity: 0.9;
}
.footer-legal {
  font-size: 11px;
  line-height: 1.6;
  color: var(--gray-500);
  margin: 0;
  text-align: left;
}
.footer-bottom {
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gray-500);
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-bottom {
    text-align: left;
    white-space: normal;
  }
}
/* =============================================
   ARTICLE PAGE
   ============================================= */
.article-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 48px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
}
/* Override base Zendesk flex layout on article page */
.article-container .article-sidebar {
  border: 0;
  flex: none;
  max-width: none;
  width: auto;
  margin-bottom: 0;
  padding: 0;
}
.article-container .article {
  flex: none;
  max-width: none;
  min-width: 0;
  padding: 0;
}
/* Sidebar article links should wrap, not truncate */
.article-sidebar .sidenav-item,
.article-sidebar .collapsible-sidebar-title,
.article-sidebar a {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}
@media (max-width: 900px) {
  .article-container {
    grid-template-columns: 1fr;
  }
}
/* Breadcrumbs */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-400);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.breadcrumbs a {
  color: var(--gray-500);
  font-weight: 500;
}
.breadcrumbs a:hover {
  color: var(--brand);
}
.breadcrumbs .separator {
  color: var(--gray-300);
}
/* Article Content */
.article-header {
  margin-bottom: 32px;
}
/* Article author block — stacked layout like Zendesk default */
.article-author {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 0;
}
.article-author .avatar,
.article-author .article-avatar {
  flex-shrink: 0;
  margin-right: 0;
}
.article-author .avatar img,
.article-author .article-avatar img,
.article-author .user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.article-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.5px;
  line-height: 1.25;
  margin-bottom: 12px;
}
.article-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--gray-500);
}
.article-meta > a,
.article-meta > span > a {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800) !important;
  text-decoration: none;
}
.article-meta .meta-group {
  font-size: 13px;
  color: var(--gray-500);
}
.article-meta .avatar {
  display: none;
}
.article-body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--gray-700);
}
.article-body h1, .article-body h2, .article-body h3, .article-body h4 {
  color: var(--gray-900);
  margin-top: 32px;
  margin-bottom: 16px;
  font-weight: 700;
}
.article-body h2 {
  font-size: 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-200);
}
.article-body h3 {
  font-size: 20px;
}
.article-body p {
  margin-bottom: 16px;
}
.article-body ul, .article-body ol {
  margin-bottom: 16px;
  padding-left: 24px;
}
.article-body li {
  margin-bottom: 8px;
}
.article-body img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-md);
  margin: 20px auto;
}
.article-body pre {
  background: var(--gray-900);
  color: #E4E4E7;
  padding: 20px;
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.6;
}
.article-body code {
  background: var(--gray-100);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14px;
}
.article-body pre code {
  background: none;
  padding: 0;
}
.article-body blockquote {
  border-left: 4px solid var(--brand-200);
  padding: 16px 20px;
  margin: 16px 0;
  background: var(--brand-50);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--gray-700);
}
/* Tables are wrapped in .table-scroll by script.js so wide tables scroll
   horizontally on their own instead of breaking the article layout. */
.table-scroll {
  overflow-x: auto;
  margin: 20px 0;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 14px;
}
.table-scroll table {
  border: 0;
}
.article-body th, .article-body td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--gray-200);
  white-space: normal;
}
.article-body th {
  background: var(--gray-50);
  font-weight: 600;
  color: var(--gray-700);
  /* NOT nowrap. Article authors use single-cell <th> rows as instruction
     paragraphs, and nowrap put a whole sentence on one line — one row measured
     4665px min-content and gave a 704px table a 6.6x horizontal scroll. Short
     column headers wrap only when the table is genuinely cramped, which is the
     correct behaviour anyway. */
  white-space: normal;
}
.article-body tbody tr:nth-child(even) td {
  background: var(--gray-50);
}
.article-body tbody tr:last-child td {
  border-bottom: 0;
}
/* Article Sidebar */
.article-sidebar {
  position: sticky;
  top: 88px;
}
.sidebar-section {
  margin-bottom: 32px;
}
.sidebar-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.sidebar-links a {
  display: block;
  font-size: 14px;
  color: var(--gray-600) !important;
  padding: 6px 0;
  transition: color var(--transition);
}
.sidebar-links a:hover {
  color: var(--brand) !important;
}
/* Related articles in sidebar */
.sidebar-relatives {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-200);
}
.sidebar-relatives h3,
.sidebar-relatives .related-articles h3,
.sidebar-relatives .recent-articles h3 {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
/* Gap between the "Recently viewed" and "Related articles" widgets so the
   last link of one doesn't run straight into the next heading */
.sidebar-relatives .related-articles {
  margin-top: 24px;
}
.sidebar-relatives ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-relatives li {
  margin: 0;
  padding: 0;
}
.sidebar-relatives a {
  display: block;
  font-size: 14px;
  color: var(--gray-600) !important;
  padding: 6px 0;
  transition: color var(--transition);
  text-decoration: none;
}
.sidebar-relatives a:hover {
  color: var(--brand) !important;
}
/* Override base .article-relatives when inside sidebar.
   NOTE: deliberately does NOT reset border-top/padding-top — .sidebar-relatives
   sets those to draw the divider between "Articles in this section" and the
   "Recently viewed / Related" blocks. A blanket `border-top: none !important`
   here used to win on specificity and silently erase that divider. */
.article-sidebar .article-relatives {
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  display: block !important;
  flex-direction: unset !important;
}
.article-sidebar .article-relatives > * {
  flex: unset !important;
  min-width: unset !important;
  max-width: unset !important;
  padding-right: 0 !important;
}
/* Bottom cards — "Was this article helpful?" + "Have more questions?" */
.article-bottom-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 40px;
}
@media (max-width: 700px) {
  .article-bottom-cards {
    grid-template-columns: 1fr;
  }
}
.article-bottom-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* Override the old .article-votes styles so they don't conflict */
.article-votes {
  border-top: none !important;
  padding: 0 !important;
  background: transparent !important;
  margin-top: 0 !important;
}
.article-bottom-card-request .article-more-questions,
.article-bottom-card-request .request-callout {
  font-size: 15px;
  color: var(--gray-600);
  margin: 0;
  text-align: center;
}
.article-bottom-card-request .article-more-questions a,
.article-bottom-card-request .request-callout a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}
.article-bottom-card-request .article-more-questions a:hover,
.article-bottom-card-request .request-callout a:hover {
  text-decoration: underline;
}
/* Override base .article-more-questions when inside bottom cards */
.article-bottom-cards .article-more-questions {
  margin: 0 !important;
  text-align: center !important;
}
.article-votes-question {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 16px;
}
.article-votes-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/* Override base .button and .article-vote for the Yes/No buttons */
.article-vote.button,
button.article-vote,
.article-votes-controls .button,
.article-vote-up,
.article-vote-down {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 28px !important;
  min-width: 80px !important;
  width: auto !important;
  border-radius: 60px !important;
  border: 1.5px solid var(--gray-300) !important;
  background: var(--white) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-sans);
  color: var(--gray-600) !important;
  margin: 0 !important;
  box-sizing: border-box;
}
.article-vote-up:hover,
.article-vote.button:first-of-type:hover {
  border-color: #059669 !important;
  color: #059669 !important;
  background: #ecfdf5 !important;
}
.article-vote-down:hover,
.article-vote.button:last-of-type:hover {
  border-color: #dc2626 !important;
  color: #dc2626 !important;
  background: #fef2f2 !important;
}
/* Selected state */
.article-vote.button-primary,
.article-vote-up.button-primary {
  border-color: #059669 !important;
  color: var(--white) !important;
  background: #059669 !important;
}
.article-vote-down.button-primary {
  border-color: #dc2626 !important;
  color: var(--white) !important;
  background: #dc2626 !important;
}
.article-votes-count,
.article-vote-label {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  color: var(--gray-500);
}
/* Article Comments */
.article-comments {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--gray-200);
}
.article-comments h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}
.comment {
  padding: 20px 0;
  border-bottom: 1px solid var(--gray-100);
}
.comment-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  font-weight: 600;
  font-size: 13px;
}
.comment-author {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
}
.comment-date {
  font-size: 12px;
  color: var(--gray-400);
}
.comment-body {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.6;
}
/* =============================================
   CATEGORY / SECTION PAGES
   ============================================= */
.category-container, .section-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}
.category-header, .section-header-block {
  margin-bottom: 32px;
}
.category-title, .section-title-main {
  font-size: 28px;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.3px;
}
.category-desc, .section-desc {
  font-size: 15px;
  color: var(--gray-500);
  margin-top: 8px;
}
/* Section tree in category — card grid like homepage KB */
.section-tree {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  flex-direction: unset !important;
  flex-wrap: unset !important;
}
@media (max-width: 700px) {
  .section-tree {
    grid-template-columns: 1fr;
  }
}
.section-tree .section {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  min-height: 88px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  transition: all var(--transition);
  text-decoration: none;
  color: var(--text);
  position: relative;
  flex: unset !important;
  max-width: unset !important;
  cursor: pointer;
  margin-bottom: 0 !important;
}
.section-tree .section:hover {
  border-color: var(--brand-200);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
/* Icon pseudo-element (matches .kb-card-icon) */
.section-tree .section::before {
  content: '';
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  flex-shrink: 0;
  order: -1;
}
/* Arrow pseudo-element (matches .kb-card-arrow) */
.section-tree .section::after {
  content: '';
  width: 20px;
  height: 20px;
  min-width: 20px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: auto;
  transition: all var(--transition);
}
.section-tree .section:hover::after {
  transform: translateX(4px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
}
/* Section title styling */
.section-tree-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--gray-900);
  margin-bottom: 0 !important;
  flex: 1;
  min-width: 0;
}
.section-tree-title a {
  color: var(--gray-900) !important;
  text-decoration: none;
}
/* Hide article lists inside the section cards — keep it clean */
.section-tree .section .article-list,
.section-tree .section .see-all-articles {
  display: none;
}
/* Section list in category — grid of cards instead of a tall stacked list.
   .section-list-item is the class the templates actually render; .section-item
   is kept as an alias in case a future template uses it. */
.section-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin: 0;
}
.section-item,
.section-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  color: var(--text) !important;
  transition: all var(--transition);
}
.section-item:hover,
.section-list-item:hover {
  border-color: var(--brand-200);
  box-shadow: var(--shadow-md);
}
.section-list-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-weight: 600;
  color: var(--gray-900) !important;
  text-decoration: none !important;
}
.section-list-item svg {
  color: var(--gray-300);
  flex-shrink: 0;
  margin-left: 12px;
}
.section-item-content {
  flex: 1;
}
.section-item-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
}
.section-item-meta {
  font-size: 13px;
  color: var(--gray-400);
  margin-top: 4px;
}
/* Article list in section — grid of cards instead of a tall stacked list */
.article-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin: 0;
}
.article-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--text) !important;
  transition: all var(--transition);
}
@media (max-width: 700px) {
  .section-list,
  .article-list {
    grid-template-columns: 1fr;
  }
}
.article-list-item:hover {
  background: var(--brand-50);
  border-color: var(--brand-200);
}
.article-list-item:hover .chevron-icon {
  transform: translateX(3px);
  color: var(--brand);
}
.article-list-item-title {
  font-size: 15px;
  font-weight: 500;
  flex: 1;
}
/* =============================================
   SEARCH RESULTS
   ============================================= */
.search-results-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}
.search-results-header {
  margin-bottom: 32px;
}
.search-results-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--gray-900);
}
.search-results-info {
  font-size: 14px;
  color: var(--gray-500);
  margin-top: 4px;
}
.search-result {
  padding: 24px 0;
  border-bottom: 1px solid var(--gray-100);
}
.search-result-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--brand);
  margin-bottom: 6px;
}
.search-result-title:hover {
  color: var(--brand-700);
}
.search-result-path {
  font-size: 12px;
  color: var(--gray-400);
  margin-bottom: 8px;
}
.search-result-snippet {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.6;
}
.search-result-snippet em {
  background: var(--brand-100);
  font-style: normal;
  padding: 1px 3px;
  border-radius: 3px;
}
/* =============================================
   REQUEST / TICKET PAGES
   ============================================= */
.request-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}
/* Fix avatar to be full circle on request/comment pages */
.comment-avatar,
.comment-avatar img,
.comment-avatar .user-avatar,
.avatar img,
.avatar .user-avatar {
  border-radius: 50% !important;
  object-fit: cover;
}
.comment-avatar img,
.comment-avatar .user-avatar {
  width: 100%;
  height: 100%;
}
.request-form-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}
.request-table {
  width: 100%;
  border-collapse: collapse;
}
.request-table th {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 2px solid var(--gray-200);
}
.request-table td {
  padding: 16px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 14px;
}
.request-table a {
  font-weight: 500;
}
.request-table tr:hover td {
  background: var(--gray-50);
}
/* Forms */
.form-field {
  margin-bottom: 24px;
}
.form-field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 6px;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
  background: var(--white);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(91, 45, 142, 0.1);
}
.form-field textarea {
  min-height: 160px;
  resize: vertical;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand);
  color: var(--white) !important;
  padding: 12px 28px;
  border-radius: var(--radius-md);
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-sans);
}
.btn-primary:hover {
  background: var(--brand-700);
  color: var(--white) !important;
  box-shadow: var(--shadow-md);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  color: var(--gray-700) !important;
  padding: 12px 28px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--gray-300);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-sans);
}
.btn-secondary:hover {
  border-color: var(--brand);
  color: var(--brand) !important;
  background: var(--brand-50);
}
/* =============================================
   USER PROFILE PAGE
   ============================================= */
.profile-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}
.profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--gray-200);
}
.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-100), var(--brand-200));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  font-weight: 700;
  font-size: 24px;
}
.profile-name {
  font-size: 24px;
  font-weight: 700;
  color: var(--gray-900);
}
.profile-info {
  font-size: 14px;
  color: var(--gray-500);
}
/* =============================================
   404 PAGE
   ============================================= */
.error-page {
  text-align: center;
  padding: 80px 24px;
  max-width: 600px;
  margin: 0 auto;
}
.error-code {
  font-size: 120px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 16px;
}
.error-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 12px;
}
.error-description {
  font-size: 16px;
  color: var(--gray-500);
  margin-bottom: 32px;
}
/* =============================================
   PAGINATION
   ============================================= */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 40px;
}
.pagination a, .pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-600);
  transition: all var(--transition);
}
.pagination a:hover {
  background: var(--brand-50);
  color: var(--brand);
}
.pagination .current {
  background: var(--brand);
  color: var(--white);
  font-weight: 600;
}
/* =============================================
   UTILITIES
   ============================================= */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
  .hero-section {
    padding: 56px 16px 56px;
  }
  .hero-title {
    font-size: 30px;
  }
  .hero-subtitle {
    font-size: 16px;
  }
  .search-submit {
    padding: 12px 20px;
    font-size: 14px;
  }
  .main-content {
    padding: 32px 16px 60px;
  }
  .kb-grid {
    grid-template-columns: 1fr;
  }
  .article-container {
    padding: 24px 16px 60px;
  }
  .article-title {
    font-size: 24px;
  }
  .footer-inner {
    flex-direction: column;
    text-align: center;
  }
  .footer-links {
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .hero-search-inner {
    flex-direction: column;
    border-radius: var(--radius-lg);
    padding: 8px;
    gap: 4px;
  }
  .search-icon {
    display: none;
  }
  .hero-search input[type="search"] {
    padding: 10px 12px;
    text-align: center;
  }
  .search-submit {
    width: 100%;
    border-radius: var(--radius-md);
  }
}
/* =============================================
   ZENDESK OVERRIDES
   ============================================= */
/* Override default Zendesk styles */
[role="main"] {
  padding: 0 !important;
}
/* Show sub-nav on inner pages with proper styling */
.sub-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px 30px;
  margin-bottom: 24px;
  padding-top: 24px;
}
.container-divider {
  border-top: none;
  margin-bottom: 0;
}
/* Standardize ALL search bars sitewide to rounded pill style */
.search,
.requests-table-toolbar .search,
.requests-search .search,
.search-container .search {
  border-color: var(--gray-200) !important;
  border-radius: 60px !important;
  border-width: 1px !important;
  border-style: solid !important;
  background: var(--white);
  overflow: hidden;
}
.search:focus-within,
.requests-table-toolbar .search:focus-within {
  border-color: var(--brand-300) !important;
  box-shadow: 0 0 0 2px rgba(168,127,212,0.15);
}
/* All search inputs — full oval, consistent height */
.search input[type=search],
.search input[type=text],
.requests-table-toolbar .search input[type=search],
.requests-table-toolbar .search input[type=text],
input[type=search],
#quick-search {
  height: 44px !important;
  font-size: 15px !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  border-radius: 60px !important;
  border: none !important;
  outline: none !important;
  box-sizing: border-box;
}
.search input[type=search]::placeholder,
input[type=search]::placeholder,
#quick-search::placeholder {
  color: var(--gray-400);
}
/* Prevent search-has-value from breaking the pill radius on any page */
.search-has-value input[type=search],
[dir=ltr] .search-has-value input[type=search],
[dir=rtl] .search-has-value input[type=search] {
  border-radius: 60px !important;
  border-top-right-radius: 60px !important;
  border-bottom-right-radius: 60px !important;
  border-top-left-radius: 60px !important;
  border-bottom-left-radius: 60px !important;
}
/* Hide clear buttons globally to keep clean pill shape */
.search .clear-button,
.search-has-value .clear-button {
  display: none !important;
}
/* Sub-nav search specific sizing */
.sub-nav .search-container {
  max-width: 320px;
}
.sub-nav .search {
  border-color: var(--gray-200) !important;
}
/* Requests page toolbar search */
.requests-table-toolbar .search {
  flex: 1;
  min-width: 200px;
}
/* All Requests / My Activities page header spacing */
.my-activities-header {
  padding-top: 24px;
  margin-bottom: 16px;
}
.my-activities-header h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--gray-900);
}
/* Smooth transitions for all interactive elements */
button, a, input, textarea, select {
  transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
/* Focus states for accessibility */
:focus {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
/* --- Zendesk Built-in Search Widget Styling --- */
.hero-search {
  max-width: 600px;
  margin: 0 auto 0;
  position: relative;
}
.hero-search .search {
  width: 100%;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.hero-search .search form,
.hero-search form[role="search"] {
  display: flex;
  align-items: center;
  background: var(--white);
  border-radius: 60px;
  padding: 4px 4px 4px 20px;
  border: 2px solid var(--gray-900);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  transition: box-shadow var(--transition);
  width: 100%;
  box-sizing: border-box;
}
.hero-search .search form:focus-within {
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.hero-search .search input[type="search"],
.hero-search .search input[type="text"] {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  padding: 12px 16px 12px 32px;
  background: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 4px center;
  background-size: 18px 18px;
  color: var(--text);
  font-family: var(--font-sans);
  min-width: 0;
  text-align: left;
}
.hero-search .search input[type="search"]::placeholder,
.hero-search .search input[type="text"]::placeholder {
  color: var(--gray-400);
}
.hero-search .search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
/* Hide the Zendesk search clear button */
.hero-search .search .clear-button,
.hero-search .search .search-clear {
  display: none !important;
}
/* Prevent search-has-value border changes inside hero search */
.hero-search .search-has-value input[type=search] {
  border-radius: 30px !important;
  border-color: transparent !important;
}
.hero-search .search-has-value .clear-button {
  display: none !important;
}
/* The search submit button is now a real button outside the Zendesk form */
.hero-search .search form::after {
  display: none;
}
/* Purple circle submit button — positioned inside the pill */
.search-submit-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--brand-500);
  color: var(--white);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition);
  z-index: 5;
  padding: 0;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.search-submit-btn svg {
  width: 18px;
  height: 18px;
}
.search-submit-btn:hover {
  background: var(--brand-700);
}
/* Also handle when Zendesk renders search differently (non-form) */
.hero-search .search-full {
  width: 100%;
}
.hero-search .search-full input[type="search"],
.hero-search .search-full input[type="text"] {
  width: 100%;
  padding: 16px 24px;
  font-size: 16px;
  border: none;
  border-radius: 60px;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-sans);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  transition: all var(--transition);
}
.hero-search .search-full input[type="search"]:focus,
.hero-search .search-full input[type="text"]:focus {
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  outline: none;
}
.hero-search .search-full input[type="search"]::placeholder,
.hero-search .search-full input[type="text"]::placeholder {
  color: var(--gray-400);
}
/* --- Recent Requests Section (Homepage) --- */
.recent-requests-section {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-top: 0;
}
/* Header row: title left, dropdown right */
.recent-requests-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 4px;
}
.rr-row-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.rr-row-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-500);
}
.rr-row-dropdown {
  padding: 4px 8px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm, 6px);
  font-size: 13px;
  color: var(--gray-700);
  background: var(--white);
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition);
}
.rr-row-dropdown:hover {
  border-color: var(--gray-400);
}
.rr-row-dropdown:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}
.recent-requests-table-wrap {
  overflow-x: auto;
  margin-top: 4px;
}
.recent-requests-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.recent-requests-table thead th {
  text-align: left;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--gray-200);
}
.recent-requests-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
}
.recent-requests-table tbody tr:last-child td {
  border-bottom: none;
}
.recent-requests-table tbody tr:hover {
  background: var(--gray-50);
}
.recent-requests-table a {
  color: var(--brand-500);
  text-decoration: none;
  font-weight: 500;
}
.recent-requests-table a:hover {
  color: var(--brand-700);
  text-decoration: underline;
}
.recent-requests-loading {
  text-align: center;
  color: var(--gray-400);
  padding: 24px 16px !important;
}
.rr-status {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
  text-transform: capitalize;
}
.rr-status-new { background: #dbeafe; color: #1e40af; }
.rr-status-open { background: #fef3c7; color: #92400e; }
.rr-status-pending { background: #e0e7ff; color: #3730a3; }
.rr-status-hold { background: #f3e8ff; color: #6b21a8; }
.rr-status-solved { background: #d1fae5; color: #065f46; }
.rr-status-closed { background: #d1fae5; color: #065f46; }
.rr-status-escalated { background: #fee2e2; color: #991b1b; }
.rr-status-in-progress { background: #fef3c7; color: #92400e; }
/* Detail page status badges for custom statuses */
.status-label-in-progress {
  background-color: #fef3c7 !important;
  color: #92400e !important;
}
.status-label-escalated {
  background-color: #fee2e2 !important;
  color: #991b1b !important;
}
/* Priority badges for recent tickets */
.rr-priority-urgent { color: #dc2626; font-weight: 600; }
.rr-priority-high { color: #ea580c; font-weight: 600; }
.rr-priority-normal { color: var(--gray-600); font-weight: 500; }
.rr-priority-low { color: var(--gray-400); font-weight: 500; }
.recent-requests-footer {
  margin-top: 16px;
  text-align: center;
}
.view-all-requests {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-500) !important;
  text-decoration: none;
  padding: 8px 20px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--brand-200);
  transition: all var(--transition);
}
.view-all-requests:hover {
  background: var(--brand-50);
  border-color: var(--brand-400);
  color: var(--brand-700) !important;
}
/* ============================================
   ALL TICKETS PAGE (requests_page)
   ============================================
   Scoped to pages with .my-activities-header.
   Strategy: CSS-only overrides with targeted selectors.
   JS only handles data-dependent logic (status colors,
   column renaming, API calls). No blanket JS inline styles.
   ============================================ */

/* --- Page-level layout: left-align, transparent background --- */
.my-activities-header ~ div,
.my-activities-header ~ section {
  text-align: left;
}
.my-activities-header ~ #main-content {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* Strip ALL wrapper chrome (any element type) under main-content.
   Preserves protected elements: table card, search pill, dialogs/portals,
   form controls, icons, and tabs (which have their own intentional styling). */
.my-activities-header ~ #main-content *:not([data-rr-table-card]):not([data-rr-table-card] *):not([data-rr-search-pill]):not([data-rr-search-pill] *):not([role="dialog"]):not([role="dialog"] *):not([data-rr-backdrop]):not([data-rr-backdrop] *):not([data-garden-id*="modal"] *):not([data-garden-id*="tooltip"] *):not([data-garden-container-id]):not([data-garden-container-id] *):not([data-garden-id^="modals."]):not([data-garden-id^="modals."] *):not([data-garden-id^="dropdowns."]):not([data-garden-id^="dropdowns."] *):not(input):not(button):not(svg):not(svg *):not(table):not(table *):not(a) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* --- Left-align wrapper divs (exclude overlays) --- */
.my-activities-header ~ #main-content div:not([data-rr-table-card] *):not([role="dialog"]):not([role="dialog"] *):not([role="presentation"]):not([role="presentation"] *):not([role="listbox"]):not([role="listbox"] *):not([data-garden-id^="modals."] *):not([data-garden-id^="dropdowns."] *):not([data-garden-container-id] *):not([data-rr-backdrop] *):not([data-garden-id*="modal"] *):not([data-garden-id*="tooltip"] *) {
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
}
/* Re-apply center alignment for flex-row containers (search + filter toolbar) */
.my-activities-header ~ #main-content div[style*="flex-direction"],
.my-activities-header ~ #main-content div[data-rr-toolbar-row] {
  align-items: center !important;
}

/* --- Tab styling --- */
.my-activities-header ~ #main-content [role="tab"][aria-selected="true"],
.my-activities-header ~ #main-content [role="tab"].is-selected {
  border-bottom: 3px solid var(--brand-500, #7C3AED) !important;
}
.my-activities-header ~ #main-content [role="tab"][aria-selected="false"] {
  border-bottom: none !important;
}
.my-activities-header ~ #main-content [role="tablist"] {
  border-bottom: 1px solid #E4E4E7 !important;
}

/* --- Ticket table card --- */
[data-rr-table-card] {
  background: #fff !important;
  border: 1px solid #E4E4E7 !important;
  border-radius: 16px !important;
  padding-bottom: 4px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  margin-top: 16px !important;
  box-shadow: none !important;
}

/* Table header styling */
[data-rr-table-card] thead,
[data-rr-table-card] thead tr {
  border-bottom: 1px solid #E4E4E7 !important;
}
[data-rr-table-card] th {
  border-bottom: 1px solid #E4E4E7 !important;
}
[data-rr-table-card] th:first-child,
[data-rr-table-card] td:first-child {
  padding-left: 24px !important;
}

/* Fix table header truncation */
[data-rr-table-card] th:not(:last-child),
[data-rr-table-card] th:not(:last-child) * {
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
  white-space: nowrap !important;
}

/* Three-dot options column: fixed narrow width */
[data-rr-table-card] th:last-child,
[data-rr-table-card] td:last-child {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  overflow: visible !important;
}
[data-rr-table-card] th:last-child button {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Cell alignment */
[data-rr-table-card] td,
[data-rr-table-card] td *,
#main-content table:not([role="dialog"] table) td,
#main-content table:not([role="dialog"] table) td * {
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

/* Table row backgrounds & hover */
#main-content table thead tr { background: #fff; }
#main-content table tbody tr { background: #fff; }
#main-content table tbody td { background: transparent !important; }
#main-content table tbody tr:hover td { background: var(--gray-50, #F9FAFB) !important; }
#main-content table a { color: var(--brand-500) !important; text-decoration: none !important; font-weight: 500 !important; }
#main-content table a:hover { color: var(--brand-700) !important; text-decoration: underline !important; }

/* Status cell inner wrappers — flatten padding */
[data-rr-table-card] td [data-rr-styled] ~ *,
[data-rr-table-card] td div:not([data-rr-table-card]) {
  padding: 0 !important;
  margin: 0 !important;
}

/* Empty state — remove borders */
.my-activities-header ~ #main-content .requests-empty,
.my-activities-header ~ #main-content [role="status"]:not([role="dialog"] *) {
  border: none !important;
  box-shadow: none !important;
}

/* ============================================
   DIALOGS (filter popup, column picker)
   ============================================
   Let Garden UI handle layout/positioning natively.
   Only override visual styling (colors, shadows, search bar).
   ============================================ */

/* Text normalization */
[role="dialog"],
[role="dialog"] * {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Dialog chrome */
[role="dialog"] {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
  min-width: 420px !important;
  max-width: 600px !important;
  color: #1f2937 !important;
  background: #fff !important;
  border-radius: 12px !important;
  position: relative !important;
}

/* Column picker dialog — constrain height and make it a flex column.
   SINGLE scroll zone: only the div containing the table/grid scrolls.
   Every other element has overflow:visible to prevent secondary scrollbars. */
[role="dialog"]:has(table),
[role="dialog"]:has([role="grid"]),
[role="dialog"]:has([role="gridcell"]) {
  max-height: 55vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
/* Kill overflow on every descendant first (eliminates ALL nested scrollbars) */
[role="dialog"]:has(table) *,
[role="dialog"]:has([role="grid"]) * {
  overflow: visible !important;
  max-height: none !important;
}
/* Then re-enable scroll on ONLY the single div that actually contains the grid */
[role="dialog"]:has(table) > div:has(table),
[role="dialog"]:has([role="grid"]) > div:has([role="grid"]),
[role="dialog"]:has([role="gridcell"]) > div:has([role="gridcell"]) {
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
/* All other direct children of the dialog (header, search row, footer) don't shrink */
[role="dialog"]:has(table) > div:not(:has(table)):not(:has([role="grid"])),
[role="dialog"]:has([role="grid"]) > div:not(:has([role="grid"])) {
  flex-shrink: 0 !important;
}

/* Filter dialog — needs overflow:visible so dropdown options render above */
[role="dialog"]:has([data-garden-id^="dropdowns."]),
[role="dialog"]:has(select),
[role="dialog"]:not(:has(table)):not(:has([role="grid"])) {
  overflow: visible !important;
  max-height: none !important;
}

/* Column picker checkbox column — hug content */
[role="dialog"] td:first-child,
[role="dialog"] th:first-child,
[role="dialog"] [role="row"] > *:first-child,
[role="dialog"] [role="gridcell"]:first-child,
[role="dialog"] tr > *:first-child {
  width: 1px !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

/* Undo cell alignment overrides inside dialogs */
[role="dialog"] td,
[role="dialog"] td *,
[role="dialog"] th,
[role="dialog"] th * {
  text-align: unset !important;
  justify-content: unset !important;
  align-items: unset !important;
}

/* Dialog text color (do NOT touch layout props — Garden uses visually-hidden patterns) */
[role="dialog"] span,
[role="dialog"] label,
[role="dialog"] p,
[role="dialog"] li,
[role="dialog"] div,
[role="dialog"] a,
[role="dialog"] button,
[role="dialog"] h1, [role="dialog"] h2, [role="dialog"] h3 {
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
}

/* ============================================
   GARDEN PORTAL Z-INDEX FIX (Issue #1)
   ============================================
   Garden renders dropdown listboxes as portals at <body> level.
   They must sit ABOVE the dialog backdrop (z-index 9999). */

body > [data-garden-container-id],
body > div:has(> [role="listbox"]),
body > div:has(> [role="menu"]),
[data-garden-id^="dropdowns."],
[role="listbox"]:not(#main-content [role="listbox"]),
body > div > [role="listbox"],
body > div > [role="menu"] {
  z-index: 10001 !important;
}

/* Also boost tooltip popups */
[role="tooltip"], [role="tooltip"] *,
[data-garden-id*="tooltip"], [data-garden-id*="tooltip"] * {
  text-transform: none !important;
  letter-spacing: normal !important;
  z-index: 10002 !important;
}

/* Overlay/menu text reset */
[role="menu"] *,
[data-garden-container-id] *:not(th):not(th *):not([role="dialog"] *) {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* === All Tickets page search pill === */
[data-rr-search-pill] {
  position: relative !important;
}
[data-rr-search-pill]::before {
  content: none !important;
  display: none !important;
}
[data-rr-search-pill] svg {
  display: block !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  color: #9CA3AF !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
[data-rr-search-pill] > div > div:has(svg),
[data-rr-search-pill] > div:has(> svg) {
  display: block !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  pointer-events: none !important;
  z-index: 2 !important;
  overflow: visible !important;
}
[data-rr-search-pill] input {
  background: transparent !important;
}

/* === Hero search bar — magnifying glass via ::before on the form === */
.hero-search .search form::before,
.hero-search form[role="search"]::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  min-width: 20px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center / contain;
  margin-right: 4px;
}

/* Dialog search bar: compact and rounded to match page search */
[role="dialog"] [data-garden-id="forms.faux_input"] {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 20px !important;
  border: 1px solid var(--gray-300, #d4d4d8) !important;
  display: flex !important;
  align-items: center !important;
  background: var(--white, #fff) !important;
  gap: 8px !important;
}
[role="dialog"] [data-garden-id="forms.faux_input"] > * {
  display: flex !important;
  align-items: center !important;
}
[role="dialog"] [data-garden-id="forms.faux_input"] svg {
  flex-shrink: 0 !important;
}
[role="dialog"] [data-garden-id="forms.media_input"] {
  height: 36px !important;
  font-size: 14px !important;
  border: none !important;
  padding: 0 4px !important;
  flex: 1 !important;
}
[role="dialog"] [data-garden-id="forms.field"] {
  margin-bottom: 8px !important;
}
/* --- Zendesk Built-in Recent Activity Styling (fallback) --- */
.activity-section-full {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-top: 0;
}
.activity-section-full h2,
.activity-section-full .recent-activity-header h2,
.activity-section-full > section > h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.3px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--gray-100);
}
/* Remove duplicate nested heading styling */
.activity-section-full h2 + h2 {
  display: none;
}
.activity-section-full a {
  color: var(--brand);
  text-decoration: none;
  font-weight: 500;
}
.activity-section-full a:hover {
  color: var(--brand-700);
}
/* Style the activity items list */
.activity-section-full ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.activity-section-full li,
.activity-section-full .recent-activity-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--gray-100);
}
.activity-section-full li:last-child,
.activity-section-full .recent-activity-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.activity-section-full li:first-child,
.activity-section-full .recent-activity-item:first-child {
  padding-top: 0;
}
/* Style meta info within activity items */
.activity-section-full .meta-group,
.activity-section-full small,
.activity-section-full .meta-data {
  color: var(--gray-500);
  font-size: 13px;
}
/* Style the recent_activity Zendesk widget container */
.activity-section-full section {
  margin: 0;
  padding: 0;
}
/* Ensure proper spacing for Zendesk's default activity rendering */
.activity-section-full .recent-activity-list,
.activity-section-full > section > ul,
.activity-section-full > ul {
  margin: 0;
  padding: 0;
}
.activity-section-full .recent-activity-list-item,
.activity-section-full > section > ul > li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: 14px;
  line-height: 1.5;
}
.activity-section-full .recent-activity-list-item:last-child,
.activity-section-full > section > ul > li:last-child {
  border-bottom: none;
}
/* Print styles */
@page {
  margin: 18mm 15mm;
}
@media print {
  .header, .footer, .hero-section, .article-sidebar, .article-vote,
  .article-comments, .no-print, .sub-nav,
  /* Zendesk's own staff/agent toolbar and theme-editor "Preview mode" bar —
     only ever shown to signed-in agents/admins, end users never see it on
     the published site. This is Zendesk admin chrome outside our template,
     so hiding it here is best-effort and may not reach it if it's rendered
     by a separate top-level frame. */
  #nv-header, #nv-header-container, .zd-liquid-header, .staff-toolbar,
  #staff_view_bar, [data-garden-id="chrome.header"],
  /* Web Widget / chat launcher bubble, if installed on the account.
     The iframe selectors cover the newer messaging widget, which renders in
     iframes the Classic ids never match. */
  #launcher, .zEWidget-launcher, #webWidget,
  iframe[title*="Messag"], iframe[name*="Messag"],
  iframe[id^="webWidget"], div[data-product="web_widget"],
  /* Bottom cards ("Still have questions?" / Submit a ticket) — split across
     the page break in exported PDFs, orphaning half a card on its own page. */
  .article-bottom-cards, .article-bottom-card {
    display: none !important;
  }
  .article-container {
    grid-template-columns: 1fr;
    padding: 0;
    max-width: 100%;
  }
  .article-body {
    font-size: 12pt;
  }
  .article-body a {
    color: inherit;
    text-decoration: underline;
  }
  /* Allow long tables to break across pages (whole-table `avoid` created the
     large blank gaps in exports); keep individual rows intact instead. */
  .article-body table { page-break-inside: auto; }
  .article-body tr { page-break-inside: avoid; }
  .article-body h1, .article-body h2, .article-body h3 { page-break-after: avoid; }
  .article-body img { max-width: 100% !important; page-break-inside: avoid; }
  /* Only the "Submit a ticket" card survives print; let it run full width
     instead of sitting in a half-width grid column. */
  .article-bottom-cards {
    display: block;
  }
  .article-bottom-card-request {
    max-width: 400px;
  }
}
/* Belt-and-suspenders: some PDF/print export paths (e.g. admin theme
   preview tooling) may not evaluate @media print. Mirror the same hides
   via a body class toggled on the beforeprint/afterprint events. */
body.is-printing .header,
body.is-printing .footer,
body.is-printing .hero-section,
body.is-printing .article-sidebar,
body.is-printing .article-vote,
body.is-printing .article-comments,
body.is-printing .no-print,
body.is-printing .sub-nav,
body.is-printing .article-bottom-cards,
body.is-printing .article-bottom-card,
body.is-printing #launcher,
body.is-printing .zEWidget-launcher,
body.is-printing #webWidget,
body.is-printing iframe[title*="Messag"],
body.is-printing div[data-product="web_widget"] {
  display: none !important;
}
/* Article version / effective date / last updated stamps */
.article-stamps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-size: 13px;
  color: var(--gray-500);
}
.article-stamp-version {
  font-weight: 600;
  color: var(--gray-700);
}
/* Submit a ticket CTA card — the whole card is a link to new_request */
a.article-bottom-card-request {
  text-decoration: none !important;
  color: inherit;
  cursor: pointer;
}
a.article-bottom-card-request:hover {
  border-color: var(--brand-200);
  box-shadow: var(--shadow-md);
}
.article-submit-ticket-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  padding: 10px 28px;
  border-radius: 60px;
  background: var(--brand);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  transition: background var(--transition);
}
a.article-bottom-card-request:hover .article-submit-ticket-btn {
  background: var(--brand-700);
}
/* ============================================
   Request List Page - Layout Fixes
   ============================================ */
/* ============================================
   New Request Form - Pill dropdown & Subject spacing
   ============================================ */
/* Rounded rectangle dropdown on new request form (match Subject input) */
#new-ticket-form .nesty-input,
#new-ticket-form select,
.form .nesty-input,
.form select {
  border-radius: 8px !important;
  padding-left: 16px;
  padding-right: 36px;
  height: 44px;
  line-height: 44px;
}
/* Add spacing between Subject* label and input box */
#new-ticket-form label,
#new-ticket-form .form-field label,
.form .form-field label {
  margin-right: 10px !important;
  margin-bottom: 8px !important;
  padding-right: 4px !important;
}
/* Match Subject input radius to dropdown & add label gap */
#new-ticket-form input[type="text"],
#new-ticket-form input[type="email"] {
  margin-left: 4px;
  border-radius: 8px !important;
  height: 44px;
  padding: 10px 16px;
  border: 1px solid #848F99;
}
/* ============================================
   Section Page - Article card left-align with chevron
   ============================================ */
/* Make article links flex with left title and right chevron */
.article-list-item a.article-list-link {
  flex: 1;
  text-align: left;
  text-decoration: none;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
}
.article-list-item .article-chevron {
  width: 16px;
  height: 16px;
  color: var(--gray-300);
  flex-shrink: 0;
  margin-left: 12px;
  transition: all var(--transition);
}
.article-list-item:hover .article-chevron {
  transform: translateX(3px);
  color: var(--brand);
}
/* ============================================
   All Tickets - Status colors
   ============================================ */
/* Ensure React-rendered status badges use correct colors */
#main-content .status-label-solved,
#main-content .status-label-closed {
  background-color: #d1fae5 !important;
  color: #065f46 !important;
  border-radius: 12px !important;
  padding: 3px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
#main-content .status-label-new {
  background-color: #dbeafe !important;
  color: #1e40af !important;
  border-radius: 12px !important;
  padding: 3px 10px !important;
}
#main-content .status-label-open {
  background-color: #fef3c7 !important;
  color: #92400e !important;
  border-radius: 12px !important;
  padding: 3px 10px !important;
}
#main-content .status-label-pending {
  background-color: #e0e7ff !important;
  color: #3730a3 !important;
  border-radius: 12px !important;
  padding: 3px 10px !important;
}
#main-content .status-label-hold {
  background-color: #f3e8ff !important;
  color: #6b21a8 !important;
  border-radius: 12px !important;
  padding: 3px 10px !important;
}
/* Map closed status to look like solved visually */
.rr-status-closed {
  background: #d1fae5;
  color: #065f46;
}
/* ============================================
   Request Page - Sidebar layout fix
   ============================================ */
/* Ensure sidebar doesn't collapse on desktop */
@media (min-width: 1024px) {
  .request-main {
    flex: 1 1 0%;
    min-width: 0;
    max-width: calc(100% - 332px);
  }
  .request-sidebar {
    flex: 0 0 300px;
    position: sticky;
    top: 24px;
  }
}

/* ============================================
   Reduced Motion Preference
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================
   HERO SEARCH — magnifying glass INSIDE the input (final fix)
   =============================================================
   The Zendesk form (.search.search-full) is a flex container.
   The input renders as its own white pill (bg, radius, shadow).
   We keep that pill on the INPUT, kill the form ::before icon,
   and embed the magnifying glass as a background-image on the
   input so it can never appear outside the bar.
   ============================================================= */

/* 1. Kill the ::before magnifying glass on the form — it sits outside the input pill */
.hero-search .search form::before,
.hero-search .search-full::before,
.hero-search form[role="search"]::before {
  content: none !important;
  display: none !important;
}

/* 2. Force the input to show the magnifying glass inside itself */
.hero-search input[type="search"],
.hero-search .search input[type="search"],
.hero-search .search-full input[type="search"],
.hero-search .search.search-full input[type="search"],
[dir=ltr] .hero-search input[type="search"],
[dir=ltr] .hero-search .search input[type="search"],
[dir=ltr] .hero-search .search-full input[type="search"] {
  padding-left: 44px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 16px center !important;
  background-size: 18px 18px !important;
}

/* 3. RTL support */
[dir=rtl] .hero-search input[type="search"],
[dir=rtl] .hero-search .search input[type="search"],
[dir=rtl] .hero-search .search-full input[type="search"] {
  padding-left: 24px !important;
  padding-right: 44px !important;
  background-position: calc(100% - 16px) center !important;
}
/* ============================================================
   UI FIX PASS — sidebar separation, responsive sidebar,
   table overflow, ticket toolbar alignment, attachments card
   ============================================================ */

/* --- #1 Sidebar block separation ------------------------------------- */
/* Divider + breathing room between "Articles in this section" and the
   Recently viewed / Related articles group. */
.article-sidebar .sidebar-relatives {
  margin-top: 28px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--gray-200) !important;
}
/* Divider between the two widgets inside that group (Recently viewed vs
   Related articles) so the last link of one doesn't butt into the next heading. */
.article-sidebar .sidebar-relatives .related-articles {
  margin-top: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--gray-200) !important;
}
/* Separate the section-article list from its heading and give list items
   room so consecutive multi-line titles read as distinct entries. */
.article-sidebar .collapsible-sidebar-body ul {
  margin-top: 4px;
}
.article-sidebar .collapsible-sidebar-body li + li {
  margin-top: 2px;
}
.article-sidebar .sidenav-item,
.article-sidebar .sidebar-relatives a {
  display: block;
  padding: 7px 0;
  line-height: 1.4;
}

/* --- #2 Sidebar sticky/overlay at intermediate widths ---------------- */
/* The 17% width constraint only applies at >=1024px, but `position: sticky`
   was unconditional — so between ~768px and 1024px the sidebar pinned itself
   full-width over the article. Only pin it once it's actually a narrow column. */
.article-sidebar {
  position: static;
}
@media (min-width: 1024px) {
  .article-sidebar {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 108px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
/* Below the two-column breakpoint, stack cleanly instead of overlapping. */
@media (max-width: 1023px) {
  .article-container {
    display: block !important;
  }
  .article-sidebar {
    max-width: 100% !important;
    flex: 1 1 auto !important;
    margin-bottom: 28px;
  }
}

/* --- #3 Wide tables / images overflowing the article ------------------ */
.article-body img,
.article-body video,
.article-body iframe {
  max-width: 100%;
  height: auto;
}
/* The Zendesk editor wraps every table in <figure class="wysiwyg-table">, and
   the base stylesheet gives that figure `display:table` — a shrink-to-fit box
   that sizes to its CONTENT and happily grows past the article column. That
   made `.table-scroll`'s max-width:100% meaningless (100% of an already-1540px
   figure), so the wrapper never scrolled and the whole PAGE did instead.
   Forcing the figure back to a normal block is what actually contains it. */
.article-body figure.wysiwyg-table {
  display: block;
  max-width: 100%;
}
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
/* width:100%, NOT max-content. With max-content a table of ordinary prose
   refuses to wrap and invents a 1500px scroll for text that fits fine at 788px.
   A table can never render narrower than its min-content width, so genuinely
   wide tables (many columns, nowrap headers) still overflow — and the wrapper
   above scrolls them. Content-driven scrolling only when content demands it. */
.table-scroll > table {
  width: 100% !important;
}
/* Images inside table cells are the usual culprit — cap them so a single wide
   screenshot can't force the whole table past the viewport. */
.article-body table img {
  max-width: 640px;
  width: 100%;
  height: auto;
}
.article-body td,
.article-body th {
  word-break: break-word;
}

/* --- #4 / #6 Ticket list + Organizational requests toolbars ---------- */
/* Pull the toolbar row up tight under the tabs and right-align its controls
   so the table starts immediately below the tablist. */
.my-activities-header ~ #main-content [role="tablist"] {
  margin-bottom: 0 !important;
}
.my-activities-header ~ #main-content div[data-rr-toolbar-row] {
  align-items: center !important;
  justify-content: flex-end !important;
  margin: 10px 0 10px !important;
  padding: 0 !important;
  gap: 10px !important;
  row-gap: 8px !important;
}
/* Unify every control in those toolbars to one pill language: same height,
   same radius, same border. Covers search, Organization select, Filter and
   Follow organization on the Organizational requests tab.
   Dialogs are excluded — the filter modal has its own controls. */
.my-activities-header ~ #main-content div[data-rr-toolbar-row] :is(button, select, [role="combobox"], [role="button"], [data-garden-id="dropdowns.select"], [data-garden-id="forms.faux_input"], [data-garden-id="forms.select"]):not([role="dialog"] *):not([data-rr-backdrop] *):not([data-garden-id*="modal"] *):not([data-garden-id*="tooltip"] *) {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 30px !important;
  border: 1px solid var(--gray-300, #D4D4D8) !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
.my-activities-header ~ #main-content div[data-rr-toolbar-row] button:not([role="dialog"] *) {
  padding: 0 18px !important;
  cursor: pointer !important;
}
/* The "Organization" caption sat stacked above one control only, making that
   column taller than its neighbours and forcing the whole row to grow.
   Match it whatever element it renders as. */
.my-activities-header ~ #main-content div[data-rr-toolbar-row] :is(label, legend) {
  margin: 0 6px 0 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--gray-600, #52525B) !important;
  white-space: nowrap !important;
  align-self: center !important;
  line-height: 40px !important;
}
/* Any wrapper inside the row that stacks its children vertically gets
   flattened onto one line, which is what was creating the tall stack. */
.my-activities-header ~ #main-content div[data-rr-toolbar-row] > div,
.my-activities-header ~ #main-content div[data-rr-toolbar-row] > form,
.my-activities-header ~ #main-content div[data-rr-toolbar-row] > [data-garden-id="forms.field"] {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  flex: 0 0 auto !important;
}
/* Close the dead space between the toolbar and the table card. */
.my-activities-header ~ #main-content table {
  margin-top: 0 !important;
}

/* --- #9 Article attachments card ------------------------------------- */
/* Moved out of the tail of .article-content (where it collided with the
   "Related to" content-tag label) into its own card above the article body. */
.article-attachments-top {
  margin: 0 0 28px;
  padding: 16px 18px;
  background: var(--gray-50, #FAFAFA);
  border: 1px solid var(--gray-200, #E4E4E7);
  border-radius: var(--radius-md, 8px);
}
.article-attachments-top .article-attachments-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--gray-500, #71717A);
}
.article-attachments-top ul.attachments {
  list-style: none;
  margin: 0;
  padding: 0;
}
.article-attachments-top .attachment-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--gray-200, #E4E4E7);
}
.article-attachments-top .attachment-item:first-child {
  border-top: 0;
  padding-top: 0;
}
.article-attachments-top .attachment-item > a {
  font-weight: 500;
  word-break: break-word;
}
/* Copenhagen ships `.attachments .attachment-item .attachment-icon` as
   position:absolute/left:0/top:5px, with padding-left:20px on the row reserving
   space for it. That selector is specificity 0,3,0 — higher than a plain
   `.article-attachments-top .attachment-icon` — so the icon stayed absolutely
   positioned while our padding reset removed the space it relied on, and it
   landed on top of the filename. Match their specificity and put the icon back
   into normal flex flow. */
.article-attachments-top .attachments .attachment-item .attachment-icon {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  flex: 0 0 auto;
  color: var(--gray-500, #71717A);
}
/* Their padding-left:20px is no longer needed now the icon is in flow. */
.article-attachments-top .attachments .attachment-item {
  padding-left: 0 !important;
  padding-right: 0 !important;
  position: static;
  margin-bottom: 0;
}
.article-attachments-top .attachment-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  font-size: 13px;
  color: var(--gray-500, #71717A);
}
@media (max-width: 600px) {
  .article-attachments-top .attachment-item {
    flex-wrap: wrap;
  }
  .article-attachments-top .attachment-meta {
    margin-left: 26px;
  }
}
/* Give the content-tags ("Related to") block clear air now that attachments
   no longer sit on top of it. */
.article-content .content-tags {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-200, #E4E4E7);
}

/* --- Tabs + toolbar on one row, table pulled up -------------------------- */
/* alignToolbarWithTabs() flexes the shared parent and tags it. These rules
   collapse the leftover vertical gaps so the table starts right below. */
.my-activities-header ~ #main-content [data-rr-tab-toolbar-row] [data-rr-toolbar-row] {
  margin: 0 !important;
  padding: 0 !important;
}
/* Once the divider moved onto the combined row, the tablist must not draw
   its own line (would double up) — enforced inline too, belt and braces. */
.my-activities-header ~ #main-content [data-rr-tab-toolbar-row] [role="tablist"] {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}
/* Close the remaining gap between the row and the ticket table. Applied to the
   table itself rather than "whatever follows the row", which previously also
   caught the empty-state message. */
.my-activities-header ~ #main-content table {
  margin-top: 0 !important;
}
/* The "All tickets" heading itself carried a lot of bottom space. */
.my-activities-header {
  margin-bottom: 12px !important;
}
.my-activities-header h1 {
  margin-bottom: 8px !important;
}
/* On narrow widths let the controls drop below the tabs again rather than
   squeezing the tab labels. */
@media (max-width: 720px) {
  .my-activities-header ~ #main-content [data-rr-tab-toolbar-row] {
    display: block !important;
  }
  .my-activities-header ~ #main-content [data-rr-tab-toolbar-row] [data-rr-toolbar-row] {
    margin: 10px 0 !important;
    justify-content: flex-start !important;
  }
}

/* --- Pill unification, keyed on the combined tab+toolbar row -------------- */
/* Previously these rules only matched [data-rr-toolbar-row], which is set by
   fixFilterButton() and doesn't reliably get applied on the CC'd and
   Organizational tabs. [data-rr-tab-toolbar-row] is set by the more robust
   alignToolbarWithTabs(), so keying off it too covers all three tabs.
   Tabs themselves and dialog contents are explicitly excluded. */
.my-activities-header ~ #main-content [data-rr-tab-toolbar-row] :is(button, select, [role="combobox"], [data-garden-id="dropdowns.select"], [data-garden-id="forms.faux_input"], [data-garden-id="forms.select"]):not([role="tab"]):not([role="tablist"] *):not([role="dialog"] *):not([data-rr-backdrop] *):not([data-garden-id*="modal"] *):not([data-garden-id*="tooltip"] *) {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 30px !important;
  border: 1px solid var(--gray-300, #D4D4D8) !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
.my-activities-header ~ #main-content [data-rr-tab-toolbar-row] button:not([role="tab"]):not([role="tablist"] *):not([role="dialog"] *) {
  padding: 0 18px !important;
  cursor: pointer !important;
  width: auto !important;
}
/* "Organization" caption inline rather than stacked above its control. */
.my-activities-header ~ #main-content [data-rr-tab-toolbar-row] :is(label, legend):not([role="tablist"] *) {
  margin: 0 6px 0 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--gray-600, #52525B) !important;
  white-space: nowrap !important;
  align-self: center !important;
  line-height: 40px !important;
  display: inline-flex !important;
}


/* Every control in a tagged group shares one pill language. */
/* NOTE: deliberately does NOT set `display`. Forcing display:inline-flex here
   overrode Zendesk's own display:none and revealed a hidden duplicate
   "Follow organization" button on the Organizational requests tab. */
.my-activities-header ~ #main-content [data-rr-control-group] :is(button, [role="button"], [data-garden-id*="faux_input"]):not([role="dialog"] *):not([role="listbox"] *):not([role="menu"] *):not([role="presentation"] *):not([data-garden-container-id] *):not([data-rr-backdrop] *):not([data-garden-id*="modal"] *):not([data-garden-id*="tooltip"] *) {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 30px !important;
  border: 1px solid var(--gray-300, #D4D4D8) !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 14px !important;
  align-items: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
.my-activities-header ~ #main-content [data-rr-control-group] button:not([role="dialog"] *):not([role="listbox"] *):not([role="menu"] *):not([role="presentation"] *):not([data-garden-container-id] *):not([data-rr-backdrop] *):not([data-garden-id*="modal"] *):not([data-garden-id*="tooltip"] *) {
  padding: 0 18px !important;
  cursor: pointer !important;
  width: auto !important;
}

/* --- Organizational requests tab: fit the two extra controls on the tab row -- */

/* Search pill: fixed comfortable width, right-aligned in its grid cell. */
.my-activities-header ~ #main-content [data-rr-control-group] [data-garden-id*="faux_input"]:not([role="dialog"] *):not([role="listbox"] *):not([role="menu"] *):not([role="presentation"] *):not([data-garden-container-id] *):not([data-rr-backdrop] *):not([data-garden-id*="modal"] *):not([data-garden-id*="tooltip"] *) {
  width: 260px !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.my-activities-header ~ #main-content [data-rr-control-group] input[type="search"]:not([role="dialog"] *):not([role="listbox"] *):not([role="menu"] *):not([role="presentation"] *):not([data-garden-container-id] *):not([data-rr-backdrop] *):not([data-garden-id*="modal"] *):not([data-garden-id*="tooltip"] *),
.my-activities-header ~ #main-content [data-rr-control-group] input[type="text"]:not([role="dialog"] *):not([role="listbox"] *):not([role="menu"] *):not([role="presentation"] *):not([data-garden-container-id] *):not([data-rr-backdrop] *):not([data-garden-id*="modal"] *):not([data-garden-id*="tooltip"] *) {
  min-width: 0 !important;
}
/* (Organization dropdown sizing rule removed — the picker is hidden when a
   single org exists, and the rule was leaking into Garden comboboxes.) */

/* Tighten button padding a touch on this row so nothing overflows. */
.my-activities-header ~ #main-content [data-rr-control-group] button:not([role="dialog"] *):not([role="listbox"] *):not([role="menu"] *):not([role="presentation"] *):not([data-garden-container-id] *):not([data-rr-backdrop] *):not([data-garden-id*="modal"] *):not([data-garden-id*="tooltip"] *) {
  padding: 0 16px !important;
  white-space: nowrap !important;
}

/* --- Pagination as plain links at the bottom ----------------------------- */
/* Tagged data-rr-pagination by alignToolbarWithTabs() and kept out of the
   toolbar row entirely, so the pill styling above never reaches it. */
.my-activities-header ~ #main-content [data-rr-pagination] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
  margin: 20px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.my-activities-header ~ #main-content [data-rr-pagination] :is(button, a) {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 4px 2px !important;
  margin: 0 !important;
  color: var(--brand, #5B2D8E) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}
.my-activities-header ~ #main-content [data-rr-pagination] :is(button, a):hover {
  text-decoration: underline !important;
}
.my-activities-header ~ #main-content [data-rr-pagination] :is(button, a):disabled,
.my-activities-header ~ #main-content [data-rr-pagination] :is(button, a)[aria-disabled="true"] {
  color: var(--gray-400, #A1A1AA) !important;
  cursor: default !important;
  text-decoration: none !important;
}

/* --- Attachments card: alignment polish ---------------------------------- */
/* Filename gets its own flex space so long .zip names wrap without pushing the
   size/Download meta off the row. */
.article-attachments-top .attachments .attachment-item > a {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  word-break: break-word;
  line-height: 1.4;
}
/* Slightly taller rows now the icon is inline, so the paperclip and text share
   a baseline instead of the icon hugging the top. */
.article-attachments-top .attachments .attachment-item {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  align-items: center;
}
.article-attachments-top .attachments .attachment-item:first-child {
  padding-top: 0 !important;
}
.article-attachments-top .attachments .attachment-item:last-child {
  padding-bottom: 0 !important;
}
/* The header icon was sitting proud of its label; nudge them onto one line. */
.article-attachments-top .article-attachments-title svg {
  flex: 0 0 auto;
  position: relative;
  top: 0;
}
.article-attachments-top .article-attachments-title span {
  line-height: 1;
}
/* Keep the meta column from collapsing against the filename. */
.article-attachments-top .attachment-meta {
  flex: 0 0 auto;
  padding-left: 16px;
}