@charset "UTF-8";

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

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

@font-face {
  font-family: 'Aspekta';
  src: url(/hc/theming_assets/01JJK99BS7NDDXYKENQGZ2Z6RC) format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}*/


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

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

@font-face {
  font-family: 'Barlow';
  src: url(/hc/theming_assets/01JKCFBY262YS64M3SX06MA5D0) 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 */



.override-link-li {
  color: rgba(255, 255, 255, 1);
}

.override-link-co {
  color: Stext_primary;
}

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

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background-color: black;
}

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;
  color: rgba(255, 255, 255, 1);
  transition: all .3s ease;
  letter-spacing: normal;
}

a:hover {
  color: rgba(6, 212, 255, 1);
}

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

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;
  color: rgba(255, 255, 255, 1); 
}

html,
body {
  background: black !important;
}

body {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px;
  line-height: 1.4;
  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;
}


h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  /*font-family: Aspekta, Arial, sans-serif;*/
  font-family: 'Inter', sans-serif !important;
  margin-top: 0;
  margin-bottom: 0;
}

.hero-text {
  font-size: 62px;
  letter-spacing: -1.61px;
  line-height: 110%;
  margin-bottom: 40px;

  background: linear-gradient(90deg, #ffffff, #00d4ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Optional: Add for broader support */
  background-clip: text;
  color: transparent;
}

h1 {
  font-size: 50px;
  line-height: 100%;
  letter-spacing: -1.25px;
  color: rgba(255, 255, 255, 1); !important
}

h2 {
  font-size: 44px;
  line-height: 110%;
  letter-spacing: -1.25px;
  color: rgba(255, 255, 255, 1); !important
}

h3 {
  font-size: 40px;
  line-height: 120%;
  letter-spacing: -0.89px;
  color: rgba(255, 255, 255, 1); !important
}

h4 {
  font-size: 26px;
  line-height: 110%; 
  letter-spacing: -0.47px;
  color: rgba(255, 255, 255, 1); !important
}

h5 {
  font-size: 24px;
  line-height: 110%; /* 30.8px */
  letter-spacing: -0.47px;
}

h6 {
  font-size: 22px;
  line-height: 110%;
  letter-spacing: -0.47px;
  /*color: rgba(0, 0, 0, 1);*/
}

p {
  /*font-family: Inter, Arial, sans-serif;*/
  font-family: 'Inter', sans-serif !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  margin: 0;
  color: rgba(255, 255, 255, 1);
}

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

.h2 {
  font-size: 44px;
  font-style: normal;
  font-weight: 600;
  line-height: 110%; 
  letter-spacing: -1.25px;
  color: rgba(255, 255, 255, 1);
  /*font-family: Aspekta, Arial, sans-serif;*/
  font-family: 'Inter', sans-serif !important;
}

.h4 {
  font-size: 26px;
  font-style: normal;
  font-weight: 600;
  line-height: 110%; 
  letter-spacing: -0.47px;
  color: rgba(255, 255, 255, 1);
  font-family: 'Inter', sans-serif !important;
}

@media (min-width: 1920px) {
  .hero-text {
    font-size: 72px;
  }
  .h2 {
    font-size: 56px;
  }
}

@media (max-width: 1279px) {
  .hero-text {
    font-size: 60px;
  }
  h3 {
    font-size: 36px;
  }
}

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

@media (max-width: 767px) {
  .hero-text {
    font-size: 46px;
  }
  h1 {
    font-size: 40px;
  }
  h2 {
    font-size: 36px;
  }
  h3 {
    font-size: 30px;
  }
  .h2 {
    font-size: 36px;
  }
}
a {
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
  cursor: pointer;
}

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

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 #87929D;
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: #555;
  width: 100%;
}
select:focus {
  border: 1px solid $brand_color;
}
select::-ms-expand {
  display: none;
}

textarea {
  border-radius: 8px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 18px;
  height: 140px;
  border: 1px solid #AFB9C2;
  background-color: #fff;
}

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

.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] {
  /*background-color: transparent;*/
  border-radius: 50px;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.63px;
  margin: 0;
  text-align: center;
  transition: all .3s ease;
  padding: 10px 30px;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(0, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 1);
  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 {
  border: 1px solid rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, 1);
  color: rgba(6, 212, 255, 1);
}

.comment-form-controls input[type=submit] {
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(255, 255, 255, 1);
  color: rgba(0, 0, 0, 1);
}

.comment-form-controls input[type=submit]:hover {
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(255, 255, 255, 1);
  color: rgba(6, 212, 255, 1);
}

.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: lighten($text_color, 20%);
  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: rgba(255, 255, 255, 1);
}

.form-field input {
  border: 1px solid rgba(213, 218, 222, 0.8);
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}
.form-field input:focus {
  border: 1px solid $brand_color;
}

.form-field input[type=text] {
  border: 1px solid rgba(213, 218, 222, 0.8);
  border-radius: 4px;
}
.form-field input[type=text]:focus {
  border: 1px solid $brand_color;
}

.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 $brand_color;
  text-decoration: none;
}

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

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

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

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

.form-field .optional {
  color: lighten($text_color, 20%);
  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: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 120%; /* 21.6px */
  letter-spacing: 0.63px;
  padding: 10px 30px;
  cursor: pointer;
  border-radius: 50px;
  background-color: rgba(6, 212, 255, 1);
  border: 1px solid rgba(6, 212, 255, 1);
  color: rgba(255, 255, 255, 1);
}
.form footer input:hover {
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, 1);
}

.form footer a {
  color: lighten($text_color, 20%);
  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: $visited_link_color;
}

/***** Header *****/
.header {
  background-color: #000;
  /*background-image: url(/hc/theming_assets/01JZWG4AWF4V0Y5D5FGRG80GZ1); 
  background-size: 120%; 
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;*/
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header .container {
  position: relative;
  align-items: center;
  display: flex;
  justify-content: space-between;
  height: 88px;
}

.header__lists {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 15px;
}
.header__lists a {
  line-height: 1.1;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}

.header__lists a:hover {
  color: rgba(6, 212, 255, 1);
}

@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 10px;
  flex: 0 0 auto;
}

.logo a {
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, 1);
}

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

.logo a:hover {
  color: rgba(6, 212, 255, 1);
}

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

.footer-language-selector button {
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
}

.footer-language-selector button:hover {
  color: rgba(6, 212, 255, 1);
}
.footer-language-selector button path {
  fill: rgba(0, 0, 0, 1);
  stroke: rgba(0, 0, 0, 1);
}

.footer-language-selector button:hover path {
  fill: rgba(6, 212, 255, 1);
  stroke: rgba(6, 212, 255, 1);
}

.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-left: 15px;
}

.user-nav-list > li > .button {
  padding: 10px 25px;
}

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

.user-nav-list > li > .sign-in {
  border: 1px solid #fff;
  color: rgba(0, 0, 0, 1);
  background-color: #fff;
}

.user-nav-list > li > .sign-in:hover {
  border: 1px solid #fff;
  color: rgba(6, 212, 255, 1);
  background-color: #fff;
}

@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(255, 255, 255, 1);
}
.nav-wrapper-mobile .menu-list-mobile {
  position: absolute;
  background-color: #fff;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 81px;
  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: 18px;
  font-weight: 400;
}
.nav-wrapper-mobile .menu-list-mobile-items button path {
  stroke: #111;
}

.nav-wrapper-mobile .menu-list-mobile-items a {
  display: block;
  font-size: 18px;
  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: 1001;
}
[dir=rtl] .skip-navigation:focus, [dir=rtl] .skip-navigation:active {
  left: initial;
  right: auto;
}

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

/***** User info in header *****/
.user-info {
  display: inline-block;
}
.user-info .dropdown-toggle::after {
  display: none;
}
@media (min-width: 768px) {
  .user-info .dropdown-toggle::after {
    display: inline-block;
  }
}
.user-info > button {
  border: 0;
  color: rgba(255, 255, 255, 1); !important
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: rgba(6, 212, 255, 1);
  background-color: transparent;
}
.user-info > button path {
  stroke: rgba(0, 0, 0, 1);
}
.user-info > button:hover path, .user-info > button:focus path {
  stroke: rgba(6, 212, 255, 1);
}
.user-info > button::after {
  color: $link_color;
  padding-right: 15px;
}
[dir=rtl] .user-info > button::after {
  padding-left: 15px;
  padding-right: 0;
}

#user #user-name {
  display: none;
  font-size: 15px;
}
@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: 64px;
  width: 64px;
}

.avatar .icon-agent {
  color: $brand_color;
  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 {
  display: flex;
  justify-content: center
}

.submit-request .container {
  position: relative;
  z-index: 3;
  max-width: 1170px;
  overflow: hidden;
  margin: -160px 15px 0;
  border-radius: 10px;
  padding: 80px 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  background-color: rgba(255, 255, 255, 0.3);
  /*background-image: url(/hc/theming_assets/01JXHMVZ9STA1WAYJXA1BJSYRP); 
  background-size: 120%; 
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;*/
}

.submit-request .container > div:last-of-type {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.submit-request .container div .button-secondary:hover {
  background-color: #fff;
  border: 1px solid #fff;
  color: rgba(6, 212, 255, 1);
}

.submit-request h3 {
  max-width: 380px;
  color: rgba(255, 255, 255, 1);
}

.submit-request p {
  font-size: 18px;
  margin-top: 20px;
  text-align: right;
  max-width: 350px;
  color: #C7CAD0;
}

.submit-request .button-primary:hover {
  color: rgba(255, 255, 255, 1);
  background-color: #fff;
  border: 1px solid #fff;
}

@media (max-width: 1279px) {
  .footer__top {
    padding-top: 80px;
  }
  .submit-request h3 {
    max-width: 340px;
  }
}
@media (max-width: 1023px) {
  .submit-request .container {
    padding: 60px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }
  .submit-request .container > div:last-of-type {
    flex-direction: column-reverse;
    gap: 40px;
    align-items: center;
  }
  .submit-request p {
    margin-top: 0;
    text-align: center;
  }
  .submit-request h3 {
    max-width: none;
  }
}
@media (max-width: 767px) { 
  .submit-request .container {
    padding: 40px;
  }
}

/* ============================================================
   FOOTER — clean black canvas with a cyan horizon field.
   Replaces the video/starfield treatment: no <video>, no image
   asset, no JS. Everything decorative is a masked CSS layer
   inside `.footer__fx`, which is aria-hidden and non-interactive,
   so the link structure and Zendesk settings bindings are
   untouched. Palette matches `.contact-support` (#00e5ff on #000).
   ============================================================ */

.footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #000;
  color: #f7f9ff;
}

/* Decorative layer stack. Sits behind all content at z-index 0. */
.footer__fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.footer__fx > span {
  position: absolute;
  display: block;
  pointer-events: none;
}

/* Top hairline: separates the footer from the section above, brightest at
   centre so it reads as a horizon rather than a hard box edge. */
.footer__rule {
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(0, 229, 255, 0) 0%,
    rgba(0, 229, 255, 0.30) 28%,
    rgba(0, 229, 255, 0.60) 50%,
    rgba(0, 229, 255, 0.30) 72%,
    rgba(0, 229, 255, 0) 100%);
}

/* Grid field: a 64px cyan lattice masked to an ellipse anchored below the
   bottom edge, so it fades out entirely before it reaches the column text.
   One element, two gradients — cheaper than the old video layer. */
.footer__grid-lines {
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(0, 229, 255, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 229, 255, 0.16) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(ellipse 120% 92% at 50% 116%, #000 10%, rgba(0, 0, 0, 0.45) 46%, transparent 78%);
  mask-image: radial-gradient(ellipse 120% 92% at 50% 116%, #000 10%, rgba(0, 0, 0, 0.45) 46%, transparent 78%);
}

/* Limb glow hugging the bottom edge — the single warm accent in the block.
   Peaks around rgb(0,50,56) over black, so white meta text stays well above
   WCAG AA contrast where it overlaps. */
.footer__horizon {
  left: 50%;
  bottom: -170px;
  width: min(1440px, 132%);
  height: 330px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(0, 229, 255, 0.20) 0%,
    rgba(0, 180, 255, 0.09) 42%,
    rgba(0, 140, 255, 0) 72%);
  filter: blur(6px);
}

.footer__space {
  position: relative;
  z-index: 1;
  padding: 72px 0 40px;
}

.footer__inner {
  position: relative;
  z-index: 2;
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 40px 28px;
}

.footer__section-title {
  position: relative;
  margin: 0 0 20px;
  padding-bottom: 12px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Short cyan tick under each column head. */
.footer__section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #00e5ff 0%, rgba(0, 229, 255, 0) 100%);
}

.footer__link-list {
  display: grid;
  justify-items: start;
  gap: 2px;
}

.footer__link-list a {
  position: relative;
  display: block;
  padding: 4px 0;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  font-size: 0.94rem;
  line-height: 1.6;
  transition: color 0.22s ease, transform 0.22s ease;
}

/* Cyan lead-in dash, revealed on hover/focus. */
.footer__link-list a::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 6px;
  height: 1px;
  background: #00e5ff;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.footer__link-list a:hover,
.footer__link-list a:focus-visible {
  color: #fff;
  transform: translateX(4px);
}

.footer__link-list a:hover::before,
.footer__link-list a:focus-visible::before {
  opacity: 1;
  transform: translateX(0);
}

.footer__link-list a:focus-visible {
  border-radius: 3px;
  outline: 2px solid #00e5ff;
  outline-offset: 4px;
}

.footer__meta {
  position: relative;
  z-index: 1;
  padding: 22px 0 28px;
}

.footer__meta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(0, 229, 255, 0.20) 50%,
    rgba(255, 255, 255, 0.03) 100%);
}

.footer__meta-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.footer__meta-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
}

.footer__meta-links p {
  margin: 0;
  /* 0.62 not 0.5: the copyright can overlap the horizon glow, and at 0.5 the
     contrast there drops to 3.7:1 — below WCAG AA for body text. */
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.88rem;
}

.footer__meta-link {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.22s ease;
}

.footer__meta-link:hover {
  color: #00e5ff;
}

.footer__meta-link:focus-visible {
  border-radius: 3px;
  outline: 2px solid #00e5ff;
  outline-offset: 3px;
}

.footer__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* Clears the floating chat launcher in the bottom-right corner. */
@media (min-width: 1024px) {
  .footer__social {
    margin-right: 112px;
  }
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.22s ease, border-color 0.22s ease,
              background-color 0.22s ease, transform 0.22s ease,
              box-shadow 0.22s ease;
}

.footer__social-link svg {
  display: block;
  width: 15px;
  height: 15px;
  color: inherit;
  fill: currentColor;
}

.footer__social-link path {
  color: inherit;
  fill: currentColor;
}

.footer__social-link--youtube svg {
  width: 17px;
  height: 17px;
}

.footer__social-link:hover {
  border-color: rgba(0, 229, 255, 0.55);
  background: rgba(0, 229, 255, 0.08);
  color: #00e5ff;
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.07);
}

.footer__social-link:focus-visible {
  outline: 2px solid #00e5ff;
  outline-offset: 3px;
}

.footer__meta-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.footer__meta-right p {
  margin: 0;
  /* 0.62 not 0.5: the copyright can overlap the horizon glow, and at 0.5 the
     contrast there drops to 3.7:1 — below WCAG AA for body text. */
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.88rem;
}

/* Honour reduced-motion: keep colour feedback, drop the travel. */
@media (prefers-reduced-motion: reduce) {
  .footer__link-list a,
  .footer__link-list a::before,
  .footer__social-link {
    transition: color 0.22s ease, border-color 0.22s ease, background-color 0.22s ease, opacity 0.22s ease;
  }
  .footer__link-list a:hover,
  .footer__link-list a:focus-visible,
  .footer__social-link:hover {
    transform: none;
  }
}

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

@media (max-width: 767px) {
  .footer__space {
    padding: 48px 0 28px;
  }
  .footer__grid {
    gap: 32px 24px;
  }
  .footer__meta-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer__meta-right {
    width: 100%;
    justify-content: space-between;
  }
  .footer__social {
    margin-left: 0;
    justify-content: flex-start;
  }
}

@media (max-width: 479px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
}

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

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

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

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

.breadcrumbs li a:hover {
  color: rgba(6, 212, 255, 1);
}

.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;
  position: relative;
  transition: border 0.12s ease-in-out;
}
.search:focus-within {
  border-color: $brand_color;
}
.search input[type=search],
.search .clear-button {
  border: 1px solid #AFB9C2;
  background-color: rgba(0, 0, 0, 1);
  border-radius: 6px;
  border: none;
}

.search input[type=search] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  border: 1px solid #AFB9C2;
  background-color: #fff;
  color: rgba(0, 0, 0, 1);
  flex: 1 1 auto;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  width: 100%;
}


.search .clear-button {
  align-items: center;
  box-sizing: border-box;
  color: #777;
  cursor: pointer;
  display: none;
  flex: none;
  justify-content: center;
  padding: 0 15px;
}
.search .clear-button:hover {
  background-color: $brand_color;
  color: #fff;
}
.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px $brand_color;
}
.search input[type=search]::placeholder, .nav input[type=search]::placeholder {
  color: rgba(0, 0, 0, 1);
}


[dir=ltr] .search .clear-button {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}
[dir=ltr] .search .clear-button:focus {
  border-left-color: $brand_color;
}

[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: $brand_color;
}
[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: $brand_color;
}

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

.search-icon path {
  fill: rgba(0, 0, 0, 1);
}

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

/***** Hero component *****/
.hero {
  margin-top: -88px;
  overflow: hidden;
  position: relative;
  background: black !important;
  background-image: none !important;
  background-size: auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.hero-background-video {
  position: absolute;
  inset: 0;
  margin-top:80px;
  width: 100%;
  height: 49%;
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.60);
  z-index: 0;
}
.hero .container {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding-top: 220px;
  padding-bottom: 40px;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 920px;
  width: 100%;
  z-index: 3;
}
.hero__content p {
  font-size: 20px;
  margin-bottom: 60px;
  max-width: 645px;
  color: rgba(255, 255, 255, 1);
}

.hero-search-heading {
  margin: 0 0 26px;
  color: #fff;
  font-size: 58px;
  font-weight: 790;
  line-height: 1.05;
  letter-spacing: 0;
  text-align: center;
  background: linear-gradient(90deg, #ffffff 0%, #7eeeff 58%, #00d4ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: #fff;
  background-clip: text;
}

.hero-search-heading + .hero-inner {
  margin-top: 0;
}

.hero > svg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.hero > svg:nth-of-type(2) {
  right: 0;
  bottom: 0;
  left: auto;
  top: auto;
}

.hero > svg:last-child {
  right: 0;
  left: auto;
}

.hero > svg:first-of-type radialGradient stop {
  stop-color: rgba(246, 246, 246, 0.36);
}

.hero > svg:first-of-type radialGradient:last-of-type stop {
  stop-color: rgba(245, 245, 245, 0.34);
}

.hero > svg:nth-of-type(2) radialGradient stop {
  stop-color: rgba(245, 245, 245, 0.34);
}

.hero > svg:nth-of-type(2) radialGradient:last-of-type stop {
  stop-color: rgba(246, 246, 246, 0.36);
}

.hero > svg:nth-of-type(3) radialGradient:first-of-type stop {
  stop-color: rgba(84, 84, 86, 0.33);
}

.hero > svg:nth-of-type(3) linearGradient stop {
  stop-color: rgba(246, 246, 246, 0.36);
}

.hero > svg:nth-of-type(3) radialGradient:nth-of-type(2) stop {
  stop-color: rgba(84, 84, 86, 0.32);
}

.hero > svg:nth-of-type(3) radialGradient:nth-of-type(3) stop {
  stop-color: rgba(84, 84, 86, 0.36);
}

@media (min-width: 1920px) {
  .hero .container {
    padding-top: 190px;
  }
}

@media (max-width: 1023px) {
  .hero .container {
    padding-top: 110px;
  }
  .hero > svg path:last-of-type {
    display: none;
  }
  .hero__content {
    max-width: 90%;
  }
  .hero__content p {
    max-width: 575px;
  }
  .hero-search-heading {
    font-size: 48px;
  }
}
@media (max-width: 767px) {
  .hero .container {
    padding-top: 155px;
  }
  .hero__content {
    max-width: 595px;
    width: 100%;
    margin: 0 auto;
  }
  .hero__content p {
    margin-bottom: 40px;
  }
  .hero-search-heading {
    max-width: none;
    width: 100%;
    margin: 0 auto 32px;
    font-size: 34px;
    font-weight: 797;
    line-height: 1.08;
    text-align: center;
    white-space: nowrap;
  }
}

.hero-inner {
  position: relative;
  max-width: 570px;
  width: 100%;
  margin-top: 24px;
}

.hero .search, .error-page .search {
  max-width: 570px;
}

.hero .search input[type=search], .error-page .search input[type=search]{
  border-radius: 50px;
  padding: 12px 150px 12px 50px;
  outline: none;
  color: rgba(0, 0, 0, 1);
}
.hero .search input[type=submit], .error-page .search input[type=submit]{
  position: absolute;
  right: 0;
  padding: 10px 30px;
  border-radius: 50px;
  top: 50%;
  transform: translate(-6px, -50%);
  font-size: 14px;
  font-weight: 500;
  line-height: 120%; /* 21.6px */
  letter-spacing: 0.63px;
  cursor: pointer;
  transition: all .3s ease;
  background-color: rgba(0, 0, 0, 1);
  border: 1px solid rgba(0, 0, 0, 1);
  color: rgba(255, 255, 255, 1);
}
.hero .search input[type=submit]:hover, .error-page .search input[type=submit]:hover {
  background-color: rgba(0, 0, 0, 1);
  border: 1px solid rgba(0, 0, 0, 1);
  /*color: rgba(255, 255, 255, 1);*/
  color: rgba(6, 212, 255, 1);
}
.hero .search-icon, .error-page .search-icon {
  left: 20px;
}

.popular-keywords {
  display: flex;
  gap: 10px;
  margin-top: 30px;
} 
.popular-keywords p {
  margin-bottom: 0;
  padding: 4px 0;
  font-size: 16px;
  max-width: 40%;
  color: rgba(255, 255, 255, 1);
}
.popular-keywords__items {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
}
.popular-keywords a {
  letter-spacing: 0.16px;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  padding: 4px 8px;
  border-radius: 50px;
  background-color: rgba(0, 0, 0, 1);
  border: 1px solid rgba(6, 212, 255, 1);
  color: rgba(6, 212, 255, 1);
}

.popular-keywords a:hover {
  background-color: transparent;
  border: 1px solid #AFB9C2;
  color: rgba(255, 255, 255, 1);
}

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

.page-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@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 h1 {
  color: rgba(255, 255, 255, 1);
}
.topic-page .page-header h1 {
  color: rgba(255, 255, 255, 1);
}
.page-header-description {
  margin: 10px 0 30px 0;
  word-break: break-word;
}
@media (min-width: 1024px) {
  .page-header-description {
    flex-basis: 100%;
  }
}
.page-header .icon-lock {
  height: 20px;
  width: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

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


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

.page-header .dropdown-toggle:hover svg, .page-header .dropdown-toggle[aria-expanded='true'] svg {
  transform: rotate(90deg);
  color: rgba(6, 212, 255, 1);
}


.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 {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 50px;
}
.topics-item {
  padding: 30px;
  width: calc(50% - 15px);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.3);
}
.topics-item > h5 {
  margin-bottom: 15px;
}
.blocks-item {
  display: flex;
  width: calc(50% - 15px);
  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% / 2);
}

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

.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: $text_color;
}
.blocks-item-link {
  color: $brand_color;
  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 $brand_color;
  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: rgba(255, 255, 255, 1);
  cursor: pointer;
}
.blocks-item-title:hover h5 {
  color: rgba(6, 212, 255, 1);
}
.blocks-item-description {
  margin: 0;
}
.blocks-item-description:not(:empty) {
  margin-top: 10px;
}
@media (max-width:1023px) {
  .blocks-item {
    width: calc(50% - 15px);
  }
  .topics-item {
    width: calc(50% - 15px);
  }
}
@media (max-width:767px) {
  .blocks-list {
    margin-top: 35px;
    gap: 20px;
    flex-direction: column;
    align-items: center;
  }
  .blocks-item {
    max-width: 470px;
    width: 100%;
  }
  .topics-item {
    max-width: 470px;
    width: 100%;
  }
}

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


/* Introduction */
.introduction {
  position: relative;
  z-index: 2;
  margin-top: 140px;
}

.introduction .container {
  padding-top: 0;
}

.introduction__items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.introduction__item {
  width: calc(25% - 15px);
  min-height: 250px;
  display: flex;
  padding: 24px;
  border-radius: 12px;
  flex-direction: column;
  position: relative;
  /*border-right: 10px solid rgba(3, 212, 255, 1);
  background-color: #fff;*/
  background-color: rgba(0, 212, 255, 0.3);
  opacity: 0.3;
}

.introduction__item-content {
  flex: 1;
  margin-bottom: 40px;
}

/* Move the see more link to bottom */
.introduction__item .see-more {
  position: absolute;
  bottom: 30px;
  left: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
}
.introduction__item:nth-of-type(2) {
  /*border-right: 10px solid rgba(3, 212, 255, 1);*/
}

.introduction__item:nth-of-type(3) {
  /*border-right: 10px solid rgba(3, 212, 255, 1);*/
}

.introduction__item img {
  width: 40px;
  height: 40px;
}
.introduction__item h4 {
  position: relative;
  margin: 20px 0 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  transition: all .3s ease;
  line-height: 1.4;
  min-height: 52px;
  color: $text-primary;
}

.introduction__item h4 a {
  position: absolute;
  width: 100%;
  height: 100%;
}

.introduction__item h4 svg {
  flex: 0 0 auto;
  margin-top: 4px;
}

.introduction__item h4 span {
  flex: 1;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.introduction__item h4:hover svg {
  transform: rotate(45deg);
}

.introduction__item h4:hover svg path {
  stroke: rgba(6, 212, 255, 1);
}

.introduction__item h4:hover {
  color: rgba(6, 212, 255, 1);
}
@media (max-width: 1023px) {
  .introduction__item {
    width: calc(50% - 10px);
  }
}

@media (max-width: 767px) {
  .introduction {
    margin-top: 60px;
  }
  .introduction__items {
    gap: 16px;
  }
  .introduction__item {
    max-width: 370px;
    width: 100%;
  }
}

/* Quick Links */
.quick-links.section {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 1) 30%,
    rgba(0, 36, 43,1) 100%
  ); 
  /*background-color: transparent;*/
}

.quick-links .h2 {
  text-align: center;
  max-width: 750px;
  margin: 20px auto 20px;
  stroke: rgba(0, 0, 0, 1);
}

.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;
  color: rgba(0, 0, 0, 1);
}

.quick-links__item {
  position: relative;
  width: calc(50% - 15px);
  display: flex;
  gap: 30px;
  border-radius: 10px;
  padding: 40px;
  text-align: left;
  /*background-color: rgba(243, 243, 243, 1);*/
  background-color: rgba(255, 255, 255, 0.3);
}

.quick-links__item:first-of-type {
  /* background-color: rgba(243, 243, 243, 1);*/
  /*background-image: linear-gradient(
    90deg,
    rgba(0, 212, 255, 0.3) 0%,
    rgba(0,   0,   0, 0.3) 100%
  );*/
  background-color: rgba(255, 255, 255, 0.3);
}

.quick-links__item:first-of-type h4 a, .quick-links__item:first-of-type p, .quick-links__item:first-of-type div div {
  color: rgba(255, 255, 255, 1);
}

.quick-links__item:first-of-type h4 a:hover {
  color: rgba(6, 212, 255, 1);
}

.quick-links__item h4 a, 
.quick-links__item p, 
.quick-links__item div div {
  color: rgba(255, 255, 255, 1);
}

.quick-links__item img {
  flex: 0 0 auto;
  max-width: 60px;
  max-height: 60px;
  color: rgba(255, 255, 255, 1);
}

.quick-links__item h4 {
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 1);
}

/*.quick-links__item p {
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 1);
}*/


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

.quick-links__item div div {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  width: fit-content;
  font-size: 14px;
  color: rgba(255, 255, 255, 1);
}

.quick-links__item div svg path {
  stroke: rgba(255, 255, 255, 1);
}

.quick-links__item:first-of-type div svg path {
  stroke: rgba(255, 255, 255, 1);
}

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

/* Resources */
.resources {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(0, 36, 43, 1) 0%,
    rgba(0, 71, 85, 1) 100%
  );
  /*background-color: transparent;*/
}

.resources > svg {
  position: absolute;
  z-index: 1;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
}

.resources > svg radialGradient:first-of-type stop {
  stop-color: rgba(245, 245, 245, 0.34);
}

.resources > svg radialGradient:nth-of-type(2) stop {
  stop-color: rgba(246, 246, 246, 0.36);
}

.resources > svg radialGradient:last-of-type stop {
  stop-color: rgba(84, 84, 86, 0.32);
}

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

.resources__items {
  display: flex;
  flex-wrap: wrap;
  gap: 80px;
  box-sizing: border-box;
  padding-left:8px;
}

.resources__item {
  width: calc(33.3% - 20px);
  padding: 30px;
  border-radius: 10px;
  text-align: left;
  border: 1px solid #AFB9C2;
  /*background-color: #fff;*/
  background-color: rgba(255, 255, 255, 0.3);
}

.resources__item img {
  width: 40px;
  height: 40px;
  margin-bottom: 30px;
}

.resources__item p {
  margin: 12px 0 30px;
}

.resources__item > a {
  padding: 8px 36px;
  border-radius: 50px;
  display: inline-block;
  font-size: 0;
  border: 1px solid #AFB9C2;
}

.resources__item > a svg path {
  stroke: rgba(255, 255, 255, 1);
}

.resources__item > a:hover {
  background-color: rgba(6, 212, 255, 1);
  border: 1px solid rgba(255, 255, 255, 1);
}

.resources__item > a:hover svg {
  transform: rotate(45deg);
}

.resources__item > a:hover svg path {
  stroke: rgba(255, 255, 255, 1);
}

@media (max-width: 1023px) {
  .resources__item {
    width: calc(50% - 15px);
  }
}

@media (max-width: 767px) {
  .resources__items {
    gap: 20px;
    justify-content: center;
  }
  .resources__item {
    max-width: 370px;
    width: 100%;
  }
}

/* Explore Topics */
.categories {
  /*background-color: rgba(243, 243, 243, 1);*/
  background: linear-gradient(
    180deg,
    rgba(0, 36, 43, 1) 0%,
    rgba(0, 71, 85, 1) 100%
  );
  /*background-color:transparent;*/
}

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

.categories__header {
  max-width: 750px;
  text-align: center;
  margin: 0 auto 60px;
}

.categories__header p {
  margin: 20px auto 0;
  max-width: 645px;
}

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

.categories__head > div, .videos__head > div {
  flex: 0 0 auto;
}

.categories__sections, .categories__list {
  margin-top: 60px;
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.categories__list {
  margin-top: 0;
}

.categories__section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: calc(33.3% - 20px);
  padding: 30px;
  border-radius: 10px;
  gap: 40px;
  /*background-color: #fff;*/
  background-color: rgba(255, 255, 255, 0.3);
}

.categories__section > a {
  width: fit-content;
}

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

.categories__list .categories__section:nth-child(n+7) {
  display: flex;
}

.categories__section > a {
  background-color: transparent;
  color: rgba(0, 0, 0, 1);
  border: 1px solid #AFB9C2;
}

.categories__section > a:hover {
  background-color: rgba(0, 0, 0, 1);
  color: rgba(0, 0, 0, 1);
  border: 1px solid rgba(0, 0, 0, 1);
}

.categories__section ul {
  margin-top: 30px;
}

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

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

.categories__section li svg path {
  fill: rgba(255, 255, 255, 1);
}

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

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

.categories-layout2 {
  background-color: transparent;
}

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

.categories-layout2 .categories__section {
  /*background-color: rgba(243, 243, 243, 1);*/
  background-color: rgba(255, 255, 255, 0.3);
}

.categories-layout2 .categories__section > a {
  background-color: transparent;
  /*border: 1px solid rgba(255, 255, 255, 1);*/
  border: 1px solid #ffffff;
  color: rgba(255, 255, 255, 1);
}

.categories-layout2 .categories__section > a:hover {
  background-color: #C7CAD0;
  border: 1px solid #fff;
  /*color: rgba(6, 212, 255, 1);*/
  color: rgba(255, 255, 255, 1);
}

.categories-layout2 .categories__section li:nth-child(3) {
  display: flex;
}

.categories-layout2 .categories__section li:nth-child(2) {
  margin-bottom: 20px;
}

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

.categories-layout2 .categories__section h5 a {
  color: rgba(255, 255, 255, 1);
}

.categories-layout2 .categories__section li a {
  color: rgba(255, 255, 255, 1);
}

.categories-layout2 .categories__section h5 a:hover, .categories-layout2 .categories__section li a:hover {
  /*color: rgba(6, 212, 255, 1);*/
  color: rgba(255, 255, 255, 1);
}

.categories-layout2 .categories__section li svg path {
  fill: rgba(255, 255, 255, 1);
}

@media (max-width: 1023px) {
  .categories > svg {
    display: none;
  }
  .categories__sections {
    margin-top: 40px;
    justify-content: center;
  }
  .categories__header {
    margin-bottom: 40px;
  }
  .categories__list {
    justify-content: center;
  }
  .categories__section {
    max-width: 370px;
    width: calc(50% - 15px);
  }
}
@media (max-width: 767px) {
  .categories__sections, .categories__list {
    gap: 20px;
  }
  .categories__head {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  .categories__section {
    width: 100%;
  }
  .categories__section ul {
    margin-top: 20px;
  }
  .categories .container {
    gap: 60px;
  }
  .categories__head > div, .videos__head > div {
    display: none;
  }
}

/***** Promoted articles *****/
.promoted-articles {
  position: relative;
}

.promoted-articles .container .h2 {
  text-align: center;
  max-width: 750px;
  margin: 0 auto 60px;
}

.promoted-articles__items {
  display: flex;
  gap: 20px 60px;
  flex-wrap: wrap;
}
.promoted-articles__item {
  width: calc(33.3% - 40px);
}
.promoted-articles__item a {
  border-bottom: 1px solid rgba(0, 0, 0, 1);
  color: rgba(0, 0, 0, 1);
}
.promoted-articles__item a:hover {
  color: rgba(6, 212, 255, 1);
  border-bottom: 1px solid rgba(6, 212, 255, 1);
}

@media (max-width: 1023px) {
  .promoted-articles__item {
    width: calc(50% - 30px);
  }
}
@media (max-width: 767px) {
  .promoted-articles .container > .h2 {
    margin-bottom: 40px;
  }
  .promoted-articles__item {
    max-width: 470px;
    width: 100%;
  }
}

/* VIDEOS */

.videos {
  text-align: center;
  /*background-color: rgba(243, 243, 243, 1);*/
  background: linear-gradient(
    180deg,
    rgba(0, 71, 85, 1) 0%,
    rgba(0, 36, 43, 1) 100%
  );
  /*background-color: transparent;*/
}

.videos__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  text-align: left;
}

.videos__list{
  margin-top: 60px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
  flex-wrap: wrap;
}

.videos__item{
  max-width: 370px;
  width: calc(33.3% - 20px);
  position: relative;
  transition: all .3s ease;
}

.videos__img {
  display: flex;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  z-index: 2;
  height: 200px;
  border-radius: 10px;
  transition: all .3s ease;
}

.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 rect {
  fill: transparent;
}

.videos__img path {
  fill: rgba(255, 255, 255, 1);
}

.videos__img:hover {
  opacity: .8;
}

.videos__img:hover rect {
  fill: transparent;
}

.videos__img:hover path {
  fill: rgba(6, 212, 255, 1);
}

.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__list {
    margin-top: 40px;
  }
  .videos__item{
    width: calc(50% - 15px);
  }
}

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

/* FAQ */

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

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

.faq__items {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.faq__item {
  width: 100%;
  cursor: pointer;
  padding: 30px;
  border-radius: 10px;
  align-self: flex-start;
  background-color: rgba(243, 243, 243, 1);
}

.faq__item h5 {
  position: relative;
  padding-right: 20px;
  transition: all .3s ease;
}

.faq__item:hover h5 {
  color: rgba(6, 212, 255, 1);
}

.faq__item h5::after {
  content: '+';
  position: absolute;
  line-height: 1.1;
  right: 0;
  transition: transform 0.3s ease-in-out;
}

.faq__item.open h5 {
  margin-bottom: 12px;
  color: rgba(6, 212, 255, 1);
}

.faq__item.open h5::after {
  content: '-';
  transform: rotate(180deg);
}

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

.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__item {
    padding: 20px;
  }
}
@media (max-width: 767px) {
  .faq .container > p {
    margin-bottom: 40px;
  }
  .faq__items {
    gap: 20px;
  }
}


/* Find Solution */
.find-solution {
  position: relative;
  padding: 60px 0 260px;
  overflow: hidden;
  /*background-color: rgba(243, 243, 243, 1);*/
  /*background-color: transparent;*/
  background:black;
}

.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: rgba(245, 245, 245, 0.34);
}

.find-solution > svg radialGradient:nth-of-type(2) stop {
  stop-color: rgba(246, 246, 246, 0.36);
}

.find-solution > svg radialGradient:last-of-type stop {
  stop-color: rgba(84, 84, 86, 0.32);
}

.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: #fff;*/
  background-color: rgba(255, 255, 255, 0.3);
}

.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 .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: 770px;
  width: 100%;
}
.submit-request-page form, .new-post-page form {
  color: rgba(255, 255, 255, 1);
}
.searchbox-suggestions a {
  color: rgba(0, 0, 0, 1);
}
.searchbox-suggestions a:hover {
  color: rgba(6, 212, 255, 1);
}

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

@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 {
  text-align: center;
  padding-top: 60px;
  padding-bottom: 100px;
  flex-grow: 1;
}
.error-page .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.error-page .hero-inner {
  max-width: 565px;
  width: 100%;
}
.error-page h1 {
  font-size: 120px;
  font-weight: 600;
  margin-bottom: 25px;
  color: rgba(255, 255, 255, 1);
}
.error-page h3 {
  max-width: 480px;
  color: rgba(255, 255, 255, 1);
}
.error-page .container>a {
  font-size: 22px;
  font-weight: 400;
  margin: 30px 0 50px;
  color: rgba(6, 212, 255, 1);
}
.error-page .container>a:hover {
  color: rgba(255, 255, 255, 1);
}

@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: 44px;
}
.recent-activity-list {
  display: flex;
  margin-top: 60px;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
}
.recent-activity-item {
  text-align: left;
  padding: 30px;
  width: calc(33.3% - 20px);
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 1);
  color: rgba(255, 255, 255, 1);
}

.homepage-activity {
  background-color: rgba(243, 243, 243, 1);
}

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

.homepage-activity .recent-activity-item {
  border: none;
  background-color: #fff;
}

.recent-activity-item h3 {
  font-size: 0;
  margin-bottom: 30px;
}
.recent-activity-item-parent {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  /*padding: 4px 10px;*/
  /*background-color: #fff;*/
  background-color: transparent;
  color: rgba(255, 255, 255, 1);
  border-radius: 8px;
}

.recent-activity-item-parent:hover {
  /*background-color: rgba(0, 0, 0, 1);*/
  background-color: transparent;
  color: rgba(6, 212, 255, 1);
}

.homepage-activity .recent-activity-item-parent {
  border: none;
  background-color: rgba(0, 0, 0, 1);
  color: rgba(255, 255, 255, 1);
}

.homepage-activity .recent-activity-item-parent:hover {
  border: none;
  background-color: rgba(0, 0, 0, 1);
  color: rgba(0, 0, 0, 1);
}

.recent-activity-item-link {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 1);
}

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

.recent-activity-item-link:hover {
  color: rgba(6, 212, 255, 1);
}

.recent-activity-item-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
.recent-activity-item-time, .recent-activity-item-comment {
  display: inline-block;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 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: $link_color;
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: $visited_link_color;
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: rgba(6, 212, 255, 1);
}
.recent-activity-accessibility-label {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.recent-activity-comment-icon svg {
  vertical-align: middle;
  color: $brand_color;
  width: 16px;
  height: 16px;
}
.recent-activity-comment-icon svg path {
  stroke: $highlight_color;
}
.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 {
  background-color: rgba(20, 24, 24, 1);
}

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

.category-page .hero h1 {
  max-width: 900px;
  text-align: center;
  margin-bottom: 0;
  margin-bottom: 40px;
}

.category-page .hero p {
  text-align: center;
  font-size: 20px;
  margin-bottom: 60px;
  max-width: 800px;
  color: rgba(20, 24, 24, 1);
}

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

.category-page__content {
  padding-top: 100px;
}

.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: 100px;
  justify-content: center;
}

.category-page__section-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 50px;
}

.category-page__section-heading a {
  flex: 0 0 auto;
  text-transform: capitalize;
}


.category-page__articles {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.category-page__article {
  padding: 30px;
  border-radius: 10px;
  width: calc(33.3% - 20px);
  background-color: rgba(255,255,255,0.3);
}

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

.category-page__article > div:first-of-type, .section-page__article > div:first-of-type, .striped-list-item-body {
  max-height: 67px;
  overflow: hidden;
  margin: 20px 0 30px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.category-page__article > div:first-of-type a, .section-page__article > div:first-of-type a {
  color: rgba(6, 212, 255, 1);
}

.category-page__article > div:first-of-type a:hover, .section-page__article > div:first-of-type a:hover {
  color: rgba(0, 0, 0, 1);
}

.category-page__article > div:last-of-type, .section-page__article > div:last-of-type, .featured-posts-btn {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  width: fit-content;
  font-size: 14px;
  transition: all .3s ease;
}

.category-page__article > div:last-of-type a, .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%;
}

.category-page__article > div:last-of-type svg path, .section-page__article > div:last-of-type svg path, .featured-posts-btn svg path {
  stroke: rgba(255, 255, 255, 1);
}

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

.category-page__article > div:last-of-type:hover, .section-page__article > div:last-of-type:hover, .featured-posts-btn:hover {
  color: rgba(6, 212, 255, 1);
}

.category-page__article > div:last-of-type:hover svg path, .section-page__article > div:last-of-type:hover svg path, .featured-posts-btn:hover svg path {
  stroke: rgba(6, 212, 255, 1);
}


@media(max-width: 1279px) {
  .category-page .hero .container {
    padding-top: 150px;
  }
}

@media(max-width: 1023px) {
  .category-page .hero .container {
    padding-top: 110px;
  }
  .category-page .hero p {
    max-width: 700px;
  }
  .category-page__content {
    padding-top: 80px;
  }
  .category-page__section-heading {
    margin-bottom: 40px;
  }
  .category-page__sections {
    gap: 60px;
  }
  .category-page__articles {
    gap: 30px;
  }
  .category-page__article {
    width: calc(50% - 15px);
  }
}

@media(max-width: 767px) {
  .category-page__content {
    padding-top: 60px;
    text-align: center;
  }
  .category-page__section-heading {
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
  }
  .category-page__sections {
    text-align: left;
  }
  .category-page__article {
    width: 100%;
  }
  .category-page .hero p {
    margin-bottom: 40px;
  }
  .category-page__section-heading a {
    display: none;
  }
}


/***** Section pages *****/
.section-page {
  padding-top: 80px;
}

.section-page>.container {
  position: relative;
  display: flex;
}

.nav {
  width: 27%;
  position: sticky;
  top: 94px;
  align-self: start;
  padding: 20px 20px 40px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 1);
}

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

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

.nav .search {
  margin: 0;
}

.nav input[type=search]{
  padding: 10px 20px 10px 50px;
  border-radius: 8px;
}

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

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

.nav__list, .nav__articles {
  
}

.nav__category {
  margin-bottom: 20px;
}

.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 {
  fill: rgba(0, 0, 0, 1);
  stroke: rgba(0, 0, 0, 1);
}

.nav__sections {
  display: none;
  padding-left: 20px;
  margin-top: 15px;
  flex-direction: column;
  align-items: start;
  border-left: 2px solid rgba(0, 0, 0, 1);
}

.nav__sections.open {
  display: flex;
}

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

.nav__heading.active g {
  opacity: 0;
}

.nav__sections a {
  display: inline;
  margin-bottom: 15px;
  color: rgba(255, 255, 255, 1);
}

.nav__sections a:hover {
  color: rgba(6, 212, 255, 1);
}

.nav__sections a.active {
  color: rgba(6, 212, 255, 1);
  font-weight: 600;
}

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

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

.section-page__content {
  width: 73%;
  padding-left: 80px;
}

.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__articles {
  display: flex;
  flex-wrap: wrap;
  padding-top: 40px;
  gap: 30px;
}

.section-page__articles li {
  width: calc(50% - 15px);
}

.section-page__article {
  width: 100%;
  height: 100%;
  padding: 30px;
  border-radius: 10px;
  background-color: rgba(255,255,255,0.3);
}

@media (max-width: 1023px) {
  .section-page__content {
    width: 60%;
    padding-left: 30px;
  }
  .section-page__heading {
    align-items: start;
    gap: 20px;
    flex-direction: column;
  }
  .nav {
    width: 40%;
  }
  .section-page__articles li {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .section-page {
    padding-top: 60px;
  }
  .section-page>.container {
    flex-direction: column-reverse;
    gap: 50px;
  }
  .nav {
    width: 100%;
    position: static;
    max-width: none;
    border: none;
    color: rgba(0, 0, 0, 1);
  }
  .nav .search-container {
    margin-bottom: 30px;
  }
  .nav form {
    max-width: none;
  }
  .section-page__content {
    width: 100%;
    padding-left: 0;
    border-left: none;
  }
  .section-page__articles {
    gap: 20px;
  }
  .section-page__article {
    padding: 25px 20px;
  }
}

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

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

.nav__articles h6 li {
  color: rgba(255, 255, 255, 1) !important;
}

.nav__articles ul {
  padding-left: 20px;
  margin-top: 20px;
  flex-direction: column;
  align-items: start;
  border-left: 1px solid rgba(0, 0, 0, 1);
}

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

.nav__articles li:last-child {
  color: rgba(0, 0, 0, 1) !important;
  margin-bottom: 0;
}

.nav__articles .current-article {
  color: rgba(6, 212, 255, 1);
  font-weight: 600;
}

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

.article-container {
  width: 73%;
  display: flex;
  flex-direction: column;
  padding-left: 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;
  color: $text-primary;
}

@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: 18px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.18px;
    color: rgba(255, 255, 255, 1);
}

.article-meta a:hover, .post-meta a:hover {
  color: rgba(6, 212, 255, 1);
}

.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: 40px;
}

.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;
  color: $text-primary; !important
}

.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: rgba(6, 212, 255, 1);
}

.article-body a:hover, .post-body a:hover, .comment-body a:hover {
  color: rgba(255, 255, 255, 1);
}
.article-body li, .post-body li, .comment-body li {
  font-size: 16px;
  margin: 5px 0;
  line-height: 1.4;
  color: rgba(255, 255, 255, 1);
}
.article-body img {
  height: auto;
  max-width: 100%;
}
.article-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figure.image {
  display: table;
  margin: 0 auto;
}
.article-body figure.image > img {
  display: block;
  width: 100%;
}
.article-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: 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: 0 20px;
  border-left: 2px solid rgba(0, 0, 0, 1);
  margin: 0;
  color: rgba(0, 0, 0, 1);
}
.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: rgba(255, 255, 255, 1);
}
.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 #AFB9C2;
}
.article-comment-count {
  color: lighten($text_color, 20%);
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: $brand_color;
  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: rgba(255, 255, 255, 1);
}
.article-votes-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 15px 0;
}
.article-votes {
  border-radius: 10px;
  padding: 40px;
  text-align: center;
  margin-top: 40px;
  background: rgba(255,255,255,0.3);
}

.article-votes a {
  font-weight: 600;
  font-size: 16px;
}
.article-vote {
  padding: 8px 20px;
  line-height: 1;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  background-color: #fff;
}
.article-vote path {
  fill: rgba(0, 0, 0, 1);
}
.article-vote:hover {
  background-color: rgba(255, 255, 255, 1);
}
.article-vote:hover path {
  fill: rgba(0, 0, 0, 1);
}
.article-votes-count {
  margin-bottom: 10px;
}
.article-votes-request a {
  color: rgba(6, 212, 255, 1);
}
.article-votes-request a:hover {
  color: rgba(255, 255, 255, 1);
}
.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}
.article-more-questions a {
  color: $link_color;
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: $visited_link_color;
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: rgba(6, 212, 255, 1);
}
.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: $text_color;
  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 10px;
  background-color: transparent;
  border-radius: 8px;
  color: rgba(255, 255, 255, 1) !important;
}
.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;
  color: rgba(0, 0, 0, 1);
}

.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(255, 255, 255, 1);
}
.recent-articles li a:hover,
.related-articles li a:hover {
  color: rgba(6, 212, 255, 1);
}

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

@media (max-width: 767px) {
  .article-page {
    padding-top: 60px;
  }
  .article-page>.container {
    flex-direction: column-reverse;
    gap: 20px;
  }
  .article-container {
    width: 100%;
    padding-left: 0;
    border-left: 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;
  }
}

/***** 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: $text_color;
  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: rgba(255, 255, 255, 1);
}
.upload-dropzone span a {
  font-size: 16px;
  font-weight: 400;
  color: rgba(6, 212, 255, 1);
}
.upload-dropzone:hover span a {
  color: rgba(255, 255, 255, 1);
}

/***** 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: rgba(255, 255, 255, 1);
}
.share a:hover path {
  fill: rgba(6, 212, 255, 1);
}

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

/***** Comments *****/
/* Styles comments inside articles, posts and requests */
.comment {
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid #AFB9C2;
}
.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: 50px 0 5px;
}
.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: rgba(6, 212, 255, 1);
  text-decoration: underline;
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: rgba(255, 255, 255, 1);
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: lighten($text_color, 20%);
  font-size: 13px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid $brand_color;
  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: rgba(255, 255, 255, 1);
}
.comment-meta a:hover {
  color: rgba(6, 212, 255, 1);
}
.comment-meta h6 {
  font-size: 18px;
  transition: all .3s ease;
  color: rgba(255, 255, 255, 1);
}
.comment-meta a:hover h6 {
  color: rgba(6, 212, 255, 1);
}
.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: 30px;
}

@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: $brand_color;
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
  /*font-family: Inter, Arial, sans-serif;*/
  font-family: 'Inter', sans-serif !important;
  overflow-x: auto;
}
.comment-body p {
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
}
.comment-body a {
  color: $link_color;
  text-decoration: underline;
}
.comment-body a:visited {
  color: $visited_link_color;
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: rgba(6, 212, 255, 1);
}
.comment-body img {
  height: auto;
  max-width: 100%;
}
.comment-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figure.image {
  display: table;
  margin: 0 auto;
}
.comment-body figure.image > img {
  display: block;
  width: 100%;
}
.comment-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: 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: lighten($text_color, 20%);
  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: rgba(255, 255, 255, 1);
}
.vote button:hover path {
  stroke: rgba(6, 212, 255, 1);
}

.comment-actions path, .actions button path {
  stroke: rgba(255, 255, 255, 1);
}
.comment-actions button:hover path, .actions button:hover path {
  stroke: rgba(6, 212, 255, 1);
}
.comment-actions circle, .actions button circle {
  stroke: rgba(255, 255, 255, 1);
}
.comment-actions button:hover circle, .actions button:hover circle {
  stroke: rgba(6, 212, 255, 1);
}

.vote-sum {
  color: #ccc;
  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: $brand_color;
}

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

.vote-voted {
  color: $brand_color;
}

.vote-voted:hover {
  color: darken($brand_color, 20%);
}

/***** 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: rgba(255, 255, 255, 1);
}

/***** 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;
  background-color: transparent;
}
.community-header .title {
  margin-bottom: 0;
  font-size: 18px;
  transition: all .3s ease;
}

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

.featured-posts {
  display: flex;
  flex-wrap: wrap;
  margin-top: 50px;
  gap: 30px;
}
.featured-posts-item {
  border-radius: 10px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.3);
  width: calc(33.3% - 20px);
}
.featured-posts-item a {
  display: block;
  width: fit-content;
}
.featured-posts-btn {
  cursor: pointer;
  text-transform: capitalize;
  font-weight: 400;
  color: $text-primary;
}
.featured-posts-item-body {
  max-height: 67px;
  overflow: hidden;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  margin: 20px 0 30px;
  color: rgba(255, 255, 255, 1);
}
.featured-posts-item .icon-lock {
  vertical-align: baseline;
}

@media (max-width: 1023px) {
  .featured-posts-item {
    width: calc(50% - 15px);
  }
}
@media (max-width: 767px) {
  .featured-posts {
    margin-top: 35px;
    gap: 20px;
    justify-content: center;
  }
  .featured-posts-item {
    max-width: 470px;
    width: 100%;
  }
}

/* Community topics grid */
.topics {
  padding-top: 100px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background-color: transparent;
  /*background-image: url(/hc/theming_assets/01JZWGNYPAMJQMD30SE48FSBJ3); 
  background-size: 120%; 
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;*/
  /*background-image: url(/hc/theming_assets/01JKZDM3BFMN1N76F03HB0BJV9); 
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;*/

}
.topics h1 {
  text-align: left;
  color: rgba(255, 255, 255, 1);
}
.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;
}

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

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

/* Community topic page */
.topic-page {
  padding-top: 80px;
}
.topic-header {
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  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 {
  padding: 10px 20px;
  border-radius: 8px;
  transition: all .3s ease;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 50px;
}

.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'] {
  /*background-color: rgba(0, 0, 0, 1);*/
  background-color: white;
  color: rgba(6, 212, 255, 1);
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 50px;
}

.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 {
  fill: rgba(0, 0, 0, 1);
}


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

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


/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  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: 30px;
  width: calc(33.3% - 20px);
  border-radius: 10px;
  background-color: rgba(255,255,255,0.3);
} 

.topic-page .posts-item {
  background-color: rgba(255,255,255,0.3);
}

.striped-list-title {
  display: block;
  margin-right: 5px;
  color: rgba(255, 255, 255, 1);
}
.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: rgba(6, 212, 255, 1);
}
.striped-list-item .meta-group a:hover {
  color: rgba(255, 255, 255, 1);
}
.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(255, 255, 255, 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 {
  background-color: rgba(20, 24, 24, 1);
  padding-top: 100px;
}

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


@media (max-width: 1023px) {
  .post-list-page .community-featured-posts, .community-page .community-featured-posts {
  padding-top: 80px;
}
  .post-list-page .posts {
    padding-top: 80px;
  }
  .posts-item {
    width: calc(50% - 15px);
  }
}
@media (max-width: 767px) {
  .post-list-page .community-featured-posts, .community-page .community-featured-posts {
    padding-top: 60px;
  }
  .topic-page {
    padding-top: 60px;
  }
  .post-list-page .posts {
    padding-top: 60px;
  }
  .topic-header {
    flex-direction: column;
    align-items: start;
  }
  .striped-list {
    margin-top: 35px;
    gap: 20px;
    justify-content: center;
  }
  .posts-item {
    max-width: 470px;
    width: 100%;
  }
}

/***** Status labels *****/
/* Styles labels used in posts, articles and requests */
.status-label {
  background-color: rgba(255,255,255,0.3);
  border-radius: 8px;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-weight: 400;
  margin-right: 2px;
  padding: 5px 10px;
  vertical-align: middle;
  white-space: nowrap;
  display: inline-block;
}
.status-label:hover, .status-label:active, .status-label:focus {
  text-decoration: none;
}
.status-label-pinned, .status-label-featured, .status-label-official {
  background-color: $brand_color;
}
.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: lighten($text_color, 20%);
}
.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%;
  }
}
.post-container {
  display: flex;
  flex-direction: column;
  padding-bottom: 100px;
}
@media (min-width: 1024px) {
  .post-container {
    flex-direction: row;
  }
}
.post-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 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: Inter, Arial, sans-serif;*/
  font-family: 'Inter', sans-serif !important;
  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: lighten($text_color, 20%);
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: $brand_color;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 5px;
  vertical-align: middle;
}
.post-sidebar {
  border-top: 1px solid #ddd;
  flex: 1;
  padding-top: 30px;
  text-align: center;
}
@media (min-width: 1024px) {
  .post-sidebar {
    border: 0;
    flex: 1 0 25%;
    padding: 0 0 0 50px;
    text-align: initial;
  }
  [dir=rtl] .post-sidebar {
    padding: 0 50px 0 0;
  }
}
.post-sidebar .search-container {
  width: 100%;
  max-width: 565px;
  margin: 0 auto 30px;
  padding-left: 0;
}
.post-sidebar input[type=search]{
  padding: 10px 10px 10px 50px;
  border: 1px solid #AFB9C2;
  border-radius: 8px;
}

.post-sidebar input[type=search]::after {
  font-size: 15px;
}
.comment-form-controls label {
  margin-right: 30px;
  color: rgba(255, 255, 255, 1);
}
.post-sidebar-title {
  margin-bottom: 20px;
  font-size: 18px;
}
.post-comments {
  margin-bottom: 20px;
}

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


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

@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;
  border: 1px solid $brand_color;
}

.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: $text_color;
  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: rgba(255, 255, 255, 1);
  display: block;
}
.collapsible-nav-list li a:hover {
  color: rgba(6, 212, 255, 1);
}

.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 rgba(255, 255, 255, 1);
    padding-bottom: 8px;
    order: 1;
  }
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
  color: rgba(6, 212, 255, 1);
}

.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: transparent;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-toggle {
    display: none;
  }
}
.collapsible-sidebar-toggle path {
  stroke: #C7CAD0;
}
.request-sidebar .collapsible-sidebar-toggle path {
  stroke: rgba(255, 255, 255, 1);
}
[dir=rtl] .collapsible-sidebar-toggle {
  left: 0;
  right: auto;
}
.collapsible-sidebar-toggle-icon {
  display: none;
}
.collapsible-sidebar-toggle-icon path {
  stroke: rgba(255, 255, 255, 1);
}
.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 $brand_color;
}
.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: rgba(255, 255, 255, 1);
}
.my-activities-table .striped-list-title:hover {
  color: rgba(6, 212, 255, 1);
}
.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: 12px 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: lighten($text_color, 20%);
  font-size: 13px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: lighten($text_color, 20%);
  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 {
  border-radius: 8px;
  border: 1px solid #ddd;
  color: rgba(255, 255, 255, 1);
  background-color: #fff;
  text-align: inherit;
  padding: 8px 25px;
  width: 100%;
}
.request-main .comment-show-container:hover {
  color: rgba(6, 212, 255, 1);
}
.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 $brand_color;
}
.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 $brand_color;
}
.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: lighten($text_color, 20%);
  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: rgba(255, 255, 255, 1);
}
.pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover {
  color: rgba(6, 212, 255, 1);
}

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

.meta-group * {
  display: inline;
}

.meta-data {
  font-size: 16px;
  color: rgba(255, 255, 255, 1);
  margin-right: 10px;
}
.meta-data a {
  font-size: 16px;
  color: rgba(255, 255, 255, 1);
}
.meta-data a:hover {
  color: rgba(6, 212, 255, 1);
}

.meta-data .comment-link {
  color: rgba(6, 212, 255, 1);
}

.meta-data .comment-link:hover {
  color: rgba(255, 255, 255, 1);
}

.meta-group a p {
  font-weight: 400;
  font-size: 16px;
  transition: all .3s ease;
  color: rgba(6, 212, 255, 1);
}
.meta-group a:hover p {
  color: rgba(255, 255, 255, 1);
}
/* User Profiles */
.profile-header {
  margin-top: 60px;
  padding-bottom: 30px;
}

.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 $brand_color;
  border-radius: 4px;
  color: $brand_color;
  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: lighten($text_color, 20%);
  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: lighten($text_color, 20%);
  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: rgba(255, 255, 255, 1);
}
.profile-activity-contribution a:hover {
  color: rgba(6, 212, 255, 1);
}
.profile-contribution-title {
  margin: 0 0 5px 0;
  display: inline;
  line-height: 21px;
  font-size: 18px;
  vertical-align: middle;
}
.profile-contribution-title a {
  color: rgba(6, 212, 255, 1);
}
.profile-contribution-title a:hover {
  color: rgba(255, 255, 255, 1);
}

.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;
  }
  [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: rgba(0, 0, 0, 1);
  background-position: 50% 50%;
  text-align: center;
  color: rgba(0, 0, 0, 1);
}
[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%;
  }
}

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

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

.search-results-page .nav {
  padding: 40;
  background-color: rgba(255, 255, 255, 0.3);
}

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

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

.search-results-sidebar .sidenav-item {
  color: #C7CAD0;
}

.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: rgba(6, 212, 255, 1);
}


.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;
  color: rgba(255, 255, 255, 1);
}
.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(255, 255, 255, 1);
}
.search-results-sidebar .see-all-filters {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  padding: 10px;
  color: $link_color;
}
.search-results-sidebar .see-all-filters[aria-hidden=true] {
  display: none;
  color: rgba(255, 255, 255, 1);
}
.search-results-sidebar .see-all-filters:hover {
  text-decoration: underline;
}
.search-results-sidebar .see-all-filters::after {
  content: " ⌄";
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
}
.search-results-heading {
  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: rgba(6, 212, 255, 1);
}
.search-results-page .container .no-results .action-prompt a path {
  color: rgba(6, 212, 255, 1);
}
.search-results-page .container .no-results .action-prompt a:hover {
  color: rgba(255, 255, 255, 1);
}
.search-results-page .container .no-results .action-prompt a:hover path {
  color: rgba(255, 255, 255, 1);
}

.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: rgba(255, 255, 255, 1);
}
.search-result-title a:hover {
  color: rgba(255, 255, 255, 1);
}
.search-result-votes, .search-result-meta-count {
  color: lighten($text_color, 20%);
  font-size: 13px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: rgba(255, 255, 255, 1);
  vertical-align: middle;
  width: 13px;
  height: 13px;
}
[dir=ltr] .search-result-votes, [dir=ltr] .search-result-meta-count {
  margin-left: 20px;
}
[dir=rtl] .search-result-votes, [dir=rtl] .search-result-meta-count {
  margin-right: 20px;
}
.search-result-meta-container {
  color: #666;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .search-result-meta-container {
    flex-direction: row;
    align-items: center;
  }
}
@media (min-width: 1024px) {
  .search-result-meta-container nav {
    flex: 1;
  }
}
@media (min-width: 1024px) {
  [dir=ltr] .search-result-meta-container .meta-data {
    margin-left: 20px;
  }
}
@media (min-width: 1024px) {
  [dir=rtl] .search-result-meta-container .meta-data {
    margin-right: 20px;
  }
}

@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: rgba(255,255,255,0.3);
  color: rgba(255, 255, 255, 1);
}
.search-result-bottom {
  margin-top: 20px;
}
.search-result-bottom a {
  font-size: 14px;
  font-weight: 600;
  line-height: 140%;
  /*color: rgba(6, 212, 255, 1);*/
  color: rgba(255, 255, 255, 1);
}
.search-result-bottom a:hover {
  color: rgba(255, 255, 255, 1);
}
.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-family: 'Inter', sans-serif !important;
  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: transparent; !important
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  text-align: initial;
  vertical-align: middle;
  font-size: 18px;
  color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 50px;
}
.dropdown-toggle p {
  color: rgba(255, 255, 255, 1);
}
.dropdown-toggle span {
  font-size: 16px;
  font-weight: 500;
}
.dropdown-toggle:hover {
  text-decoration: none;
  color: rgba(6, 212, 255, 1);
}
.dropdown-toggle > * {
  display: inline-block;
  color: rgba(6, 212, 255, 1);
}
.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: #2f3941;
  cursor: pointer;
  display: block;
  padding: 7px 40px 7px 20px;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  text-align: start;
  line-height: inherit;
  width: 100%;
  font-weight: 400;
}
[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: rgba(6, 212, 255, 1);
}
.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(255, 255, 255, 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;
  }
}

.background-color {
  background-color: transparent;
}
/***** Padding-top *****/
.padding-top {
  padding-top: 40px;
}

@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;
  color: rgba(255, 255, 255, 1);
}

/***** Upload Dropzone *****/
.upload-dropzone {
  border: 1px solid rgba(213, 218, 222, 0.8);
  border-radius: 12px;
  background-color: $background_light_color;
}

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

.button {
  font-size: 14px;
  line-height: 120%;
  display: inline-block;
  padding: 10px 30px;
  font-weight: 500;
  border-radius: 50px;
}

.button-primary {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 1);
  color: $text_promary;
}

.button-primary:hover {
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(255, 255, 255, 1);
  color: rgba(6, 212, 255, 1);
}

.button-secondary {
  background-color: rgba(6, 212, 255, 1);
  border: 1px solid rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, 1);
}

.button-secondary:hover {
  background-color: rgba(6, 212, 255, 1);
  border: 1px solid rgba(0, 0, 0, 1);
  color: rgba(0, 0, 0, 1);
}

.submit-a-request.button-secondary {
  color: #000;
}

/* Force whole page background to solid black */
html,
body,
.hero-inner,
.quick-links.section,
.resources,
.categories,
.videos,
.page-header,
.section,
.section-page,
.category-page .hero,
.search-results-page,
.submit-request-page,
.post-list-page .hero-inner,
.footer {
  background: black !important;
  background-image: none !important;
}

.hero .search input[type=search] {
  background-color: rgba(20, 24, 24, 0.76) !important;
  color: #ffffff !important;
}

.hero .search input[type=search]::placeholder {
  color: #ffffff !important;
  opacity: 1;
}

.hero .search-icon path {
  fill: #ffffff !important;
}

.hero-inner {
  background: transparent !important;
}

.hero__content {
  background: transparent !important;
}

/* Introduction cards - Concept D circular icon tiles */

.introduction {
  margin-top: 80px;
}

.introduction__items {
  gap: 18px;
}

.introduction__item {
  width: 260px;
  min-height: 180px;
  aspect-ratio: 1.8 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  background: linear-gradient(180deg, #020809 0%, #000 100%) !important;
  border: 1px solid rgba(0, 229, 255, 0.25) !important;
  border-radius: 16px;
  padding: 26px 22px 24px;
  opacity: 1 !important;
  cursor: pointer;
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease, background 260ms ease !important;
  transform: translateY(0);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.introduction__item > * {
  position: relative;
  z-index: 2;
}

.introduction__item:hover {
  background:
    linear-gradient(
      180deg,
      #072a34 0%,
      #041b22 42%,
      #000 100%
    ) !important;
  border-color: rgba(0, 255, 255, 0.55) !important;
  box-shadow:
    inset 0 0 120px rgba(0, 255, 255, 0.08),
    inset 0 -20px 60px rgba(0, 180, 255, 0.08),
    0 0 0 1px rgba(0, 255, 255, 0.08),
    0 0 24px rgba(0, 255, 255, 0.18),
    0 12px 40px rgba(0, 0, 0, 0.7) !important;
  transform: translateY(-6px) scale(1.015) !important;
}

.introduction__item img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  margin: 16px auto 24px;
  filter: brightness(0) saturate(100%) invert(78%) sepia(86%) saturate(1701%) hue-rotate(137deg) brightness(105%) contrast(103%) !important;
}

.introduction__item h4 {
  color: #ffffff !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0 0 14px;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding-top:12px;
}

.introduction__item h4 a {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.introduction__item h4 svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 0;
}

.introduction__item h4 svg path {
  stroke: #00E5FF !important;
}

.introduction__item:hover h4 svg {
  transform: translateY(-1px) !important;
}

.introduction__item:hover h4 svg path {
  stroke: #00C2FF !important;
}

.introduction__item p {
  max-width: 220px;
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 14px;
  line-height: 1.45;
  margin: 0 auto;
}

.introduction__item::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at top center,
      rgba(0, 255, 255, 0.28) 0%,
      rgba(0, 180, 255, 0.12) 22%,
      rgba(0, 100, 180, 0.06) 38%,
      transparent 70%
    );
  opacity: 0;
  transition: opacity 0.45s ease;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.introduction__item::after {
  content: '';
  position: absolute;
  top: 26px;
  left: 50%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.25);
  box-shadow: inset 0 0 18px rgba(0, 229, 255, 0.08), 0 0 18px rgba(0, 194, 255, 0.08);
  transform: translateX(-50%);
  transition: border-color 260ms ease, box-shadow 260ms ease, background-color 260ms ease;
  pointer-events: none;
  z-index: 1;
}

.introduction__item:hover::before {
  opacity: 1;
}

.introduction__item:hover::after {
  background: rgba(0, 229, 255, 0.12);
  border-color: rgba(0, 255, 255, 0.45);
  box-shadow:
    inset 0 0 20px rgba(0, 255, 255, 0.18),
    0 0 30px rgba(0, 255, 255, 0.45);
}

.introduction__item:hover h4,
.introduction__item:hover p {
  text-shadow:
    0 0 12px rgba(0, 255, 255, 0.28),
    0 0 22px rgba(0, 255, 255, 0.12);
}

@media (max-width: 1023px) {
  .introduction__item {
    width: calc(50% - 9px);
  }
}

@media (max-width: 767px) {
  .introduction__item {
    max-width: 320px;
    width: 100%;
    min-height: 210px;
  }
}

/* Resource cards - match introduction card gradient */
.resources__item {
	width: 330px;
  min-height: 80px;
  aspect-ratio: 2 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  background: linear-gradient(180deg, #020809 0%, #000 100%) !important;
  border: 1px solid rgba(0, 229, 255, 0.25) !important;
  border-radius: 16px;
  padding: 26px 22px 24px;
  opacity: 1 !important;
  cursor: pointer;
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease, background 260ms ease !important;
  transform: translateY(0);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

section.resources:not(.featured-sections) .resources__item {
  min-height: 140px;
  position: relative;
}

section.resources:not(.featured-sections) .resources__item > a {
  position: absolute;
  left: 30px;
  bottom: 30px;
}


/* Main glow overlay */
.resources__item::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at top center,
      rgba(0, 255, 255, 0.28) 0%,
      rgba(0, 180, 255, 0.12) 22%,
      rgba(0, 100, 180, 0.06) 38%,
      transparent 70%
    );

  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
  z-index: 0;
}

/* Animated shine */
.resources__item::after {
  content: "";
  position: absolute;
  top: -120%;
  left: -40%;

  width: 180%;
  height: 220%;

  background: linear-gradient(
    120deg,
    transparent 20%,
    rgba(0, 255, 255, 0.08) 50%,
    transparent 80%
  );

  transform: rotate(12deg);
  opacity: 0;
  transition:
    opacity 0.5s ease,
    top 0.8s ease;

  pointer-events: none;
}

/* Hover */
.resources__item:hover {
  background:
    linear-gradient(
      180deg,
      #072a34 0%,
      #041b22 42%,
      #000 100%
    );

  /* DARK CYAN BORDER */
  border-color: rgba(0, 255, 255, 0.55);

  box-shadow:
    inset 0 0 120px rgba(0, 255, 255, 0.08),
    inset 0 -20px 60px rgba(0, 180, 255, 0.08),
    0 0 0 1px rgba(0, 255, 255, 0.08),
    0 0 24px rgba(0, 255, 255, 0.18),
    0 12px 40px rgba(0, 0, 0, 0.7);

  transform: translateY(-6px) scale(1.015);
}

/* Glow visible */
.resources__item:hover::before {
  opacity: 1;
}

/* Shine animation */
.resources__item:hover::after {
  opacity: 1;
  top: -20%;
}

/* Keep content above glow */
.resources__item > * {
  position: relative;
  z-index: 2;
}

/* Icon glow */
.resources__item:hover .icon-wrapper {
  box-shadow:
    0 0 30px rgba(0, 255, 255, 0.45),
    inset 0 0 20px rgba(0, 255, 255, 0.18);

  border-color: rgba(0, 255, 255, 0.45);
}

/* Text glow */
.resources__item:hover h3,
.resources__item:hover svg,
.resources__item:hover p {
  color: #fff;

  text-shadow:
    0 0 12px rgba(0, 255, 255, 0.28),
    0 0 22px rgba(0, 255, 255, 0.12);
}

.resources__item img {
  filter: brightness(0) invert(1) !important;
}

.resources__item h5,
.resources__item h5 a,
.resources__item p {
  color: #ffffff !important;
  
}

.resources__item > a {
  border-color: rgba(255, 255, 255, 0.68) !important;
}

.resources__item > a:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: #ffffff !important;
}

.resources__item > a svg path {
  stroke: #ffffff !important;
}

section.resources:not(.featured-sections) .resources__items > .resources__item:first-child > img {
  display: block;
}

section.resources:not(.featured-sections) .resources__items > .resources__item:first-child::before {
  content: "";
  display: none;
  width: 40px;
  height: 40px;
  margin-bottom: 30px;
  background-image: url("data:image/png;base64,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");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: brightness(0) invert(1);
}

/* Knowledge Base Heading */
.resources__heading {
  text-align: center;
  margin-bottom: 48px;
  color: transparent;
  font-size: 42px;
  font-weight: 700;
  background: linear-gradient(90deg, #ffffff 0%, #7eeeff 58%, #00d4ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.resources {
  padding: 28px 0 70px;
}

/* Heading */
.resources__heading {
  text-align: center;
  margin-bottom: 50px;
  font-size: 42px;
  font-weight: 700;
  color: transparent;
  background: linear-gradient(90deg, #ffffff 0%, #7eeeff 58%, #00d4ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Featured Sections */
.featured-sections {
  padding-top: 16px;
}

.featured-sections .resources__heading {
  text-align: center;
  margin-bottom: 48px;
}

.featured-sections__items {
  gap: 80px;
}

/* Make featured cards larger */
.featured-sections .resources__item {
  min-height: 320px;
  justify-content: center;
}

/* Better spacing */
.featured-sections .resources__item img {
  margin-bottom: 24px;
}

.featured-sections .resources__item h5 {
  margin-bottom: 14px;
}

.featured-sections .resources__item p {
  margin-bottom: 24px;
  line-height: 1.5;
}

.featured-sections__items .resources__item {
  width: 330px;
  height: 160px;
  min-height: 160px;
  padding: 16px 20px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
}

.featured-sections__items a {
  text-decoration: none;
  display: block;
  color: inherit;
}

.resources {
  position: relative;
  overflow: hidden;
  background: #000;
}

section.resources:not(.featured-sections) {
  margin-top: -24px;
}

.scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  --resources-orbit-center-y: 52%;
}

.resources .container {
  position: relative;
  z-index: 3;
}

/* EARTH */
.earth {
  position: absolute;

  top: var(--resources-orbit-center-y);
  left: 50%;

  width: 20rem;
  height: 20rem;

  transform: translate(-50%, -50%);

  z-index: 2;

  opacity: 0.58;
}

.earth img {
  width: 100%;
  height: 100%;
  object-fit: contain;

  filter:
    brightness(1.22)
    contrast(1.08)
    saturate(1.04)
    drop-shadow(0 0 28px rgba(0, 229, 255, 0.14));
}

/* ORBITS */
.orbit {
  position: absolute;
  top: var(--resources-orbit-center-y);
  left: 50%;

  transform: translate(-50%, -50%);
  transform-origin: center center;

  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);

  animation: orbitRotate 40s linear infinite;
  pointer-events: none;
}

/* All same duration = triangle stays fixed */
.orbit1 {
  width: 24rem;
  height: 24rem;
}

.orbit2 {
  width: 30rem;
  height: 30rem;
}

.orbit3 {
  width: 36rem;
  height: 36rem;
}

.satellite {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 2.5rem;
  height: 2.5rem;

  transform-origin: 0 0;
}

.satellite img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;

  transform: rotate(90deg);
}

/* Exact triangle positions */
.offset-1 {
  transform: rotate(0deg) translateX(11.3rem);
}

.offset-2 {
  transform: rotate(120deg) translateX(14.2rem);
}

.offset-3 {
  transform: rotate(240deg) translateX(17rem);
}

@keyframes orbitRotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ── Desktop-mode mobile fixes (additive only) ── */

@media (min-width: 768px) and (max-width: 1023px) {

  .introduction__items {
    justify-content: center;
  }

  .introduction__item {
    flex: 0 1 calc(50% - 9px);
    min-width: 0;
    max-width: 260px;
  }

  .resources__items {
    justify-content: center;
  }

  .resources__item {
    flex: 0 1 calc(50% - 40px);
    min-width: 0;
    max-width: 330px;
  }

  .featured-sections__items .resources__item {
    flex: 0 1 calc(50% - 40px);
    min-width: 0;
    max-width: 330px;
  }

  .section-page > .container {
    flex-wrap: wrap;
  }

  .nav {
    width: 100%;
    position: static;
  }

  .section-page__content {
    width: 100%;
    padding-left: 0;
  }

  .article-container {
    width: 100%;
    padding-left: 0;
  }

  .earth {
    width: 14rem;
    height: 14rem;
  }

  .orbit1 { width: 17rem; height: 17rem; }
  .orbit2 { width: 22rem; height: 22rem; }
  .orbit3 { width: 27rem; height: 27rem; }

  .offset-1 { transform: rotate(0deg)   translateX(8rem); }
  .offset-2 { transform: rotate(120deg) translateX(10.5rem); }
  .offset-3 { transform: rotate(240deg) translateX(13rem); }

  .footer__grid {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }

  .hero .search input[type=search] {
    padding-right: 130px;
  }

  .header__lists {
    gap: 16px;
  }

  .quick-links__item {
    flex-direction: column;
    align-items: flex-start;
  }

  .category-page__article {
    flex: 0 1 calc(50% - 15px);
    min-width: 0;
  }

  .posts-item {
    flex: 0 1 calc(50% - 15px);
    min-width: 0;
  }

  .featured-posts-item {
    flex: 0 1 calc(50% - 15px);
    min-width: 0;
  }
}


@media (min-width: 768px) and (max-width: 1023px) {
  .introduction__items {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 12px;
    align-items: stretch;
  }

  .introduction__item {
    flex: 0 0 240px;   /* fixed equal width */
    width: 240px;
    padding: 22px 16px 20px !important;
    min-height: 170px !important;
    height: auto !important;

    display: flex;
    flex-direction: column;
    align-self: stretch !important;
    justify-content: flex-start !important;
  }

  .introduction__item img {
    width: 26px !important;
    height: 26px !important;
    margin: 12px auto 20px !important;
  }

  .introduction__item h4 {
    font-size: 14px !important;
    margin: 0 0 10px !important;
  }

  .introduction__item::after {
    width: 54px !important;
    height: 54px !important;
    top: 20px !important;
  }
}
/* ── Contact Support Section ── */
.contact-support {
  background: #000;
  padding-top: 0;
  padding-bottom: 80px;
}

.contact-support__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  background: linear-gradient(180deg, #020809 0%, #000 100%);
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-radius: 16px;
  padding: 48px 52px;
  position: relative;
  overflow: hidden;
}

.contact-support__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(0,255,255,0.06) 0%, transparent 60%);
  pointer-events: none;
}

.contact-support__heading {
  font-size: 28px !important;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: 12px !important;
  background: linear-gradient(90deg, #ffffff 0%, #7eeeff 58%, #00d4ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.contact-support__sub {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 15px !important;
  margin-bottom: 28px !important;
  line-height: 1.5;
}

.contact-support__cta {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid rgba(0, 229, 255, 0.5);
  color: #00d4ff !important;
  background: transparent;
  transition: all 0.26s ease;
}

.contact-support__cta:hover {
  background: rgba(0, 229, 255, 0.08);
  border-color: rgba(0, 229, 255, 0.8);
  color: #7eeeff !important;
}

.contact-support__channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.contact-support__channel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 229, 255, 0.15);
  text-decoration: none;
  transition: all 0.26s ease;
  cursor: pointer;
}

.contact-support__channel:hover {
  background: rgba(0, 229, 255, 0.06);
  border-color: rgba(0, 229, 255, 0.45);
  transform: translateY(-3px);
}

.contact-support__channel-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  color: #00d4ff;
}

.contact-support__channel-icon svg {
  color: #00d4ff;
  stroke: #00d4ff;
}

.contact-support__channel-label {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
}

.contact-support__channel-value {
  font-size: 12px;
  color: rgba(0, 212, 255, 0.75);
  font-weight: 400;
}

@media (max-width: 1023px) {
  .contact-support__inner {
    grid-template-columns: 1fr;
    padding: 36px 32px;
    gap: 32px;
  }
}

@media (max-width: 767px) {
  .contact-support__inner {
    padding: 28px 22px;
  }
  .contact-support__channels {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .contact-support__heading {
    font-size: 22px !important;
  }
}

/* =========================================================================
   Spectral Descent home page — v5.0
   Appended block: overrides the previous home-page treatment only.
   Nothing above this line was edited.

   v5.0 changes only the two atmosphere layers of the field (vignette, floor)
   to match the approved prototype's contrast; every layout, card, tile and
   contact rule below is unchanged from v4.2.
   ========================================================================= */

html,
body {
  background: #000;
}

/* ── Spectral descent field (Canvas 2D, painted by script.js) ── */
.spectral-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  will-change: opacity;
}

.spectral-field__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.spectral-field__vignette,
.spectral-field__floor {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

/* Vignette (v5.0): centred on 60% rather than 44%, and much gentler in the
   mid-frame. The v4.2 ellipse reached 92% black by the frame edge and crushed
   the whole lower field — the brightest part of the approved scene — which is
   most of why the background read as flat black. It now only rolls the corners
   and the outer thirds off, so the plane stack keeps its luminance where the
   prototype has it and the content still sits on a settled base. */
.spectral-field__vignette {
  background: radial-gradient(ellipse 112% 100% at 50% 60%, rgba(0,0,0,0) 36%, rgba(0,0,0,0.3) 72%, rgba(0,0,0,0.68) 100%);
}

/* Floor: taller (24vh) and fully opaque at the very bottom, so the field lands
   on solid black instead of being clipped mid-glow — this is what carries the
   depth read now that the vignette no longer does it. */
.spectral-field__floor {
  top: auto;
  height: 24vh;
  background: linear-gradient(0deg, rgba(0,0,0,1) 4%, rgba(0,0,0,0.88) 26%, rgba(0,0,0,0.46) 58%, rgba(0,0,0,0) 100%);
}

/* Bottom-right, but held 112px clear of the Zendesk Web Widget launcher —
   the same clearance `.footer__social` uses. Bottom-left is unusable: the
   browser's link-hover status bubble sits there and covers the readout on
   every card hover. Opacity is driven by the field fade in script.js, so it
   retires with the canvas before the footer rather than stacking against it. */
.spectral-readout {
  position: fixed;
  right: 112px;
  left: auto;
  bottom: 22px;
  /* Above the sections (1) and the footer (3). Only effective because the
     element is a top-level node in home_page.hbs — inside `.hero` it would be
     capped at that section's level and the cards would cover it. */
  z-index: 6;
  pointer-events: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(0, 212, 255, 0.75);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

/* Footer stacking — keep this rule. The fixed spectral field lives inside
   `.hero`, which the block below puts in a z-index:1 stacking context, so
   without an explicit lift the whole hero context (canvas included) paints
   over the footer. z-index:3 keeps the footer above it. `.footer` also sets
   `isolation: isolate` in its own block, so the decorative layers inside
   (`.footer__fx` at 0, `.footer__space`/`.footer__meta` at 1) order among
   themselves and never leak into this context. */
.footer {
  position: relative;
  z-index: 3;
}

/* Content sits above the field; sections must not paint solid black over it */
.hero,
.introduction,
.resources,
.featured-sections,
.contact-support,
.categories,
.promoted-articles,
.homepage-activity,
.faq {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

.hero-background-video,
.hero > svg,
.resources .scene {
  display: none !important;
}

/* ── Hero ── */
/* Compact hero: the satellite (78px), eyebrow (~30px) and scroll hint are all
   gone, and the remaining stack is tightened so the headline, search, quick
   searches and the Popular row read as one block. Deliberately shorter than
   the 100vh in CONCEPT.md §3 — the full-viewport hero left too much dead space
   once those elements were removed, and the gap above "Popular right now" was
   the most visible symptom. padding-top still clears the 88px sticky header. */
.hero .container {
  min-height: 62vh;
  box-sizing: border-box;
  align-items: center;
  padding-top: 120px;
  padding-bottom: 34px;
}

.hero-eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0, 212, 255, 0.85) !important;
  margin-bottom: 18px !important;
  max-width: none !important;
}

/* Satellite pass + capture beam */
.hero-satellite {
  position: relative;
  width: 560px;
  max-width: 100%;
  height: 78px;
  margin-bottom: 2px;
  pointer-events: none;
}

.hero-satellite__craft {
  position: absolute;
  left: 0;
  top: 2px;
  width: 48px;
  height: 48px;
  animation: satPass 14s linear infinite;
}

.hero-satellite__craft img {
  width: 48px;
  height: 48px;
  display: block;
  object-fit: contain;
  transform: rotate(275deg);
  filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.45));
}

.hero-satellite__beam {
  position: absolute;
  left: 50%;
  top: 42px;
  width: 52px;
  height: 66px;
  transform: translateX(-50%) rotate(-18deg);
  transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(0,229,255,0.4) 0%, rgba(0,229,255,0.11) 55%, rgba(0,229,255,0) 100%);
  -webkit-clip-path: polygon(40% 0%, 60% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(40% 0%, 60% 0%, 100% 100%, 0% 100%);
  animation: beamPulse 2.4s ease-in-out infinite;
}

@keyframes satPass {
  0%   { transform: translateX(-70px); opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(620px); opacity: 0; }
}

@keyframes beamPulse {
  0%, 100% { opacity: 0.28; }
  50%      { opacity: 0.62; }
}

/* Headline: cyan sweep tracks the beam (background-position set in JS) */
.hero-search-heading {
  /* The 300%-wide sweep was positioned each frame from the satellite's beam.
     With the satellite removed there is nothing to drive it (syncHeadline
     bails on the null lookup) and it would freeze on solid white, so the H1
     now carries the standard brand heading gradient used by every other
     heading on the page — CONCEPT.md brand tokens, one accent family. */
  background-image: linear-gradient(90deg, #ffffff 0%, #7eeeff 58%, #00d4ff 100%) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: 0 0;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  /* tightened from the prototype's 28px now that the eyebrow and satellite
     are gone and the stack needs to read as one group */
  margin: 0 0 20px;
}

.hero .search input[type=search] {
  background: rgba(4, 10, 12, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff !important;
}

/* Quick searches: cyan pills (explicit colours, no theme variables) */
.hero .popular-keywords {
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.hero .popular-keywords p {
  max-width: none;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 14px;
}

.hero .popular-keywords__items {
  flex: 0 1 auto;
  justify-content: center;
  gap: 10px;
}

.hero .popular-keywords a {
  padding: 4px 12px;
  font-size: 15px;
  line-height: 140%;
  border-radius: 50px;
  background-color: rgba(4, 10, 12, 0.6) !important;
  border: 1px solid #06d4ff !important;
  color: #06d4ff !important;
}

.hero .popular-keywords a:hover {
  background-color: transparent !important;
  border-color: #AFB9C2 !important;
  color: #fff !important;
}

/* The scroll hint was removed from home_page.hbs on request. The rule is kept
   as a hide so any cached template revision still renders cleanly. */
.hero-scroll-hint,
.hero__content p.hero-scroll-hint {
  display: none !important;
}

/* ── Popular right now (compact, full width) ── */
/* The gap under the hero was coming from four stacked sources, not one:
   `.hero .container` padding-bottom, `.section { padding-bottom: 40px }` on the
   hero, `.introduction { margin-top: 80px }` (line 7709, which overrides the
   140px at 2185), and the hero's min-height slack. Zeroing the middle two here
   and trimming the container padding above pulls "Popular right now" up into
   the same block as the search. */
.hero.section {
  padding-bottom: 0;
}

.introduction.popular-now {
  margin-top: 0;
}

.popular-now {
  padding: 18px 0 74px;
}

.popular-now .container {
  display: block;
}

.popular-now__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.popular-now__heading {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.popular-now__all {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
}

.popular-now__all:hover {
  color: #06d4ff;
}

.popular-now .introduction__items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  justify-content: stretch;
}

.popular-now .introduction__items > a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.popular-now .introduction__item {
  width: auto;
  max-width: none;
  min-height: 0;
  aspect-ratio: auto;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  text-align: left;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(0, 229, 255, 0.22) !important;
  background: linear-gradient(180deg, #020809 0%, #000 100%) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
  transform: none;
  transition: border-color 240ms ease, background 240ms ease;
}

.popular-now .introduction__item::before,
.popular-now .introduction__item::after {
  display: none !important;
  content: none !important;
}

.popular-now .introduction__item:hover {
  border-color: rgba(0, 255, 255, 0.55) !important;
  background: rgba(7, 42, 52, 0.5) !important;
  transform: none !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5) !important;
}

.popular-now .introduction__item img,
.popular-now .introduction__item-icon {
  width: 22px;
  height: 22px;
  flex: none;
  margin: 0;
  object-fit: contain;
}

.popular-now .introduction__item-icon {
  filter: none !important;
}

.popular-now .introduction__item h4 {
  margin: 0;
  padding: 0;
  display: block;
  gap: 0;
  min-height: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: #fff !important;
  text-align: left;
  width: auto;
}

.popular-now .introduction__item p {
  display: none;
}

/* ── Knowledge base + featured sections cards ── */
.resources,
section.resources:not(.featured-sections) {
  margin-top: 0;
  padding: 0 0 80px;
  overflow: visible;
}

.resources.featured-sections {
  padding: 0 0 82px;
}

.resources__heading,
.featured-sections .resources__heading {
  text-align: left;
  font-size: 34px;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
}

.resources__items,
.featured-sections__items {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px !important;
  padding-left: 0 !important;
  flex-wrap: nowrap;
}

.resources__items > a {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.resources__item,
.featured-sections__items .resources__item,
section.resources:not(.featured-sections) .resources__item {
  width: auto;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  padding: 28px 26px;
  border-radius: 16px;
  border: 1px solid rgba(0, 229, 255, 0.22) !important;
  background: linear-gradient(180deg, #020809 0%, #000 100%) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  transform: none;
  transition: border-color 260ms ease, background 260ms ease, box-shadow 260ms ease !important;
}

/* The previous card design layered a radial cyan glow (::before) and an
   animated shine sweep (::after) under the content. The approved flythrough
   hover is the border/background pair only, so both decorations are removed
   outright rather than dimmed — a faded glow still reads as the old styling. */
.resources__item::before,
.resources__item::after {
  display: none !important;
  content: none !important;
}

/* Flythrough hover — one rule, both grids (Browse the knowledge base AND
   Featured sections share .resources__item, so they cannot drift apart).
   Colour pair + the soft cyan bloom. No tilt, no lift, no scale. */
.resources__item:hover,
.featured-sections__items .resources__item:hover,
section.resources:not(.featured-sections) .resources__item:hover {
  /* Opaque, not the old rgba(7,42,52,.5). That fill was half transparent
     and got its depth from the globe scene behind it; with the backdrop
     now black there was nothing to show through and the hover read flat.
     This gradient carries the same brightness range on its own - sampled
     against the original so a hovered card lands where it used to. */
  background: linear-gradient(180deg,
    rgb(8, 38, 50) 0%,
    rgb(5, 25, 33) 45%,
    rgb(3, 15, 20) 100%) !important;
  border-color: rgba(0, 255, 255, 0.55) !important;
  transform: none !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 229, 255, 0.14) !important;
}

.resources__item img,
.featured-sections .resources__item img {
  width: 34px;
  height: 34px;
  margin: 0 0 22px;
  object-fit: contain;
}

.resources__item h5,
.featured-sections .resources__item h5 {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
}

.resources__item p,
.featured-sections .resources__item p {
  display: none;
}

.resources__meta {
  display: block;
  margin-top: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(0, 212, 255, 0.75);
}

.resources__item:hover .resources__meta {
  color: #7de3ff;
}

/* ── Get in touch: one full-width transparent box ── */
.contact-support {
  padding: 8px 0 96px;
}

.contact-support__inner {
  display: block;
  text-align: center;
  background: transparent !important;
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-radius: 16px;
  padding: 52px 48px 48px;
}

.contact-support__inner::before {
  display: none;
}

.contact-support__heading {
  font-size: 32px !important;
}

.contact-support__sub {
  margin-bottom: 34px !important;
}

.contact-support__channels {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.contact-support__channel {
  align-items: center;
  gap: 8px;
  padding: 20px 14px;
  text-align: center;
  background: linear-gradient(180deg, #020809 0%, #000 100%);
  border-color: rgba(0, 229, 255, 0.18);
}

.contact-support__channel:hover {
  background: rgba(7, 42, 52, 0.5);
  border-color: rgba(0, 255, 255, 0.55);
  transform: none;
}

.contact-support__channel-icon {
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  background: transparent;
}

/* ── Responsive ── */
@media (max-width: 1023px) {
  .hero .container {
    min-height: 0;
    padding-top: 104px;
    padding-bottom: 32px;
  }
  .popular-now .introduction__items,
  .resources__items,
  .featured-sections__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact-support__channels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact-support__inner {
    padding: 40px 32px 36px;
  }
  .popular-now .introduction__items {
    display: grid !important;
    flex-wrap: wrap;
    justify-content: stretch;
    gap: 14px !important;
  }
  .popular-now .introduction__item {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 16px 20px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .popular-now .introduction__item img,
  .popular-now .introduction__item-icon {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
  }
}

@media (max-width: 767px) {
  .hero .container {
    min-height: 0;
    padding-top: 96px;
    padding-bottom: 60px;
  }
  .hero-satellite {
    height: 62px;
  }
  .hero .popular-keywords {
    flex-direction: row;
  }
  .popular-now .introduction__items,
  .resources__items,
  .featured-sections__items {
    grid-template-columns: minmax(0, 1fr);
  }
  .popular-now .introduction__item {
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
  }
  .resources__heading,
  .featured-sections .resources__heading {
    font-size: 26px;
  }
  .contact-support__inner {
    padding: 30px 20px 26px;
  }
  .spectral-readout {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-satellite__craft,
  .hero-satellite__beam {
    animation: none !important;
  }
}


/* =========================================================================
   Pixxel Support Intelligence — Ask panel (v1.0)
   Appended block. Uses the same tokens as the Spectral Descent home page:
   card ink #020809, cyan #00d4ff / #00e5ff, monospace meta, hairline cyan
   borders. Nothing above this line was edited.
   ========================================================================= */

/* Search icon: a sparkle instead of the magnifier, because submitting the hero
   search now opens Pixxel Support Intelligence rather than running a keyword
   query — the icon should promise an answer, not a result list.

   `.search-icon path { fill: rgba(0, 0, 0, 1) }` earlier in this file has the same
   specificity (0,1,1), so this wins only on source order. It is in the appended
   block, which is always last, so that holds. */
.search-icon--ask {
  width: 18px;
  height: 18px;
  overflow: visible;
  filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.4));
}

.search-icon--ask path {
  fill: #00d4ff;
}

/* The small star sits a shade brighter so the pair reads as one mark with
   depth rather than two flat shapes. */
.search-icon--ask path + path {
  fill: #9ff2ff;
}

/* Focus the field and the mark lifts — the only feedback that the search is
   about to do something other than search. */
.hero-inner:focus-within .search-icon--ask,
.search:focus-within .search-icon--ask {
  filter: drop-shadow(0 0 9px rgba(0, 212, 255, 0.75));
}

.psi[hidden] {
  display: none;
}

.psi {
  position: fixed;
  inset: 0;
  z-index: 1200;               /* above the footer (3) and the sticky header's
                                  content, below Zendesk's messenger iframe */
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.psi__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.psi__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(760px, calc(100% - 32px));
  max-height: min(78vh, 720px);
  margin-bottom: 24px;
  border: 1px solid rgba(0, 229, 255, 0.28);
  border-radius: 16px;
  background: linear-gradient(180deg, #020809, #000);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.72);
  overflow: hidden;
  animation: auroraIn 0.22s ease-out;
}

@keyframes auroraIn {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.psi__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 229, 255, 0.16);
}

.psi__mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #7eeeff, #00d4ff 58%, #044 100%);
  box-shadow: 0 0 14px rgba(0, 212, 255, 0.5);
}

.psi__title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.psi__close {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}

.psi__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.psi__disclaimer {
  margin: 0;
  padding: 10px 16px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(0, 212, 255, 0.05);
  border-bottom: 1px solid rgba(0, 229, 255, 0.12);
}

.psi__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px 8px;
}

.psi__question {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: #7eeeff;
}

.psi__answer {
  font-size: 15px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.82);
}

.psi__answer p {
  margin: 0 0 12px;
  font-size: 15px;
  max-width: none;
}

.psi__answer code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0, 212, 255, 0.1);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: #7eeeff;
}

.psi__answer a,
.psi__source {
  color: #00d4ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.psi__thinking {
  display: inline-flex;
  gap: 5px;
  padding: 4px 0;
}

.psi__thinking i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00d4ff;
  opacity: 0.35;
  animation: auroraPulse 1.1s ease-in-out infinite;
}

.psi__thinking i:nth-child(2) { animation-delay: 0.16s; }
.psi__thinking i:nth-child(3) { animation-delay: 0.32s; }

@keyframes auroraPulse {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-3px); }
}

.psi__sources {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 229, 255, 0.14);
}

.psi__sources-title {
  margin: 0 0 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0, 212, 255, 0.75);
}

.psi__source {
  display: block;
  padding: 5px 0;
  font-size: 14px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.72);
}

.psi__source:hover {
  color: #00e5ff;
}

.psi__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.psi__vote {
  padding: 4px 12px;
  border: 1px solid rgba(0, 229, 255, 0.28);
  border-radius: 50px;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  cursor: pointer;
}

.psi__vote:hover {
  border-color: rgba(0, 255, 255, 0.55);
  background: rgba(7, 42, 52, 0.5);
  color: #fff;
}

.psi__voted {
  font-size: 13px;
  color: rgba(0, 212, 255, 0.75);
}

.psi__fallback {
  display: inline-block;
  margin: 18px 0 6px;
  font-size: 14px;
  color: #00d4ff;
  text-decoration: none;
}

.psi__fallback:hover {
  text-decoration: underline;
}

.psi__ask {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid rgba(0, 229, 255, 0.16);
  background: rgba(0, 0, 0, 0.4);
}

.psi__ask input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-radius: 50px;
  background: rgba(4, 10, 12, 0.6);
  color: #fff;
  font-size: 14px;
}

.psi__ask input:focus {
  outline: none;
  border-color: rgba(0, 229, 255, 0.6);
}

.psi__ask button {
  width: 40px;
  border: 0;
  border-radius: 50%;
  background: #00d4ff;
  color: #001014;
  font-size: 16px;
  cursor: pointer;
}

.psi__ask button:hover {
  background: #7eeeff;
}

/* Lock the page behind the panel */
html.psi-open,
html.psi-open body {
  overflow: hidden;
}

@media (max-width: 767px) {
  .psi__panel {
    width: 100%;
    max-height: 88vh;
    margin-bottom: 0;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .psi__panel { animation: none; }
  .psi__thinking i { animation: none; opacity: 0.6; }
}


/* =========================================================================
   Header photo background (hero only)

   Replaces the spectral descent field *inside the hero* with a still photo,
   leaving the field untouched everywhere below it. The field is one fixed,
   full-viewport canvas that lives inside `.hero`, and `.hero` is already a
   stacking context (`position: relative; z-index: 1` in the block above), so
   a positioned layer inside that same context with a higher z-index paints
   over the canvas within the hero's box and nowhere else. No JS change, no
   markup moved: the two layers are added in home_page.hbs after the
   `.spectral-field` block, and the image URL is set inline there via the
   `{{asset}}` helper so the file resolves through Zendesk's asset pipeline.
   ========================================================================= */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}

/* Legibility scrim. Kept light and even so the control-room photo reads at
   close to its own brightness (matching pixxel.space's Support banner); only a
   soft bottom ramp lands the hero on black where "Popular right now" starts. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 8, 16, 0.24) 0%, rgba(4, 8, 16, 0.16) 44%, rgba(4, 8, 16, 0.22) 66%, rgba(2, 4, 10, 0.58) 100%);
}

/* Hero content above both layers. */
.hero .container {
  position: relative;
  z-index: 3;
}

/* Narrow screens: hold the desks/monitors in frame instead of the ceiling. */
@media (max-width: 768px) {
  .hero__photo { background-position: 62% 45%; }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(4, 8, 16, 0.30) 0%, rgba(4, 8, 16, 0.22) 50%, rgba(2, 4, 10, 0.60) 100%);
  }
}


/* =========================================================================
   Orbit scene — re-enabled for the middle sections

   The spectral-field rewrite turned this scene off in three places:
     1. `.resources { background: transparent !important }`  — so the fixed
        canvas could show through every home section;
     2. `.resources .scene { display: none !important }`      — the scene was
        disabled outright rather than deleted, which is why all of its CSS
        (EARTH / ORBITS above) is still here and intact;
     3. `section.resources:not(.featured-sections) { overflow: visible }` —
        the clip that keeps the 24-36rem rings inside the section was dropped.

   The hero now carries the control-room photo, and the middle goes back to
   the Earth-and-orbits scene, so those three are reversed here — scoped to
   the two `.resources` sections only. Every other section (the hero, Popular
   right now, contact, footer) keeps the spectral descent field untouched.
   ========================================================================= */
section.resources {
  background: #000 !important;
}

section.resources .scene {
  display: block !important;
}

/* The rings are wider than the column; the section has to clip them again. */
section.resources:not(.featured-sections) {
  overflow: hidden !important;
}


/* ============================================================
   Pixxel satellite footer (from pixxel.space)

   The pixxel.space marketing footer is a looping background video —
   "Satellite Footer": the Firefly satellite passing over Earth with
   its light beam. We reuse that exact clip (poster + mp4 + webm on
   Pixxel's Webflow CDN) as the footer background here, with the
   support nav columns and copyright bar on top. A rule above forces
   `.footer { background: black !important; background-image: none !important }`
   for other templates — a <video> element sidesteps it, and the
   poster shows instantly while the clip loads (or if autoplay is
   blocked). A soft top-down scrim keeps the five nav columns legible.
   ============================================================ */
.footer__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  pointer-events: none;
  border: 0;
}

.footer__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Holds the nav columns and copyright bar legible over the clip. The
     original stops fading at 60% and reaches zero at the bottom, which is
     exactly where the Earth limb is brightest - measured text contrast
     there was 1.26:1 against WCAG AA's 4.5:1 minimum, at every width.
     These stops keep the satellite, limb and capture swath clearly
     visible while bringing the worst case to 4.9-5.6:1. */
  background: linear-gradient(180deg,
    rgba(4, 5, 13, 0.80) 0%,
    rgba(4, 5, 13, 0.64) 30%,
    rgba(4, 5, 13, 0.64) 55%,
    rgba(4, 5, 13, 0.72) 80%,
    rgba(4, 5, 13, 0.80) 100%);
}


/* ============================================================
   Knowledge base + Featured backdrop - black, with a few stars.

   Replaces the Firefly orbit scene (a photographic globe, three
   revolving rings and a satellite riding each one) and its blue
   nebula wash. The globe competed with the cards sitting on top of
   it and the rings pulled the eye off the article counts. What is
   left is black, plus a sparse starfield.

   The stars are one hand-scattered SVG, not repeating radial
   gradients: a gradient layer puts its dot on an exact lattice, and
   at this size the eye picks the rows out at once - it reads as a
   pattern, not a sky. These 56 are placed by rejection sampling with
   a 105px minimum separation across a 2560x1440 tile, so they are
   irregular, never clumped, and the tile outruns almost every
   viewport so there is no visible repeat. About 19 show in a
   1400x900 viewport: most between 0.22 and 0.38 alpha, a dozen
   brighter, three in the cyan accent. Sparse on purpose - to thin or
   thicken the field, change the alphas rather than adding stars.
   ============================================================ */
.kb-scene {
  position: relative;
  background-color: #000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2560' height='1440' viewBox='0 0 2560 1440'%3E%3Ccircle cx='1639.5' cy='1006.5' r='1.33' fill='%237eeeff' opacity='0.44'/%3E%3Ccircle cx='1872.7' cy='154.2' r='0.76' fill='%23ffffff' opacity='0.3'/%3E%3Ccircle cx='855.6' cy='32.2' r='0.85' fill='%23ffffff' opacity='0.3'/%3E%3Ccircle cx='1036.4' cy='426.9' r='1.34' fill='%23ffffff' opacity='0.64'/%3E%3Ccircle cx='1431.0' cy='1026.2' r='1.15' fill='%23ffffff' opacity='0.54'/%3E%3Ccircle cx='413.3' cy='96.8' r='0.88' fill='%23ffffff' opacity='0.34'/%3E%3Ccircle cx='398.9' cy='365.8' r='1.6' fill='%23ffffff' opacity='0.79'/%3E%3Ccircle cx='40.3' cy='1048.8' r='1.53' fill='%23ffffff' opacity='0.73'/%3E%3Ccircle cx='1169.9' cy='1034.7' r='1.0' fill='%23ffffff' opacity='0.49'/%3E%3Ccircle cx='1255.9' cy='611.6' r='0.81' fill='%23ffffff' opacity='0.24'/%3E%3Ccircle cx='2147.1' cy='455.0' r='0.93' fill='%23ffffff' opacity='0.31'/%3E%3Ccircle cx='652.4' cy='431.5' r='0.93' fill='%23ffffff' opacity='0.3'/%3E%3Ccircle cx='1999.0' cy='448.4' r='0.84' fill='%23ffffff' opacity='0.3'/%3E%3Ccircle cx='386.4' cy='213.2' r='0.74' fill='%23ffffff' opacity='0.3'/%3E%3Ccircle cx='33.7' cy='481.7' r='1.36' fill='%23ffffff' opacity='0.72'/%3E%3Ccircle cx='386.0' cy='1219.4' r='0.82' fill='%23ffffff' opacity='0.31'/%3E%3Ccircle cx='539.7' cy='799.1' r='0.74' fill='%23ffffff' opacity='0.25'/%3E%3Ccircle cx='1577.5' cy='351.1' r='0.82' fill='%23ffffff' opacity='0.29'/%3E%3Ccircle cx='707.0' cy='48.2' r='0.8' fill='%23ffffff' opacity='0.23'/%3E%3Ccircle cx='1887.3' cy='1426.3' r='1.39' fill='%237eeeff' opacity='0.46'/%3E%3Ccircle cx='2498.6' cy='953.4' r='1.07' fill='%23ffffff' opacity='0.5'/%3E%3Ccircle cx='302.3' cy='44.2' r='1.02' fill='%23ffffff' opacity='0.4'/%3E%3Ccircle cx='545.9' cy='292.7' r='1.46' fill='%23ffffff' opacity='0.7'/%3E%3Ccircle cx='2512.4' cy='1265.6' r='0.82' fill='%23ffffff' opacity='0.35'/%3E%3Ccircle cx='936.6' cy='259.9' r='1.55' fill='%23ffffff' opacity='0.76'/%3E%3Ccircle cx='1152.9' cy='851.1' r='0.92' fill='%23ffffff' opacity='0.37'/%3E%3Ccircle cx='1703.3' cy='1105.5' r='0.82' fill='%23ffffff' opacity='0.36'/%3E%3Ccircle cx='1674.0' cy='688.9' r='1.06' fill='%23ffffff' opacity='0.52'/%3E%3Ccircle cx='2524.8' cy='1404.9' r='0.94' fill='%23ffffff' opacity='0.36'/%3E%3Ccircle cx='1523.7' cy='448.6' r='1.18' fill='%23ffffff' opacity='0.53'/%3E%3Ccircle cx='146.5' cy='1159.1' r='0.89' fill='%23ffffff' opacity='0.24'/%3E%3Ccircle cx='1112.9' cy='202.5' r='0.71' fill='%23ffffff' opacity='0.37'/%3E%3Ccircle cx='2259.0' cy='616.1' r='0.78' fill='%23ffffff' opacity='0.36'/%3E%3Ccircle cx='1434.0' cy='1133.0' r='0.89' fill='%23ffffff' opacity='0.25'/%3E%3Ccircle cx='290.4' cy='798.5' r='0.73' fill='%23ffffff' opacity='0.35'/%3E%3Ccircle cx='100.4' cy='900.5' r='0.84' fill='%23ffffff' opacity='0.24'/%3E%3Ccircle cx='1619.1' cy='28.3' r='1.5' fill='%23ffffff' opacity='0.63'/%3E%3Ccircle cx='813.9' cy='884.6' r='1.14' fill='%23ffffff' opacity='0.55'/%3E%3Ccircle cx='826.4' cy='1415.4' r='1.36' fill='%237eeeff' opacity='0.45'/%3E%3Ccircle cx='822.1' cy='293.8' r='0.75' fill='%23ffffff' opacity='0.35'/%3E%3Ccircle cx='1346.3' cy='178.1' r='1.29' fill='%23ffffff' opacity='0.63'/%3E%3Ccircle cx='1879.9' cy='429.9' r='1.06' fill='%23ffffff' opacity='0.5'/%3E%3Ccircle cx='2435.7' cy='850.6' r='0.8' fill='%23ffffff' opacity='0.23'/%3E%3Ccircle cx='83.9' cy='236.8' r='1.39' fill='%23ffffff' opacity='0.66'/%3E%3Ccircle cx='1920.6' cy='1325.4' r='1.51' fill='%23ffffff' opacity='0.69'/%3E%3Ccircle cx='2043.1' cy='1258.6' r='0.72' fill='%23ffffff' opacity='0.28'/%3E%3Ccircle cx='2327.5' cy='800.6' r='0.88' fill='%23ffffff' opacity='0.23'/%3E%3Ccircle cx='2087.1' cy='772.0' r='0.88' fill='%23ffffff' opacity='0.3'/%3E%3Ccircle cx='1153.8' cy='1414.9' r='0.77' fill='%23ffffff' opacity='0.29'/%3E%3Ccircle cx='1064.2' cy='1126.6' r='0.9' fill='%23ffffff' opacity='0.27'/%3E%3Ccircle cx='2539.1' cy='797.1' r='1.59' fill='%23ffffff' opacity='0.68'/%3E%3Ccircle cx='2028.4' cy='1420.2' r='1.34' fill='%23ffffff' opacity='0.76'/%3E%3Ccircle cx='1941.2' cy='707.6' r='0.85' fill='%23ffffff' opacity='0.33'/%3E%3Ccircle cx='40.6' cy='610.3' r='1.04' fill='%23ffffff' opacity='0.48'/%3E%3Ccircle cx='1914.8' cy='1204.8' r='0.95' fill='%23ffffff' opacity='0.42'/%3E%3Ccircle cx='1772.0' cy='272.2' r='1.09' fill='%23ffffff' opacity='0.56'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 2560px 1440px;
  /* Holds the field still while the cards scroll over it. iOS Safari
     ignores `fixed` and scrolls the stars with the section instead,
     which is a fine fallback for a backdrop this quiet. */
  background-attachment: fixed;
}

.kb-scene section.resources{ background:transparent !important; position:relative; z-index:1; overflow:visible !important; }