@charset "UTF-8";

  @font-face {
    font-family: 'Inter Tight';
    src: url(/hc/theming_assets/01K7GCP84313EGGYCHTWJBNXRG) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Inter Tight';
    src: url(/hc/theming_assets/01K7GCP85QW8K3CQAYAM5GNQFA) format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Inter Tight';
    src: url(/hc/theming_assets/01K7GCP85MAY8TXGHG2JPBS70M) format('woff2');
    font-weight: 600;
    font-style: normal;
    font-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 {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
  }

  main {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

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

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

  a {
    background-color: transparent;
    transition: all .3s ease;
    letter-spacing: normal;
  }

  a:hover {
    color: #6941C6;
  }

  path, svg, button, g, circle, rect {
    transition: all .3s ease;
  }

  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.2;
    margin: 0;
  }

  button,
  input {
    overflow: visible;
  }

  button,
  select,
  input[type=submit]  {
    text-transform: none;
    cursor: pointer;
  }

  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(255, 255, 255, 1);
    color: #1C1917;
    font-family: 'Century Gothic', sans-serif;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
  }

  .fade-in-up {
    transition-duration: .7s;
    transition-delay: .1s;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 50px, 0);
  }
  .fade-in-up.done {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .faq__item h6 {
    color: rgba(28, 31, 35, 0.8);
    font-size: 18px;
    font-weight: 500;
    line-height: 140%;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 500;
    font-family: 'Century Gothic', sans-serif;
    margin-top: 0;
    margin-bottom: 0;
  }

  .hero-text {
    font-size: 60px;
    margin-bottom: 48px;
    color: #fff;
  }

  h1 {
    font-size: 38px;
    line-height: 110%;
  }

  h2 {
    font-size: 32px;
    line-height: 120%;
    letter-spacing: -0.72px;
  }

  h3 {
    font-size: 26px;
    line-height: 110%;
  }

  h4 {
    font-size:22px;
    line-height: 110%; 
  }

  h5 {
    font-size: 18px;
    line-height: 110%; 
  }

  h6 {
    font-size: 16px;
    line-height: 150%;
  }

  p {
    font-family: 'Century Gothic', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    margin: 0;
    color: rgba(0, 0, 0, 1);
  }

  .p-large {
    font-size: 18px;
    color:#FFFFFF;
  }

  @media (max-width: 1023px) {
    .hero-text {
      font-size: 44px;
    }
    h1 {
      font-size: 38px;
    }
    h2 {
      font-size: 32px;
    }
  }

  @media (max-width: 767px) {
    .hero-text {
      font-size: 42px;
    }
    h1 {
      font-size: 38px;
    }
    h2 {
      font-size: 32px;
    }
    h3 {
      font-size: 26px;
    }
  }
  a {
    color: #1C1917;
    text-decoration: none;
    cursor: pointer;
  }

  input,
  textarea {
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
  }

  input,
  textarea:hover {
    color: white;
  }

  input {
    max-width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
    outline: none;
  }


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

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

  textarea {
    border-radius: 8px;
    resize: vertical;
    width: 100%;
    outline: none;
    padding: 18px;
    height: 140px;
    border: 1px solid #D5D7DA;
    background-color: rgba(255, 255, 255, 1);
  }

  .container {
    /* max-width: 1200px; */
    padding: 0 120px;
    width: 100%;
    margin: 0 auto;
  }

  @media (max-width: 767px) {
    .container {
      padding: 0 15px;
    }
  }

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

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

  .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 *****/
  .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button, .article-subscribe button, .community-follow button, .comment-form-controls input[type=submit] {
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
    text-align: center;
    transition: all .3s ease;
    padding: 8px 18px;
    border-radius: 12px;
    box-shadow: 0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset, 0px -2px 0px 0px rgba(10, 13, 18, 0.05) inset, 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    background-color: #F4EBFF;
    border: 1px solid #D5D7DA;
    color: #1C1917;
    user-select: none;
    white-space: nowrap;
    -webkit-touch-callout: none;
  }
  @media (min-width: 768px) {
  .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
      width: auto;
    }
  }

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


  .article-subscribe button:hover, .community-follow button:hover, .subscriptions-subscribe button:hover, .section-subscribe button:hover, .split-button button:hover {
    background-color: #1D1B19;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
  }

  .comment-form-controls input[type=submit] {
    background-color: #1D1B19;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    box-shadow: 0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset, 0px -2px 0px 0px rgba(10, 13, 18, 0.05) inset, 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  }

  .comment-form-controls input[type=submit]:hover {
    background-color: #F4EBFF;
    border: 1px solid #D5D7DA;
    color: #1C1917;
  }

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

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

  [dir=rtl] .split-button button:not(:only-child):first-child {
    border-left: 1px solid $brand_text_color;
    border-top-left-radius: unset;
    border-bottom-left-radius: unset;
  }
  [dir=ltr] .split-button button:not(:only-child):first-child {
    border-right: 1px solid $brand_text_color;
    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: #544b45;
    font-size: 15px;
    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: 16px;
    margin-bottom: 10px;
    color: #1C1917;
  }

  .form-field input {
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    padding: 10px;
    width: 100%;
  }
  .form-field input:focus {
    border: 1px solid #6941C6;
  }

  .form-field input[type=text] {
    border: 1px solid #D5D7DA;
    border-radius: 8px;
  }
  .form-field input[type=text]:focus {
    border: 1px solid #6941C6;
  }

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

  .form-field .nesty-input {
    border-radius: 4px;
    border: 1px solid #87929D;
    height: 40px;
    line-height: 40px;
    outline: none;
    vertical-align: middle;
  }
  .form-field .nesty-input:focus {
    border: 1px solid #6941C6;
    text-decoration: none;
  }

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

  .form-field .hc-multiselect-toggle:focus {
    outline: none;
    border: 1px solid #6941C6;
    text-decoration: none;
  }

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

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

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

  .form-field p {
    color: rgba(0, 0, 0, 1);
    font-size: 14px;
    margin: 10px 0;
    opacity: 0.8;
  }

  .form footer {
    display: flex;
    justify-content: center;
    padding-top: 30px;
  }
  .form footer input {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    line-height: 150%;
    padding: 8px 18px;
    font-weight: 500;
    border-radius: 12px;
    box-shadow: 0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset, 0px -2px 0px 0px rgba(10, 13, 18, 0.05) inset, 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    cursor: pointer;
    background-color: #1D1B19;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
  }
  .form footer input:hover {
    background-color: #F4EBFF;
    border: 1px solid #D5D7DA;
    color: #1C1917;
  }

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

  .form .suggestion-list {
    font-size: 16px;
    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: #1C1917;
  }

  /***** Header *****/
  .header {
    background-color: transparent;
    position: relative;
    z-index: 99;
    /* margin: 10px 10px 0; */
  }

  .header .container {
    /* max-width: 1180px; */
    /* padding-left: 20px;
    padding-right: 10px; */
    position: relative;
    align-items: center;
    display: flex;
    justify-content: space-between;
    height: 57px;
    /* border-radius: 16px; */
    box-shadow: 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
    background-color: #7700EA;
    /* border: 1px solid #D5D7DA; */
  }

  .header__lists {
    display: flex;
    align-items: center;
    gap: 30px;
    font-size: 14px;
  }
  .header__lists a {
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
  }

  .header__lists a:hover {
    color: #6941C6;
  }

  @media (max-width: 1023px) {
    .header__lists {
      display: none;
    }
  }

  .search-header {
    display: none;
  }

  .search-header input[type=search]{
    border-radius: 12px;
    border: 1px solid #111;  
    padding: 10px 15px;
  }

  .search-header .clear-button {
    display: none;
  }

  .logo img {
    vertical-align: middle;
    width: 100%;
    height: auto;
    max-width: 160px;
  }
  .logo span {
    margin: 0 20px;
    flex: 0 0 auto;
    color: white;
  }

  .logo a {
    display: flex;
    align-items: center;
  }

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

  .logo a:hover {
    color: #6941C6;
  }

  .user-nav {
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    padding-right: 20px;
  }
  @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;
  }

  .footer-language-selector button {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
  }

  .footer-language-selector button:hover {
    color: #6941C6;
  }
  .footer-language-selector button path {
    stroke: #fff;
  }

  .footer-language-selector button:hover path {
    stroke: #6941C6;
  }

  .user-nav-list {
    display: flex;
    align-items: center;
    list-style: none;
  }
  .user-nav-list > li {
    display: inline-block;
    line-height: 1;
  }

  .user-nav-list > li > a, .user-nav-list > li > div {
    margin: 0 32px;
  }

  @media (min-width: 1024px) {
    .footer-language-selector .dropdown-menu {
      left: auto;
      right: 0;
    }
  }

  .user-nav-list > li svg {
    cursor: pointer;
  }

  /* Global Modal Trigger (Search Icon) */
  .global-modal-trigger {
    display: inline-block;
    cursor: pointer;
    transition: opacity 0.2s ease;
    vertical-align: middle;
  }

  .global-modal-trigger:hover {
    opacity: 0.8;
  }

  .global-modal-trigger:focus {
    outline: 2px solid #6941C6;
    outline-offset: 2px;
    border-radius: 4px;
  }

  .user-nav-list > li {
    display: flex;
    align-items: center;
  }

  @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;
      align-items: center;
      gap: 15px;
    }
  }

  @media (min-width: 768px) {
    .nav-wrapper-desktop a {
      display: inline-block;
    }
  }
  [dir=rtl] .nav-wrapper-desktop a {
    padding: 0 0 0 20px;
  }


  @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: 40px;
    height: 40px;
    border-radius: 50%;
  }
  .nav-wrapper-mobile .menu-button-mobile .icon-menu path {
    stroke: rgba(0, 0, 0, 1);
  }
  .nav-wrapper-mobile .menu-list-mobile {
    position: absolute;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
    border: 1px solid #D5D7DA;
    right: 0;
    left: 0;
    top: 57px;
    z-index: 10;
    padding: 15px 0;
  }
  .nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] {
    display: none;
  }
  .nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
    display: block;
  }
  .menu-list-mobile-items .dropdown-menu {
    left: 20px;
    margin-top: 0;
  }
  .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-top: 15px;
    margin-bottom: 19px;
  }
  .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 15px;
    width: 100%;
    height: 100%;
    color: #111;
    cursor: pointer;
    text-align: start;
    font-size: 16px;
    font-weight: 500;
  }
  .nav-wrapper-mobile .menu-list-mobile-items button path {
    stroke: #111;
  }

  .nav-wrapper-mobile .menu-list-mobile-items a {
    display: block;
    font-size: 16px;
    font-weight: 500;
    padding: 8px 15px;
    width: 100%;
    height: 100%;
    color: #111;
  }
  .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: #414141;
  }
  .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
    height: 40px;
    width: 40px;
    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: #fff;
    min-width: 0;
    padding: 0;
    white-space: nowrap;
  }
  .user-info > button:hover, .user-info > button:focus {
    color: #6941C6;
    background-color: transparent;
  }
  .user-info > button path {
    stroke: #fff;
  }
  .user-info > button:hover path, .user-info > button:focus path {
    stroke: #6941C6;
  }
  .user-info > button::after {
    color: #1C1917;
    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: 48px;
    width: 48px;
  }

  .avatar .icon-agent {
    color: #6941C6;
    border: 2px solid #fff;
    border-radius: 50%;
    bottom: -4px;
    background-color: $brand_text_color;
    font-size: 17px;
    height: 17px;
    line-height: 17px;
    position: absolute;
    right: -2px;
    text-align: center;
    width: 17px;
  }

  /***** Footer *****/
  .submit-request {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    margin: 0 10px;
    align-items: center;
    text-align: center;
    border-radius: 12px;
    padding: 100px;
    background-color: #E5E5FF;
  }

  .submit-request .container {
    position: relative;
    z-index: 3;
    max-width: 1180px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .submit-request > svg {
    position: absolute;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
  }

  .submit-request > svg ellipse {
    fill: #6941C6;
  }

  .submit-request > svg > g > path {
    fill: #E5E5FF;
  }

  .submit-request__images {
    position: relative;
    overflow: hidden;
    width: 210px;
    height: 50px;
    margin-top: 30px;
  }

  .submit-request__image {
    position: absolute;
    z-index: 1;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    left: 0;
    box-shadow: 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04), 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    backdrop-filter: blur(32px);
  }

  .submit-request__image:nth-of-type(2) {
    left: 40px;
    z-index: 2;
  }
  .submit-request__image:nth-of-type(3) {
    left: 80px;
    z-index: 3;
  }
  .submit-request__image:nth-of-type(4) {
    left: 120px;
    z-index: 4;
  }
  .submit-request__image:nth-of-type(5) {
    left: 160px;
    z-index: 5;
  }

  .submit-request h2 {
    max-width: 466px;
  }

  .submit-request p {
    font-size: 18px;
    line-height: 28px;
    margin-top: 20px;
    margin-bottom: 20px;
    max-width: 445px;
  }

  @media (max-width: 1023px) {
    .submit-request {
      padding: 80px;
    }
    .submit-request h2 {
      max-width: none;
    }
  }
  @media (max-width: 767px) { 
    .submit-request {
      padding: 60px 40px;
    }
  }

  .footer {
    background-color: #1C1F23;
    border-radius: 60px 60px 0 0;
    padding: 60px 120px 0 120px;
  }

  .footer__top {
    display: flex;
    justify-content: flex-start;
    /* padding-top: 60px;
    padding-bottom: 60px; */
    gap: 160px;
    padding-left: 240px;
  }

  .footer__top > div:first-of-type {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 320px;
  }

  .footer__top > div:first-of-type > a {
    display: inline-block;
    line-height: 0;
  }

  .footer__top > div:first-of-type > a img {
    max-width: 160px;
  }

  .footer__social {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .footer__social a {
    line-height: 1;
  }

  .footer__social svg {
    width: 18px;
    height: auto;
  }
  .footer__social path {
    fill: rgba(0, 0, 0, 1);
  }

  .footer__social a:hover path {
    fill: #6941C6;
  }

  .footer__lists {
    display: flex;
    gap: 55px;
  }

  .footer__list p {
    font-size: 16px;
    margin-bottom: 16px;
    font-weight: 600;
    color: #FFFFFF;
  }

  .footer__list li {
    margin-bottom: 10px;
  }

  .footer__list li:last-child {
    margin-bottom: 0;
  }

  .footer__list a {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.40);
  }

  .footer__list a:hover {
    color: #6941C6;
  }
  .footer_L_Logo {
    display: flex;
    justify-content: center;
    padding: 48px 0 20px 0;
  }
  .footer__bottom {
    position: relative;
  }

  .footer__bottom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(85, 85, 85, 1);
    width: 100%;
  }

  .footer__bottom .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    max-width: 1180px;
    padding: 30px 0;
    position: relative;
  }

  .footer__bottom .container > div:first-of-type {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .footer__links {
    display: flex;
    gap: 36px;
    align-items: center;
    white-space: nowrap;
  }

  .footer__bottom a {
    font-size: 14px;
    color: #555555;
    font-weight: 400;
  }

  .footer__right {
    color: #555555 !important;
    font-size: 14px !important;
    white-space: nowrap;
    padding-right: 593px;
  }

  .footer__right a {
    font-weight: 400;
  }

  @media (max-width: 1199px) {
    .footer__bottom .container {
      width: calc(100% - 30px);
    }
  }

  @media (max-width: 1023px) {
    .footer__top {
      flex-direction: column;
      align-items: center;
      gap: 40px;
    }
    .footer__top p {
      text-align: center;
    }
    .footer__list {
      align-self: center;
    }
    .footer__top > div:first-of-type {
      align-items: center;
    }
  }

  @media (max-width: 767px) {
    .footer__lists {
      flex-direction: column;
      align-items: center;
      gap: 30px;
    }
    .footer__bottom .container {
      flex-direction: column;
      gap: 10px;
    }
    .footer__bottom p {
      text-align: center;
      max-width: 80%;
    }
  }

  .powered-by-zendesk {
    display: none;
  }

  /***** Breadcrumbs *****/
  .breadcrumbs {
    max-width: 1200px;
    margin: 0 auto 70px;
    padding: 0 15px;
    display: flex;
  }

  .breadcrumbs li {
    color: rgba(0, 0, 0, 1);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    max-width: 450px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .breadcrumbs li a {
    color: rgba(0, 0, 0, 1);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
  }

  .breadcrumbs li a:hover {
    color: #6941C6;
  }

  .breadcrumbs li + li::before {
    content: "-";
    margin: 0 4px;
  }
  @media (max-width: 1023px) {
    .breadcrumbs {
      margin-bottom: 50px;
    }
  }
  @media (max-width: 767px) {
    .breadcrumbs {
      margin-bottom: 30px;
    }
  }
  /***** Search field *****/
  .search-container {
    position: relative;
    padding-left: 15px;
  }

  .search {
    display: flex;
    gap: 16px;
    align-items: center;
    position: relative;
    transition: border 0.12s ease-in-out;
  }
  .search:focus-within {
    border-color: #6941C6;
  }
  .search input[type=search],
  .search .clear-button {
    border: 1px solid #D5D7DA;
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    border: none;
  }

  .search input[type=search] {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    background-color: transparent;
    color: white;
    flex: 1 1 auto;
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    width: 100%;
  }

  /* 禁用浏览器原生的清除按钮（但不包括分类页面的搜索框） */
  .search:not(.category-page-search) input[type=search]::-webkit-search-cancel-button,
  .search:not(.category-page-search) input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
  }

  .search:not(.category-page-search) input[type=search]::-ms-clear {
    display: none;
  }

  /* 分类页面搜索框：隐藏原生清除按钮（使用自定义清除按钮） */
  .category-page-search input[type=search]::-webkit-search-cancel-button,
  .category-page-search input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
  }

  .category-page-search input[type=search]::-ms-clear {
    display: none;
  }


  .search .clear-button {
    align-items: center;
    box-sizing: border-box;
    background: transparent;
    border: none;
    color: #777;
    cursor: pointer;
    display: none;
    flex: none;
    justify-content: center;
    padding: 0;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }
  .search-has-value .clear-button {
    display: flex;
  }
  .search .clear-button:hover {
    opacity: 0.8;
  }
  .search .clear-button:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
    border-radius: 50%;
  }
  .search input[type=search]::placeholder, .nav input[type=search]::placeholder {
    color: rgba(255, 255, 255, 0.6);
  }

  [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: #6941C6;
  }

  [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: #6941C6;
  }
  [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: #6941C6;
  }

  .search-icon {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    left: 15px;
    z-index: 1;
    width: 18px;
    height: 18px;
    color: white;
    pointer-events: none;
  }

  .search-icon path {
    fill: white;
  }

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

  .waves linearGradient stop:first-of-type {
    stop-color: #E5E5FF;
  }

  /***** Hero component *****/
  .hero {
    height: 658px;
    padding: 140px 0 70px;
    overflow: hidden;
    position: relative;
    margin: 0;
    /* border-radius: 12px; */
    /* background-color: #E5E5FF; */
    background: linear-gradient(0deg, #FFF 0%, #7700EA 100%);
  }

  .hero__content {
    position: relative;
    z-index: 5;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 862px;
    width: 100%;
    z-index: 3;
  }
  .hero__content > h1 {
    max-width: 862px;
  }
  .hero__content > p {
    margin-bottom: 40px;
    max-width: 492px;
  }

  .hero__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    border-radius: 12px;
    width: 36px;
    height: 36px;
    border: 1px solid #E5E5FF;
    background-color: #6941C6;
  }

  /* .hero__content .hero__icon:nth-of-type(1), .hero__content .hero__icon:nth-of-type(3), .hero__content .hero__icon:nth-of-type(5), .hero__content .hero__icon:nth-of-type(6) {
    transform: rotate(-7deg);
  }

  .hero__content .hero__icon:nth-of-type(2), .hero__content .hero__icon:nth-of-type(4) {
    transform: rotate(7deg);
  } */

  .hero__content .hero__icon:nth-of-type(1) {
    top: -32px;
    left: 32px;
  }

  .hero__content .hero__icon:nth-of-type(2) {
    top: 32px;
    left: -50px;
  }

  .hero__content .hero__icon:nth-of-type(3) {
    top: 140px;
    left: -29px;
  }

  .hero__content .hero__icon:nth-of-type(4) {
    top: -32px;
    right: 36px;
  }

  .hero__content .hero__icon:nth-of-type(5) {
    top: 32px;
    right: -40px;
  }

  .hero__content .hero__icon:nth-of-type(6) {
    top: 140px;
    right: -18px;
  }

  .hero__icon > img {
    width: 24px;
    height: 24px;
  }

  .hero__content .hero__icon:nth-of-type(1) img, .hero__content .hero__icon:nth-of-type(3) img, .hero__content .hero__icon:nth-of-type(5) img, .hero__content .hero__icon:nth-of-type(6) img {
    transform: rotate(7deg);
  }

  .hero__content .hero__icon:nth-of-type(2) img, .hero__content .hero__icon:nth-of-type(4) img {
    transform: rotate(-7deg);
  }

  .hero__icon:nth-of-type(1).fade-in-up, .hero__icon:nth-of-type(4).fade-in-up {
    transition-duration: .5s;
  }

  .hero__icon:nth-of-type(3).fade-in-up, .hero__icon:nth-of-type(6).fade-in-up {
    transition-duration: .9s;
  }

  .hero__badge {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 4px 10px 4px 4px;
    border-radius: 40px;
    margin-bottom: 16px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 1);
  }

  .hero__badge p {
    font-weight: 500;
    transition: all .3s ease;
  }

  .hero__badge:hover p {
    color: #6941C6;
  }

  .hero__badge:hover div:last-of-type svg path {
    stroke: #6941C6;
  }

  .hero__badge > div {
    display: flex;
    gap: 4px;
    align-items: center;
  }

  .hero__badge > a {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    border-radius: 10px;
  }

  .hero__badge > div:first-of-type {
    padding: 0 8px;
    border-radius: 50px;
    background-color: #E5E5FF;
  }

  .hero__badge > div:first-of-type svg circle:first-of-type {
    fill: #E5E5FF;
  }

  .hero__badge > div:first-of-type svg circle:last-of-type {
    stroke: #E5E5FF;
  }

  .hero__bottom {
    width: 100%;
    border-radius: 12px;
    border: 1px solid #D5D7DA;
    box-shadow: 0px 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04), 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    background-color: rgba(0, 0, 0, 0.06);
  }

  .hero__bottom .hero-inner, .category-page .hero-inner, .section-page .hero-inner, .error-page .hero-inner {
    max-width: none;
    padding: 16px 20px;
  }

  .hero__bottom:has(.popular-keywords__items) .hero-inner {
    border-bottom: 1px solid #D5D7DA;
  }

  .category-page .hero-inner, .section-page .hero-inner, .error-page .hero-inner {
    border-radius: 12px;
    box-shadow: 0px 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04), 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    border: 1px solid #D5D7DA;
    background-color: rgba(255, 255, 255, 1);
  }

  .hero > svg {
    position: absolute;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
  }

  @media (max-width: 1023px) {
    .hero__content {
      max-width: 90%;
    }
    .hero__content .hero__icon:nth-of-type(2) {
      left: -20px;
    }
    .hero__content .hero__icon:nth-of-type(3) {
      left: 20px;
    }
    .hero__content .hero__icon:nth-of-type(5) {
      right: -20px;
    }
    .hero__content .hero__icon:nth-of-type(6) {
      right: 10px;
    }
  }
  @media (max-width: 767px) {
    .hero {
      padding: 110px 0 50px;
    }
    .hero__content {
      max-width: none;
      width: auto;
      margin: 0 10px;
    }
    .hero__content .hero__icon {
      display: none;
    }
  }

  .hero-inner {
    position: relative;
    max-width: 490px;
    width: 100%;
  }

  .hero .hero__bottom .search input[type=search], .category-page .search input[type=search], .section-page .search input[type=search], .error-page .search input[type=search] {
    border: none;
    border-radius: 0;
    padding: 0 34px;
  }

  .hero .search-icon, .error-page .search-icon, .section-page .search-icon {
    left: 20px;
  }
  /* 隐藏搜索框右侧的提交按钮 */
  .hero .search input[type=submit], 
  .error-page .search input[type=submit], 
  .section-page .search input[type=submit],
  .search input[type=submit],
  .search button[type=submit],
  .search .submit-button {
    display: none !important;
  }

  .hero .search input[type=submit], .error-page .search input[type=submit], .section-page .search input[type=submit] {
    right: 0;
    padding: 7px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 150%; /* 21.6px */
    letter-spacing: 0.63px;
    cursor: pointer;
    transition: all .3s ease;
    background-color: #1D1B19;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    box-shadow: 0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset, 0px -2px 0px 0px rgba(10, 13, 18, 0.05) inset, 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    display: none !important;
  }

  .hero .search input[type=submit]:hover, .error-page .search input[type=submit]:hover, .section-page .search input[type=submit]:hover {
    background-color: #F4EBFF;
    border: 1px solid #D5D7DA;
    color: #1C1917;
  }

  .hero .hero__bottom .search input[type=search], .category-page .search input[type=search], .section-page .search input[type=search], .error-page .search input[type=search] {
    border: none;
    border-radius: 0;
    padding: 0 34px;
  }

  .hero .search-icon, .error-page .search-icon, .section-page .search-icon {
    left: 20px;
  }

  .popular-keywords {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px;
  } 

  .category-page .popular-keywords {
    padding: 20px 0;
  }

  .popular-keywords > div:first-of-type {
    display: flex;
    gap: 4px;
    align-items: center;
  }

  .popular-keywords p {
    font-weight: 500;
  }
  .popular-keywords__items {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    flex: 1;
  }

  .category-page .popular-keywords__items {
    justify-content: flex-end;
  }

  .popular-keywords a {
    font-size: 14px;
    font-weight: 500;
    line-height: 150%;
    padding: 4px 13px;
    border-radius: 40px;
    background-color: #F4EBFF;
    color: #6941C6;
  }

  .popular-keywords a:hover {
    background-color: #1D1B19;
    color: #fff;
  }

  @media (max-width: 767px) {
    .popular-keywords {
      flex-direction: column;
      align-items: center;
    }
    .popular-keywords p {
      max-width: none;
      text-align: center;
      padding: 0;
    }
    .popular-keywords__items {
      justify-content: center;
    }
  }

  .page-header {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
  }
  @media (min-width: 768px) {
    .page-header {
      align-items: center;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 30px;
      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, .page-header h2 {
    flex-grow: 1;
    margin-bottom: 0;
  }
  .page-header-description {
    margin: 10px 0 0 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;
  }

  .page-header .dropdown-toggle {
    gap: 4px;
  }


  .page-header .dropdown-toggle path {
    stroke: rgba(0, 0, 0, 1);
  }

  .page-header .dropdown-toggle:hover svg, .page-header .dropdown-toggle[aria-expanded='true'] svg {
    transform: rotate(180deg);
  }

  .page-header .dropdown-toggle:hover svg path, .page-header .dropdown-toggle[aria-expanded='true'] svg path {
    stroke: #FFFCFB;
  }

  .page-header .dropdown-toggle:hover p, .page-header .dropdown-toggle[aria-expanded='true'] p {
    color: #FFFCFB;
  }


  .sub-nav {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 15px 30px;
    justify-content: space-between;
    margin-top: 20px;
  }
  .sub-nav .breadcrumbs {
    padding: 0;
  }
  @media (min-width: 768px) {
    .sub-nav {
      flex-direction: row;
    }
  }

  @media (max-width: 767px) {
    .page-header h1, .page-header h2 {
      margin-bottom: 30px;
    }
    .sub-nav {
      margin-bottom: 30px;
    }
    .sub-nav .breadcrumbs {
      margin-bottom: 0;
    }
  }
  /***** Blocks *****/
  /* Used in Homepage#categories and Community#topics */
  .blocks-list {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 50px;
  }
  .topics-item {
    padding: 24px;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid #D5D7DA;
    color: #1C1917;
    box-shadow: 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04), 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
  }
  .topics-item > h5 {
    margin-bottom: 15px;
  }
  .blocks-item {
    display: flex;
    min-height: 250px;
  }
  .blocks-item .block:nth-of-type(1) {
    border-right: 0;
  }
  .blocks-item .block:nth-of-type(2) {
    border-left: 0;
    border-right: 0;
  }
  .blocks-item .block:nth-of-type(3) {
    border-left: 0;
  }
  .blocks-item .block {
    width: calc(100% / 3);
  }

  .blocks-item-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 20px;
  }
  .blocks-item-content .meta-data {
    color: #FFFCFB;
  }

  .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: #1C1917;
  }
  .blocks-item-link {
    color: #6941C6;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    border-radius: inherit;
  }
  .blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active {
    color: inherit;
    text-decoration: none;
  }
  .blocks-item-link:focus {
    outline: 0;
    box-shadow: 0 0 0 3px #6941C6;
    text-decoration: none;
  }
  .blocks-item-title {
    display: block;
    width: fit-content;
    margin: 0 auto;
  }
  .blocks-item-title h5 {
    margin-bottom: 0;
    transition: all .3s ease;
    color: #1C1917;
    cursor: pointer;
  }
  .blocks-item-title:hover h5 {
    color: #6941C6;
  }
  .blocks-item-description {
    margin: 0;
  }
  .blocks-item-description:not(:empty) {
    margin-top: 10px;
  }
  @media (max-width:1023px) {
    .blocks-list {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width:767px) {
    .blocks-list {
      margin-top: 35px;
      gap: 20px;
      flex-direction: column;
      align-items: center;
      grid-template-columns: repeat(1, 1fr);
    }
    .blocks-item {
      max-width: 470px;
      width: 100%;
    }
    .topics-item {
      max-width: 470px;
      width: 100%;
    }
  }

  /***** Home page *****/
  .section {
    padding-bottom: 80px;
  }
  @media (max-width: 1023px) {
    .section {
      padding-bottom: 80px;
    }
  }
  @media (max-width: 767px) {
    .section {
      padding-bottom: 60px;
    }
  }


  /* Introduction */
  .introduction {
    padding-top: 100px;
    position: relative;
    z-index: 2;
    overflow: hidden;
    text-align: center;
  }

  .introduction > svg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -2;
  }

  .introduction .container {
    padding-bottom: 153px;
    border-bottom: 1px solid #D5D7DA;
  }

  .introduction .container > h3 {
    max-width: 450px;
    margin: 0 auto;
  }

  .introduction .container > p {
    max-width: 370px;
    margin: 20px auto 56px;
  }

  .introduction__items {
    display: grid;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
  }

  .introduction__item {
    position: relative;
    padding: 50px 50px 20px;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04), 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    border: 1px solid #D5D7DA;
  }

  .introduction__item > p {
    position: relative;
    z-index: 2;
    max-width: 290px;
  }

  .introduction__item > div:first-of-type {
    position: absolute;
    z-index: 2;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 12px;
    line-height: 0;
    width: fit-content;
    padding: 11px;
    border: 1px solid #E5E5FF;
    background-color: #6941C6;
  }

  .introduction__item > div:first-of-type svg {
    width: 28px;
    height: 28px;
  }

  .introduction__item > div:first-of-type svg path {
    fill: #FFFCFB;
  }

  .introduction__item h6 {
    margin-bottom: 10px;
  }

  .introduction__item-bottom, .category-page__article-bottom {
    display: flex;
    align-items: end;
    justify-content: center;
    position: absolute;
    bottom: -53px;
    height: 100px;
    left: 0;
    width: 100%;
    border-radius: 16px;
    z-index: -1;
    border: 1px solid #D5D7DA;
    background-color: #6941C6;
    box-shadow: 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04), 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
  }

  .introduction__item-link, .category-page__article-link {
    position: absolute;
    z-index: 5;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
  }

  .introduction__item-link, .category-page__article-link {
    display: flex;
    gap: 6px;
    align-items: center;
    width: fit-content;
    font-weight: 500;
    color: #FFFCFB;
  }

  .category-page__article-link {
    left: 20px;
    transform: none;
  }

  .introduction__item-link a, .category-page__article-link a {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    bottom: 0;
  }

  .introduction__item-link svg path, .category-page__article-link svg path {
    stroke: #FFFCFB;
  }

  .introduction__item-link:hover svg, .category-page__article-link:hover svg {
    transform: rotate(90deg)
  }

  @media (max-width: 1023px) {
    .introduction {
      padding-top: 80px;
    }
    .introduction .container {
      padding-bottom: 133px;
    }
    .introduction__items {
      grid-template-columns: repeat(2, 1fr);
      gap: 93px 20px;
    }
    .introduction__items > div:last-of-type {
      grid-column: 1 / -1;
      justify-self: center; 
    }
  }

  @media (max-width: 767px) {
    .introduction {
      padding-top: 60px;
    }
    .introduction .container {
      padding-bottom: 113px;
    }
    .introduction__items {
      grid-template-columns: repeat(1, 1fr);
      gap: 93px;
    }
    .introduction__item {
      max-width: 370px;
      width: 100%;
    }
  }

  /* Quick Links */
  .quick-links .h2 {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 20px;
  }

  .quick-links .container > p {
    text-align: center;
    max-width: 550px;
    margin: 0 auto;
  }

  .quick-links__items {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 60px;
  }

  .quick-links__item {
    position: relative;
    width: calc(50% - 15px);
    display: flex;
    gap: 30px;
    border-radius: 10px;
    padding: 40px;
    text-align: left;
    background-color: #E5E5FF;
  }

  .quick-links__item:first-of-type {
    background-color: #E5E5FF;
  }

  .quick-links__item:first-of-type h4 a, .quick-links__item:first-of-type p, .quick-links__item:first-of-type div div {
    color: #FFFCFB;
  }

  .quick-links__item:first-of-type h4 a:hover {
    color: #6941C6;
  }

  .quick-links__item img {
    flex: 0 0 auto;
    max-width: 60px;
    height: fit-content;
  }

  .quick-links__item h4 {
    margin-bottom: 20px;
  }

  .quick-links__item p {
    margin-bottom: 30px;
  }


  .quick-links__item div div a {
    position: absolute;
    font-size: 18px;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }

  .quick-links__item div div {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: center;
    width: fit-content;
    font-size: 14px;
  }

  .quick-links__item div svg path {
    stroke: #1C1917;
  }

  .quick-links__item:first-of-type div svg path {
    stroke: #FFFCFB;
  }

  .quick-links__item div div:hover svg {
    transform: rotate(45deg);
  }

  @media (max-width: 1023px) {
    .quick-links__items {
      margin-top: 40px;
    }
    .quick-links__item {
      flex-direction: column;
      align-items: center;
    }
    .quick-links__item > div {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  }
  @media (max-width: 767px) {
    .quick-links__items {
      gap: 20px;
    }
    .quick-links__item {
      width: 100%;
      max-width: 470px;
      gap: 30px;
    }
  }

  /* Explore Topics */
  .categories {
    background-color: rgba(255, 255, 255, 1);
  }

  .categories .container {
    display: block;
    flex-direction: column;
    gap: 80px;
    margin-top: -230px;
    position: relative;
    z-index: 1;
  }

  .categories.categories-layout2 .container {
    display: flex;
  }

  .categories__header {
    position: relative;
    overflow: hidden;
    display: flex;
  }

  .categories__header h2 {
    color: white;
    font-size: 32px;
    font-weight: 700;
    line-height: 140%;
  }

  .categories__header > svg {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
  }

  .categories__head > div {
    position: relative;
    z-index: 3;
  }

  .categories__header h2, .categories__head h2 {
    max-width: 570px;
  }

  .categories__header p {
    margin-top: 20px;
    max-width: 370px;
  }

  .categories__head p {
    margin-top: 20px;
    max-width: 535px;
  }

  .categories__head {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    padding: 50px 50px 150px;
    border-radius: 12px;
    background-color: #E5E5FF;
  }

  .categories__head > svg {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
  }

  .categories__head > svg ellipse {
    fill: #6941C6;
  }

  .categories__head > div:nth-of-type(2), .videos__head > div {
    flex: 0 0 auto;
  }

  .categories__sections, .categories__list {
    margin-top: -110px;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, 1fr);
    flex-wrap: wrap;
    position: relative;
    z-index: 5;
  }

  .categories__list {
    margin-top: 40px;
    justify-content: flex-end;
  }

  /* Categories carousel nav */
  .categories--carousel .categories__header {
    position: relative;
  }
  .categories__nav {
    display: flex;
    gap: 8px;
    margin-left: auto;
  }
  .categories__nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid #D5D7DA;
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 1);
    cursor: pointer;
  }
  .categories__nav-button:hover {
    background: #F4EBFF;
  }

  .categories__section {
    display: flex;
    flex-direction: column;
    padding: 24px;
    position: relative;
    border-radius: 30px;
    border: 1px solid #F0F0F0;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
    background: #FBF7FF;
  }

  /* 分类图标容器 - 左上角 */
  .category-icon {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 48px;
    height: 48px;
    z-index: 1;
  }

  .category-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
  }

  /* 根据索引显示对应的图片 */
  .categories__section[data-category-index="0"] .category-icon-img[data-icon-index="1"],
  .categories__section[data-category-index="5"] .category-icon-img[data-icon-index="1"],
  .categories__section[data-category-index="10"] .category-icon-img[data-icon-index="1"],
  .categories__section[data-category-index="15"] .category-icon-img[data-icon-index="1"] {
    display: block;
  }

  .categories__section[data-category-index="1"] .category-icon-img[data-icon-index="2"],
  .categories__section[data-category-index="6"] .category-icon-img[data-icon-index="2"],
  .categories__section[data-category-index="11"] .category-icon-img[data-icon-index="2"],
  .categories__section[data-category-index="16"] .category-icon-img[data-icon-index="2"] {
    display: block;
  }

  .categories__section[data-category-index="2"] .category-icon-img[data-icon-index="3"],
  .categories__section[data-category-index="7"] .category-icon-img[data-icon-index="3"],
  .categories__section[data-category-index="12"] .category-icon-img[data-icon-index="3"],
  .categories__section[data-category-index="17"] .category-icon-img[data-icon-index="3"] {
    display: block;
  }

  .categories__section[data-category-index="3"] .category-icon-img[data-icon-index="4"],
  .categories__section[data-category-index="8"] .category-icon-img[data-icon-index="4"],
  .categories__section[data-category-index="13"] .category-icon-img[data-icon-index="4"],
  .categories__section[data-category-index="18"] .category-icon-img[data-icon-index="4"] {
    display: block;
  }

  .categories__section[data-category-index="4"] .category-icon-img[data-icon-index="5"],
  .categories__section[data-category-index="9"] .category-icon-img[data-icon-index="5"],
  .categories__section[data-category-index="14"] .category-icon-img[data-icon-index="5"],
  .categories__section[data-category-index="19"] .category-icon-img[data-icon-index="5"] {
    display: block;
  }

  /* 不同索引的背景色样式 */
  .categories__section[data-category-index="0"],
  .categories__section[data-category-index="5"],
  .categories__section[data-category-index="10"],
  .categories__section[data-category-index="15"] {
    background: #FBF7FF;
  }

  .categories__section[data-category-index="1"],
  .categories__section[data-category-index="6"],
  .categories__section[data-category-index="11"],
  .categories__section[data-category-index="16"] {
    background: #F8FBFF;
  }

  .categories__section[data-category-index="2"],
  .categories__section[data-category-index="7"],
  .categories__section[data-category-index="12"],
  .categories__section[data-category-index="17"] {
    background: #FFF8F3;
  }

  .categories__section[data-category-index="3"],
  .categories__section[data-category-index="8"],
  .categories__section[data-category-index="13"],
  .categories__section[data-category-index="18"] {
    background: #F5FEFF;
  }

  .categories__section[data-category-index="4"],
  .categories__section[data-category-index="9"],
  .categories__section[data-category-index="14"],
  .categories__section[data-category-index="19"] {
    background: #FBF7FF;
  }

  /* default template used to hide items >=7; keep visible control to JS */
  .categories__section[data-hidden="true"] { display: none; }

  /* ============================================
    Latest Articles Section
    ============================================ */

  .latest-articles {
    padding: 80px 0;
    background-color: rgba(251, 251, 252, 1);
  }

  .latest-articles__title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 40px;
    color: #1C1917;
  }

  .latest-articles__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding-right: 32px;
  }

  .latest-articles__item {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #D5D7DA;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    color: inherit;
  }

  .latest-articles__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .latest-articles__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
  }

  .latest-articles__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
  }

  .latest-articles__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .latest-articles__title-link {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    color: #1C1917;
    text-decoration: none;
    flex: 1;
    margin: 0;
  }

  .latest-articles__item:hover .latest-articles__title-link {
    color: #6941C6;
  }

  .latest-articles__excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 20px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .latest-articles__footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #D5D7DA;
  }

  .latest-articles__time-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  .latest-articles__time-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .latest-articles__time {
    font-size: 12px;
    color: rgba(0, 0, 0, 1);
  }

  @media (max-width: 1023px) {
    .latest-articles__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 767px) {
    .latest-articles__title {
      font-size: 24px;
      margin-left: 16px;
    }

    .latest-articles__grid {
      grid-template-columns: 1fr;
      padding: 0 16px;
      gap: 16px;
    }
  }

  .categories__section h6 {
    max-width: 290px;
    margin-top: 60px; /* 为左上角图标留出空间 */
    padding-left: 0;
  }

  .categories__section > p {
    max-width: 290px;
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .categories__section ul {
    margin-top: 20px;
    padding-top: 20px;
    margin-bottom: 20px;
    border-top: 1px solid #D5D7DA;
  }

  .categories__section li {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 16px;
    color: rgba(0, 0, 0, 1);
  }

  .categories__section li a {
    font-weight: 500;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
  }

  .categories__section li svg {
    flex: 0 0 auto;
  }

  .categories__section li svg path {
    fill: #6941C6;
  }

  .categories__section li:nth-child(3) {
    margin-bottom: 0;
  }

  .categories__section li:nth-child(n+4) {
    display: none;
  }

  .categories__link {
    position: relative;
    display: flex;
    gap: 6px;
    align-items: center;
    width: fit-content;
    font-size: 14px;
    font-weight: 500;
    line-height: 150%;
    transition: all .3s ease;
    margin-top: auto;
    margin-left: auto;
    align-self: flex-end;
    color: #1C1917;
    text-decoration: none;
  }

  .categories__link:hover {
    color: #6941C6;
  }

  .categories__link svg path {
    stroke: #6941C6;
  }

  @media (max-width: 1023px) {
    .categories__sections, .categories__list {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 767px) {
    .categories__sections, .categories__list {
      grid-template-columns: repeat(1, 1fr);
      justify-content: center;
    }
    .categories__head {
      flex-direction: column;
      gap: 20px;
      text-align: center;
      align-items: flex-start;
    }
    .categories__section, .categories.categories-layout2 .categories__section {
      width: 100%;
    }
    .categories__section ul {
      margin-top: 20px;
    }
    .categories .container {
      gap: 60px;
    }
    .categories__head > div:nth-of-type(2), .videos__head > div {
      display: none;
    }
    .categories__header > svg, .categories__head > svg {
      left: auto;
      right: 0;
      top: -170px;
    }
  }

  /***** Promoted articles *****/
  .promoted-articles {
    padding-top: 100px;
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
  }

  .promoted-articles span {
    display: block;
    text-align: center;
    margin: 0 auto 30px;
    font-size: 14px;
    color: #6941C6;
    font-weight: 500;
    line-height: 150%;
  }

  .swiper-slide {
    width: auto !important;
    white-space: nowrap;
  }

  .promoted-articles__item {
    padding: 8px 20px;
    border-radius: 16px;
    margin-right: 10px;
    box-shadow: 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04), 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    border: 1px solid #D5D7DA;
  }

  @media (max-width: 1023px) {
    .promoted-articles {
      padding-top: 80px;
    }
  }

  @media (max-width: 767px) {
    .promoted-articles {
      padding-top: 60px;
    }
  }

  /* VIDEOS */

  .videos {
    padding-top: 100px;
    position: relative;
    text-align: center;
  }

  .videos__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .videos__head h3 {
    max-width: 550px;
    margin: 14px 0 20px;
  }

  .videos__head p {
    max-width: 370px;
  }

  .videos__head span {
    display: block;
    font-weight: 500;
    color: #6941C6;
  }

  .videos__list{
    margin-top: 60px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
  }

  .videos__item{
    width: calc(50% - 10px);
    position: relative;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04), 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    border: 1px solid #D5D7DA;
    transition: all .3s ease;
  }

  .videos__img {
    display: flex;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    margin: 4px 4px 0;
    z-index: 2;
    height: 314px;
    border-radius: 12px;
    transition: all .3s ease;
  }

  .videos__gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(180deg, rgba(251, 244, 242, 0.00) 0%, #FBF4F2 100%);
  }

  .videos__img img {
    object-fit: cover;
    width: 100%;
    transition: all .5s ease;
  }

  .videos__item svg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
  }

  .videos__item > div:last-of-type {
    padding: 20px;
    text-align: left;
  }

  .videos__item h6 {
    display: inline-block;
    cursor: pointer;
    margin-bottom: 15px;
    transition: all .3s ease;
  }

  .videos__item h6:hover {
    color: #6941C6;
  }

  .videos__item rect{
    fill: #fff;
  }

  .videos__img path{
    fill: #26282C;
  }

  .videos__img:hover{
    opacity: .8;
  }

  .videos__img:hover rect{
    fill: #F4EBFF;
  }

  .videos__img:hover path{
    fill: $secondary_button_text_color;
  }

  .video-modal{
    display: none;
    position: fixed;
    z-index: 4;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
  }

  .close {
    position: absolute;
    font-size: 32px;
    line-height: 1;
    top: 30px;
    right: 30px;
    cursor: pointer;
    color: #fff;
  }

  @media (max-width: 1023px){
    .videos {
      padding-top: 80px;
    }
    .videos__list {
      margin-top: 40px;
    }
    .videos__item{
      width: calc(50% - 15px);
    }
  }

  @media (max-width: 767px){
    .videos {
      padding-top: 60px;
    }
    .videos__head {
      flex-direction: column;
      gap: 20px;
      text-align: center;
    }
    .videos__item{
      width: 100%;
    }
  }

  /* INSIGHTS */


  .insights__wrapper {
    position: relative;
    border-radius: 16px;
    height: 640px;
    box-shadow: 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04), 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    background: url(/hc/theming_assets/01K7GCPDQ2YZ1W21ZHMGES9XP6);
    background-position: -47.209px -197.376px;
    background-size: 128.916% 160.994%;
    background-repeat: no-repeat;
    border: 1px solid #D5D7DA;
  }

  /* .insights__wrapper {
    position: relative;
    border-radius: 16px;
    height: 640px;
    box-shadow: 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04), 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    border: 1px solid #D5D7DA;
  }

  .insights__wrapper img {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: auto;
  } */

  .insights__content {
    display: flex;
    max-width: 470px;
    height: calc(100% - 20px);
    margin: 10px;
    padding: 30px;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(251, 244, 242, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%);
    backdrop-filter: blur(22px);
  }

  .insights__content span {
    font-weight: 500;
    color: #FFFCFB;
  }

  .insights__content h3 {
    margin-top: 14px;
    color: #FFFCFB;
  }

  .insights__content p {
    margin-bottom: 40px;
    color: #FFFCFB;
  }

  @media (max-width: 1023px) {
    .insights__content {
      max-width: none;
    }
    .insights__wrapper {
      height: auto;
    }
  }

  /* FAQ */

  .faq .container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 80px;
    justify-content: space-between;
  }

  .faq .container .h2 {
    max-width: 750px;
  }

  .faq .container > div:first-of-type {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(50% - 10px);
  }

  .faq__video {
    max-width: 400px;
    cursor: pointer;
  }

  .faq__video:hover h6 {
    color: #6941C6;
  }

  .faq__video:hover > div:last-of-type svg {
    border: 1px solid #6941C6;
  }

  .faq__video img {
    max-width: 400px;
    border-radius: 16px;
    border: 1px solid #D5D7DA;
    box-shadow: 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04), 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
  }

  .faq__video > div:last-of-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
  }

  .faq__video > div:last-of-type svg {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex: 0 0 auto;
    border: 1px solid #D5D7DA;
  }

  .faq__video > div:last-of-type svg path {
    fill: rgba(0, 0, 0, 1);
  }

  .faq__items {
    width: calc(100% - 10px);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 28px;
  }

  .faq__item {
    width: 100%;
    cursor: pointer;
    padding-bottom: 30px;
    align-self: flex-start;
    border-bottom: 1px solid #D5D7DA;
    background-color: #FAFAFA;
    padding: 20px;
    border-radius: 20px;
  }

  .faq__item div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
  }

  .faq__item div svg path {
    fill: rgba(0, 0, 0, 1);
  }

  .faq__item.open div {
    margin-bottom: 12px;
  }

  .faq__item.open div svg {
    transform: rotate(45deg);
  }

  .faq__item.open div svg path {
    fill: #6941C6;
  }

  .faq__item p {
    font-weight: 400;
    padding: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.2s linear;
  }

  .faq__item.open p {
    visibility: visible;
    height: auto;
    overflow: auto;
    opacity: 1;
  }


  @media (max-width: 1023px) {
    .faq .container {
      flex-direction: column;
      gap: 40px;
    }
    .faq .container > div:first-of-type {
      width: 100%;
      align-items: center;
      gap: 20px;
    }
    .faq__items {
      width: 100%;
    }
  }
  @media (max-width: 767px) {
    .faq__items {
      gap: 20px;
    }
    .faq__video img {
      width: 100%;
    }
  }


  /* Find Solution */
  .find-solution {
    position: relative;
    padding: 100px 0 260px;
    overflow: hidden;
    background-color: #6941C6;
  }

  .find-solution > svg {
    position: absolute;
    z-index: 1;
    bottom: 160px;
    left: 50%;
    transform: translateX(-50%);
  }

  .find-solution > svg radialGradient:first-of-type stop {
    stop-color: $background_elements_color2;
  }

  .find-solution > svg radialGradient:nth-of-type(2) stop {
    stop-color: $background_elements_color1;
  }

  .find-solution > svg radialGradient:last-of-type stop {
    stop-color: $background_elements_color4;
  }

  .find-solution .container {
    position: relative;
    z-index: 2;
  }

  .find-solution .h2 {
    max-width: 750px;
    margin: 0 auto 20px;
    text-align: center;
  }

  .find-solution .container > p {
    text-align: center;
    max-width: 645px;
    margin: 0 auto;
  }

  .find-solution__items {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 60px;
  }

  .find-solution__item {
    width: calc(33.3% - 20px);
    padding: 30px;
    border-radius: 10px;
    text-align: left;
    background-color: #E5E5FF;
  }

  .find-solution__item img {
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
  }

  .find-solution__item h5 {
    margin-bottom: 12px;
  }

  @media (max-width: 1279px) {
    .find-solution > svg {
      bottom: 0;
    }
  }

  @media (max-width: 1023px) {
    .find-solution {
      padding: 80px 0 240px;
    }
    .find-solution__items {
      margin-top: 40px;
    }
    .find-solution__item {
      width: calc(50% - 15px);
    }
  }
  @media (max-width: 767px) {
    .find-solution {
      padding: 60px 0 220px;
    }
    .find-solution__items {
      gap: 20px;
    }
    .find-solution__item {
      width: 100%;
      max-width: 470px;
    }
  }

  /***** Submit a request page *****/
  .submit-request-page, .new-post-page {
    padding: 80px 0 100px;
    position: relative;
    overflow: hidden;
  }

  .submit-request-page > svg, .new-post-page > svg {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
  }

  .submit-request-page .container, .new-post-page .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
  }
  .submit-request-page h1, .new-post-page h1 {
    text-align: center;
  }
  .submit-request-page .form, .new-post-page .form {
    max-width: 592px;
    width: 100%;
  }
  .submit-request-page form, .new-post-page form {
    color: #1C1917;
  }

  .submit-request-page form button, .new-post-page form button {
    font-size: 14px;
    line-height: 150%;
    padding: 8px 18px;
    font-weight: 500;
    border-radius: 12px;
    box-shadow: 0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset, 0px -2px 0px 0px rgba(10, 13, 18, 0.05) inset, 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    background-color: #1D1B19;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
  }

  .submit-request-page form button:hover, .new-post-page form button:hover {
    background-color: #F4EBFF;
    border: 1px solid #D5D7DA;
    color: #1C1917;
  }

  .submit-request-page form div:has(button[type="submit"]) {
    display: flex;
    justify-content: center;
  }


  .searchbox-suggestions a {
    color: #1C1917;
  }
  .searchbox-suggestions a:hover {
    color: #6941C6;
  }

  .ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-toolbar {
    border-radius: 8px 8px 0 0!important;
  }
  .ck-blurred.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline {
    border-radius: 0 0 8px 8px;
  }

  @media(max-width: 1023px) {
    .submit-request-page, .new-post-page {
      padding-bottom: 80px;
    }
  }

  @media(max-width: 767px) {
    .submit-request-page, .new-post-page {
      padding-top: 60px;
      padding-bottom: 60px;
    }
    .submit-request-page .container, .new-post-page .container {
      gap: 30px;
    }
  }

  /***** Error page *****/
  .error-page {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 100px;
    flex-grow: 1;
  }
  .error-page > svg {
    position: absolute;
    right: 0;
    bottom: -200px;
    z-index: -1;
  }
  .error-page .container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .error-page .hero-inner {
    max-width: 490px;
    width: 100%;
  }
  .error-page h1 {
    font-size: 120px;
    font-weight: 600;
    margin-bottom: 25px;
    color: #1C1917;
  }
  .error-page h3 {
    max-width: 480px;
    color: #1C1917;
  }
  .error-page .container>a {
    font-size: 22px;
    font-weight: 400;
    margin: 30px 0 50px;
    color: #6941C6;
  }
  .error-page .container>a:hover {
    color: #1C1917;
  }

  @media (max-width: 1023px) {
    .error-page {
      padding-bottom: 80px;
    }
  }
  @media (max-width: 767px) {
    .error-page {
      padding-bottom: 60px;
    }
    .error-page h1 {
      font-size: 90px;
    }
  }

  /***** Recent activity *****/
  .recent-activity h2 {
    text-align: left;
  }

  .homepage-activity .recent-activity h2 {
    font-size: 36px;
  }
  .recent-activity-list {
    display: flex;
    padding-top: 40px;
    margin-top: 40px;
    gap: 30px;
    border-top: 1px solid #D5D7DA;
    flex-wrap: wrap;
  }
  .recent-activity-item {
    text-align: left;
    width: calc(33.3% - 20px);
    color: #1C1917;
  }

  .homepage-activity .recent-activity-item:nth-child(n+4) {
    display: none;
  }

  .recent-activity-item h3 {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .recent-activity-item-parent {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    line-height: 150%;
    transition: all .3s ease;
    color: #6941C6;
  }

  .recent-activity-item-parent:hover {
    color: #1C1917;
  }

  .recent-activity-item-link {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #1C1917;
  }

  .homepage-activity .recent-activity-item-link {
    font-size: 16px;
    font-weight: 400;
  }

  .recent-activity-item-link:hover {
    color: #6941C6;
  }

  .recent-activity-item-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }
  .recent-activity-item-time, .recent-activity-item-comment {
    display: inline-block;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(0, 0, 0, 1);
  }
  .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: 30px;
  }

  .homepage-activity .recent-activity-controls {
    display: none!important;
  }

  .recent-activity-controls a {
    color: #1C1917;
    text-decoration: underline;
  }
  .recent-activity-controls a:visited {
    color: #1C1917;
  }
  .recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
    color: #6941C6;
  }
  .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;
    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;
  }
  @media (min-width: 1920px) {
    .homepage-activity .recent-activity h2 {
      font-size: 56px;
    }
  }

  @media (max-width: 1023px) {
    .homepage-activity .recent-activity h2 {
      font-size: 38px;
    }
    .recent-activity-list {
      margin-top: 40px;
    }
    .recent-activity-item {
      width: calc(50% - 15px);
    }
  }
  @media (max-width: 767px) {
    .homepage-activity .recent-activity h2 {
      font-size: 36px;
    }
    .recent-activity-list {
      gap: 20px;
    }
    .recent-activity-item {
      max-width: 470px;
      width: 100%;
    }
  }

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

  .category-page .hero .container {
    display: flex;
    position: relative;
    z-index: 5;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .category-page__hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 1162px;
  }

  .category-page .hero h1 {
    margin: 0 auto 20px;
    text-align: center;
  }

  .category-page .hero p {
    margin: 0 auto 40px;
    text-align: center;
    max-width: 700px;
  }

  .category-page .hero .hero-inner {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
  }

  .category-page:has(.popular-keywords) .hero h1 {
    text-align: center;
    margin: 0 auto 20px;
  }

  .category-page:has(.popular-keywords) .hero p {
    text-align: center;
    margin: 0 auto 40px;
  }

  .category-page .hero > svg {
    bottom: -50px;
    top: auto;
  }

  .hero > svg ellipse {
    fill: #6941C6;
  }

  .hero > svg > g > path {
    fill: #E5E5FF;
  }

  /* .category-page .hero > svg:first-of-type radialGradient stop {
    stop-color: $background_elements_color1;
  } */

  .category-page__content {
    background-color: #fbfbfc;
    padding: 80px 120px;
  }

  .category-page__content>h2 {
    text-align: center;
  }

  .category-page__content>p {
    max-width: 550px;
    margin: 30px auto 0;
    text-align: center;
    font-size: 18px;
  }

  .category-page__sections {
    display: flex;
    flex-direction: column;
    gap: 60px;
    justify-content: center;
  }

  .category-page__section-container {
    max-width: 1162px;
    width: 100%;
    margin: 0 auto;
  }

  .category-page__section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 48px;
    width: 100%;
  }

  .category-page__section-heading h3 {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.4;
    color: #000;
    margin: 0;
  }

  .category-page__see-all {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: #000;
    text-decoration: none;
    transition: all 0.3s ease;
  }

  .category-page__see-all svg {
    width: 24px;
    height: 24px;
    stroke: #1C1F23;
  }

  .category-page__see-all:hover {
    color: #7700EA;
  }

  .category-page__see-all:hover svg {
    stroke: #7700EA;
  }

  .category-page__articles {
    display: grid;
    gap: 36px;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }

  .category-page__article-wrapper {
    position: relative;
    width: 100%;
    height: 220px;
  }

  .category-page__article {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .category-page__article-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
  }

  .category-page__article-bg-svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .category-page__article-content {
    position: relative;
    z-index: 1;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .category-page__article-header {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .category-page__article-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .category-page__article-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
    margin: 0;
    flex: 1;
  }

  .category-page__article-title a {
    color: #000;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .category-page__article-title a:hover {
    color: #7700EA;
  }

  .category-page__article-snippet {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: rgba(28, 31, 35, 0.8);
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 132px;
    flex: 1;
  }

  .category-page__article-arrow {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 24px;
    height: 24px;
    z-index: 2;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .category-page__article-arrow svg {
    width: 100%;
    height: 100%;
    margin-top: -12px;
    transform: translateX(-6px);
  }

  .category-page__article-arrow:hover {
    transform: scale(1.1);
  }

  .category-page__article-wrapper:nth-child(n+7) {
    display: none;
  }

  .section-page__article > div:last-of-type, .featured-posts-btn {
    position: relative;
    display: flex;
    gap: 6px;
    align-items: flex-start;
    width: fit-content;
    text-overflow: ellipsis;
    color: rgba(28, 31, 35, 0.80);
    font-size: 16px;
    font-weight: 500;
    line-height: 140%;
    transition: all .3s ease;
  }

  .section-page__article > div:last-of-type > div {
    line-height: 0;
  }

  .section-page__article > div:last-of-type a, .featured-posts-btn a {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }

  .section-page__article > div:last-of-type svg path, .featured-posts-btn svg path {
    stroke: #6941C6;
  }

  .section-page__article > div:last-of-type:hover svg, .featured-posts-btn:hover svg, .categories__link:hover svg {
    transform: rotate(45deg);
  }


  @media(max-width: 1023px) {
    .category-page .hero .container {
      flex-direction: column;
      align-items: center;
    }
    .category-page .hero .container > div {
      max-width: 580px;
      width: 100%;
      padding: 0;
    }
    .category-page:has(.popular-keywords) .hero h1 {
      text-align: center;
      margin: 0px auto 20px;
    }
    .category-page:has(.popular-keywords) .hero p {
      text-align: center;
      margin: 0 auto 40px;
    }
    .category-page .popular-keywords__items {
      justify-content: center;
    }
    .category-page__content {
      padding: 80px 120px 133px;
    }
    .category-page__sections {
      gap: 113px;
    }
    .category-page__section-container {
      max-width: 100%;
      padding: 0 20px;
    }
    .category-page__articles {
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
    }
    .category-page__article-wrapper {
      width: 100%;
    }
  }

  @media(max-width: 767px) {
    .category-page__content {
      padding: 60px 15px;
      text-align: center;
    }
    .category-page__section-heading {
      flex-direction: column;
      gap: 20px;
      align-items: center;
      text-align: center;
      margin-bottom: 30px;
    }
    .category-page__sections {
      text-align: left;
      gap: 60px;
    }
    .category-page__section-container {
      max-width: 100%;
      padding: 0 20px;
    }
    .category-page__articles {
      grid-template-columns: repeat(1, 1fr);
      gap: 24px;
    }
    .category-page .hero p {
      margin-bottom: 40px;
    }
    .category-page__section-heading .category-page__see-all {
      display: none;
    }
    .category-page__article-wrapper {
      width: 100%;
    }
    .category-page__article-snippet {
      height: auto;
      -webkit-line-clamp: 4;
    }
  }


  /***** Section pages *****/

  .section-page > .container {
    position: relative;
    display: flex;
    padding-top: 100px;
    max-width: 1920px;
    margin: 0 auto;
    padding-left: 120px;
    padding-right: 120px;
    gap: 30px;
  }


  .section-page > section:first-of-type .hero-inner {
    margin-top: 40px;
  }

  .section-page > section:first-of-type p {
    max-width: 700px;
  }

  .section-page__article-arrow {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 24px;
    height: 24px;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
  }

  .section-page__article-arrow svg {
    width: 100%;
    height: 100%;
    transform: translateX(-7px);
    margin-top: -12px;
  }

  .section-page__article-arrow:hover {
    transform: scale(1.1);
  }
  .section-subscribe {
    margin-bottom: 16px;
    padding: 4px;
    border-radius: 40px;
    background-color: rgba(255, 255, 255, 1);
  }

  .nav {
    width: 27%;
    position: sticky;
    top: 94px;
    align-self: start;
    padding: 24px;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid #D5D7DA;
    box-shadow: 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04), 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
  }

  .article-page__nav {
    display: flex;
    flex-direction: column-reverse;
    padding: 24px;
    border: none;
    background-color: transparent;
  }

  .nav .search-container {
    margin-bottom: 20px;
    padding-left: 0;
  }

  .article-page__nav .search-container {
    margin-bottom: 0;
    margin-top: 20px;
  }

  .nav .search-icon {
    left: 20px;
  }

  .nav .search {
    margin: 0;
  }

  .nav input[type=search]{
    padding: 10px 20px 10px 50px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 1);
  }

  .nav input[type=search]::placeholder {
    color: rgba(0, 0, 0, 1);
    font-weight: 400;
    font-size: 15px;
  }

  /* 禁用 .nav 中搜索框的原生清除按钮 */
  .nav input[type=search]::-webkit-search-cancel-button,
  .nav input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
  }

  .nav input[type=search]::-ms-clear {
    display: none;
  }

  .search input[type=search]::placeholder {
    color: rgba(255, 255, 255, 0.6);
  }

  .nav__articles {
    padding-bottom: 20px;
    border-bottom: 1px solid #D5D7DA;
  }

  .nav__category {
    margin-bottom: 10px;
  }

  .nav__category:last-child {
    margin-bottom: 0;
  }

  .nav__heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    cursor: pointer;
  }

  .nav__heading svg {
    flex: none;
  }

  .nav__heading path {
    stroke: rgba(0, 0, 0, 1);
  }

  .nav__sections {
    display: none;
    margin-top: 8px;
    flex-direction: column;
    align-items: start;
    padding-left: 5px;
  }

  .nav__sections.open {
    display: flex;
  }

  .nav__heading.active svg {
    rotate: 180deg;
  }

  .nav__heading.active svg path {
    stroke: #6941C6;
  }

  .nav__sections a {
    display: inline;
    margin-bottom: 6px;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
  }

  .nav__sections a:hover {
    color: #6941C6;
  }

  .nav__sections a.active {
    color: #6941C6;
  }

  /* ============================================
    Article Table of Contents
    ============================================ */

  .article-toc {
    padding-top: 10px;
  }

  .article-toc__header {
    margin-bottom: 13px;
  }

  .article-toc__title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(28, 31, 35, 0.6);
    margin: 0;
    padding: 10px 0;
  }

  .article-toc__content {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
  }

  /* 进度条已删除 */
  .article-toc__progress-bar {
    display: none !important;
  }

  .article-toc__group {
    margin-bottom: 0;
    position: relative;
    z-index: 2;
  }

  .article-toc__group:last-child {
    margin-bottom: 0;
  }

  .article-toc__group-items {
    display: flex;
    flex-direction: column;
    padding-bottom: 12px;
  }

  .article-toc__item {
    display: flex;
    gap: 13px;
    align-items: center;
    position: relative;
    z-index: 2;
  }

  .article-toc__item-line {
    width: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    min-height: 40px;
  }

  .article-toc__item-line::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.12);
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    flex-shrink: 0;
  }

  /* 所有 H2 标题不显示圆点 */
  .article-toc__item--h2 .article-toc__item-line::before {
    display: none;
  }

  /* H3 标题有圆点（默认灰色） */
  .article-toc__item--h3 .article-toc__item-line::before {
    background-color: rgba(0, 0, 0, 0.12);
    display: block;
    transition: background-color 0.3s ease;
  }

  /* H3 标题的圆点悬浮时变为紫色 */
  .article-toc__item--h3:hover .article-toc__item-line::before {
    background-color: #7700EA;
  }

  /* 删除所有连接线 */
  .article-toc__item-line::after {
    display: none !important;
  }

  .article-toc__link {
    flex: 1;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: #1C1F23;
    text-decoration: none;
    padding: 10px 0;
    transition: color 0.3s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* H2 标题样式 */
  .article-toc__link--h2 {
    font-family: 'PingFang SC', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 140%;
    color: #1C1F23;
  }

  .article-toc__link--h2:hover {
    color: #7700EA;
  }

  .article-toc__link--h3 {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #1C1F23;
  }

  .article-toc__link--h3:hover {
    color: #7700EA;
  }

  .article-toc__link:hover {
    color: #7700EA;
  }

  .article-toc__link--active {
    color: #7700EA;
    font-weight: 500;
  }

  .article-toc__link--active .article-toc__item-line::before {
    background-color: #7700EA;
  }

  @media (max-width: 1023px) {
    .article-toc {
      margin-top: 30px;
    }
  }

  @media (max-width: 767px) {
    .article-toc {
      display: none;
    }
  }

  .nav__sections a.active:hover {
    text-shadow: none;
  }

  .nav__sections a:last-child {
    margin-bottom: 0;
  }

  .section-page .hero .container {
    display: flex;
    max-width:940px;
    flex-direction: column;
    text-align: center;
    position: relative;
    z-index: 5;
    align-items: center;
    justify-content: center;
  }

  .section-page__content {
    width: 73%;
    padding-left: 0;
    max-width: 1162px;
    flex: 1;
  }

  .section-page__content>p {
    max-width: 700px;
    margin-top: 20px;
  }

  .section-subscribe button:hover {
    background: $hover_color;
  }

  .section-page__heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
  }

  .section-page__heading h1 {
    max-width: 540px;
  }

  .section-page__articles {
    display: flex;
    flex-wrap: wrap;
    gap: 36px;
  }

  .section-page__articles li {
    width: 363px;
    height: 220px;
    position: relative;
    overflow: visible;
    list-style: none;
  }

  .section-page__article-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .section-page__article {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px;
    background-color: rgba(255, 255, 255, 1);
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible;
  }

  .section-page__article-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
  }

  .section-page__article-bg-svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .section-page__article-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
    margin: 0;
    z-index: 1;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }

  .section-page__article-title svg {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
  }

  .section-page__article-title a {
    color: #000;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
    min-width: 0;
  }

  .section-page__article-title a:hover {
    color: #7700EA;
  }

  .section-page__article-snippet {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: rgba(28, 31, 35, 0.8);
    z-index: 1;
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 132px;
    flex: 1;
  }
  @media (max-width: 1023px) {
    .section-page > div:first-of-type {
      padding-top: 80px;
    }
    .section-page > .container {
      padding-left: 30px;
      padding-right: 30px;
    }
    .section-page__content {
      width: 60%;
      padding-left: 0;
      max-width: none;
    }
    .nav {
      width: 40%;
    }
    .section-page__articles li {
      width: calc(50% - 18px);
    }
    .section-page__article-wrapper {
      width: 100%;
      height: 100%;
    }
  }

  @media (max-width: 767px) {
    .section-page > div:first-of-type {
      padding-top: 60px;
    }
    .section-page>.container {
      flex-direction: column-reverse;
      gap: 50px;
      padding-left: 20px;
      padding-right: 20px;
    }
    .section-page > div:first-of-type p, .section-page__heading h1 {
      max-width: none;
    }
    .section-page__heading {
      align-items: start;
      gap: 20px;
      flex-direction: column;
    }
    .nav {
      width: 100%;
      position: static;
      max-width: none;
      box-shadow: 0px 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
    }
    .article-page__nav {
      box-shadow: none;
    }
    .nav .search-container {
      margin-bottom: 30px;
    }
    .nav form {
      max-width: none;
    }
    .section-page__content {
      width: 100%;
      padding-left: 0;
      border-left: none;
      max-width: none;
    }
    .section-page__articles {
      gap: 24px;
    }
    .section-page__articles li {
      width: 100%;
    }
    .section-page__article-wrapper {
      width: 100%;
      height: 100%;
    }
    .section-page__article {
      padding: 25px 20px;
    }
    .section-page__article-snippet {
      height: auto;
      -webkit-line-clamp: 4;
    }
    .article-body blockquote, .post-body blockquote {
      padding: 20px;
    }
  }

  /***** Article page *****/
  .article-page {
    padding-top: 80px;
  }

  .article-page>.container {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
  }

  .nav__articles ul {
    margin-top: 8px;
    flex-direction: column;
    align-items: start;
  }

  .nav__articles li {
    margin-bottom: 6px;
  }

  .nav__articles li a {
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
  }

  .nav__articles li:last-child {
    margin-bottom: 0;
  }

  .nav__articles .current-article, .nav__articles li a:hover {
    color: #6941C6;
  }

  .nav__articles .current-article:hover {
    text-shadow: none;
  }

  .article-container {
    width: 73%;
    display: flex;
    flex-direction: column;
    padding-right: 70px;
  }

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

  .article-header {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 40px;
  }

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

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

  .article-author {
    display: flex;
  }

  .article-title {
    text-overflow: ellipsis;
    max-width: 100%;
    margin-bottom: 50px;
  }

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

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

  .article [role=button] {
    flex-shrink: 0;
    width: 100%;
  }

  @media (min-width: 768px) {
    .article [role=button] {
      width: auto;
    }
  }

  .article-info {
    max-width: 100%;
  }

  .article-meta {
    margin-top: 3px;
  }

  .article-meta a, .post-meta a {
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: 0.18px;
      color: #1C1917;
  }

  .article-meta a:hover, .post-meta a:hover {
    color: #6941C6;
  }

  .article-body {
    display: flow-root;
  }

  .article-body, .post-body, .comment-body {
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
  }
  .article-body div, .post-body div, .comment-body div {
    margin-bottom: 20px;
    line-height: 240%;
  }

  .article-body p, .post-body p, .comment-body p {
    font-size: 16px;
    margin-bottom: 15px
  }

  .article-body h1, .post-body h1, .comment-body h1 {
    margin: 25px 0 10px;
  }

  .article-body h2, .post-body h2, .comment-body h2 {
    margin: 25px 0 10px;
  }

  .article-body h3, .post-body h3, .comment-body h3 {
    margin: 25px 0 10px;
  }

  .article-body h4, .post-body h4, .comment-body h4 {
    margin: 25px 0 10px;
  }

  .article-body table, .post-body table, .comment-body table {
    margin-bottom: 10px;
  }

  .article-body a, .post-body a, .comment-body a {
    color: #6941C6;
  }

  .article-body a:hover, .post-body a:hover, .comment-body a:hover {
    color: #1C1917;
  }
  .article-body li, .post-body li, .comment-body li {
    font-size: 16px;
    margin: 5px 0;
    line-height: 1.4;
    color: rgba(0, 0, 0, 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: darken($background_color, 5%);
  }
  .article-body ul,
  .article-body ol {
    padding-left: 20px;
    list-style-position: outside;
    margin: 20px 0 20px 20px;
  }

  .article-body ul li::marker, .post-body ul li::marker {
    color: $body_tertiary;
  }

  [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: darken($background_color, 3%);
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 0 5px;
    margin: 0 2px;
  }
  .article-body pre {
    background: darken($background_color, 3%);
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 10px 15px;
    overflow: auto;
    white-space: pre;
  }
  .article-body blockquote, .post-body blockquote {
    padding-inline: var(--zd-spacing);
    margin-block: var(--zd-spacing-sm);
    margin-left: 0;
    margin-right: 0;
    border-left: solid 3px var(--zd-color-grey-300);
  }
  .article-body blockquote h2, .article-body blockquote h3, .article-body blockquote h4, .post-body blockquote h2, .post-body blockquote h3, .post-body blockquote h4 {
    color: #1C1917;
  }
  .article-body > p:last-child {
    margin-bottom: 0;
  }
  .article-content {
    line-height: 1.6;
    margin: 20px 0 40px;
    word-wrap: break-word;
  }
  .article-footer {
    align-items: center;
    display: flex;
    justify-content: end;
    padding-top: 30px;
    border-top: 1px solid #D5D7DA;
  }
  .article-comment-count {
    color: #544b45;
  }
  .article-comment-count:hover {
    text-decoration: none;
  }
  .article-comment-count-icon {
    vertical-align: middle;
    color: #6941C6;
    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 {
    display: flex;
    flex-direction: row;
    padding: 40px 0;
  }
  @media (max-width: 1023px) {
    .article-relatives {
      flex-direction: column;
    }
  }
  .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-relatives svg path {
    fill: #1D1B19;
  }
  .article-votes-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 30px 0;
  }
  .article-votes {
    border-radius: 12px;
    padding: 50px;
    text-align: center;
    margin-top: 40px;
    background: #E5E5FF;
  }

  .article-votes p {
    font-size: 16px;
  }

  .article-votes a {
    font-weight: 600;
    font-size: 16px;
    color: #6941C6;
  }

  .article-votes a:hover {
    color: #1C1917;
  }

  .article-vote {
    padding: 8px 10px;
    line-height: 1;
    cursor: pointer;
    border: none;
    border-radius: 12px;
    box-shadow: 0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset, 0px -2px 0px 0px rgba(10, 13, 18, 0.05) inset, 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    background-color: #1D1B19;
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  .article-vote path {
    fill: #fff;
  }
  .article-vote:hover {
    background-color: #F4EBFF;
    border: 1px solid #D5D7DA;
  }
  .article-vote:hover path {
    fill: #1C1917;
  }
  .article-votes-count {
    margin-bottom: 12px;
  }
  .article-votes-request a {
    color: #6941C6;
  }
  .article-votes-request a:hover {
    color: #1C1917;
  }
  .article-more-questions {
    margin: 10px 0 20px;
    text-align: center;
  }
  .article-more-questions a {
    color: #1C1917;
    text-decoration: underline;
  }
  .article-more-questions a:visited {
    color: #1C1917;
  }
  .article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
    color: #6941C6;
  }
  .article-return-to-top {
    border-top: 1px solid #87929D;
  }
  @media (min-width: 1024px) {
    .article-return-to-top {
      display: none;
    }
  }
  .article-return-to-top a {
    color: #1C1917;
    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;
  }

  .multibrand-filter-list {
    margin-top: 30px;
  }

  .sidenav-title {
    padding: 8px 18px;
    background-color: #E5E5FF;
    border-radius: 12px;
    color: #1C1917;
  }
  .sidenav-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    margin-left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sidenav-item span {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
  }

  .recent-articles li,
  .related-articles li {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .recent-articles li a,
  .related-articles li a {
    width: calc(100% - 15px);
    line-height: 140%;
    color: rgba(0, 0, 0, 1);
  }
  .recent-articles li a:hover,
  .related-articles li a:hover {
    color: #6941C6;
  }

  @media (max-width: 1023px) {
    .article-container {
      width: 60%;
      padding-right: 30px;
    }
  }

  @media (max-width: 767px) {
    .article-page {
      padding-top: 60px;
    }
    .article-page>.container {
      flex-direction: column-reverse;
      gap: 20px;
    }
    .article-container {
      width: 100%;
      padding-right: 0;
      border-right: none;
    }
    .article-header {
      align-items: start;
    }
    .article-author {
      margin-bottom: 20px;
    }
    .article-title {
      margin-bottom: 20px;
    }
    .article-relatives {
      gap: 0;
    }
    .article-relatives>*{
      padding-bottom: 0;
    }
    .article-votes {
      padding: 20px;
    }
  }

  /***** 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: #1C1917;
    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 {
    font-size: 16px;
    font-weight: 400;
    color: #1C1917;
  }
  .upload-dropzone span a {
    font-size: 16px;
    font-weight: 400;
    color: #6941C6;
  }
  .upload-dropzone:hover span a {
    color: #1C1917;
  }

  /***** Social share links *****/
  .share {
    display: flex;
    gap: 20px;
    padding: 0;
    white-space: nowrap;
  }

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

  .share li {
    height: 29px;
    width: 29px;
  }
  .share path {
    fill: #1C1917;
  }
  .share a:hover path {
    fill: #6941C6;
  }

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

  /***** Comments *****/
  /* Styles comments inside articles, posts and requests */
  .comment {
    padding: 20px;
    border-radius: 16px;
    margin-bottom: 30px;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid #D5D7DA;
    box-shadow: 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04), 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
  }
  .comment:last-of-type {
    margin-bottom: 0;
  }
  .recent-articles-title,
  .related-articles-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 120%; /* 28.8px */
    letter-spacing: -0.24px;
    margin: 5px 0 30px;
  }
  .comment-list {
    padding: 30px 0;
  }
  .comment-overview {
    padding: 0;
  }
  .comment-overview .dropdown {
    display: none;
  }
  .comment-overview p {
    margin-top: 0;
  }
  .comment-callout {
    display: inline-block;
    margin-top: 30px;
  }
  .comment-callout a {
    font-size: 16px;
    color: #6941C6;
    text-decoration: underline;
  }
  .comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
    color: #1C1917;
  }
  .comment-sorter {
    display: inline-block;
    float: right;
  }
  .comment-sorter .dropdown-toggle {
    color: #544b45;
    font-size: 13px;
  }
  [dir=rtl] .comment-sorter {
    float: left;
  }
  .comment-wrapper {
    display: flex;
    position: relative;
  }
  .comment-wrapper.comment-official {
    border: 1px solid #6941C6;
    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;
    gap: 30px;
  }

  .comment-avatar {
    margin-right: 10px;
  }
  .comment-avatar img {
    width: 64px;
    height: 64px;
  }
  [dir=rtl] .comment-avatar {
    margin-left: 10px;
    margin-right: 0;
  }
  .comment-meta a {
    color: #1C1917;
  }
  .comment-meta a:hover {
    color: #6941C6;
  }
  .comment-meta h6 {
    font-size: 18px;
    transition: all .3s ease;
    color: #1C1917;
  }
  .comment-meta a:hover h6 {
    color: #6941C6;
  }
  .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: block;
    text-align: right;
    margin-top: 20px;
  }

  @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;
    margin-bottom: 15px;
  }
  .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: #6941C6;
  }
  .comment-body {
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    word-break: break-word;
    word-wrap: break-word;
    display: flow-root;
    font-family: 'Century Gothic', sans-serif;
    overflow-x: auto;
  }
  .comment-body p {
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
  }
  .comment-body a {
    color: #1C1917;
    text-decoration: underline;
  }
  .comment-body a:visited {
    color: #1C1917;
  }
  .comment-body a:hover, .comment-body a:active, .comment-body a:focus {
    color: #6941C6;
  }
  .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: darken($background_color, 5%);
  }
  .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: darken($background_color, 3%);
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 0 5px;
    margin: 0 2px;
  }
  .comment-body pre {
    background: darken($background_color, 3%);
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 10px 15px;
    overflow: auto;
    white-space: pre;
  }
  .comment-body blockquote {
    border-left: 1px solid #ddd;
    color: #544b45;
    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 path {
    stroke: #1C1917;
  }
  .vote button:hover path {
    stroke: #6941C6;
  }

  .comment-actions path, .actions button path {
    stroke: #1C1917;
  }
  .comment-actions button:hover path, .actions button:hover path {
    stroke: #6941C6;
  }
  .comment-actions circle, .actions button circle {
    stroke: #1C1917;
  }
  .comment-actions button:hover circle, .actions button:hover circle {
    stroke: #6941C6;
  }

  .vote-sum {
    color: #544b45;
    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: #6941C6;
  }

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

  .vote-voted {
    color: #6941C6;
  }

  .vote-voted:hover {
    color: #3f257c;
  }

  /***** 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;
    color: #1C1917;
  }

  /***** Community *****/

  .community-footer {
    padding-top: 50px;
    text-align: center;
  }
  .community-footer-title {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 400;
  }
  .community-activity {
    width: 100%;
  }
  .community-featured-posts .container {
    position: relative;
    z-index: 1;
  }
  .community-header {
    margin-bottom: 30px;
    position: relative;
    z-index: 3;
  }
  .community-header .title {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 500;
    transition: all .3s ease;
  }

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

  .featured-posts {
    display: grid;
    flex-wrap: wrap;
    margin-top: 50px;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
  }
  .featured-posts-item {
    padding: 24px;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid #D5D7DA;
    color: #1C1917;
    box-shadow: 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04), 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
  }
  .featured-posts-item a {
    display: block;
    width: fit-content;
  }
  .featured-posts-btn {
    cursor: pointer;
    text-transform: capitalize;
  }
  .featured-posts-item-body {
    max-height: 67px;
    overflow: hidden;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    margin: 8px 0 20px;
    color: rgba(0, 0, 0, 1);
  }
  .featured-posts-item .icon-lock {
    vertical-align: baseline;
  }

  @media (max-width: 1023px) {
    .featured-posts {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 767px) {
    .featured-posts {
      margin-top: 35px;
      gap: 20px;
      grid-template-columns: repeat(1, 1fr);
      justify-content: center;
    }
    .featured-posts-item {
      max-width: 470px;
      width: 100%;
    }
  }

  /* Community topics grid */
  .topics {
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .topics h1 {
    text-align: left;
  }
  .topics-item .meta-group {
    justify-content: center;
    margin-top: 20px;
  }

  .activity {
    position: relative;
    overflow: hidden;
  }
  .activity .container {
    position: relative;
    z-index: 2;
    text-align: center;
  }
  .activity>img {
    position: absolute;
    top: -1px;
    right: -1px;
  }
  .activity .button {
    margin-top: 50px;
  }


  /* Community topic page */
  .topic-page .hero {
    overflow: visible;
  }

  .topic-header {
    position: relative;
    z-index: 2;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    margin-top: 30px;
  }
  .topic-header .dropdown {
    padding: 10px 20px 10px 0;
  }

  .topic-header .dropdown-toggle, .my-activities-following-header .dropdown-toggle, .profile-section-sorter .dropdown-toggle, .page-header .dropdown-toggle {
    padding: 10px 14px;
    border-radius: 16px;
    transition: all .3s ease;
    box-shadow: 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04), 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid #D5D7DA;
    color: rgba(0, 0, 0, 1);
  }

  .topic-header .dropdown-toggle:hover, .topic-header .dropdown-toggle[aria-expanded='true'], .my-activities-following-header .dropdown-toggle:hover, .my-activities-following-header .dropdown-toggle[aria-expanded='true'], .profile-section-sorter .dropdown-toggle:hover, .profile-section-sorter .dropdown-toggle[aria-expanded='true'], .page-header .dropdown-toggle:hover, .page-header .dropdown-toggle[aria-expanded='true'] {
    background-color: #1D1B19;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
  }

  .topic-header .dropdown-toggle:hover svg, .topic-header .dropdown-toggle[aria-expanded='true'] svg, .my-activities-following-header .dropdown-toggle:hover svg, .my-activities-following-header .dropdown-toggle[aria-expanded='true'] svg, .profile-section-sorter .dropdown-toggle:hover svg, .profile-section-sorter .dropdown-toggle[aria-expanded='true'] svg {
    transform: rotate(180deg);
  }

  .topic-header .dropdown-toggle:hover svg path, .topic-header .dropdown-toggle[aria-expanded='true'] svg path, .my-activities-following-header .dropdown-toggle:hover svg path, .my-activities-following-header .dropdown-toggle[aria-expanded='true'] svg path, .profile-section-sorter .dropdown-toggle:hover svg path, .profile-section-sorter .dropdown-toggle[aria-expanded='true'] svg path {
    stroke: #FFFCFB;
  }


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

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


  /***** Striped list *****/
  /* Used in community posts list and requests list */
  .striped-list {
    margin-top: 70px;
    display: grid;
    flex-wrap: wrap;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    justify-content: start;
  }

  .striped-list-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
  }
  .striped-list-item-top div {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .striped-list-item-top img {
    width: 30px;
    height: 30px;
    border-radius: 50px;
  }

  .posts-item {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid #D5D7DA;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04), 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
  } 

  .striped-list-title {
    display: block;
    margin-right: 5px;
  }
  .post-overview-item {
    display: inline-block;
    margin-top: 10px;
  }
  .striped-list .meta-group {
    margin: 10px 0;
  }
  .striped-list-item .meta-group a {
    font-weight: 600;
    color: #6941C6;
  }
  .striped-list-item .meta-group a:hover {
    color: #1C1917;
  }
  .striped-list-count {
    display: flex;
    justify-content: space-between;
    color: rgba(0, 0, 0, 1);
    font-size: 14px;
    text-transform: capitalize;
  }
  .striped-list-count-item {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .striped-list-count-item svg {
    width: 16px;
    height: 16px;
  }
  .striped-list-count-item:last-child::after {
    display: none;
  }
  .striped-list-count-item svg path {
    stroke: rgba(0, 0, 0, 1);
  }
  .striped-list-number {
    text-align: center;
  }
  .post-list-page .hero-inner, .post-list-page .search {
    margin: 0 auto;
  }
  .post-list-page .search {
    max-width: none;
    margin: 0 15px;
  }
  .post-list-page .search-icon {
    left: 35px;
  }
  .post-list-page .posts {
    position: relative;
    overflow: hidden;
  }

  .post-list-page .hero {
    overflow: visible;
  }

  .post-list-page .hero > svg, .topic-page .hero > svg {
    max-height: 300px;
    width: 100%;
    border-radius: 12px;
  }

  .community-page .community-featured-posts {
    padding-top: 100px;
  }


  @media (max-width: 1023px) {
    .community-page .community-featured-posts {
    padding-top: 80px;
    }
    .striped-list {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 767px) {
    .community-page .community-featured-posts {
      padding-top: 60px;
    }
    .topic-header {
      flex-direction: column;
      align-items: start;
      margin-top: 20px;
    }
    .striped-list {
      margin-top: 35px;
      gap: 20px;
      justify-content: center;
      grid-template-columns: repeat(1, 1fr);
    }
    .posts-item {
      max-width: 470px;
      width: 100%;
    }
    .post-list-page .community-header {
      margin-bottom: 10px;
    }
    .post-list-page .topic-header {
      margin-top: 10px;
    }
  }

  /***** Status labels *****/
  /* Styles labels used in posts, articles and requests */
  .status-label {
    background-color: #1D1B19;
    border-radius: 40px;
    color: #FFFCFB;
    font-size: 14px;
    font-weight: 600;
    margin-right: 2px;
    padding: 4px 12px;
    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: #6941C6;
  }
  .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: #544b45;
  }
  .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 75%;
      max-width: 75%;
      padding: 0 50px 0 0;
    }
    [dir=rtl] .post {
      padding: 0 0 0 50px;
    }
  }
  .post-container {
    display: flex;
    flex-direction: column;
    padding-bottom: 100px;
    position: relative;
  }
  @media (min-width: 1024px) {
    .post-container {
      flex-direction: row;
      align-items: flex-start;
    }
  }
  .post-header {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 30px;
  }
  @media (min-width: 768px) {
    .post-header {
      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: 50px;
    }
  }
  .post-title h1 {
    display: inline;
    vertical-align: middle;
    line-height: 110%;
  }
  @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: 'Century Gothic', 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 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: darken($background_color, 5%);
  }
  .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: darken($background_color, 3%);
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 0 5px;
    margin: 0 2px;
  }
  .post-body pre {
    background: darken($background_color, 3%);
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 10px 15px;
    overflow: auto;
    white-space: pre;
  }

  .post-footer {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
  }
  .post-comment-count {
    color: #544b45;
  }
  .post-comment-count:hover {
    text-decoration: none;
  }
  .post-comment-count .icon-comments {
    color: #6941C6;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 5px;
    vertical-align: middle;
  }
  .post-sidebar {
    flex: 1;
    margin-top: 30px;
    text-align: center;
    padding: 24px;
    border: none;
    background-color: transparent;
    border-radius: 16px;
    border: 1px solid #D5D7DA;
    box-shadow: 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04), 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
  }
  @media (min-width: 1024px) {
    .post-sidebar {
      flex: 1 0 25%;
      text-align: initial;
      position: sticky;
      top: 50px;
      margin-top: 0;
    }
  }
  .post-sidebar .search-container {
    width: 100%;
    max-width: 565px;
    margin: 0 auto 20px;
    padding-left: 0;
  }
  .post-sidebar input[type=search]{
    padding: 10px 10px 10px 50px;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
  }

  .post-sidebar input[type=search]::after {
    font-size: 15px;
  }
  .comment-form-controls label {
    margin-right: 30px;
  }
  .post-sidebar-title {
    padding-top: 20px;
    margin-bottom: 20px;
    font-size: 18px;
    border-top: 1px solid #D5D7DA;
  }
  .post-comments {
    margin-bottom: 20px;
  }

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


  @media (max-width: 1023px) {
    .post-container {
      padding-bottom: 80px;
      align-items: center;
    }
  }

  @media (max-width: 767px) {
    .post-container {
      padding-bottom: 60px;
    }
    .post-header {
      align-items: start;
    }
  }

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

  .collapsible-nav-list {
    display: flex;
    flex-direction: column;
    font-size: 16px;
  }
  @media (min-width: 768px) {
    .collapsible-nav-list {
      flex-direction: row;
    }
  }
  .collapsible-nav-list li {
    color: #1C1917;
    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;
    }
  }
  .collapsible-nav-list li a {
    color: #1C1917;
    display: block;
  }
  .collapsible-nav-list li a:hover {
    color: #6941C6;
  }

  .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: 2px solid #1C1917;
      padding-bottom: 8px;
      order: 1;
    }
  }
  .collapsible-nav-list li[aria-selected=true] a,
  .collapsible-nav-list li.current a {
    color: #6941C6;
  }

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

  @media (max-width: 767px) {
    .collapsible-nav-list {
        margin-right: 30px;
    }
    .collapsible-nav-list li.current {
      display: block;
    }
  }
  /* Sidebar navigation that collapses on mobile */
  .collapsible-sidebar {
    flex: 1;
    max-height: 45px;
    overflow: hidden;
    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;
    }
  }
  .collapsible-sidebar-toggle path {
    stroke: #1C1917;
  }
  .request-sidebar .collapsible-sidebar-toggle path {
    stroke: #1C1917;
  }
  [dir=rtl] .collapsible-sidebar-toggle {
    left: 0;
    right: auto;
  }
  .collapsible-sidebar-toggle-icon {
    display: none;
  }
  .collapsible-sidebar-toggle-icon path {
    stroke: #1C1917;
  }
  .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 #6941C6;
  }
  .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 {
    margin-top: 60px;
    margin-bottom: 20px;
  }
  .my-activities-sub-nav {
    margin-bottom: 30px;
  }
  .my-activities-table .striped-list-title { /* My activities tables */
    display: block;
    max-width: 350px;
    white-space: normal;
    color: #1C1917;
  }
  .my-activities-table .striped-list-title:hover {
    color: #6941C6;
  }
  .my-activities-header h1 {
    margin-bottom: 20px;
  }
  @media (min-width: 1024px) {
    .my-activities-table .striped-list-title {
      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-page {
    margin-top: 60px;
  }
  .requests-page .search {
    max-width: 570px;
    flex: 1;
  }
  .requests-page .search input[type=search]{
    padding: 10px 50px;
  }
  .requests-page .search svg {
    left: 20px;
  }

  .requests-search {
    width: 100%;
  }
  .requests {
    margin-bottom: 100px;
  }
  .requests-table-toolbar {
    display: flex;
    flex-direction: column;
  }
  @media (max-width: 767px) {
    .requests-page .search {
      max-width: none;
    }
  }
  @media (max-width: 1023px) {
    .requests {
      margin-bottom: 80px;
    }
  }
  @media (max-width: 767px) {
    .requests {
      margin-bottom: 60px;
    }
  }
  @media (min-width: 768px) {
    .requests-table-toolbar {
      flex-direction: row;
    }
  }

  .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;
    margin-top: 5px;
  }
  @media (max-width: 767px) {
    .requests-table-toolbar + .requests {
      margin-top: 0;
    }
  }
  @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: inline-block;
    margin-top: 10px;
  }
  @media (min-width: 768px) {
    .subscriptions-table td:last-child {
      display: table-cell;
      margin-top: 0;
    }
  }

  .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: #544b45;
    font-size: 13px;
  }
  @media (min-width: 768px) {
    .contributions-table td:last-child {
      color: inherit;
      font-size: inherit;
      font-weight: inherit;
    }
  }

  .no-activities {
    color: #544b45;
    margin-top: 30px;
  }

  /***** Request *****/
  .request-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 100px;
  }
  @media (max-width: 1023px) {
    .request-container {
      margin-bottom: 80px;
    }
  }
  @media (max-width: 767px) {
    .request-container {
      margin-bottom: 60px;
    }
  }
  @media (min-width: 1024px) {
    .request-container {
      align-items: flex-start;
      flex-direction: row;
    }
  }
  .request-container .comment-container {
    min-width: 0;
  }
  .request-container .comment-list {
    padding-bottom: 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-form-controls button {
    border-radius: 8px;
  }
  .request-main .comment-ccs {
    display: block;
  }
  .request-main .comment-show-container {
    background-color: #F4EBFF;
    border: 1px solid #D5D7DA;
    color: #1C1917;
    text-align: inherit;
    padding: 8px 18px;
    font-weight: 500;
    line-height: 150%;
    width: 100%;
    border-radius: 12px;
    box-shadow: 0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset, 0px -2px 0px 0px rgba(10, 13, 18, 0.05) inset, 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  }
  .request-main .comment-show-container:hover {
    background-color: #1D1B19;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
  }
  .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 #6941C6;
  }
  .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 #6941C6;
  }
  .request-main input#mark_as_solved {
    display: none;
  }
  .request-title {
    width: 100%;
    margin-top: 60px;
  }
  @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;
    margin-top: 20px;
  }
  @media (min-width: 1024px) {
    .request-sidebar {
      background-color: darken($background_color, 3%);
      border: 0;
      font-size: 13px;
      flex: 0 0 auto;
      padding: 0 20px;
      width: 30%;
      margin-top: 0;
    }
  }
  .request-sidebar h2 {
    font-size: 16px;
    font-weight: 400;
    padding: 10px 0;
    position: relative;
    margin-bottom: 0;
    letter-spacing: normal;
  }
  @media (min-width: 1024px) {
    .request-sidebar h2 {
      display: none;
    }
  }
  .request-details {
    border-bottom: 1px solid #ddd;
    font-size: 0;
    margin: 0;
    padding-bottom: 20px;
  }
  .request-details:last-child {
    border: 0;
  }
  .request-details dt, .request-details dd {
    display: inline-block;
    vertical-align: top;
    font-size: 13px;
    margin: 20px 0 0 0;
  }
  .request-details dd {
    padding: 0 10px;
    width: 60%;
  }
  .request-details dd::after {
    content: "\a";
    white-space: pre;
  }
  .request-details dt {
    color: #544b45;
    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;
  }
  .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link {
    color: #1C1917;
  }
  .pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover {
    color: #6941C6;
  }

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

  .meta-group * {
    display: inline;
  }

  .meta-data {
    font-size: 14px;
    color: #6941C6;
    margin-right: 10px;
  }
  .meta-data a {
    font-size: 16px;
    color: #1C1917;
  }
  .meta-data a:hover {
    color: #6941C6;
  }

  .meta-data .comment-link {
    color: #6941C6;
  }

  .meta-data .comment-link:hover {
    color: #1C1917;
  }

  .meta-group a p {
    font-weight: 400;
    font-size: 16px;
    transition: all .3s ease;
    color: #6941C6;
  }
  .meta-group a:hover p {
    color: #1C1917;
  }
  /* User Profiles */

  .profile-header {
    padding-top: 60px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
  }

  .profile-header > svg {
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: -200px;
  }

  .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;
    vertical-align: middle;
    display: inline;
  }

  .profile-header .options {
    display: flex;
    flex-basis: 100%;
    margin-top: 25px;
    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;
    }
  }
  .profile-lists {
    flex-basis: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 35px;
  }


  .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: 16px;
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
  }

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

  .profile-stats .stat-label {
    flex: 0 0 100px;
    font-weight: 600;
    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 #6941C6;
    border-radius: 4px;
    color: #6941C6;
    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 {
    margin-bottom: 37px;
  }

  .profile-section {
    width: 100%;
    margin-bottom: 100px;
  }
  @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: 15px 0;
    color: #544b45;
    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 {
    margin-bottom: 10px;
  }

  @media (max-width: 767px) {
    .profile-section-sorter .dropdown-toggle {
      margin-top: 10px;
    }
  }

  .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: #544b45;
    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-activity-contribution a {
    color: #1C1917;
  }
  .profile-activity-contribution a:hover {
    color: #6941C6;
  }
  .profile-contribution-title {
    margin: 0 0 5px 0;
    display: inline;
    line-height: 21px;
    font-size: 18px;
    vertical-align: middle;
  }
  .profile-contribution-title a {
    color: #6941C6;
  }
  .profile-contribution-title a:hover {
    color: #1C1917;
  }

  .profile-contribution-body {
    margin: 10px 0;
  }
  .profile-contribution .breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin-bottom: 10px;
  }
  .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;
      margin-left: 14px;
    }
    [dir=rtl] .profile-activity {
      padding-right: 20px;
      padding-left: 0;
    }
  }

  .profile-activity:last-of-type {
    padding-bottom: 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: 30px 20px;
    border-radius: 20px;
    border: 1px solid rgba(213, 218, 222, 0.8);
    margin-top: 10px;
  }
  @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-contribution .breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin-bottom: 10px;
  }
  .profile-activity-icon {
    position: absolute;
    left: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-color: #6941C6;
    background-position: 50% 50%;
    text-align: center;
    color: #FFFCFB;
  }
  [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;
  }

  @media (max-width: 1279px) {
    .profile-section {
      margin-bottom: 100px;
    }
  }

  @media (max-width: 1023px) {
    .profile-section {
      margin-bottom: 80px;
    }
    .profile-lists {
      flex-wrap: wrap;
      margin-top: 0;
    }
    .profile-stats {
      flex-basis: 100%;
    }
  }
  @media (max-width: 767px) {
    .profile-section {
      margin-bottom: 60px;
    }
    .profile-info {
      flex-direction: column;
      align-items: center;
    }
    .profile-header .options {
      flex-basis: 0;
    }
    .profile-lists {
      flex-basis: 0;
      width: 100%;
    }
    .profile-header > svg {
      bottom: auto;
      top: 0;
    }
    .profile-header {
      margin-bottom: 0;
    }
  }

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

  .search-results-page .container {
    padding-top: 80px;
    padding-bottom: 100px;
    display: flex;
    gap: 50px;
  }

  .search-results-page .nav {
    padding: 10px;
    box-shadow: 0px 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
  }

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

  .search-results-sidebar {
    width: auto;
  }

  .search-results-sidebar .sidenav-item {
    color: rgba(0, 0, 0, 1);
  }

  .filters-in-section li:last-child .sidenav-item {
    margin-bottom: 0;
  }
  .search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current span:first-of-type {
    font-weight: 600;
    color: #6941C6;
  }


  .search-results-sidebar .sidenav-item.current:hover span, .search-results-sidebar .sidenav-item:hover {
    text-shadow: 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;
    width: auto;
  }
  .search-results-sidebar .collapsible-sidebar:last-child {
    margin-bottom: 0;
  }
  .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: rgba(0, 0, 0, 1);
  }
  .search-results-sidebar .see-all-filters {
    background: none;
    border: none;
    cursor: pointer;
    display: block;
    padding: 10px;
    color: #1C1917;
  }
  .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-heading {
    margin-top: 25px;
    padding-bottom: 40px;
    max-width: 745px;
  }
  .search-results-list {
    max-width: 745px;
  }
  .search-results-list > li:first-child {
    border-top: 1px solid rgba(0, 0, 0, 1);
  }
  .search-results-list > li {
    border-bottom: 1px solid rgba(0, 0, 0, 1);
    padding: 20px 0 30px;
  }
  .search-results-page .container .no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .search-results-page .container .no-results .headline {
    margin-top: 20px;
    margin-bottom: 5px;
  }

  .search-results-page .container .no-results .action-prompt a {
    display: inline-block;
    margin-top: 5px;
    color: #6941C6;
  }
  .search-results-page .container .no-results .action-prompt a path {
    color: #6941C6;
  }
  .search-results-page .container .no-results .action-prompt a:hover {
    color: #1C1917;
  }
  .search-results-page .container .no-results .action-prompt a:hover path {
    color: #1C1917;
  }

  .search-result-title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .search-result-title a {
    font-size: 20px;
    font-weight: 600;
    line-height: 120%; /* 24px */
    letter-spacing: -0.2px;
    color: #6941C6;
  }
  .search-result-title a:hover {
    color: #1C1917;
  }
  .search-result-votes, .search-result-meta-count {
    color: #544b45;
    font-size: 13px;
  }
  .search-result-votes-icon, .search-result-meta-count-icon {
    color: #6941C6;
    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;
    }
  }

  @media (max-width: 1023px) {
    .search-results-page .container {
      padding-bottom: 80px;
      gap: 30px;
      flex-direction: column-reverse;
    }
    .search-results-sidebar {
      width: 100%;
    }
    .search-results-sidebar .collapsible-sidebar {
      width: 100%;
    }
    .search-results-heading, .search-results-list {
      max-width: none;
    }
  }
  @media (max-width: 767px) {
    .search-results-page .container {
      padding-top: 60px;
      padding-bottom: 60px;
    }
    .search-results-sidebar {
      max-width: none;
    }
  }

  .search-result-meta-container .meta-data::after {
    content: none;
  }
  .search-result-breadcrumbs {
    margin: 0;
    margin-top: 10px;
    padding: 0;
  }
  .search-result-description {
    margin-top: 20px;
    margin-bottom: 0;
    word-break: break-word;
  }
  .search-result-description em {
    padding: 0 3px;
    background-color: #6941C6;
    color: #FFFCFB;
  }
  .search-result-bottom {
    margin-top: 20px;
  }
  .search-result-bottom a {
    font-size: 14px;
    font-weight: 600;
    line-height: 140%;
    color: #6941C6;
  }
  .search-result-bottom a:hover {
    color: #1C1917;
  }
  .search-result-bottom span {
    font-size: 14px;
    font-weight: 400;
    line-height: 140%;
  }

  /* 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: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    text-align: initial;
    vertical-align: middle;
    font-size: 14px;
    font-weight: 500;
    line-height: 150%;
    color: #FFF;
  }
  .dropdown-toggle p {
    color: #fff;
  }
  .dropdown-toggle span {
    font-size: 14px;
    font-weight: 500;
  }
  .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-radius: 8px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05), 0px 4px 22px 0px rgba(0, 0, 0, 0.04);
    display: none;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    left: -10px;
    margin-top: 10px;
    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: #78716C;
    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%;
    font-size: 15px;
    font-weight: 500;
  }
  [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=menuitemradio]:hover {
    color: #6941C6;
  }
  .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 button {
    font-size: 16px;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: 0.63px;
  }
  .dropdown-menu-end {
    left: auto;
    right: 0;
  }

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

  [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: rgba(0, 0, 0, 1);
    margin-top: 32px;
    margin-bottom: 4px;
  }
  .content-tags-add-hint {
    color: rgba(0, 0, 0, 1);
    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;
  }

  .mobile-button {
    display: none;
  }

  @media (max-width: 767px) {
    .mobile-button {
      display: flex;
      padding-top: 40px;
      justify-content: center;
    }

    .category-page .mobile-button {
      display: flex;
      padding-top: 93px;
      justify-content: center;
    }
  }

  /***** Padding-bottom *****/
  .padding-bottom {
    padding-bottom: 260px;
  }

  @media (max-width: 1023px) {
    .padding-bottom {
      padding-bottom: 240px;
    }
  }

  @media (max-width: 767px) {
    .padding-bottom {
      padding-bottom: 220px;
    }
  }

  /***** Padding-top *****/
  .padding-top {
    padding-top: 100px;
  }

  @media (max-width: 1023px) {
    .padding-top {
      padding-top: 80px;
    }
  }

  @media (max-width: 767px) {
    .padding-top {
      padding-top: 60px;
    }
  }

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

  /***** Upload Dropzone *****/
  .upload-dropzone {
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    background-color: $background_light_color;
  }

  /***** BUTTON *****/

  .button {
    font-size: 14px;
    line-height: 150%;
    display: inline-block;
    padding: 8px 18px;
    font-weight: 500;
    border-radius: 12px;
    box-shadow: 0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset, 0px -2px 0px 0px rgba(10, 13, 18, 0.05) inset, 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  }

  .button-primary {
    background-color: transparent;
    border: 1px solid #FFF;
    color: #FFF;
  }

  .button-primary:hover {
    background-color: #000;
    border: 1px solid #000;
    color: #FFF;
  }

  .button-secondary {
    background-color: #F4EBFF;
    border: 1px solid #D5D7DA;
    color: #1C1917;
  }

  .button-secondary:hover {
    background-color: #1D1B19;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
  }

  .hidden {
    display: none;
  }

  .section-subscribe button {
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0;
    color: rgba(0, 0, 0, 1);
    padding: 0 8px;
    border-radius: 50px;
    background-color: #E5E5FF;
  }

  .section-subscribe button:hover {
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    color: #6941C6;
    border-radius: 50px;
    background-color: #E5E5FF;
  }

  header.margin-20 {
    /* margin: 20px 20px 0; */
  }

  reach-portal > div {
    z-index: 99;
  }

  /* ============================================
    Article Navigation (Previous/Next)
    ============================================ */

  .article-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #D5D7DA;
  }

  .article-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 1px solid #D5D7DA;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 1);
    text-decoration: none;
    transition: all 0.2s ease;
  }

  .article-nav:hover {
    background-color: #E5E5FF;
    border-color: #6941C6;
    box-shadow: 0px 5px 10px -2.5px rgba(10, 13, 18, 0.04);
  }

  .article-nav--prev {
    flex-direction: row;
  }

  .article-nav--next {
    flex-direction: row-reverse;
    text-align: right;
  }

  .article-nav-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .article-nav-label {
    font-size: 12px;
    color: rgba(0, 0, 0, 1);
    font-weight: 500;
  }

  .article-nav-title {
    font-size: 16px;
    color: #1C1917;
    font-weight: 600;
    line-height: 1.4;
    transition: color 0.2s ease;
  }

  .article-nav:hover .article-nav-title {
    color: #6941C6;
  }

  .article-nav svg {
    flex-shrink: 0;
    color: rgba(0, 0, 0, 1);
    transition: color 0.2s ease;
  }

  .article-nav:hover svg {
    color: #6941C6;
  }

  /* Mobile responsiveness */
  @media (max-width: 767px) {
    .article-navigation {
      grid-template-columns: 1fr;
      margin-top: 40px;
      padding-top: 30px;
    }
    
    .article-nav {
      padding: 16px;
    }
    
    .article-nav-title {
      font-size: 14px;
    }
  }

  /* ============================================
    Search Autocomplete (Article Suggestions)
    ============================================ */

  .search-with-autocomplete {
    position: relative;
  }

  .search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #FBFBFC;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
  }

  .search-suggestions.active {
    display: block;
  }

  .search-suggestion-item {
    display: block;
    padding: 12px 16px;
    color: #1C1917;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #D5D7DA;
    text-align: left;
  }

  .search-suggestion-item:last-child {
    border-bottom: none;
  }

  .search-suggestion-item:hover,
  .search-suggestion-item:focus,
  .search-suggestion-item.highlighted {
    background-color: rgba(255, 255, 255, 1);
    outline: none;
  }

  .search-suggestion-title {
    font-size: 14px;
    line-height: 1.5;
    color: #1C1917;
    text-align: left;
  }

  .search-suggestion-item:hover .search-suggestion-title,
  .search-suggestion-item:focus .search-suggestion-title,
  .search-suggestion-item.highlighted .search-suggestion-title {
    color: #6941C6;
  }

  /* 高亮匹配的关键字 */
  .search-suggestion-title mark {
    background-color: rgba(252, 82, 0, 0.15);
    color: #6941C6;
    font-weight: 600;
    padding: 0 2px;
    border-radius: 2px;
  }

  /* 加载状态 */
  .search-suggestions.loading {
    padding: 20px;
    text-align: center;
    color: rgba(0, 0, 0, 1);
    font-size: 14px;
  }

  .search-suggestions.loading::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #D5D7DA;
    border-top-color: #6941C6;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* 无结果提示 */
  .search-suggestions.empty {
    padding: 20px;
    text-align: center;
    color: rgba(0, 0, 0, 1);
    font-size: 14px;
  }

  /* 移动端适配 */
  @media (max-width: 767px) {
    .search-suggestions {
      max-height: 250px;
      border-radius: 6px;
    }

    .search-suggestion-item {
      padding: 10px 14px;
    }

    .search-suggestion-title {
      font-size: 13px;
    }
  }

  /* 确保搜索框容器支持相对定位 */
  .search-container {
    position: relative;
  }

  .search-full {
    position: relative;
  }

  /* ============================================
    Global Modal
    ============================================ */

  .global-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 10000;
  }

  .global-modal[aria-hidden="false"] {
    display: block;
  }

  .global-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  .global-modal__dialog {
    position: relative;
    max-width: 720px;
    margin: 200px auto 0;
  }

  .global-modal__content {
  }

  /* Global Modal Search Input */
  .global-modal__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 30px;
    border-radius: 180px;
    background-color: rgba(89, 89, 89, 1);
    color: white;
  }

  .global-modal__search-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    pointer-events: none;
  }

  .global-modal__search-input {
    flex: 1;
    width: 100%;
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: transparent;
    color: white;
    font-size: 18px;
    font-weight: 400;
    line-height: 140%;
    outline: none;
    transition: none;
    /* 禁用浏览器原生的清除按钮 */
    -webkit-appearance: none;
    appearance: none;
  }

  .global-modal__search-input::-webkit-search-cancel-button,
  .global-modal__search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
  }

  .global-modal__search-input::-ms-clear {
    display: none;
  }

  .global-modal__search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
  }

  .global-modal__search-input:focus {
    outline: none;
  }

  .global-modal__search-clear {
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }

  .global-modal__search-clear:hover {
    opacity: 0.8;
  }

  .global-modal__suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin-top: 0;
    background: rgba(112, 112, 112, 1);
    border: none;
    border-radius: 20px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1001;
    display: none;
  }

  .global-modal__suggestions.active {
    display: block;
  }

  .global-modal__suggestions .search-suggestion-item {
    display: block;
    padding: 12px 16px;
    color: #1C1917;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #D5D7DA;
  }

  .global-modal__suggestions .search-suggestion-item:last-child {
    border-bottom: none;
  }

  .global-modal__suggestions .search-suggestion-item:hover,
  .global-modal__suggestions .search-suggestion-item:focus,
  .global-modal__suggestions .search-suggestion-item.highlighted {
    background-color: rgba(255, 255, 255, 1);
    outline: none;
  }

  .global-modal__suggestions .search-suggestion-title {
    font-size: 14px;
    line-height: 1.5;
    color: white;
  }

  .global-modal__suggestions .search-suggestion-item:hover .search-suggestion-title,
  .global-modal__suggestions .search-suggestion-item:focus .search-suggestion-title,
  .global-modal__suggestions .search-suggestion-item.highlighted .search-suggestion-title {
    color: #6941C6;
  }

  .global-modal__suggestions .search-suggestion-title mark {
    background-color: rgba(252, 82, 0, 0.15);
    color: #6941C6;
    font-weight: 600;
    padding: 0 2px;
    border-radius: 2px;
  }

  .global-modal__suggestions.loading {
    padding: 20px;
    text-align: center;
    color: rgba(0, 0, 0, 1);
    font-size: 14px;
  }

  .global-modal__suggestions.loading::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #D5D7DA;
    border-top-color: #6941C6;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
  }

  .global-modal__suggestions.empty {
    padding: 20px;
    text-align: center;
    color: rgba(0, 0, 0, 1);
    font-size: 14px;
  }

  .global-modal__close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    color: rgba(0, 0, 0, 1);
  }

  .global-modal__close:hover {
    color: #6941C6;
  }

  @media (max-width: 767px) {
    .global-modal__dialog {
      margin: 0 auto;
      top: 10vh;
      width: calc(100% - 24px);
    }
  }