@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
/***** 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: rgba(0, 0, 0, 1);
  color: rgba(255, 255, 255, 1);
  font-family: 'Helvetica Neue', Arial, Helvetica, 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: 'Helvetica Neue', Arial, Helvetica, sans-serif;
  margin-top: 0;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

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

h4 {
  font-size: 16px;
}

a {
  color: rgba(138, 94, 255, 1);
  text-decoration: none;
}
a:visited {
  color: rgba(138, 94, 255, 1);
}
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 rgba(255, 255, 255, 1);
}
.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 rgba(255, 255, 255, 1);
}
.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 rgba(255, 255, 255, 1);
}

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

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

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

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

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

/***** Buttons *****/
.button, .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 rgba(255, 255, 255, 1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 1);
  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: rgba(255, 255, 255, 1);
}
.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: rgba(255, 255, 255, 1);
  color: rgba(116, 85, 253, 1);
  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: #ccc;
  border-color: #ccc;
}
.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: rgba(255, 255, 255, 1);
  border: 0;
  border-radius: 4px;
  color: rgba(116, 85, 253, 1);
  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: rgba(116, 85, 253, 1);
}
.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: #ccc;
}
.button-large[disabled], .hbs-form input[type=submit][disabled] {
  background-color: #ddd;
}

.button-secondary {
  color: #fff;
  border: 1px solid #848F99;
  background-color: transparent;
}
.button-secondary:visited {
  color: #fff;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: rgba(255, 255, 255, 1);
  border: 1px solid #848F99;
  background-color: #000;
}

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

.split-button button {
  background-color: rgba(255, 255, 255, 1);
  border: 0;
  color: rgba(116, 85, 253, 1);
  height: 32px;
  line-height: 16px;
  outline-color: rgba(255, 255, 255, 1);
}

[dir=rtl] .split-button button:not(:only-child):first-child {
  border-left: 1px solid rgba(116, 85, 253, 1);
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):first-child {
  border-right: 1px solid rgba(116, 85, 253, 1);
  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: #fff;
  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 rgba(255, 255, 255, 1);
}

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

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

.form-field .nesty-input {
  border-radius: 4px;
  border: 1px solid #848F99;
  height: 40px;
  line-height: 40px;
  outline: none;
  vertical-align: middle;
}
.form-field .nesty-input:focus {
  border: 1px solid rgba(255, 255, 255, 1);
  text-decoration: none;
}

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

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

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

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

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

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

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

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

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

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

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

.bt-header-logo {
  height: 28px;
  width: auto;
  max-height: 28px;
  filter: brightness(0) invert(1);
  vertical-align: middle;
}

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

.logo a {
  display: inline-block;
}

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

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

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

@media (max-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
  }
}
.nav-wrapper-desktop a {
  border: 0;
  color: rgba(138, 94, 255, 1);
  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: rgba(138, 94, 255, 1);
  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: rgba(255, 255, 255, 1);
  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: rgba(255, 255, 255, 1);
}
.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: rgba(138, 94, 255, 1);
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: rgba(138, 94, 255, 1);
  background-color: transparent;
}
.user-info > button::after {
  color: rgba(138, 94, 255, 1);
  padding-right: 15px;
}
[dir=rtl] .user-info > button::after {
  padding-left: 15px;
  padding-right: 0;
}

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

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

.avatar {
  display: inline-block;
  position: relative;
}
.avatar img {
  height: 40px;
  width: 40px;
}
.avatar .icon-agent {
  color: rgba(255, 255, 255, 1);
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: rgba(116, 85, 253, 1);
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 17px;
}

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

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

/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
  display: flex;
}
@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}
.breadcrumbs li {
  color: #fff;
  font-size: 13px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.breadcrumbs li + li::before {
  content: ">";
  margin: 0 4px;
}
.breadcrumbs li a:visited {
  color: rgba(138, 94, 255, 1);
}

/***** 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: rgba(255, 255, 255, 1);
}
.search input[type=search],
.search .clear-button {
  background-color: #fff;
  border-radius: 30px;
  border: none;
}
.search-full input[type=search], .search-full .clear-button {
  border-color: #fff;
}
.search input[type=search] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  color: #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: rgba(255, 255, 255, 1);
  color: #fff;
}
.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 1);
}
.search-has-value .clear-button {
  display: flex;
}

[dir=ltr] .search input[type=search] {
  padding-left: 40px;
  padding-right: 20px;
}
[dir=ltr] .search-has-value input[type=search] {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}
[dir=ltr] .search-has-value input[type=search]:focus {
  border-right-color: rgba(255, 255, 255, 1);
}
[dir=ltr] .search .clear-button {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}
[dir=ltr] .search .clear-button:focus {
  border-left-color: rgba(255, 255, 255, 1);
}

[dir=rtl] .search input[type=search] {
  padding-left: 20px;
  padding-right: 40px;
}
[dir=rtl] .search-has-value input[type=search] {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}
[dir=rtl] .search-has-value input[type=search]:focus {
  border-left-color: rgba(255, 255, 255, 1);
}
[dir=rtl] .search .clear-button {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}
[dir=rtl] .search .clear-button:focus {
  border-right-color: rgba(255, 255, 255, 1);
}

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

/***** Hero component *****/
.hero {
  background-image: url(/hc/theming_assets/01KJSY1DPWNYH6B09KJWFB9M0W);
  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;
  }
  /* On category/section/article pages the old breadcrumb sibling is gone,
     leaving .search-container as the lone flex child — "space-between"
     then has nothing to space it from, so it collapses to the left.
     Push it to the right instead. */
  .sub-nav .search-container:only-child {
    margin-left: auto;
  }
}
.sub-nav input[type=search]::after {
  font-size: 15px;
}

/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
}
@media (min-width: 768px) {
  .blocks-list {
    margin: 0 -15px;
  }
}
.blocks-item {
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 4px;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 1);
  display: flex;
  flex: 1 0 340px;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
}
@media (min-width: 768px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  background-color: rgba(255, 255, 255, 1);
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: rgba(116, 85, 253, 1);
  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: rgba(255, 255, 255, 1);
}
.blocks-item-link {
  color: rgba(255, 255, 255, 1);
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  border-radius: inherit;
}
.blocks-item-link:visited, .blocks-item-link:active {
  color: inherit;
  text-decoration: none;
}
.blocks-item-link:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 1);
  text-decoration: none;
}
.blocks-item-title {
  margin-bottom: 0;
  font-size: 16px;
}
.blocks-item-description {
  margin: 0;
}
.blocks-item-description:not(:empty) {
  margin-top: 10px;
}

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

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

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

/***** Community section in homepage *****/
.community {
  text-align: center;
}
.community-image {
  min-height: 300px;
  margin-top: 32px;
  background-image: url(/hc/theming_assets/01KJSXX6QG95HSA7D68S4FA44R);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}
.community a {
  color: rgba(138, 94, 255, 1);
  text-decoration: underline;
}
.community a:visited {
  color: rgba(138, 94, 255, 1);
}
.community a:hover, .community a:active, .community a:focus {
  color: rgba(138, 94, 255, 1);
}

.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: rgba(255, 255, 255, 1);
  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: rgba(138, 94, 255, 1);
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: rgba(138, 94, 255, 1);
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: rgba(138, 94, 255, 1);
}
.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: rgba(255, 255, 255, 1);
  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: rgba(255, 255, 255, 1);
}
.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: rgba(255, 255, 255, 1);
}

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

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

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

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

/***** Article *****/
.article {
  /*
  * The article grid is defined this way to optimize readability:
  * Sidebar | Content | Free space
  * 17%     | 66%     | 17%
  */
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .article {
    flex: 1 0 66%;
    max-width: 66%;
    min-width: 640px;
    padding: 0 30px;
  }
}
.article-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .article-container {
    flex-direction: row;
  }
}
.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 40px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}
.article-avatar {
  margin-right: 10px;
}
.article-author {
  margin-bottom: 10px;
}
.article-title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (min-width: 768px) {
  .article-title {
    flex-basis: 100%; /* Take entire row */
  }
}
.article-title .icon-lock {
  position: relative;
  left: -5px;
  vertical-align: baseline;
}
.article [role=button] {
  flex-shrink: 0; /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
  width: 100%;
}
@media (min-width: 768px) {
  .article [role=button] {
    width: auto;
  }
}
.article-info {
  max-width: 100%;
}
.article-meta {
  display: inline-block;
  vertical-align: middle;
}
.article-body {
  display: flow-root;
}
.article-body a {
  color: rgba(138, 94, 255, 1);
  text-decoration: underline;
}
.article-body a:visited {
  color: rgba(138, 94, 255, 1);
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: rgba(138, 94, 255, 1);
}
.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: #000;
}
.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: #000;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: #000;
  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: #fff;
  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: #fff;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: rgba(255, 255, 255, 1);
  width: 18px;
  height: 18px;
}
.article-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    flex: 0 0 17%;
    height: auto;
    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: rgba(138, 94, 255, 1);
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: rgba(138, 94, 255, 1);
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: rgba(138, 94, 255, 1);
}
.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: rgba(255, 255, 255, 1);
  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: rgba(255, 255, 255, 1);
  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: #fff;
}

/***** 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: #fff;
}
.share a:hover {
  text-decoration: none;
  color: rgba(255, 255, 255, 1);
}
.share a svg {
  height: 18px;
  width: 18px;
  display: block;
}

/***** Comments *****/
/* Styles comments inside articles, posts and requests */
.comment {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}
.comment-heading, .recent-articles-title,
.related-articles-title {
  margin-bottom: 5px;
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
}
.comment-overview {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 20px 0;
}
.comment-overview p {
  margin-top: 0;
}
.comment-callout {
  color: #fff;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}
.comment-callout a {
  color: rgba(138, 94, 255, 1);
  text-decoration: underline;
}
.comment-callout a:visited {
  color: rgba(138, 94, 255, 1);
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: rgba(138, 94, 255, 1);
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: #fff;
  font-size: 13px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid rgba(255, 255, 255, 1);
  padding: 40px 20px 20px;
}
@media (min-width: 768px) {
  .comment-wrapper.comment-official {
    padding-top: 20px;
  }
}
.comment-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .comment-info {
  padding-right: 0;
  padding-left: 20px;
}
.comment-author {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .comment-author {
    justify-content: space-between;
  }
}
.comment-avatar {
  margin-right: 10px;
}
[dir=rtl] .comment-avatar {
  margin-left: 10px;
  margin-right: 0;
}
.comment-meta {
  flex: 1 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: rgba(255, 255, 255, 1);
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  color: rgba(138, 94, 255, 1);
  text-decoration: underline;
}
.comment-body a:visited {
  color: rgba(138, 94, 255, 1);
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: rgba(138, 94, 255, 1);
}
.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: #000;
}
.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: #000;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.comment-body pre {
  background: #000;
  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: #fff;
  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: #fff;
  display: block;
  margin: 3px 0;
}
[dir=rtl] .vote-sum {
  direction: ltr;
  unicode-bidi: bidi-override;
}

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

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

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

.vote-voted {
  color: rgba(255, 255, 255, 1);
}

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

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

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

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

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

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

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

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

/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  padding: 0;
}
.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}
.striped-list-info {
  flex: 2;
}
.striped-list-title {
  color: rgba(138, 94, 255, 1);
  margin-bottom: 10px;
  margin-right: 5px;
}
.striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active {
  text-decoration: underline;
}
.striped-list-title:visited {
  color: rgba(138, 94, 255, 1);
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #fff;
  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: rgba(255, 255, 255, 1);
    display: block;
  }
}

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

/***** Post *****/
/*
* The post grid is defined this way:
* Content | Sidebar
* 70%     | 30%
*/
.post {
  flex: 1;
  margin-bottom: 10px;
}
@media (min-width: 1024px) {
  .post {
    flex: 1 0 70%;
    max-width: 70%;
  }
}
.post-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .post-container {
    flex-direction: row;
  }
}
.post-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .post-header {
    align-items: baseline;
    flex-direction: row;
  }
}
.post-header .status-label {
  vertical-align: super;
}
.post-title {
  margin-bottom: 20px;
  width: 100%;
}
@media (min-width: 768px) {
  .post-title {
    margin-bottom: 0;
    padding-right: 10px;
  }
}
.post-title h1 {
  display: inline;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .post-title h1 {
    margin-right: 5px;
  }
}
.post-author {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}
.post-avatar {
  margin-bottom: 30px;
}
.post-content {
  font-family: 'Helvetica Neue', Arial, Helvetica, 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: rgba(138, 94, 255, 1);
  text-decoration: underline;
}
.post-body a:visited {
  color: rgba(138, 94, 255, 1);
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: rgba(138, 94, 255, 1);
}
.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: #000;
}
.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: #000;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.post-body pre {
  background: #000;
  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: #fff;
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: #fff;
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: rgba(255, 255, 255, 1);
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 5px;
  vertical-align: middle;
}
.post-sidebar {
  border-top: 1px solid #ddd;
  flex: 1;
  padding: 30px 0;
  text-align: center;
}
@media (min-width: 1024px) {
  .post-sidebar {
    border: 0;
    flex: 1 0 30%;
    padding: 0 0 0 50px;
    text-align: initial;
  }
  [dir=rtl] .post-sidebar {
    padding: 0 50px 0 0;
  }
}
.post-sidebar-title {
  font-size: 18px;
  font-weight: 600;
}
.post-comments {
  margin-bottom: 20px;
}
@media (min-width: 1024px) {
  .post-comments {
    margin-bottom: 0;
  }
}

/***** Community Badges *****/
/* Styles labels used next to the authors of article comments, community posts, and community comments */
.community-badge-title {
  background-color: #04444d;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 0px 8px;
  vertical-align: top;
  white-space: nowrap;
  display: inline-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 rgba(255, 255, 255, 1);
}

.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}
.collapsible-nav-list li {
  color: rgba(255, 255, 255, 1);
  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: rgba(255, 255, 255, 1);
  display: block;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:hover {
    border-bottom: 4px solid #ddd;
  }
  .collapsible-nav-list li:hover a:not([aria-current=page]) {
    padding: 15px 0 11px 0;
    text-decoration: none;
  }
}
.collapsible-nav-list li:not([aria-selected=true]),
.collapsible-nav-list li:not(.current) {
  display: none;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:not([aria-selected=true]),
  .collapsible-nav-list li:not(.current) {
    display: block;
  }
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true] {
    padding: 15px 0 11px 0;
  }
}
.collapsible-nav-list li[aria-selected=true],
.collapsible-nav-list li.current {
  order: 0;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true],
  .collapsible-nav-list li.current {
    border-bottom: 4px solid rgba(255, 255, 255, 1);
    order: 1;
  }
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
  color: rgba(255, 255, 255, 1);
}

.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 rgba(255, 255, 255, 1);
}
.collapsible-sidebar-body {
  display: none;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-body {
    display: block;
  }
}
.collapsible-sidebar[aria-expanded=true] {
  max-height: none;
}
.collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-body {
  display: block;
}

/***** My activities *****/
.my-activities-nav {
  background-color: #000;
  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: #fff;
  font-size: 13px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: #fff;
}

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

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

.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: #fff;
  flex: 0 0 100px;
  margin-right: 10px;
}
[dir=rtl] .profile-stats .stat-label {
  margin-left: 10px;
  margin-right: 0;
}

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

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

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

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

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

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

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

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

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

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

.profile-nav {
  background-color: #000;
  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: #fff;
  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: #fff;
  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: #000;
}
@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: rgba(0, 0, 0, 1);
  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: rgba(255, 255, 255, 1);
}
.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: rgba(138, 94, 255, 1);
}
.search-results-sidebar .see-all-filters[aria-hidden=true] {
  display: none;
}
.search-results-sidebar .see-all-filters:hover {
  text-decoration: underline;
}
.search-results-sidebar .see-all-filters::after {
  content: " ⌄";
  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: rgba(138, 94, 255, 1);
}
.search-results .no-results .action-prompt a:visited {
  color: rgba(138, 94, 255, 1);
}

.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: #fff;
  font-size: 13px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: rgba(255, 255, 255, 1);
  vertical-align: middle;
  width: 13px;
  height: 13px;
}
[dir=ltr] .search-result-votes, [dir=ltr] .search-result-meta-count {
  margin-left: 20px;
}
[dir=rtl] .search-result-votes, [dir=rtl] .search-result-meta-count {
  margin-right: 20px;
}
.search-result-meta-container {
  color: #666;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .search-result-meta-container {
    flex-direction: row;
    align-items: center;
  }
}
@media (min-width: 1024px) {
  .search-result-meta-container nav {
    flex: 1;
  }
}
@media (min-width: 1024px) {
  [dir=ltr] .search-result-meta-container .meta-data {
    margin-left: 20px;
  }
}
@media (min-width: 1024px) {
  [dir=rtl] .search-result-meta-container .meta-data {
    margin-right: 20px;
  }
}
.search-result-meta-container .meta-data::after {
  content: none;
}
.search-result-breadcrumbs {
  margin: 0;
}
.search-result-description {
  margin-top: 10px;
  margin-bottom: 0;
  word-break: break-word;
}

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

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

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

.notification a {
  color: #158ec2;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/***** WYSIWYG Editor *****/
#hc-wysiwyg {
  border: 1px solid #848F99;
}

/***** Upload Dropzone *****/
.upload-dropzone {
  border: 1px solid #848F99;
}

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

.service-catalog-hero {
  background-image: url(/hc/theming_assets/01KJAZ8X6K0ATHBPT76A05NEBC);
  margin-bottom: 10px;
  height: 320px;
}
.service-catalog-description {
  display: flow-root;
}
.service-catalog-description a {
  color: rgba(138, 94, 255, 1);
  text-decoration: underline;
}
.service-catalog-description a:visited {
  color: rgba(138, 94, 255, 1);
}
.service-catalog-description a:hover, .service-catalog-description a:active, .service-catalog-description a:focus {
  color: rgba(138, 94, 255, 1);
}
.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: #000;
}
.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: #000;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.service-catalog-description pre {
  background: #000;
  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: #fff;
  font-style: italic;
  padding: 0 15px;
}

/* Floating WhatsApp button (bottom-right) */
.bt-wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 56px;
  height: 56px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #7455FD; /* Brandtrack violet */
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  z-index: 9999;

  text-decoration: none;
  cursor: pointer;

  transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}

.bt-wa-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.40);
}

.bt-wa-float:active {
  transform: translateY(0);
}

.bt-wa-float:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

.bt-wa-icon {
  width: 26px;
  height: 26px;
  color: #FFFFFF; /* white icon */
}

/* Slightly smaller on mobile */
@media (max-width: 480px) {
  .bt-wa-float {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }
  .bt-wa-icon {
    width: 24px;
    height: 24px;
  }
}
  
.bt-wa-float{
  width: 60px !important;
  height: 60px !important;
}

.bt-wa-icon{
  width: 30px !important;
  height: 30px !important;
  color: #fff !important;
  display: block !important;
}.bt-wa-float{
  width: 60px !important;
  height: 60px !important;
}

/* Asegura centrado perfecto aunque algún CSS raro lo toque */
.bt-wa-float{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
  .bt-wa-float{
  box-shadow: 0 12px 36px rgba(0,0,0,.45) !important;
  backdrop-filter: blur(6px);
}
  .bt-wa-icon{
  width: 32px !important;
  height: 32px !important;
}
 
  /* Article list */
.article-list-item a {
  display: block;
  padding: 14px 18px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg,#3c2b7a,#2a1d55);
  border: 1px solid rgba(120,100,255,0.35);
  color: #fff;
  text-decoration: none;
  transition: all .2s ease;
}

.article-list-item a:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg,#4a36a1,#322070);
  border-color: rgba(160,140,255,0.6);
}

/* ==========================================================================
   ACA EMPIEZAN LOS CAMBIOS DE TOMI
   ========================================================================== */

/* ==========================================================================
   BRANDTRACK UI THEME - CUSTOM CSS
   ========================================================================== */

/* 1. Variables Globales (Colores Brandtrack) */
:root {
  --bt-bg-main: #000000;
  --bt-bg-card: #0D0D0D;
  --bt-border: #262626;
  --bt-purple: #7455FD;
  --bt-blue: #8a6dff;
  --bt-gradient: linear-gradient(90deg, #7455FD 0%, #8a6dff 100%);
  --bt-text-primary: #ffffff;
  --bt-text-secondary: #BFBFBF;
}

/* 2. Envoltorio Principal (Dark Mode) */
.bt-dark-theme-wrapper {
  background-color: var(--bt-bg-main);
  color: var(--bt-text-primary);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding-bottom: 60px;
}

/* 3. Glow Decorativo (El resplandor superior) */
.bt-hero-glow {
  position: absolute;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 400px;
  background: radial-gradient(circle, rgba(116, 85, 253, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

/* 4. Tipografía y Título con Gradiente */
.bt-gradient-text {
  background: var(--bt-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.article-title {
  font-size: 40px !important; /* Ajuste para que resalte como en la web */
}

/* 5. Sidebar (Navegación Lateral) */
.article-sidebar {
  border: none !important;
}

.bt-sidenav-item {
  border-radius: 8px !important;
  color: var(--bt-text-secondary) !important;
  padding: 12px 16px !important;
  transition: all 0.2s ease;
  border: 1px solid transparent !important;
}

.bt-sidenav-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #fff !important;
  text-decoration: none !important;
}

.bt-sidenav-item.current-article {
  background: rgba(116, 85, 253, 0.1) !important;
  border: 1px solid rgba(116, 85, 253, 0.3) !important;
  color: var(--bt-purple) !important;
  font-weight: 600;
}

/* 6. Cuerpo del Artículo */
.bt-article-body {
  font-size: 16px;
  line-height: 1.8;
  color: #BFBFBF;
}

.bt-article-body h2, .bt-article-body h3 {
  color: #fff;
  margin-top: 2em;
}

/* 7. Botones de Votación (Estilo Pill/Píldora) */
.bt-pill-votes .button {
  border-radius: 50px !important;
  padding: 10px 24px !important;
  border: 1px solid var(--bt-border) !important;
}

/* Space Grotesk para títulos de la Home */
.bt-home-title,
.blocks-item-title,
.blocks-list .blocks-item .blocks-item-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700;
  font-size: 22px;
}

/* ==========================================================================
   BRANDTRACK UI - TOTAL BLACK & DARK EDITOR
   ========================================================================== */

/* 1. FONDO PLENO NEGRO ABSOLUTO */
/* Forzamos el negro en todos los posibles contenedores de Zendesk */
html, body, .bt-dark-theme-wrapper, 
main, .main-wrapper, header, footer,
.container, .sub-nav, .article-container {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

/* 2. LÍNEAS GRISACIAS ULTRA SUAVES */
/* Bajamos la opacidad al 5% para que casi ni se vean, solo den estructura */
.container-divider,
.article-footer,
.comment,
.article-sidebar,
.section-subscribe,
.search-container input,
.article-votes,
.article-more-questions,
.article-relatives {
  border-color: rgba(255, 255, 255, 0.05) !important; 
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 3. CAJA DE COMENTARIOS DARK MODE (Forzado) */
/* El editor de Zendesk suele ser rebelde, atacamos todos sus componentes */
.comment-form, 
.wysiwyg,
.comment-container textarea,
.zd-comment-box,
.placeholder {
  background-color: #0D0D0D !important; /* Gris muy oscuro para contraste */
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
}

/* Esto intenta pintar el fondo del editor interno */
.wysiwyg iframe {
  background-color: #0D0D0D !important;
  border-radius: 8px;
  filter: invert(90%) hue-rotate(180deg); /* Truco avanzado: invierte colores si el editor es blanco */
}

/* 4. ELIMINAR DIVISIONES DEL FOOTER */
footer, .footer {
  background-color: #000000 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  margin-top: 0 !important;
}

/* 5. TEXTO Y BOTONES */
.article-title {
  background: linear-gradient(90deg, #7455FD 0%, #8a6dff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.article-vote {
  border-radius: 50px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: transparent !important;
  color: white !important;
}

/* ==========================================================================
   BRANDTRACK UI - REFINAMIENTO FINAL
   ========================================================================== */

/* 1. SEARCH BAR - DARK MODE TOTAL */
/* Forzamos el fondo oscuro y quitamos el resplandor blanco del input */
.search-container input, 
.search input[type="search"] {
  background-color: #121212 !important; /* Gris muy oscuro, casi negro */
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 50px !important;
  color: #ffffff !important;
  padding: 10px 20px 10px 40px !important;
  outline: none !important;
}

/* Ajuste del icono de búsqueda para que no se pierda */
.search-icon {
  fill: #BFBFBF !important;
  z-index: 1;
}

/* 2. ELIMINAR DOBLE LÍNEA Y FOOTER LINE */
/* Unificamos para que solo exista una línea divisoria muy sutil */

/* Quitamos todas las líneas por defecto primero */
.container-divider, 
header, 
footer, 
.footer,
.article-footer,
.article-votes,
.article-more-questions {
  border: none !important;
  border-top: none !important;
  box-shadow: none !important;
}

/* Aplicamos una ÚNICA línea sutil solo donde es necesaria para separar secciones */
.article-container,
.article-relatives,
.comments {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 40px;
  margin-top: 40px;
}

/* 3. LÍNEA DEL FOOTER - ELIMINACIÓN TOTAL */
/* Forzamos que el footer se funda con el fondo negro plano */
.footer, footer {
  background-color: #000000 !important;
  border: none !important;
  padding-top: 60px;
}

/* 4. FIX CAJA DE COMENTARIOS (Gris sobre Negro) */
/* Para que no se vea el bloque blanco gigante */
.wysiwyg, 
.comment-container textarea {
  background-color: #0D0D0D !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

/* Hack para el editor de texto enriquecido si sigue apareciendo blanco */
.wysiwyg iframe {
  filter: invert(90%) hue-rotate(180deg) brightness(1.2);
}

/* ==========================================================================
   BRANDTRACK UI - REFINAMIENTO PIXEL PERFECT
   ========================================================================== */

/* 1. SEARCH BAR - DARK MODE PERSISTENTE (INCLUSO AL ESCRIBIR) */
/* Forzamos que se mantenga negro y con letras blancas al hacer clic o escribir */
.search-container input, 
.search input[type="search"],
.search-container input:focus, 
.search-container input:active,
.search input[type="search"]:focus {
  background-color: #121212 !important; /* Fondo oscuro constante */
  border: 1px solid rgba(255, 255, 255, 0.15) !important; /* Borde sutil */
  color: #ffffff !important; /* Letras siempre blancas */
  outline: none !important; /* Quitamos el borde azul/blanco de los navegadores */
  box-shadow: none !important; /* Quitamos sombras internas */
}

/* Ajuste del botón 'X' de limpiar búsqueda para que no se vea raro */
.search-container input::-webkit-search-cancel-button {
  filter: invert(1); /* Lo volvemos blanco */
}

/* 2. ELIMINACIÓN TOTAL DE LA LÍNEA DEL FOOTER */
/* Atacamos todos los posibles contenedores que Zendesk usa para el footer */
footer, 
.footer, 
.footer-inner,
[role="contentinfo"] {
  background-color: #000000 !important;
  border: none !important;
  border-top: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 3. UNIFICACIÓN DE DOBLES LÍNEAS */
/* Eliminamos las líneas duplicadas y dejamos solo una sutil donde separa contenido */
.container-divider, 
.article-footer, 
.article-votes {
  border: none !important;
}

/* Una sola línea sutil para separar el cuerpo del artículo de lo que sigue */
.article-content {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding-bottom: 40px;
}

/* 4. FONDO NEGRO PLENO (SIN FUGAS) */
/* Aseguramos que no quede ningún rastro de gris oscuro en la base */
html, body, .main-wrapper {
  background-color: #000000 !important;
}

/* ==========================================================================
   BRANDTRACK UI - PIXEL PERFECT REFINEMENT
   ========================================================================== */

/* 1. SEARCH BAR - DARK INTERACTION & REMOVE WHITE BLOCKS */
/* Aseguramos fondo negro y texto blanco en todos los estados */
.search-container input, 
.search input[type="search"],
.search-container input:focus, 
.search-container input:active {
  background-color: #121212 !important; /* Fondo oscuro constante */
  color: #ffffff !important; /* Letras blancas siempre */
  border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Gris suave inicial */
  border-radius: 50px !important;
  outline: none !important;
  box-shadow: none !important;
}

/* HOVER & ACTIVE - Borde grisecito suave */
.search-container input:hover,
.search-container input:focus {
  border-color: rgba(255, 255, 255, 0.3) !important; /* Un gris un poco más claro al interactuar */
}

/* ELIMINAR EL BLOQUE BLANCO DEL BOTÓN DE CIERRE (X) */
/* Este es el fix para la mancha blanca en la derecha al escribir */
.search [type="submit"], 
.search-container button,
.search-container .search-icon {
  background: transparent !important;
  border: none !important;
}

/* Estilo para la 'X' (Clear button) */
.search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 12px;
  width: 12px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="white"><path d="M1 1l10 10M11 1L1 11" stroke="white" stroke-width="2" stroke-linecap="round"/></svg>') no-repeat center;
  cursor: pointer;
  filter: opacity(0.6);
  margin-right: 10px;
}

/* 2. ELIMINACIÓN TOTAL DE LA LÍNEA DEL FOOTER */
/* Atacamos todas las posibles fuentes de esa línea horizontal */
footer, 
.footer, 
.footer-inner, 
.container-divider,
[role="contentinfo"] {
  border: none !important;
  border-top: none !important;
  outline: none !important;
  background-color: #000000 !important; /* Negro pleno como la web de Brandtrack */
}

/* 3. LIMPIEZA DE DOBLES LÍNEAS EN SECCIONES */
/* Dejamos solo una línea sutil de 1px donde realmente divide contenido */
.article-footer, 
.article-votes, 
.article-more-questions,
.comments {
  border: none !important;
}

/* Una sola línea grisecita suave al final del contenido del artículo */
.article-content {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 60px;
}

/* 4. MODO OSCURO TOTAL PARA LA CAJA DE COMENTARIOS */
.wysiwyg, 
.comment-container textarea {
  background-color: #0D0D0D !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   BRANDTRACK UI - HOME HELP CENTER REFINEMENT
   ========================================================================== */

/* 1. Unificar Fondo de la Home (Pleno Negro #000000) */
/* Forzamos el negro absoluto en todos los contenedores principales */
html, body, .container-divider, .main-wrapper, .main {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

/* 2. BARRA DE BÚSQUEDA EN LA HOME - DARK MODE TOTAL */
/* Ajuste para el input de búsqueda de la home, diferente al de artículo */
.search input[type="search"],
.hero-search input[type="search"],
.search input[type="search"]:focus,
.hero-search input[type="search"]:focus {
  background-color: #0D0D0D !important; /* Gris muy oscuro, casi negro */
  border: 1px solid rgba(255, 255, 255, 0.08) !important; /* Borde sutil */
  border-radius: 50px !important;
  color: #ffffff !important; /* Letras siempre blancas */
  outline: none !important;
  box-shadow: none !important;
}

/* HOVER - Borde dinámico gris sutil al interactuar */
.search input[type="search"]:hover,
.hero-search input[type="search"]:hover {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Cuando hay texto y aparece el botón "X", el input no debe dibujar su propio
   borde/curva derecha — si no, se ve una ")" pegada al lado del botón. */
.search-has-value input[type="search"],
.search-has-value input[type="search"]:focus,
.search-has-value input[type="search"]:hover {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
}

/* ELIMINAR BLOQUE BLANCO Y AJUSTAR ICONOS (X y Lupas) */
/* Este fix es clave para que la 'X' no sea blanca y pierda el fondo */
.search-container button,
.search-container .search-icon,
.hero-search button {
  background: transparent !important;
  border: none !important;
}

/* Forzar color blanco para iconos y la 'X' */
.search-icon, 
.hero-search-icon, 
.hero-search-clear {
  color: #ffffff !important;
  fill: #ffffff !important;
  opacity: 0.6; /* Opacidad sutil */
}

/* 3. AJUSTE DE TARJETAS DE CATEGORÍA (Cards) */
/* Transformamos las tarjetas de categoría en dark mode suave */
.category-item, 
.promoted-articles-item {
  background-color: #0D0D0D !important; /* Gris oscuro */
  border: 1px solid rgba(255, 255, 255, 0.08) !important; /* Borde sutil */
  border-radius: 12px !important;
  padding: 24px !important;
}

.category-item:hover {
  border-color: rgba(116, 85, 253, 0.3) !important; /* Borde púrpura suave al hover */
  background-color: #0D0D0D !important; /* Mantiene el fondo oscuro original */
}

/* Ajuste de texto en tarjetas */
.category-item-title, 
.category-item-description,
.category-item-count {
  color: #ffffff !important;
}

.category-item-count {
  opacity: 0.6; /* Texto secundario gris */
}

/* 4. ELIMINACIÓN DE LÍNEAS DIVISIONARIAS FANTASMA */
/* Atacamos cualquier borde residual en la home */
.section-subscribe,
.article-return-to-top {
  border: none !important;
}

/* ==========================================================================
   BRANDTRACK UI - CATEGORY PAGE REFINEMENT
   ========================================================================== */

/* Estilo de la descripción de categoría */
.bt-description {
  color: #BFBFBF !important;
  font-size: 16px;
  margin-bottom: 40px;
  max-width: 600px;
}

/* Espaciado de las secciones para evitar dobles líneas */
.bt-category-section {
  border: none !important;
  margin-bottom: 48px;
  padding-bottom: 24px;
  /* Una sola línea suave entre secciones de artículos */
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Títulos de las sub-secciones */
.section-tree-title a {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  text-decoration: none !important;
}

.section-tree-title a:hover {
  color: #7455FD !important;
}

/* Listas de artículos estilo Sidebar */
.bt-article-list {
  margin-top: 16px;
  list-style: none;
  padding: 0;
}

.bt-article-item {
  margin-bottom: 4px;
}

.bt-list-link {
  display: block;
  padding: 10px 16px !important;
  color: #BFBFBF !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  transition: all 0.2s ease;
}

.bt-list-link:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  transform: translateX(5px); /* Efecto sutil de desplazamiento */
}

/* Botón "Ver todos los artículos" */
.bt-see-all {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 16px;
  color: #7455FD !important;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-radius: 50px;
  border: 1px solid rgba(116, 85, 253, 0.2);
  transition: 0.3s;
}

.bt-see-all:hover {
  background: rgba(116, 85, 253, 0.1);
  border-color: #7455FD;
}

/* Iconos de estrella (promocionados) */
.icon-star {
  color: #f59e0b !important;
  margin-right: 8px;
}

/* ==========================================================================
   BRANDTRACK UI - CATEGORY CARDS (SECTION BUTTONS)
   ========================================================================== */

/* 1. Grid de tarjetas */
.bt-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

/* 2. Estilo de la Tarjeta (El "Botón" de Categoría) */
.bt-category-card {
  background-color: #0D0D0D !important; /* Gris ultra oscuro para resaltar sobre el negro */
  border: 1px solid rgba(255, 255, 255, 0.08) !important; /* La línea gris sutil */
  border-radius: 16px !important; /* Bordes bien redondeados como la web */
  padding: 32px !important;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

/* Hover de la tarjeta */
.bt-category-card:hover {
  border-color: rgba(116, 85, 253, 0.4) !important; /* Iluminación púrpura sutil */
  transform: translateY(-4px); /* Pequeño salto al pasar el mouse */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* 3. Título dentro de la tarjeta */
.bt-card-title a {
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  margin-bottom: 20px;
  display: block;
}

/* 4. Lista de artículos dentro de la tarjeta */
.bt-card-article-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
}

.bt-card-article-item {
  margin-bottom: 12px;
}

.bt-card-article-item a {
  color: #BFBFBF !important; /* Gris suave para los items */
  font-size: 14px;
  text-decoration: none;
  transition: 0.2s;
}

.bt-card-article-item a:hover {
  color: #ffffff !important;
  padding-left: 5px;
}

/* 5. Botón "Ver todos" (Pill style dentro de la tarjeta) */
.bt-card-see-all {
  margin-top: 24px;
  color: #7455FD !important;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bt-card-see-all:hover {
  color: #ffffff !important;
}

/* Re-fix para la Search Bar que mencionaste (X y Dark Mode) */
.search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 12px;
  width: 12px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="white"><path d="M1 1l10 10M11 1L1 11" stroke="white" stroke-width="2" stroke-linecap="round"/></svg>') no-repeat center;
  filter: opacity(0.7);
}

/* ==========================================================================
   BRANDTRACK UI - CATEGORY CARDS (LEFT ALIGNED)
   ========================================================================== */

/* Apilamos las tarjetas en una lista vertical para respetar el ancho del artículo */
.bt-section-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 40px;
}

/* Las tarjetas mantienen su estilo Dark Mode interactivo */
.bt-category-card {
  background-color: #0D0D0D !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 32px !important;
  transition: all 0.3s ease;
}

.bt-category-card:hover {
  border-color: rgba(116, 85, 253, 0.4) !important;
  transform: translateX(4px); /* Ahora se mueven levemente a la derecha en lugar de arriba */
  box-shadow: -5px 10px 30px rgba(0, 0, 0, 0.3);
}

/* Quitar líneas del page-header si Zendesk pone alguna por defecto */
.category-container .page-header {
  border-bottom: none !important;
}

/* ==========================================================================
   BRANDTRACK UI - CATEGORY PAGE FIXES (IMG 1 & IMG 2)
   ========================================================================== */

/* 1. SOLUCIÓN IMG1: LINKS DE ARTÍCULOS COMO CONTENEDORES INDIVIDUALES */

.bt-card-article-item {
  margin-bottom: 8px !important;
}

/* Estilo base de la cajita para cada link de artículo */
.bt-card-article-item a {
  display: block !important;
  padding: 12px 16px !important;
  background-color: rgba(255, 255, 255, 0.02) !important; /* Fondo ultra sutil */
  border: 1px solid rgba(255, 255, 255, 0.05) !important; /* Borde grisecito */
  border-radius: 8px !important;
  color: #BFBFBF !important;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out !important;
}

/* Hover individual de cada cajita */
.bt-card-article-item a:hover {
  background-color: rgba(255, 255, 255, 0.05) !important; /* Se ilumina levemente */
  border-color: rgba(116, 85, 253, 0.4) !important; /* Borde púrpura Brandtrack */
  color: #ffffff !important;
  transform: translateX(4px); /* Pequeño desplazamiento interactivo */
}

/* 2. SOLUCIÓN IMG2: ELIMINAR LÍNEA Y ESPACIO SUPERIOR */

/* Ocultamos la línea divisoria fantasma */
.bt-dark-theme-wrapper .container-divider {
  display: none !important; 
}

/* Eliminamos bordes y reducimos el margen del header de la categoría */
.category-container .page-header {
  border: none !important;
  border-bottom: none !important;
  margin-top: 0 !important;
  padding-top: 10px !important; /* Espacio mínimo para que no pegue con el buscador */
}

/* Si el contenedor general está empujando hacia abajo, lo subimos */
.category-container {
  margin-top: 0 !important;
}

/* ==========================================================================
   BRANDTRACK UI - CATEGORY PAGE REFINEMENT PIXEL PERFECT
   ========================================================================== */

/* 1. ESTRUCTURA LIMPIA (SIN CÁPSULAS GRANDES) */

/* Contenedor principal: Lista vertical simple alineada a la izquierda */
.bt-section-list {
  display: flex;
  flex-direction: column;
  gap: 40px; /* Espacio generoso entre secciones */
  margin-top: 40px;
  max-width: 800px; /* Opcional: limita el ancho para mejor lectura */
}

/* La sección individual ahora es invisible visualmente, solo estructura */
.bt-clean-section {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Títulos de sección limpios y blancos */
.bt-section-title a {
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  margin-bottom: 24px !important;
  display: block;
}

/* 2. BOTONES DE ARTÍCULOS EXCELENTES (SE MANTIENEN) */

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

.bt-card-article-item {
  margin-bottom: 8px;
}

/* Estilo base de cápsula interactiva para CADA link */
.bt-article-link {
  display: flex !important; /* Flex para alinear texto y futura flecha */
  align-items: center;
  justify-content: space-between; /* Texto a la izquierda, flecha a la derecha */
  padding: 14px 20px !important;
  background-color: #0D0D0D !important; /* Gris ultra oscuro para resaltar */
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px !important;
  color: #BFBFBF !important;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out !important;
  position: relative; /* Para posicionar la flecha */
}

/* Hover base de cada cápsula */
.bt-article-link:hover {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(116, 85, 253, 0.4) !important; /* Borde púrpura sutil Brandtrack */
  color: #ffffff !important;
  transform: translateX(4px); /* Pequeño desplazamiento interactivo */
}

/* 3. FLECHITA ANIMADA (SOLO EN EL PRIMER LINK) */

/* Preparamos la flecha invisible usando ::after solo en el primer item */
.bt-card-article-item:first-child .bt-article-link::after {
  content: '→'; /* Flecha CSS estándar minimalista */
  font-size: 18px;
  color: #7455FD; /* Púrpura Brandtrack */
  opacity: 0; /* Invisible por defecto */
  transform: translateX(-10px); /* Ligeramente a la izquierda para la animación */
  transition: all 0.3s ease-in-out; /* Animación suave */
  margin-left: 10px;
}

/* Animación de la flecha al hacer hover sobre el PRIMER link */
.bt-card-article-item:first-child .bt-article-link:hover::after {
  opacity: 1; /* Se vuelve visible */
  transform: translateX(0); /* Se mueve a su posición final */
}

/* Ajustes finales de limpieza (Img2 Solución Directa) */
.bt-dark-theme-wrapper .container-divider {
  display: none !important; /* Eliminamos la línea divisoria fantasma */
}

/* ==========================================================================
   BRANDTRACK UI - SEARCH SUGGESTIONS DROPDOWN (DARK MODE FIX)
   ========================================================================== */

/* 1. Contenedor principal del desplegable de búsqueda */
.searchbox-suggestions, 
ul.searchbox-suggestions,
.search-result-list {
  background-color: #121212 !important; /* Fondo oscuro sólido */
  border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Borde sutil */
  border-radius: 12px !important; /* Bordes redondeados modernos */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important; /* Sombra profunda para que flote sobre el fondo negro */
  overflow: hidden !important;
  margin-top: 8px !important; /* Separación sutil del input */
}

/* 2. Cada ítem sugerido en la lista */
.searchbox-suggestions li, 
.searchbox-suggestion {
  color: #BFBFBF !important; /* Texto gris claro por defecto */
  background-color: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; /* Línea divisoria casi invisible */
  padding: 12px 20px !important;
  transition: all 0.2s ease !important;
}

/* Eliminar el borde del último ítem para que quede limpio */
.searchbox-suggestions li:last-child {
  border-bottom: none !important;
}

/* 3. Interacción (Hover y Selección con el teclado) */
.searchbox-suggestions li:hover, 
.searchbox-suggestion:hover,
.searchbox-suggestion[aria-selected="true"] {
  background-color: rgba(116, 85, 253, 0.1) !important; /* Fondo con tinte púrpura Brandtrack */
  color: #ffffff !important; /* El texto se ilumina en blanco */
  cursor: pointer !important;
}

/* 4. Resaltado de la palabra coincidente (Lo que el usuario tipeó) */
.searchbox-suggestion em, 
.searchbox-suggestion strong,
.searchbox-suggestion mark {
  color: #7455FD !important; /* La coincidencia se pinta del púrpura de Brandtrack */
  background: transparent !important;
  font-weight: 700 !important;
}

/* 5. Fix extra para el input principal si aún tira un destello blanco al hacer click */
.search input[type="search"]:-webkit-autofill,
.search input[type="search"]:-webkit-autofill:hover, 
.search input[type="search"]:-webkit-autofill:focus, 
.search input[type="search"]:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #121212 inset !important;
    -webkit-text-fill-color: white !important;
}

/* ==========================================================================
   BRANDTRACK UI - FIX EXCLUSIVO SEARCH BAR HOME
   ========================================================================== */

/* Apuntamos solo al input dentro de tu contenedor bt-home-search */
.bt-home-search input[type="search"],
.bt-home-search .search-full input {
  background-color: #0D0D0D !important; /* Fondo dark mode */
  color: #ffffff !important; /* Texto blanco */
  border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Borde sutil */
  border-radius: 50px !important; /* Pill shape */
  padding-left: 35px !important; /* Espacio para que no pise tu SVG */
  box-shadow: none !important;
  outline: none !important;
}

/* Hover y Focus del buscador de la home */
.bt-home-search input[type="search"]:hover,
.bt-home-search input[type="search"]:focus {
  border-color: rgba(116, 85, 253, 0.4) !important; /* Borde púrpura al interactuar */
  background-color: #121212 !important;
}

/* Fix para la 'X' (borrar búsqueda) para que no sea un cuadro blanco */
.bt-home-search input[type="search"]::-webkit-search-cancel-button {
  filter: invert(1) opacity(0.6) !important;
  cursor: pointer;
}

/* Ocultar cualquier botón blanco residual que Zendesk intente inyectar */
.bt-home-search input[type="submit"],
.bt-home-search button[type="submit"] {
  display: none !important;
}

/* ==========================================================================
   BRANDTRACK UI - DARK MODE SEARCH BAR (ZENDESK NATIVE OVERRIDE)
   ========================================================================== */

/* 1. Limpiamos el formulario contenedor por si Zendesk lo pinta de blanco */
.bt-home-search form.search {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 2. El Input rebelde (Apuntamos directo a la yugular: class + id) */
.bt-home-search form.search input#query {
  background-color: #0D0D0D !important; /* El fondo oscuro */
  color: #ffffff !important; /* Texto blanco */
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 50px !important; /* Estilo cápsula */
  padding-left: 38px !important; /* Espacio para que no pise la lupa SVG */
  padding-right: 40px !important; /* Espacio para la X */
  height: 48px !important; /* Altura generosa */
  box-shadow: none !important;
  -webkit-appearance: none !important;
  outline: none !important;
}

/* 3. Placeholder (El texto "Search" por defecto) */
.bt-home-search form.search input#query::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* 4. Interacción (Focus y Hover) */
.bt-home-search form.search input#query:focus,
.bt-home-search form.search input#query:hover {
  background-color: #121212 !important;
  border-color: rgba(116, 85, 253, 0.5) !important; /* Borde púrpura Brandtrack */
}

/* 5. El botón 'X' nativo de Zendesk (clear-button) */
.bt-home-search form.search .clear-button {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.5) !important; /* La X se ve grisecita */
  right: 15px !important; /* Lo acomodamos dentro de la cápsula */
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Hover de la 'X' */
.bt-home-search form.search .clear-button:hover {
  color: #ffffff !important;
}

/* Ocultar el outline de accesibilidad nativo que a veces es azul o blanco */
.bt-home-search form.search .clear-button:focus {
  outline: none !important;
}

/* ==========================================================================
   BRANDTRACK UI - BÚSQUEDA HOME (ANCHO COMPLETO Y ALINEACIÓN PERFECTA)
   ========================================================================== */

/* 1. Contenedor Maestro Relativo */
.bt-home-search {
  position: relative !important;
  width: 100% !important; /* Forzamos a que ocupe todo el ancho disponible */
  display: block !important;
}

/* 2. El Formulario de Zendesk a pantalla completa */
.bt-home-search form.search {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* 3. La Cápsula del Input */
.bt-home-search form.search input#query {
  width: 100% !important;
  box-sizing: border-box !important;
  background-color: #0D0D0D !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 50px !important;
  height: 48px !important;
  padding-left: 45px !important; /* Espacio exacto para la lupa */
  padding-right: 45px !important; /* Espacio exacto para la X */
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
}

.bt-home-search form.search input#query:focus {
  background-color: #121212 !important;
  border-color: rgba(116, 85, 253, 0.5) !important;
}

/* 4. Acomodar la Lupa (Izquierda) */
.bt-home-search .search-icon {
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: rgba(255, 255, 255, 0.4) !important;
  z-index: 2 !important;
  pointer-events: none !important; /* Permite hacer clic "a través" de la lupa */
}

/* 5. Acomodar la 'X' de Zendesk (Derecha) */
/* Primero ocultamos la X por defecto de Chrome/Safari para que no haya dos */
.bt-home-search form.search input#query::-webkit-search-cancel-button {
  -webkit-appearance: none !important;
  display: none !important;
}

/* Ahora posicionamos la X inyectada por Zendesk */
.bt-home-search form.search .clear-button {
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.4) !important; /* Grisecito que pediste */
  padding: 0 !important;
  margin: 0 !important;
  height: 20px !important;
  width: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 2 !important;
}

/* Hover de la X */
.bt-home-search form.search .clear-button:hover {
  color: #ffffff !important;
}

/* ==========================================================================
   BRANDTRACK UI - HOME CATEGORY CARDS (CON ICONOS)
   ========================================================================== */

/* 1. Contenedor de la lista ( blocks-list ) */
.blocks-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Grilla responsiva moderna */
  gap: 24px;
  padding: 0;
  list-style: none;
  margin-top: 40px;
}

/* 2. Estilo PERSISTENTE de la Tarjeta Oscura ( blocks-item ) */
.blocks-item {
  background-color: #000000 !important; /* Gris ultra oscuro persistente */
  border: 1px solid rgba(255, 255, 255, 0.08) !important; /* Fina línea gris sutil */
  border-radius: 16px !important; /* Bordes redondeados modernos */
  transition: all 0.3s ease-in-out !important; /* Para la animación */
  overflow: hidden; /* Asegura esquinas limpias */
  margin: 0 !important;
  width: 100% !important;
  display: flex !important;
  background-color: #000000 !important;
}

/* Estilo del link dentro de la tarjeta */
.blocks-item-link {
  display: flex !important;
  flex-direction: column !important; /* Alínea icono arriba y texto abajo */
  align-items: center !important; /* Centrado horizontal */
  justify-content: center !important; /* Centrado vertical */
  text-align: center !important;
  padding: 40px 24px !important; /* Padding generoso */
  text-decoration: none !important;
  width: 100% !important;
  height: 100% !important;
  background-color: #000000 !important;
}

/* 3. COLOCACIÓN DE ICONOS ARRIBA DEL TEXTO */
/* Si usaste la clase .bt-cat-icon que propuse antes */
.bt-cat-icon {
  display: block !important; /* Vuelve a mostrarlos */
  width: 64px !important; /* Tamaño sugerido para el icono */
  height: 64px !important;
  margin-bottom: 20px !important; /* Espacio entre icono y texto */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Título de Categoría Limpio */
.blocks-item-title {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  margin-top: 0 !important;
}

/* 4. ANIMACIÓN DE HOVER (Premium y sutil) */
.blocks-item:hover {
  border-color: rgba(116, 85, 253, 0.5) !important; /* Borde con resplandor púrpura sutil Brandtrack */
  background-color: #000000 !important; /* Se ilumina levemente para dar profundidad */
  transform: translateY(-5px) !important; /* Pequeño salto hacia arriba */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important; /* Sombra profunda para que flote */
}

/* ==========================================================================
   BRANDTRACK UI - TARJETAS UNIFICADAS (FULL BLACK & HOVER IDÉNTICO)
   ========================================================================== */

/* 1. ASPECTO BASE COMPARTIDO (Categorías y Temas Frecuentes) */
.blocks-item,
.bt-tag {
  background-color: #000000 !important; /* Fondo Full Black absoluto */
  border: 1px solid rgba(255, 255, 255, 0.08) !important; /* Fina línea grisecita */
  border-radius: 16px !important; /* Mismo radio de borde redondeado */
  transition: all 0.3s ease-in-out !important; /* Transición suave compartida */
  text-decoration: none !important;
  box-shadow: none !important;
}

/* 2. ANIMACIÓN DE HOVER UNIFICADA */
.blocks-item:hover,
.bt-tag:hover {
  background-color: #000000 !important; /* Mantenemos el negro pleno al hacer hover */
  border-color: rgba(116, 85, 253, 0.6) !important; /* Borde púrpura Brandtrack */
  transform: translateY(-4px) !important; /* Elevación idéntica para todas */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important; /* Sombra profunda */
}

/* 3. AJUSTES ESPECÍFICOS: Layout interno de Categorías (.blocks-item) */
.blocks-item {
  display: flex !important;
  overflow: hidden !important;
  width: 100% !important;
  margin: 0 !important;
  background-color: #000000 !important;
}

.blocks-item-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 40px 24px !important; 
  width: 100% !important;
  height: 100% !important;
  background-color: #000000 !important;
}

.blocks-item-title {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  margin-top: 0 !important;
}

/* 4. AJUSTES ESPECÍFICOS: Layout interno de Temas Frecuentes (.bt-tag) */
.bt-faq-tags {
  display: flex;
  flex-direction: column;
  gap: 12px; /* Espaciado entre las tarjetas laterales */
}

.bt-tag {
  display: block !important;
  padding: 16px 20px !important; /* Padding más compacto por ser lista lateral */
  color: #BFBFBF !important; /* Texto gris claro */
  font-size: 15px !important;
  font-weight: 500 !important;
}

.bt-tag:hover {
  color: #ffffff !important; /* El texto se ilumina al hacer hover */
}

/* 5. ICONOS DE CATEGORÍAS (Visibles y posicionados) */
.bt-cat-icon {
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  margin-bottom: 20px !important;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ==========================================================================
   BRANDTRACK UI - HOVER 100% NEGRO PARA LAS CARDS
   ========================================================================== */

.blocks-item:hover,
.bt-tag:hover {
  background-color: #000000 !important; /* Forzamos a que NO cambie a gris */
  border-color: rgba(116, 85, 253, 0.5) !important; /* El resplandor púrpura de Brandtrack */
  transform: translateY(-4px) !important; /* La elevación interactiva */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important; /* Sombra profunda */
}

.blocks-item-link:hover {
  background-color: #000000 !important;
}

/* ==========================================================================
   BRANDTRACK UI - USER PROFILE
   ========================================================================== */

/* 1. Header del Perfil (Cero líneas, fondo negro) */
.bt-profile-header {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 40px !important;
}

/* Avatar y Nombre */
.bt-avatar-container img {
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.bt-gradient-text a {
  background: var(--bt-gradient, linear-gradient(90deg, #7455FD 0%, #8a6dff 100%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
}

/* Textos y Estadísticas del Header */
.bt-profile-description,
.stat-label {
  color: #BFBFBF !important;
}

.stat-value {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* 2. Barra de Navegación (Tabs) */
.bt-profile-nav {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.bt-nav-list li a {
  color: #BFBFBF !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.2s ease;
}

.bt-nav-list li a:hover {
  color: #ffffff !important;
}

.bt-nav-list li.current a {
  color: #ffffff !important;
  border-bottom-color: #7455FD !important; /* Indicador Púrpura */
  font-weight: 600;
}

/* 3. Títulos de Sección */
.bt-section-header .profile-section-title {
  color: #ffffff !important;
}

.bt-section-header .profile-section-description {
  color: #BFBFBF !important;
}

/* 4. Tarjetas Interactivas (Actividad, Contribuciones y Badges) */
.bt-card-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bt-badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
}

/* Estilo clonado de las Tarjetas de Brandtrack */
.bt-card-item {
  background-color: #000000 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  transition: all 0.3s ease-in-out !important;
  margin-bottom: 0 !important;
}

.bt-card-item:hover {
  background-color: #000000 !important;
  border-color: rgba(116, 85, 253, 0.6) !important; /* Borde púrpura */
  transform: translateY(-4px) !important; /* Elevación */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
}

/* Ajustes internos de las tarjetas */
.profile-contribution-title a {
  color: #ffffff !important;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
}

.profile-contribution-title a:hover {
  color: #7455FD !important;
}

.profile-contribution-body,
.profile-activity-description,
.bt-badge-desc {
  color: #BFBFBF !important;
  line-height: 1.6;
}

.bt-meta-group .meta-data,
.bt-badge-meta-title,
.bt-badge-meta-desc {
  color: #BFBFBF !important;
  font-size: 13px;
}

/* 5. Otros detalles */
.profile-private-badge {
  background-color: #121212 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.no-activity, .private-activity {
  color: #BFBFBF !important;
  display: block;
  margin-top: 20px;
}

/* ==========================================================================
   BRANDTRACK UI - USER PROFILE (PRO SAAS EDITION)
   ========================================================================== */

/* 1. Header del Perfil y Layout General */
.bt-profile-header {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding-bottom: 48px !important;
  margin-top: 40px !important;
}

/* 2. Avatar Premium con anillo de gradiente Brandtrack */
.bt-avatar-container {
  position: relative;
  display: inline-block;
}

.bt-avatar-container img.user-avatar {
  border-radius: 50% !important;
  padding: 4px !important; /* Espacio para el borde gradiente */
  background: linear-gradient(90deg, #7455FD 0%, #8a6dff 100%) !important;
  width: 100px !important; /* Tamaño más imponente */
  height: 100px !important;
  box-shadow: 0 10px 30px rgba(116, 85, 253, 0.2) !important; /* Glow sutil */
}

/* 3. Tipografía y Nombre */
.bt-gradient-text,
.bt-gradient-text a {
  background: linear-gradient(90deg, #7455FD 0%, #8a6dff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-decoration: none !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  letter-spacing: -1px;
}

/* 5. Botones de Acción (Seguir, Editar) estilo Pill */
.bt-profile-options .button,
.user-profile-actions .button {
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  border-radius: 50px !important; /* Estilo píldora */
  padding: 10px 24px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.bt-profile-options .button:hover,
.user-profile-actions .button:hover {
  background: linear-gradient(90deg, #7455FD 0%, #8a6dff 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 5px 15px rgba(116, 85, 253, 0.4) !important;
  color: #ffffff !important;
}

/* 6. Pestañas de Navegación (Tabs) Modernas */
.bt-profile-nav {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-bottom: 32px !important;
}

.bt-nav-list {
  display: flex !important;
  gap: 32px !important;
}

.bt-nav-list li a {
  color: #BFBFBF !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 16px 0 !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.2s ease !important;
}

.bt-nav-list li a:hover {
  color: #ffffff !important;
}

.bt-nav-list li.current a {
  color: #ffffff !important;
  border-bottom-color: #7455FD !important; /* Línea inferior iluminada */
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
}

/* 7. Tarjetas de Contribución y Actividad (Full Black) */
.bt-card-item {
  background-color: #000000 !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  transition: all 0.3s ease-in-out !important;
}

.bt-card-item:hover {
  border-color: rgba(116, 85, 253, 0.5) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
}

/* Enlaces dentro de las tarjetas */
.profile-contribution-title a {
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  transition: color 0.2s !important;
}

.profile-contribution-title a:hover {
  color: #7455FD !important;
}

.bt-meta-group .meta-data {
  color: #BFBFBF !important;
  font-size: 13px !important;
}

/* ==========================================================================
   BRANDTRACK UI - HEADER & DROPDOWN (FULL DARK MODE)
   ========================================================================== */

/* 1. Header Base (Fondo negro y línea divisoria sutil) */
.header {
  background-color: #000000 !important; /* Negro pleno como la web */
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: none !important;
}

/* Color de los enlaces del Header (Enviar solicitud, Iniciar sesión) */
.user-nav-list li a,
.nav-wrapper-desktop a {
  color: #BFBFBF !important; /* Gris claro */
  transition: color 0.2s ease !important;
  font-weight: 500 !important;
}

.user-nav-list li a:hover,
.nav-wrapper-desktop a:hover {
  color: #ffffff !important;
}

/* Opcional: Hacer que "Enviar solicitud" parezca un botón */
.user-nav-list li .submit-a-request {
  background-color: rgba(255, 255, 255, 0.05) !important;
  padding: 8px 16px !important;
  border-radius: 50px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.user-nav-list li .submit-a-request:hover {
  background-color: rgba(116, 85, 253, 0.2) !important;
  border-color: #7455FD !important;
  color: #ffffff !important;
}

/* 2. Botón del Usuario (Avatar + Nombre + Flechita) */
.dropdown-toggle {
  background-color: transparent !important;
  color: #ffffff !important;
  border: none !important;
  padding: 8px 12px !important;
  border-radius: 50px !important;
  transition: background-color 0.2s ease !important;
}

.dropdown-toggle:hover, 
.dropdown-toggle[aria-expanded="true"] {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 3. EL DROPDOWN MENU (La magia oscura) */
.nav-wrapper-desktop .dropdown-menu {
  background-color: #0D0D0D !important; /* Gris ultra oscuro flotante */
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8) !important; /* Sombra profunda */
  padding: 8px 0 !important;
  margin-top: 8px !important;
}

/* Items dentro del dropdown (Mi perfil, Actividades, Cerrar sesión, etc.) */
.nav-wrapper-desktop .dropdown-menu a,
.nav-wrapper-desktop .dropdown-menu [role="menuitem"] {
  color: #BFBFBF !important; /* Gris sutil */
  background-color: transparent !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
}

/* Efecto hover Brandtrack en el dropdown */
.nav-wrapper-desktop .dropdown-menu a:hover,
.nav-wrapper-desktop .dropdown-menu [role="menuitem"]:hover {
  background-color: rgba(116, 85, 253, 0.1) !important; /* Tinte púrpura */
  color: #ffffff !important; /* Texto blanco brillante */
}

/* Línea separadora dentro del dropdown (antes de "Cerrar sesión") */
.nav-wrapper-desktop .dropdown-menu .separator {
  background-color: rgba(255, 255, 255, 0.08) !important;
  height: 1px !important;
  margin: 8px 0 !important;
}

/* 4. FIX PARA EL MENÚ MOBILE (Para que no quede blanco en celulares) */
.menu-button-mobile {
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
}

.menu-list-mobile {
  background-color: #0D0D0D !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;
  padding: 16px 0 !important;
}

.menu-list-mobile .item a {
  color: #BFBFBF !important;
  padding: 12px 24px !important;
}

.menu-list-mobile .item a:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.menu-list-mobile .nav-divider {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin: 8px 0 !important;
}

.menu-profile-name {
  color: #ffffff !important;
}

/* ==========================================================================
   BRANDTRACK UI - SEARCH RESULTS (FLEX & ENCAPSULATED HOVER)
   ========================================================================== */

/* 1. Contenedor Flex (Resultados apilados verticalmente) */
.bt-results-list-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important; /* Espaciado entre las tarjetas */
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Limpieza de estilos nativos de Zendesk para las listas */
.bt-results-list-grid > li {
  border-top: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important; /* Asegura que la tarjeta se estire de lado a lado */
}

/* 2. El Contenedor Base del Resultado (El <li>) */
.bt-search-result-card {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 20px !important; /* Redondeado base */
}

/* 3. EL ENLACE CONTENEDOR MAESTRO (Donde ocurre la magia del Hover) */
.bt-card-link-wrapper {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background-color: #ffffff !important;
  
  /* 👇 INTEGRACIÓN EXACTA: FONDO 4% Y BORDE GRIS 👇 */
  background-color: rgba(255, 255, 255, 0.04) !important; /* Blanco al 4% de opacidad */
  border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Borde gris sutil */
  
  border-radius: 20px !important; 
  overflow: hidden !important; /* Corta el fondo cuadrado del hover para que siga la curva */
  
  text-decoration: none !important;
  transition: all 0.25s ease-in-out !important; /* Animación suave */
  height: 100%; 
  box-sizing: border-box;
}

/* === ANIMACIÓN HOVER: Revelación de la Tarjeta Encapsulada === */
.bt-card-link-wrapper:hover {
  background-color: #33363d !important; /* Fondo gris oscuro/charcoal al hover */
  border-color: rgba(116, 85, 253, 0.4) !important; /* Borde púrpura suave */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; /* Sombra flotante */
  transform: translateY(-2px) !important; /* Leve elevación */
  background-color: #ffffff !important;
}

/* 4. Estilos Internos de la Tarjeta (Estado Normal) */

.bt-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

/* Título */
.bt-result-title {
  color: #ffffff !important; /* Blanco por defecto (modo oscuro general) */
  font-size: 18px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  transition: color 0.2s ease;
}

/* Iconos de votos y comentarios (Alineados a la derecha) */
.bt-card-icons {
  display: flex;
  gap: 12px;
  margin-left: 20px;
  flex-shrink: 0;
  color: #6a737d !important; /* Gris suave */
  font-size: 12px;
  pointer-events: none; /* Evita que interrumpan el click de la tarjeta */
}

/* Descripción del artículo */
.bt-card-description {
  color: #BFBFBF !important; /* Gris medio */
  font-size: 14px !important;
  line-height: 1.6;
  margin: 0 0 16px 0;
  display: -webkit-box; /* Limita a 3 líneas de texto para que las tarjetas sean consistentes */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

/* Resaltado nativo de palabras clave buscadas */
.bt-card-description em,
.bt-card-description strong {
  color: #ffffff !important;
  background-color: rgba(116, 85, 253, 0.2) !important;
  padding: 0 4px !important;
  border-radius: 4px !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

/* Metadatos (Autor, Fecha) */
.bt-card-meta {
  display: flex;
  gap: 16px;
  margin-top: auto; /* Empuja los metadatos siempre al fondo de la tarjeta */
  color: #6a737d !important;
  font-size: 12px !important;
  transition: color 0.2s ease;
}

/* 5. Inversión de Colores Internos al hacer Hover */

/* El título toma el color púrpura Brandtrack */
.bt-card-link-wrapper:hover .bt-result-title {
  color: #7455FD !important;
}

/* La descripción y metadatos se iluminan ligeramente para mayor contraste sobre el gris */
.bt-card-link-wrapper:hover .bt-card-description {
  color: #BFBFBF !important;
}

.bt-card-link-wrapper:hover .bt-card-icons,
.bt-card-link-wrapper:hover .bt-card-meta {
  color: #9ca3af !important;
}

/* 6. Diseño para "Sin Resultados" */
.bt-no-results {
  text-align: center !important;
  padding: 60px 20px !important;
  background-color: #0D0D0D !important;
  border-radius: 16px !important;
  border: 1px dashed rgba(255, 255, 255, 0.1) !important;
  margin-top: 24px;
}

.bt-no-results .headline {
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  margin-top: 24px !important;
}

.bt-no-results .action-prompt {
  color: #BFBFBF !important;
  margin-top: 12px !important;
}

.bt-no-results .action-prompt a {
  color: #7455FD !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.bt-no-results .action-prompt a:hover {
  text-decoration: underline !important;
}

/* ==========================================================================
   BRANDTRACK UI - SECTION PAGE (GRAND CARD & PILLS LAYOUT)
   ========================================================================== */

/* 1. Reset de layout nativo */
.bt-section-wrapper,
.bt-section-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 2. Título Principal Afuera (Accent Header) */
.bt-page-header-accent {
  margin-bottom: 32px !important;
  display: flex !important;
  justify-content: start !important;
  gap: 12px !important;
  border-bottom: none !important; /* Sin línea abajo, flota libre */
}

.bt-page-header-accent h1 {
  color: #7455FD !important; /* Púrpura Brandtrack destacado */
  font-size: 36px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  letter-spacing: -0.5px !important;
}

.bt-page-description {
  color: #BFBFBF !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* Botón de Subscribe */
.bt-subscribe { margin-top: 8px; }
.bt-subscribe button {
  background-color: transparent !important;
  color: #BFBFBF !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}
.bt-subscribe button:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* 3. LA GRAN TARJETA MADRE */
.bt-grand-card {
  background-color: #121317 !important; /* Fondo panel oscuro sólido */
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 24px !important;
  padding: 40px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;
}

/* Títulos internos de la tarjeta */
.bt-inner-section { margin-bottom: 40px; }
.bt-inner-section:last-child { margin-bottom: 0; }

.bt-inner-section-title {
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  margin-bottom: 24px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* 4. LAS PÍLDORAS DE ARTÍCULOS (Filas compactas) */
.bt-pill-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.bt-pill-list li {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.bt-pill-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background-color: rgba(255, 255, 255, 0.03) !important; /* Fondo 3% */
  border: 1px solid rgba(255, 255, 255, 0.05) !important; /* Borde 5% */
  border-radius: 12px !important; /* Curva más sutil que la tarjeta madre */
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

/* Contenedor izquierdo de la píldora (Icono estrella + texto) */
.bt-pill-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bt-pill-text {
  color: #BFBFBF !important; /* Gris claro */
  font-size: 15px !important;
  font-weight: 500 !important;
  transition: color 0.2s ease !important;
}

.bt-pill-icon { color: #6a737d; transition: color 0.2s ease; }
.bt-promoted-icon { color: #7455FD !important; }

/* 5. HOVER DE LAS PÍLDORAS */
.bt-pill-link:hover {
  background-color: rgba(116, 85, 253, 0.08) !important; /* Fondo levemente púrpura */
  border-color: rgba(116, 85, 253, 0.4) !important; /* Borde púrpura */
  transform: translateX(4px); /* Sutil empujón a la derecha, muy elegante */
}

.bt-pill-link:hover .bt-pill-text {
  color: #ffffff !important; /* El texto se ilumina */
}

.bt-pill-link:hover .bt-pill-icon {
  color: #9ca3af;
}

/* Estado vacío */
.bt-section-empty {
  display: block;
  text-align: center;
  padding: 40px;
  color: #BFBFBF;
}
.bt-section-empty a { color: #7455FD; text-decoration: none; }

.bt-section-wrapper {  
  display: block;
}



.bt-home-right:hover , .blocks-item:hover , .blocks-item-link:hover {  
  background-color: #ffffff;
}

.footer-inner {  
  padding-bottom: 20px;
}

.submit-a-request {  
  margin-right: 16px;
}

.header {  
  max-width: 70%;
}

.footer-inner {  
  max-width: 70%;
}

.bt-home-right .blocks-item-link:hover {  
  background: none !important;
}

.bt-home-right .blocks-item:nth-child(9) .blocks-item-link:hover, .bt-home-right .blocks-item:nth-child(10) .blocks-item-link:hover {  
  background: none !important;
}
/* ==========================================================================
   BRANDTRACK UI - CATEGORY SIDEBAR (SOUNDTRACK STYLE)
   ========================================================================== */

/* Layout de dos columnas */
.bt-category-layout {
  display: flex;
  gap: 60px;
  align-items: flex-start;
  margin-top: 20px;
}

/* Panel lateral violeta */
.bt-category-sidebar {
  position: sticky;
  top: 40px;
  flex: 0 0 380px;
  align-self: stretch;
}

.bt-category-sidebar-inner {
  background: linear-gradient(160deg, #2d1a6b 0%, #1a0e3e 100%);
  border: 1px solid rgba(116, 85, 253, 0.25);
  border-radius: 24px;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 100%;
}

/* Icono de la categoría */
.bt-category-sidebar .bt-cat-icon {
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  margin-bottom: 24px !important;
}

/* Título grande */
.bt-category-sidebar-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.15 !important;
  margin: 0 0 16px 0 !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Subtítulo descriptivo */
.bt-category-sidebar-sub {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Contenido derecho */
.bt-category-main {
  flex: 1;
  min-width: 0;
}

/* Responsive: en mobile colapsa a una columna */
@media (max-width: 768px) {
  .bt-category-layout {
    flex-direction: column;
    gap: 32px;
  }

  .bt-category-sidebar {
    position: static;
    flex: none;
    width: 100%;
    min-height: auto;
  }

  .bt-category-sidebar-inner {
    padding: 32px 24px;
  }

  .bt-category-sidebar-title {
    font-size: 28px !important;
  }
}
/* Layout de dos columnas */
.bt-category-layout {
  display: flex;
  gap: 40px;
  margin-top: 20px;
  position: relative;
}

/* Panel lateral violeta - FULL HEIGHT */
.bt-category-sidebar {
  flex: 0 0 380px;
  position: relative;
}

.bt-category-sidebar-inner {
  background: linear-gradient(160deg, #2d1a6b 0%, #1a0e3e 100%);
  border: 1px solid rgba(116, 85, 253, 0.25);
  border-radius: 24px;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Contenido derecho */
.bt-category-main {
  flex: 1;
  min-width: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .bt-category-layout {
    flex-direction: column;
    gap: 32px;
  }
  .bt-category-sidebar {
    flex: none;
    width: 100%;
  }
  .bt-category-sidebar-inner {
    position: relative;
    padding: 32px 24px;
  }
  .bt-category-sidebar-title {
    font-size: 28px !important;
  }
}
/* ===== TARJETAS HOME MÁS COMPACTAS ===== */
.bt-home-right .blocks-item-link {
  min-height: 150px !important;
  padding: 18px 14px !important;
}
.bt-home-right .blocks-item-link::before {
  width: 48px !important;
  height: 48px !important;
}
.bt-home-right .blocks-item-title {
  font-size: 16px !important;
}
.bt-home-right .blocks-list {
  max-width: 700px !important;
}

/* ===== ICONOS HOME MÁS CHICOS ===== */
span.bt-cat-icon {
  width: 44px !important;
  height: 44px !important;
  margin-bottom: 8px !important;
}

/* ===== TIPOGRAFÍAS GLOBALES ===== */
/* Títulos: Space Grotesk */
h1, h2, h3, h4, h5, h6,
.article-title,
.bt-home-title,
.blocks-item-title,
.bt-category-sidebar-title,
.bt-card-title a,
.bt-inner-section-title,
.bt-result-title,
.bt-gradient-text,
.page-header h1,
.section-tree-title,
.profile-section-title {
  font-family: 'Space Grotesk', sans-serif !important;
}

/* Body: DM Sans */
body,
p,
a,
li,
span,
td,
th,
label,
input,
textarea,
select,
button,
.article-body,
.article-content,
.comment-body,
.post-content,
.bt-article-body,
.bt-pill-text,
.bt-card-description,
.bt-category-sidebar-sub,
.meta-data,
.breadcrumbs li {
  font-family: 'DM Sans', sans-serif !important;
}
/* ==========================================================================
   BRANDTRACK — FOOTER WORDMARK
   ========================================================================== */

.bt-footer-wordmark {
  width: 100%;
  position: relative;
  background: #000;
  padding: 56px 0 40px;
  overflow: hidden;
}

.bt-footer-wordmark__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bt-footer-wordmark__img {
  display: block;
  width: min(1400px, 110vw);
  max-width: none;
  opacity: 0.75;
  filter: brightness(1.1) contrast(1.1);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

/* ==========================================================================
   BRANDTRACK — MOBILE RESPONSIVE
   Breakpoints: 768px (tablet/phone) y 480px (phone pequeno)
   ========================================================================== */

/* ── GLOBAL 768px ── */
@media (max-width: 768px) {

  /* Container padding */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Sub-nav: breadcrumbs y buscador en columna */
  .sub-nav {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 0 !important;
  }

  .search-container {
    width: 100% !important;
  }

  .search-container .search,
  .search-container .search-full {
    width: 100% !important;
  }

  /* Prevent iOS zoom on input focus */
  input[type="search"],
  input[type="text"],
  textarea {
    font-size: 16px !important;
  }

  /* ── HEADER ── */
  .header {
    padding: 10px 16px !important;
  }

  .logo img {
    max-height: 30px !important;
  }

  /* ── ARTICLE PAGE ── */
  .article-container {
    flex-direction: column !important;
    gap: 0 !important;
  }

  .article-sidebar {
    order: -1 !important;
    width: 100% !important;
    max-width: none !important;
    position: static !important;
    flex: none !important;
    margin-bottom: 20px !important;
  }

  .article {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-left: none !important;
    margin-left: 0 !important;
  }

  .article-title,
  .bt-gradient-text {
    font-size: 26px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.5px !important;
  }

  .article-header {
    padding-bottom: 20px !important;
  }

  .article-author {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .article-votes-controls {
    gap: 10px !important;
  }

  .article-vote {
    min-height: 44px !important;
    padding: 10px 18px !important;
  }

  .article-return-to-top {
    display: none !important;
  }

  /* Comments */
  .comment-wrapper {
    gap: 12px !important;
  }

  .comment-form,
  .bt-form {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .comment-avatar {
    display: none !important;
  }

  .comment-container {
    width: 100% !important;
  }

  /* ── CATEGORY PAGE ── */
  .bt-category-layout {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .bt-category-sidebar {
    position: static !important;
    flex: none !important;
    width: 100% !important;
    min-height: auto !important;
  }

  .bt-category-sidebar-inner {
    position: relative !important;
    padding: 28px 24px !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    min-height: auto !important;
    border-radius: 20px !important;
  }

  .bt-category-sidebar .bt-cat-icon {
    width: 52px !important;
    height: 52px !important;
    margin-bottom: 16px !important;
  }

  .bt-category-sidebar-title {
    font-size: 28px !important;
  }

  .bt-category-main {
    width: 100% !important;
  }

  .bt-section-list {
    gap: 16px !important;
  }

  .bt-category-card {
    padding: 20px !important;
    border-radius: 16px !important;
  }

  .bt-card-title a {
    font-size: 17px !important;
  }

  /* ── SECTION PAGE ── */
  .bt-grand-card {
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }

  .bt-pill-link,
  .bt-article-pill,
  .sidenav-item,
  .bt-sidenav-item {
    padding: 12px 16px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* ── SEARCH RESULTS PAGE ── */
  .search-results-filters,
  .search-results-sidebar {
    display: none !important;
  }

  .search-results-column,
  .search-results .search-results-column {
    width: 100% !important;
    max-width: none !important;
    padding: 12px 0 !important;
  }

  /* ── FOOTER ── */
  .footer-inner {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 20px 16px !important;
  }

  .bt-footer-wordmark {
    padding: 32px 0 24px !important;
  }

  .bt-footer-wordmark__img {
    width: 200vw !important;
  }

  /* ── TOUCH TARGETS ── */
  .breadcrumbs a {
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .menu-list-mobile .item a {
    min-height: 44px !important;
  }

  .dropdown-menu a,
  .dropdown-menu [role="menuitem"] {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* ── PROFILE PAGE ── */
  .bt-profile-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  .bt-profile-options {
    flex-direction: column !important;
    width: 100% !important;
  }

  .bt-profile-options .button {
    width: 100% !important;
    text-align: center !important;
  }

}

/* ── PHONE 480px ── */
@media (max-width: 480px) {

  /* Fonts */
  .article-title,
  .bt-gradient-text {
    font-size: 22px !important;
  }

  .bt-category-sidebar-title {
    font-size: 22px !important;
  }

  .bt-category-sidebar-inner {
    padding: 24px 18px !important;
  }

  /* Badges grid: 1 column */
  .bt-badges-grid {
    grid-template-columns: 1fr !important;
  }

  /* Profile nav tabs: horizontally scrollable */
  .bt-nav-list {
    overflow-x: auto !important;
    gap: 20px !important;
    flex-wrap: nowrap !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Footer wordmark more zoomed on small phones */
  .bt-footer-wordmark__img {
    width: 280vw !important;
  }

  /* WhatsApp float button: adjust */
  .bt-wa-float {
    right: 12px !important;
    bottom: 12px !important;
    width: 50px !important;
    height: 50px !important;
  }

  /* Article related/recent: single column */
  .article-relatives .articles-list,
  .bt-relatives .articles-list {
    flex-direction: column !important;
  }

  /* Collapsible sidebar: always show toggle */
  .collapsible-sidebar-toggle {
    display: flex !important;
    min-height: 44px !important;
    width: 100% !important;
  }

}

/* ==========================================================================
   BRANDTRACK — DESIGN SYSTEM (Figma tokens applied)
   Accent #7455FD · Background #000 · Base #0D0D0D · Shade #141414
   Border #262626 · Content Primary #FFF · Secondary #BFBFBF · Tertiary #8C8C8C
   ========================================================================== */

:root {
  --bt-accent:          #7455FD;
  --bt-accent-hover:    #8a6dff;
  --bt-bg:              #000000;
  --bt-base:            #0D0D0D;
  --bt-shade:           #141414;
  --bt-shade-light:     #242424;
  --bt-border:          #262626;
  --bt-border-hover:    #4D4D4D;
  --bt-text-primary:    #FFFFFF;
  --bt-text-secondary:  #BFBFBF;
  --bt-text-tertiary:   #8C8C8C;
  --bt-text-disabled:   #4D4D4D;
  --bt-success:         #10B981;
  --bt-error:           #ED5A46;
  --bt-warning:         #F59E0B;
  --bt-info:            #3B82F6;
}

/* Sitewide typography fallback per design_system.docx — Space Grotesk for
   headings, DM Sans for body — so any native Zendesk element without a
   bt-* class doesn't fall back to the theme's default Helvetica Neue. */
body {
  font-family: 'DM Sans', sans-serif !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif !important;
}

/* ── HIDE ALL DUPLICATE LANGUAGE SELECTORS ── */
/* Keep only bt-lang-toggle on home page; hide any Zendesk-generated ones */
.language-selector,
.footer-language-selector,
[class*="locale-selector"],
.select-language,
.hc-locale-selector,
.header .language-selector,
footer .language-selector { display: none !important; }

/* Fix stray #7455FD → brand accent throughout older CSS */
.bt-page-header-accent h1 { color: var(--bt-accent) !important; }
.bt-section-empty a,
.bt-promoted-icon { color: var(--bt-accent) !important; }
.bt-pill-link:hover { background-color: rgba(116,85,253,0.08) !important; border-color: rgba(116,85,253,0.35) !important; }
.bt-pill-link:hover .bt-pill-icon { color: var(--bt-accent) !important; }
.bt-card-link-wrapper:hover { background-color: rgba(116,85,253,0.07) !important; border-color: rgba(116,85,253,0.25) !important; }

/* Fix .header max-width — should be 100% on dark theme */
.header { max-width: 100% !important; background: var(--bt-shade) !important; border-bottom: 1px solid var(--bt-border) !important; }
.footer-inner { max-width: 100% !important; }

/* ==========================================================================
   ARTICLE PAGE — premium reading experience
   ========================================================================== */

/* Article title */
.article-title.bt-gradient-text,
.article .article-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 40px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.04em !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  margin-bottom: 28px !important;
}

@media (max-width: 768px) {
  .article-title.bt-gradient-text,
  .article .article-title { font-size: 28px !important; }
}

/* Article body — DM Sans, comfortable reading */
.bt-article-body,
.article-body {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  letter-spacing: -0.01em !important;
  color: var(--bt-text-secondary) !important;
  max-width: 72ch;
}

.bt-article-body p,
.article-body p {
  margin-bottom: 1.4em !important;
  color: var(--bt-text-secondary) !important;
}

.bt-article-body h2,
.article-body h2 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  color: #fff !important;
  margin-top: 2.5em !important;
  margin-bottom: 0.75em !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--bt-border) !important;
}

.bt-article-body h3,
.article-body h3 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #fff !important;
  margin-top: 2em !important;
  margin-bottom: 0.6em !important;
}

.bt-article-body h4,
.article-body h4 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin-top: 1.5em !important;
  margin-bottom: 0.5em !important;
}

.bt-article-body a,
.article-body a {
  color: var(--bt-accent) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(116,85,253,0.4) !important;
  transition: color 0.2s, text-decoration-color 0.2s !important;
}
.bt-article-body a:hover,
.article-body a:hover {
  color: var(--bt-accent-hover) !important;
  text-decoration-color: var(--bt-accent-hover) !important;
}

.bt-article-body ul,
.bt-article-body ol,
.article-body ul,
.article-body ol {
  padding-left: 1.6em !important;
  margin-bottom: 1.4em !important;
}

.bt-article-body li,
.article-body li {
  margin-bottom: 0.55em !important;
  line-height: 1.7 !important;
  color: var(--bt-text-secondary) !important;
}

.bt-article-body img,
.article-body img {
  max-width: 100% !important;
  border-radius: 12px !important;
  border: 1px solid var(--bt-border) !important;
  margin: 1.5em 0 !important;
}

.bt-article-body code,
.article-body code {
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 0.88em !important;
  background: var(--bt-shade-light) !important;
  color: var(--bt-accent) !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
  border: 1px solid var(--bt-border) !important;
}

.bt-article-body pre,
.article-body pre {
  background: var(--bt-shade) !important;
  border: 1px solid var(--bt-border) !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  overflow-x: auto !important;
  margin: 1.5em 0 !important;
}
.bt-article-body pre code,
.article-body pre code {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: var(--bt-text-secondary) !important;
}

.bt-article-body blockquote,
.article-body blockquote {
  border-left: 3px solid var(--bt-accent) !important;
  margin: 1.5em 0 !important;
  padding: 12px 20px !important;
  background: rgba(116,85,253,0.06) !important;
  border-radius: 0 8px 8px 0 !important;
  color: var(--bt-text-secondary) !important;
}

/* Article meta */
.article-author .meta-data { color: var(--bt-text-tertiary) !important; font-size: 13px !important; }
.article-author a { color: var(--bt-text-secondary) !important; }

/* Article sidebar */
.article-sidebar {
  background: var(--bt-shade) !important;
  border: 1px solid var(--bt-border) !important;
  border-radius: 14px !important;
  padding: 24px !important;
  min-width: 220px !important;
  max-width: 260px !important;
}

.collapsible-sidebar-title,
.sidenav-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--bt-text-tertiary) !important;
  margin-bottom: 14px !important;
}

.bt-sidenav-item {
  display: block !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  color: var(--bt-text-primary) !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  transition: background 0.2s, color 0.2s !important;
  margin-bottom: 2px !important;
}
.bt-sidenav-item:hover {
  background: rgba(116,85,253,0.1) !important;
  color: #fff !important;
}
.bt-sidenav-item.current-article {
  background: rgba(116,85,253,0.15) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* Related articles / recently viewed */
.bt-relatives {
  margin-top: 60px !important;
  padding-top: 40px !important;
  border-top: 1px solid var(--bt-border) !important;
}

.bt-relatives h2 {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--bt-text-tertiary) !important;
  margin-bottom: 20px !important;
}

/* Article votes */
.bt-votes-container {
  background: var(--bt-shade) !important;
  border: 1px solid var(--bt-border) !important;
  border-radius: 14px !important;
  padding: 28px 32px !important;
  text-align: center !important;
  margin-top: 48px !important;
}

.article-votes-question {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #fff !important;
  margin-bottom: 20px !important;
}

.bt-pill-votes .article-vote {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--bt-border) !important;
  border-radius: 999px !important;
  color: var(--bt-text-secondary) !important;
  padding: 10px 28px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.bt-pill-votes .article-vote:hover,
.bt-pill-votes .button-primary { background: var(--bt-accent) !important; border-color: var(--bt-accent) !important; color: #fff !important; }

/* Request callout */
.bt-callout { margin-top: 32px !important; }

/* ==========================================================================
   SECTION / CATEGORY PAGE — article cards
   ========================================================================== */

.bt-category-card {
  background: var(--bt-shade) !important;
  border: 1px solid var(--bt-border) !important;
  border-radius: 14px !important;
  padding: 28px 32px !important;
  margin-bottom: 16px !important;
  transition: border-color 0.2s, background 0.2s !important;
}
.bt-category-card:hover { border-color: rgba(116,85,253,0.35) !important; background: rgba(116,85,253,0.04) !important; }

.bt-card-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 16px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--bt-border) !important;
}
.bt-card-title a {
  color: #fff !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.bt-card-title a:hover { color: var(--bt-accent) !important; }

.bt-card-article-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.bt-card-article-item {
  padding: 0 !important;
  border: none !important;
}

.bt-card-article-item a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  color: var(--bt-text-secondary) !important;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s !important;
}
.bt-card-article-item a::before {
  content: '' !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--bt-border-hover) !important;
  flex-shrink: 0 !important;
  transition: background 0.2s !important;
}
.bt-card-article-item a:hover {
  background: rgba(116,85,253,0.08) !important;
  color: #fff !important;
}
.bt-card-article-item a:hover::before { background: var(--bt-accent) !important; }

.bt-card-see-all {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 14px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--bt-accent) !important;
  text-decoration: none !important;
  letter-spacing: 0.01em !important;
  transition: color 0.2s !important;
}
.bt-card-see-all:hover { color: var(--bt-accent-hover) !important; }

/* Section list wrapper */
.bt-section-list { display: flex; flex-direction: column; gap: 0; }

/* ==========================================================================
   HEADER — clean dark style with language toggle fix
   ========================================================================== */

.header {
  background: var(--bt-shade) !important;
  border-bottom: 1px solid var(--bt-border) !important;
  box-shadow: none !important;
}

.header .logo a,
.header .logo img { opacity: 1 !important; }

/* Nav links */
.user-nav a,
.user-nav-list a {
  color: var(--bt-text-secondary) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: color 0.2s !important;
}
.user-nav a:hover,
.user-nav-list a:hover { color: #fff !important; }

/* Submit a request button */
.submit-a-request {
  background: var(--bt-accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background 0.2s !important;
}
.submit-a-request:hover { background: var(--bt-accent-hover) !important; color: #fff !important; }

/* ==========================================================================
   SEARCH DOUBLE-X FIX — ensure only one clear button shows
   ========================================================================== */

/* On home page, WebKit native X was hidden via -webkit-search-cancel-button in document_head.
   This rule catches any remaining native clear buttons on other pages too. */
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none !important; appearance: none !important; }
input[type="search"]::-webkit-search-decoration   { -webkit-appearance: none !important; appearance: none !important; }

/* Zendesk's .clear-button: style cleanly, only show when there's text */
.search-container .clear-button,
.search .clear-button {
  background: rgba(255,255,255,0.1) !important;
  border: none !important;
  border-radius: 50% !important;
  color: var(--bt-text-tertiary) !important;
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1 !important;
}
.search-container .clear-button:hover,
.search .clear-button:hover {
  background: rgba(255,255,255,0.18) !important;
  color: #fff !important;
}



/* ChatGPT mobile/visual improvements */
.bt-card-title a{color:#fff!important;font-family:"Space Grotesk",sans-serif!important;font-size:28px!important;font-weight:500!important;}
.bt-category-card:hover{background:rgba(124,92,255,.04)!important;}
.bt-category-card{border-color:rgba(255,255,255,.08)!important;}
@media (max-width:768px){
 .bt-category-card{min-height:110px!important;padding:24px!important;display:block!important;}
 .bt-category-sidebar .bt-cat-icon,.bt-cat-icon{width:52px!important;height:52px!important;margin-bottom:0!important;flex-shrink:0!important;}
 .bt-card-title a{font-size:24px!important;color:#fff!important;}
}

/* ==========================================================================
   HOME PAGE — two-column layout + category cards (FIX: clases faltantes)
   ========================================================================== */

.bt-main {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 71px);
}
@media (min-width: 1024px) {
  .bt-main { flex-direction: row; }
}

.bt-left {
  background:
    radial-gradient(ellipse at 30% 85%, rgba(116, 85, 253, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 10%, rgba(80, 50, 180, 0.18) 0%, transparent 50%),
    var(--bt-base);
  border-bottom: 1px solid var(--bt-border);
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media (min-width: 1024px) {
  .bt-left {
    width: 360px;
    min-width: 300px;
    max-width: 400px;
    border-bottom: none;
    border-right: 1px solid var(--bt-border);
    position: sticky;
    top: 71px;
    height: calc(100vh - 71px);
    overflow-y: auto;
    padding: 52px 44px;
  }
}
@media (max-width: 1023px) {
  .bt-left { padding: 28px 20px 24px; }
}

/* Language toggle (ES / EN) — all white, DM Sans */
.bt-lang-panel {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px !important;
  padding: 3px !important;
  width: fit-content !important;
}
.bt-lang-btn {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  opacity: 0.55;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.bt-lang-btn:hover {
  opacity: 0.85;
  text-decoration: none !important;
}
.bt-lang-btn.active {
  background: rgba(255, 255, 255, 0.18) !important;
  opacity: 1;
}

/* Mobile menu: ".menu-list-mobile .item a" (color/padding, !important) is
   more specific than .bt-lang-btn alone and would otherwise flatten the
   ES/EN pill — restate it here with enough specificity to win. */
.menu-list-mobile .item .bt-lang-btn {
  color: #ffffff !important;
  padding: 6px 14px !important;
}
.menu-list-mobile .item .bt-lang-btn:hover {
  background-color: transparent !important;
}
.bt-lang-item-mobile {
  padding: 8px 24px !important;
}

.bt-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
  letter-spacing: -0.03em !important;
  margin: 0 !important;
}
@media (max-width: 768px) { .bt-title { font-size: 21px !important; } }

/* Search wrapper — overlays icon over input */
.bt-search-wrap { position: relative; }
.bt-search-wrap .bt-search-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 14px;
  z-index: 2;
  color: var(--bt-text-tertiary);
  pointer-events: none;
}
.bt-search-wrap form.search {
  background: #000000 !important;
  border: none !important;
  border-radius: 999px !important;
}
.bt-search-wrap form.search input#query {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  padding-left: 44px !important;
  height: 44px !important;
}
.bt-search-wrap form.search input#query::placeholder {
  color: var(--bt-text-tertiary) !important;
}
.bt-search-wrap .search-icon { display: none; }

.bt-popular-label {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--bt-text-tertiary) !important;
  margin: 4px 0 0 !important;
}

.bt-left .bt-tags {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* RIGHT PANEL — categories grid (always 3 per row on desktop).
   Columns are a fixed max width (not 1fr) and the whole track is
   centered via justify-content, so cards never stretch on wide
   screens and any leftover space is balanced instead of dumped on
   one side. */
.bt-right {
  flex: 1;
  padding: 48px 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 300px));
  justify-content: center;
  gap: 24px;
  align-content: start;
}
/* Switches to 2 columns once the wider (540px) sidebar + 3 columns at
   their smallest comfortable width (240px) would no longer fit. */
@media (max-width: 1360px) {
  .bt-right {
    padding: 24px 20px;
    grid-template-columns: repeat(2, minmax(0, 300px));
    gap: 16px;
  }
}
/* Mobile — a single column, one card per row */
@media (max-width: 700px) {
  .bt-right {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }
}

/* Category card */
.bt-cat-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  background: var(--bt-shade) !important;
  border: 1px solid var(--bt-border) !important;
  border-radius: 16px !important;
  padding: 28px 20px !important;
  gap: 14px !important;
  height: 170px !important;
  transition: border-color 0.2s, background 0.2s, transform 0.2s !important;
}
.bt-cat-card:hover {
  border-color: rgba(116, 85, 253, 0.5) !important;
  background: rgba(116, 85, 253, 0.06) !important;
  transform: translateY(-4px) !important;
  text-decoration: none !important;
}

/* Category icon inside home cards — now an <img>, kept background-*
   properties too in case any old data-cat-name CSS rule still applies
   a background-image (harmless overlap either way). */
.bt-cat-card .bt-cat-icon {
  display: block !important;
  width: 72px !important;
  height: 72px !important;
  margin-bottom: 0 !important;
  object-fit: contain !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  flex-shrink: 0 !important;
  filter: brightness(0) invert(1) !important;
}
/* Also white in the category sidebar */
.bt-category-sidebar .bt-cat-icon {
  filter: brightness(0) invert(1) !important;
}
@media (max-width: 768px) {
  .bt-cat-card .bt-cat-icon { width: 52px !important; height: 52px !important; }
}

/* Category name — white, clearly legible */
.bt-cat-name {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

/* Icon mapping for HOME PAGE cards (by data-cat-name) — matches Figma "Home 2.0" */
.bt-cat-card[data-cat-name*="First steps"] .bt-cat-icon,
.bt-cat-card[data-cat-name*="Primeros pasos"] .bt-cat-icon {
  background-image: url({{asset 'PRIMEROS-PASOS.svg'}}) !important;
}
.bt-cat-card[data-cat-name*="Account"] .bt-cat-icon,
.bt-cat-card[data-cat-name*="Cuenta"] .bt-cat-icon,
.bt-cat-card[data-cat-name*="cuenta"] .bt-cat-icon {
  background-image: url({{asset 'CUENTAS.svg'}}) !important;
}
.bt-cat-card[data-cat-name*="App"] .bt-cat-icon {
  background-image: url({{asset 'DEVICES.svg'}}) !important;
}
.bt-cat-card[data-cat-name*="Brandtrack Box"] .bt-cat-icon {
  background-image: url({{asset 'BOX.svg'}}) !important;
}
.bt-cat-card[data-cat-name*="Music"] .bt-cat-icon,
.bt-cat-card[data-cat-name*="Música"] .bt-cat-icon,
.bt-cat-card[data-cat-name*="sica"] .bt-cat-icon {
  background-image: url({{asset 'MUSICA.svg'}}) !important;
}
.bt-cat-card[data-cat-name*="Announcement"] .bt-cat-icon,
.bt-cat-card[data-cat-name*="Anuncio"] .bt-cat-icon,
.bt-cat-card[data-cat-name*="anuncio"] .bt-cat-icon {
  background-image: url({{asset 'anuncios.svg'}}) !important;
}
.bt-cat-card[data-cat-name*="Signage"] .bt-cat-icon,
.bt-cat-card[data-cat-name*="Digital Signage"] .bt-cat-icon {
  background-image: url({{asset 'APP.svg'}}) !important;
}
.bt-cat-card[data-cat-name*="Technical"] .bt-cat-icon,
.bt-cat-card[data-cat-name*="cnico"] .bt-cat-icon,
.bt-cat-card[data-cat-name*="Requerimiento"] .bt-cat-icon {
  background-image: url({{asset 'PLUG.svg'}}) !important;
}
.bt-cat-card[data-cat-name*="Plan"] .bt-cat-icon,
.bt-cat-card[data-cat-name*="Payment"] .bt-cat-icon,
.bt-cat-card[data-cat-name*="pago"] .bt-cat-icon,
.bt-cat-card[data-cat-name*="Zone"] .bt-cat-icon,
.bt-cat-card[data-cat-name*="zona"] .bt-cat-icon {
  background-image: url({{asset 'STORE.svg'}}) !important;
}
.bt-cat-card[data-cat-name*="Licen"] .bt-cat-icon {
  background-image: url({{asset 'LICENCIAS.svg'}}) !important;
}
.bt-cat-card[data-cat-name*="Campaign"] .bt-cat-icon,
.bt-cat-card[data-cat-name*="Campaña"] .bt-cat-icon,
.bt-cat-card[data-cat-name*="campaña"] .bt-cat-icon {
  background-image: url({{asset 'anuncios.svg'}}) !important;
}
.bt-cat-card[data-cat-name*="Playlist"] .bt-cat-icon,
.bt-cat-card[data-cat-name*="Schedule"] .bt-cat-icon,
.bt-cat-card[data-cat-name*="Calendario"] .bt-cat-icon {
  background-image: url({{asset 'CALENDAR.svg'}}) !important;
}
.bt-cat-card[data-cat-name*="Analytics"] .bt-cat-icon,
.bt-cat-card[data-cat-name*="Analítica"] .bt-cat-icon,
.bt-cat-card[data-cat-name*="analítica"] .bt-cat-icon,
.bt-cat-card[data-cat-name*="Analisis"] .bt-cat-icon,
.bt-cat-card[data-cat-name*="análisis"] .bt-cat-icon,
.bt-cat-card[data-cat-name*="Analysis dashboard"] .bt-cat-icon,
.bt-cat-card[data-cat-name*="dashboard"] .bt-cat-icon {
  background-image: url({{asset 'PLANS.svg'}}) !important;
}

/* Fallback icon-by-position — guarantees every card shows an icon even if
   its category name doesn't match any of the rules above (e.g. a category
   renamed or phrased differently than expected). Deliberately WITHOUT
   !important so the name-based rules above always win when they do match;
   this only fills in the gaps. Matches the default category order. */
.bt-right .bt-cat-card:nth-child(1)  .bt-cat-icon { background-image: url({{asset 'PRIMEROS-PASOS.svg'}}); }
.bt-right .bt-cat-card:nth-child(2)  .bt-cat-icon { background-image: url({{asset 'CUENTAS.svg'}}); }
.bt-right .bt-cat-card:nth-child(3)  .bt-cat-icon { background-image: url({{asset 'DEVICES.svg'}}); }
.bt-right .bt-cat-card:nth-child(4)  .bt-cat-icon { background-image: url({{asset 'BOX.svg'}}); }
.bt-right .bt-cat-card:nth-child(5)  .bt-cat-icon { background-image: url({{asset 'CALENDAR.svg'}}); }
.bt-right .bt-cat-card:nth-child(6)  .bt-cat-icon { background-image: url({{asset 'anuncios.svg'}}); }
.bt-right .bt-cat-card:nth-child(7)  .bt-cat-icon { background-image: url({{asset 'PLANS.svg'}}); }
.bt-right .bt-cat-card:nth-child(8)  .bt-cat-icon { background-image: url({{asset 'APP.svg'}}); }
.bt-right .bt-cat-card:nth-child(9)  .bt-cat-icon { background-image: url({{asset 'STORE.svg'}}); }
.bt-right .bt-cat-card:nth-child(10) .bt-cat-icon { background-image: url({{asset 'PLUG.svg'}}); }
.bt-right .bt-cat-card:nth-child(11) .bt-cat-icon { background-image: url({{asset 'LICENCIAS.svg'}}); }
.bt-right .bt-cat-card:nth-child(n+12) .bt-cat-icon { background-image: url({{asset 'CUBE.svg'}}); }

/* ==========================================================================
   HIDE COMMENT SECTION + ARTICLE AUTHOR/SUBSCRIBE (screenshot request)
   ========================================================================== */
.article-comments { display: none !important; }
.article-author { display: none !important; }
.article-subscribe,
.bt-subscribe-btn { display: none !important; }

/* ==========================================================================
   UX/UI UPGRADE — Soundtrack-inspired improvements
   ========================================================================== */

/* 1. HOME: bigger welcome title */
.bt-title {
  font-size: 34px !important;
  line-height: 1.15 !important;
}
@media (max-width: 1023px) { .bt-title { font-size: 26px !important; } }
@media (max-width: 480px)  { .bt-title { font-size: 22px !important; } }

/* 2. HOME: taller, more prominent search input */
.bt-search-wrap form.search input#query {
  height: 54px !important;
  font-size: 16px !important;
}
.bt-search-wrap form.search {
  border-width: 1px !important;
}

/* 3. HOME: card description text */
.bt-cat-desc {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--bt-text-tertiary) !important;
  line-height: 1.4 !important;
  margin-top: 2px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
}

/* 4. HOME: card height on mobile */
@media (max-width: 1023px) {
  .bt-cat-card {
    height: 160px !important;
    padding: 20px 14px !important;
    gap: 10px !important;
  }
}
@media (max-width: 480px) {
  .bt-cat-card {
    height: 140px !important;
    padding: 16px 12px !important;
  }
}

/* 5. BREADCRUMB — clearer visual path */
.breadcrumbs {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--bt-border) !important;
  border-radius: 999px !important;
  padding: 6px 16px !important;
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
}
.breadcrumbs li {
  font-size: 12px !important;
  color: var(--bt-text-tertiary) !important;
}
.breadcrumbs li a {
  color: var(--bt-text-secondary) !important;
  text-decoration: none !important;
}
.breadcrumbs li a:hover { color: #fff !important; }
.breadcrumbs li + li::before {
  content: "/" !important;
  margin: 0 6px !important;
  color: var(--bt-text-disabled) !important;
}

/* 6. ARTICLE: bigger, cleaner title */
.article-title.bt-gradient-text,
.article .article-title {
  font-size: 44px !important;
  line-height: 1.15 !important;
  margin-bottom: 40px !important;
}
@media (max-width: 768px) {
  .article-title.bt-gradient-text,
  .article .article-title { font-size: 30px !important; margin-bottom: 28px !important; }
}

/* 7. ARTICLE: reading width constraint for comfort */
.article-body,
.bt-article-body {
  max-width: 68ch !important;
}

/* 8. SECTION/CATEGORY PAGE: larger section header */
.bt-page-header-accent h1 {
  font-size: 36px !important;
  letter-spacing: -0.04em !important;
}
@media (max-width: 768px) { .bt-page-header-accent h1 { font-size: 26px !important; } }

/* 9. ARTICLE: nicer meta date line */
.article .meta-group .meta-data {
  font-size: 13px !important;
  color: var(--bt-text-tertiary) !important;
}

/* 10. HOME tags: pill-style more like Soundtrack */
.bt-tag {
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
  transition: background 0.2s, border-color 0.2s, color 0.2s !important;
}
.bt-tag:hover {
  background: rgba(116,85,253,0.12) !important;
  border-color: rgba(116,85,253,0.4) !important;
  color: #fff !important;
}

/* ==========================================================================
   SCREENSHOT FIXES (v4)
   ========================================================================== */

/* 1. Hide "Brandtrack 3.0" text next to logo — image already shows the brand */
.logo span { display: none !important; }

/* 2. Hide "Enviar una solicitud" button from header nav */
.submit-a-request { display: none !important; }

/* 3. Fix search clear-button (X) position — keep it inside the pill */
.search { overflow: hidden !important; }
.search .clear-button {
  display: none !important;
  position: static !important;
  align-self: center !important;
  flex-shrink: 0 !important;
  margin: 0 8px 0 0 !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  background: rgba(255,255,255,0.1) !important;
  border: none !important;
  border-radius: 50% !important;
  color: var(--bt-text-tertiary) !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
}
.search-has-value .clear-button {
  display: flex !important;
}
.search .clear-button:hover {
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
}


/* 3b. Home search — pill shape with a subtle border and violet focus glow */
.bt-search-wrap,
.bt-search-wrap input,
.bt-search-wrap input[type="search"],
.bt-search-wrap input#query {
  background:        transparent !important;
  border:            none    !important;
  box-shadow:        none    !important;
  outline:           none    !important;
}
.bt-search-wrap form.search,
.bt-search-wrap .search {
  background:    #0a0a0a !important;
  border:        1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 999px !important;
  box-shadow:    none !important;
  outline:       none !important;
  transition:    background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.bt-search-wrap form.search:hover,
.bt-search-wrap .search:hover {
  background:    #141414 !important;
  border:        1px solid rgba(255, 255, 255, 0.16) !important;
}
.bt-search-wrap form.search:focus-within,
.bt-search-wrap .search:focus-within {
  background:    #141414 !important;
  border:        1px solid rgba(116, 85, 253, 0.55) !important;
  box-shadow:    0 0 0 3px rgba(116, 85, 253, 0.15) !important;
  outline:       none !important;
}
/* Kill WebKit autofill blue/white glow */
.bt-search-wrap input:-webkit-autofill,
.bt-search-wrap input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset !important;
  box-shadow:         0 0 0 1000px #0a0a0a inset !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* 4. Full-width layout — increase container max-width */
.container,
.error-page {
  max-width: 1440px !important;
  width: 94% !important;
}
@media (min-width: 1440px) {
  .container,
  .error-page { padding: 0 32px !important; }
}
.header { max-width: 100% !important; padding: 0 32px !important; }
.footer-inner { max-width: 100% !important; padding: 0 32px !important; }

/* ==========================================================================
   PREDICTIVE SEARCH DROPDOWN (v12)
   ========================================================================== */
.bt-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--bt-base);
  border: 1px solid var(--bt-border);
  border-radius: 12px;
  z-index: 200;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.8);
}
.bt-search-results {
  list-style: none !important;
  margin: 0 !important;
  padding: 6px !important;
}
.bt-search-results li {
  list-style: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.bt-search-results li:last-child {
  border-bottom: none !important;
}

/* ==========================================================================
   MOBILE FIXES (v12)
   ========================================================================== */

/* 1. Category page: fix purple sidebar absolute positioning on mobile.
      Without this, the sidebar-inner collapses to 0 height and its
      450px gradient overlay bleeds over the article list below. */
@media (max-width: 768px) {
  .bt-category-sidebar-inner {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }
  .bt-category-sidebar-inner::after {
    display: none !important;
  }
}

/* 2. Article page: collapsible "articles in this section" sidebar —
      full-width card appearance + space between title and arrow */
@media (max-width: 1023px) {
  .article-sidebar {
    background: var(--bt-shade) !important;
    border: 1px solid var(--bt-border) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .collapsible-sidebar {
    padding: 14px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    max-height: 52px !important;
  }
  .collapsible-sidebar[aria-expanded="true"] {
    max-height: none !important;
  }
  .collapsible-sidebar-title {
    display: block !important;
    padding-right: 44px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    line-height: 1.5 !important;
  }
  .collapsible-sidebar-toggle {
    position: absolute !important;
    top: 14px !important;
    right: 12px !important;
    transform: none !important;
    width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    background: rgba(255,255,255,0.08) !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .collapsible-sidebar-body {
    padding-top: 8px !important;
    padding-bottom: 4px !important;
  }
}

/* ==========================================================================
   BRANDTRACK — PATCH v2 — apply after all previous rules
   ========================================================================== */

/* 1. Category sidebar: remove position:absolute, use natural flow */
.bt-category-sidebar-inner {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
}
.bt-category-layout { align-items: stretch !important; }
@media (min-width: 769px) {
  .bt-category-sidebar        { display: flex !important; flex-direction: column !important; }
  .bt-category-sidebar-inner  { flex: 1 !important; min-height: 200px !important; }
}
@media (max-width: 768px) {
  .bt-category-layout         { flex-direction: column !important; gap: 24px !important; }
  .bt-category-sidebar        { position: static !important; flex: none !important; width: 100% !important; min-height: auto !important; }
  .bt-category-sidebar-inner  { padding: 28px 24px !important; border-radius: 20px !important; }
  .bt-category-sidebar-title  { font-size: 26px !important; }
  .bt-category-main           { width: 100% !important; min-width: 0 !important; }
}

/* 2. bt-dark-theme-wrapper: allow vertical overflow (sidebar no longer uses position:absolute) */
.bt-dark-theme-wrapper { overflow-x: hidden !important; overflow-y: visible !important; }

/* 3. Article title margin */
.article-title, .article .article-title { margin-bottom: 24px !important; }

/* 4. Article body spacing per spec */
.bt-article-body p, .article-body p    { margin: 0 0 16px !important; }
.bt-article-body h2, .article-body h2  { font-size: 24px !important; margin: 40px 0 16px !important; padding-bottom: 0 !important; border-bottom: none !important; }
.bt-article-body h3, .article-body h3  { font-size: 20px !important; margin: 32px 0 12px !important; }
.bt-article-body h4, .article-body h4  { font-size: 18px !important; margin: 24px 0 8px !important; }
.bt-article-body img, .article-body img { margin: 24px 0 !important; }
.bt-article-body ul, .bt-article-body ol,
.article-body ul, .article-body ol     { margin-bottom: 16px !important; }
.bt-article-body li, .article-body li  { margin-bottom: 8px !important; }
.bt-article-body, .article-body        { font-size: 16px !important; line-height: 1.4 !important; max-width: 68ch !important; }
@media (max-width: 768px) {
  .bt-article-body h2, .article-body h2 { margin-top: 28px !important; }
  .bt-article-body h3, .article-body h3 { margin-top: 22px !important; }
}

/* 5. Home page: on desktop, lock to a single viewport — the page itself
   never scrolls. The sidebar and the card grid each scroll internally
   (invisible unless actually needed) so nothing is ever cut off even if
   there isn't room for everything. On mobile/tablet the layout stacks
   vertically as a normal scrolling page instead — locking to 100vh there
   would make a long stacked list unusable. */
@media (min-width: 1024px) {
  body.template-home_page           { overflow: hidden !important; height: 100vh !important; }
  body.template-home_page .bt-main  { height: 100vh !important; min-height: 0 !important; overflow: hidden !important; }
  body.template-home_page .bt-left  { height: 100vh !important; overflow-y: auto !important; overflow-x: hidden !important; }
  body.template-home_page .bt-right { height: 100vh !important; overflow-y: auto !important; overflow-x: hidden !important; }
}
@media (max-width: 1023px) {
  body.template-home_page           { overflow: auto !important; height: auto !important; }
  body.template-home_page .bt-left  { overflow: visible !important; height: auto !important; }
  body.template-home_page .bt-right { overflow: visible !important; height: auto !important; }
  body.template-home_page .bt-main  { height: auto !important; min-height: 0 !important; }
}

/* 6. Home page cards: compact as spec */
.bt-cat-card {
  min-height: 140px !important;
  padding: 20px 16px !important;
}
@media (min-width: 1025px) {
  .bt-cat-card       { min-height: 160px !important; padding: 24px 20px !important; }
  .bt-cat-icon       { width: 52px !important; height: 52px !important; }
}
@media (max-width: 900px) {
  .bt-cat-card       { min-height: 130px !important; }
}
@media (max-width: 768px) {
  .bt-cat-card       { min-height: 88px !important; padding: 18px 24px !important; flex-direction: row !important; justify-content: flex-start !important; gap: 16px !important; }
  .bt-cat-icon       { width: 36px !important; height: 36px !important; flex-shrink: 0 !important; }
  .bt-cat-name       { text-align: left !important; font-size: 14px !important; }
}

/* 7. Whatsapp float: ensure fully hidden (belt+suspenders) */
.bt-wa-float { display: none !important; }
.bt-float-lang { display: none !important; }

/* 8. Category sidebar icon: cancel home-page mask technique, use background-image */
.bt-category-sidebar .bt-cat-icon {
  background-color: transparent !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* 9. Fix old accent color in section page header */
.bt-page-header-accent h1 { color: #7455FD !important; }

/* 11. Cancel bt-left sticky positioning + width constraints on home page
   (line ~8045-8058 conflict). Height/overflow are handled per-breakpoint
   by section 5 above — don't set them unconditionally here or they'll
   fight the desktop single-viewport lock. */
body.template-home_page .bt-left {
  position: relative !important;
}
@media (min-width: 1024px) {
  body.template-home_page .bt-left {
    width: 540px !important;
    min-width: 540px !important;
    max-width: 540px !important;
  }
}
@media (max-width: 1023px) {
  body.template-home_page .bt-left {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* 12. Hide native browser clear button — only one X (our custom one) on ALL search inputs */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
}

/* 13. Ensure footer wordmark is never shown (belt-and-suspenders) */
.bt-footer-wordmark { display: none !important; }

/* ==========================================================================
   14. HOME PAGE — full-viewport (hide header/footer, no container padding)
   Migrated from templates/document_head.hbs — was a second, competing
   stylesheet with no !important, causing unpredictable overrides.
   ========================================================================== */
body.template-home_page .header,
body.template-home_page header,
body.template-home_page .footer,
body.template-home_page footer {
  display: none !important;
}
body.template-home_page .main-content,
body.template-home_page #main-content-outer,
body.template-home_page .main-content > .container {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* ==========================================================================
   15. SEARCH RESULTS PAGE — the filter sidebar (.search-results-sidebar) is
   only ever partially dark-themed (its own container/titles are still the
   stock light-mode styles), so it's hidden in favor of the full-width
   .bt-results-list-grid card layout defined above.
   ========================================================================== */
.search-results-sidebar {
  display: none !important;
}
.search-results-column,
.search-results .search-results-column {
  width: 100% !important;
  max-width: 980px !important;
  flex: none !important;
  margin: 0 auto !important;
  padding: 28px 18px 60px !important;
}

/* ==========================================================================
   16. PREDICTIVE SEARCH DROPDOWN — result link + title/snippet text.
   The container is styled above (14 · PREDICTIVE SEARCH DROPDOWN v12);
   these classes (.bt-dd-title/.bt-dd-snippet) are generated by the
   BRANDTRACK UNIFIED PREDICTIVE SEARCH script in script.js.
   ========================================================================== */
.bt-search-dropdown[hidden] { display: none !important; }
.bt-search-dropdown li a {
  display: block;
  padding: 12px 18px;
  text-decoration: none !important;
  transition: background 0.15s;
}
.bt-search-dropdown li:hover a,
.bt-search-dropdown li[aria-selected="true"] a {
  background: rgba(116, 85, 253, 0.12);
}
.bt-dd-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--bt-accent, #7455FD);
  margin-bottom: 2px;
}
.bt-dd-snippet {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   17. QA PASS — sitewide light-mode leftovers with no dark-mode override.
   Found by auditing every page template against style.css; these are all
   confirmed live (no later rule was already fixing them).
   ========================================================================== */

/* Generic dropdown menu (comment sorter on article/community pages — the
   header's own account menu already has its own dark skin further up,
   scoped to .nav-wrapper-desktop .dropdown-menu). */
.dropdown-menu {
  background: var(--bt-base) !important;
  border: 1px solid var(--bt-border) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6) !important;
}
.dropdown-menu [role=separator] {
  border-bottom: 1px solid var(--bt-border) !important;
}
.dropdown-menu [role=menuitem],
.dropdown-menu [role=menuitemradio] {
  color: var(--bt-text-secondary) !important;
}
.dropdown-menu [role=menuitem]:hover,
.dropdown-menu [role=menuitem]:focus,
.dropdown-menu [role=menuitemradio]:hover,
.dropdown-menu [role=menuitemradio]:focus {
  background: rgba(116, 85, 253, 0.1) !important;
  color: #ffffff !important;
}

/* Native <select> dropdowns (ticket fields, comment sorters, filters) */
.hbs-form select,
.search select {
  background-color: var(--bt-base) !important;
  color: var(--bt-text-primary) !important;
  border-color: var(--bt-border) !important;
}
.hbs-form select:focus,
.search select:focus {
  border-color: var(--bt-accent) !important;
}

/* Disabled form inputs */
.hbs-form input[disabled],
.search input[disabled] {
  background-color: var(--bt-shade) !important;
  color: var(--bt-text-disabled) !important;
}

/* Status labels (request/post status pills) — most are solid colored
   badges that already read fine on dark, except "not planned"/"closed"
   which used a light chip with white-on-white text, and "on hold" which
   is pure black and disappears against the page background. */
.status-label-not-planned,
.status-label-closed {
  background-color: var(--bt-shade-light) !important;
  color: var(--bt-text-secondary) !important;
}
.status-label-hold {
  background-color: var(--bt-shade-light) !important;
  border: 1px solid var(--bt-border-hover) !important;
}

/* ==========================================================================
   FIXED SIDEBAR — category & article pages
   Same component as the home page's .bt-left: full-height flush column,
   same radial-gradient background, same width, same sticky behavior.
   Only the content changes (breadcrumb + article list instead of
   search + popular topics).
   ========================================================================== */
.bt-fixed-sidebar {
  background:
    radial-gradient(ellipse at 30% 85%, rgba(116, 85, 253, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 10%, rgba(80, 50, 180, 0.18) 0%, transparent 50%),
    var(--bt-base);
  border-bottom: 1px solid var(--bt-border);
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
}
/* .article-sidebar carries an older !important background/border/padding
   rule (flat gray card, ~220-260px) that would otherwise beat the rule
   above — restate everything here with !important so this sidebar looks
   identical to the one on category pages and the home page. */
.article-sidebar.bt-fixed-sidebar {
  background:
    radial-gradient(ellipse at 30% 85%, rgba(116, 85, 253, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 10%, rgba(80, 50, 180, 0.18) 0%, transparent 50%),
    var(--bt-base) !important;
  border: none !important;
  border-bottom: 1px solid var(--bt-border) !important;
  border-radius: 0 !important;
  padding: 48px 32px !important;
  min-width: 0 !important;
}
@media (min-width: 1024px) {
  .bt-fixed-sidebar {
    width: 360px;
    min-width: 300px;
    max-width: 400px;
    flex: 0 0 360px;
    border-bottom: none;
    border-right: 1px solid var(--bt-border);
    position: sticky;
    top: 71px;
    height: calc(100vh - 71px);
    overflow-y: auto;
    padding: 52px 44px;
  }
  .article-sidebar.bt-fixed-sidebar {
    flex: 0 0 360px !important;
    max-width: 400px !important;
    border-bottom: none !important;
    border-right: 1px solid var(--bt-border) !important;
    padding: 52px 44px !important;
  }
}
@media (max-width: 1023px) {
  .bt-fixed-sidebar { padding: 28px 20px 24px; }
  .article-sidebar.bt-fixed-sidebar { padding: 28px 20px 24px !important; }
}
.bt-sidebar-breadcrumb {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--bt-text-tertiary);
  margin-bottom: 24px;
  line-height: 1.4;
}
.bt-sidebar-category-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--bt-text-primary);
  line-height: 1.15;
  margin: 0 0 12px 0;
}
.bt-sidebar-category-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--bt-text-secondary);
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 1023px) {
  .bt-sidebar-category-title { font-size: 26px; }
}
.bt-sidebar-breadcrumb a {
  color: var(--bt-text-tertiary);
  text-decoration: none;
}
.bt-sidebar-breadcrumb a:hover {
  color: var(--bt-text-primary);
  text-decoration: underline;
}
.bt-sidebar-breadcrumb-sep {
  margin: 0 6px;
  color: var(--bt-border-hover);
}
.bt-sidebar-breadcrumb-current {
  color: var(--bt-text-primary);
}
.bt-sidebar-breadcrumb-current a {
  color: var(--bt-text-primary);
}
.bt-sidenav-item.current-article {
  background: rgba(116, 85, 253, 0.15);
  border-color: rgba(116, 85, 253, 0.35);
  color: var(--bt-text-primary) !important;
  font-weight: 600;
}
@media (max-width: 1023px) {
  .bt-fixed-sidebar,
  .article-sidebar.bt-fixed-sidebar {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    position: static;
    height: auto;
    overflow-y: visible;
  }
}