@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

/**********
 Variables
 **********/
body {
  /* Colors */
  --primary-color: rgba(30, 157, 184, 1);
  --secondary-color: rgba(206, 189, 238, 1);
  --primary-bg-color: rgba(245, 245, 245, 1);
  --primary-bg-color-always: rgba(245, 245, 245, 1);
  --secondary-bg-color: rgba(255, 255, 255, 1);
  --secondary-bg-color-always: rgba(255, 255, 255, 1);
  --sidebar-bg-color: #f5f5f5;
  --primary-text-color: rgba(22, 20, 12, 1);
  --secondary-text-color: rgba(0, 0, 0, 1);
  --link-color: #1b9cb9;
  --border-color: #c9c9c9;
  --info-color: rgba(27, 156, 185, 1);
  --success-color: #67C30B;
  --warning-color: #F1D52F;
  --danger-color: #e64545;
  --primary-color-hover: #157083;
  --primary-color-active: #136576;
  --secondary-color-hover: #aa8ce1;
  --secondary-color-active: #a180de;
  --secondary-bg-color-hover: #f5f5f5;
  --secondary-bg-color-active: #f0f0f0;
  --secondary-text-color-hover: #000;
  --secondary-text-color-active: #000;
  --link-color-hover: #136f84;
  --link-color-active: #116476;

  /* Text */
  --text-font-family: 'Poppins', sans-serif;
  --heading-font-family: 'Poppins', sans-serif;
  --text-font-size: 16px;
  --text-font-size-large: calc(16px + 2px);
  --text-font-size-small: calc(16px - 2px);
  --heading-1-font-size: 32px;
  --heading-2-font-size: 24px;
  --heading-3-font-size: 20px;
  --heading-4-font-size: 18px;
  --heading-5-font-size: 16px;
  --heading-6-font-size: calc(16px - 2px);

  /* Other */
  --border-radius-base: 12px;
  --border-radius-small: calc(12px / 2);
  --border-radius-button: 50px;
  --logo-height: 40px;

  /* Theme settings */
  --white-color: #fff;
  --dark-color: #202020;
  --border-width: 1px;
  --minus-border-width: -1px;
  --box-shadow: 0px 4px 40px rgba(0, 0, 0, .12);
  --duration: 400ms;
  --timing-function: cubic-bezier(.17, .67, .54, 1);
  --assets-check-svg: url(/hc/theming_assets/01JZJCNZT3HGNM61Y0MC5HK7BC);
}

.ui-dark body {
  /* Colors */
  --primary-color: #1E9DB8;
  --secondary-color: rgba(16, 73, 99, 1);
  --primary-bg-color: rgba(32, 32, 32, 1);
  --primary-bg-color-always: rgba(32, 32, 32, 1);
  --secondary-bg-color: rgba(4, 40, 56, 1);
  --secondary-bg-color-always: rgba(4, 40, 56, 1);
  --sidebar-bg-color: rgba(32, 32, 32, 1);
  --primary-text-color: #FFFFFF;
  --secondary-text-color: rgba(255, 255, 255, 1);
  --link-color: rgba(30, 157, 184, 1);
  --border-color: #31405a;
  --info-color: #1863BC;
  --success-color: #67C30B;
  --warning-color: #F1D52F;
  --danger-color: #e64545;
  --primary-color-hover: #35c0de;
  --primary-color-active: #42c5e0;
  --secondary-color-hover: #197098;
  --secondary-color-active: #1b7aa5;
  --secondary-bg-color-hover: #05364b;
  --secondary-bg-color-active: #063c55;
  --secondary-text-color-hover: #fff;
  --secondary-text-color-active: #fff;
  --link-color-hover: #35c0de;
  --link-color-active: #42c5e0;
}

/***********
 Base styles
 ***********/
*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: 126px !important;
}

body,
html {
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--text-font-family);
  font-size: var(--text-font-size);
  font-weight: 400;
  line-height: 1.5;
  background-color: var(--primary-bg-color);
  color: var(--primary-text-color);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  color: var(--link-color-hover);
}

a:active,
a.is-active {
  color: var(--link-color-active);
}

a.link-primary,
.my-activities-menu__item a {
  color: var(--primary-color);
}

a.link-primary:hover,
.my-activities-menu__item a:hover {
  color: var(--primary-color-hover);
}

a.link-primary:active,
a.link-primary.is-active,
.my-activities-menu__item a:active {
  color: var(--primary-color-active);
}

a.link-secondary {
  color: var(--secondary-color);
}

a.link-secondary:hover {
  color: var(--secondary-color-hover);
}

a.link-secondary:active,
a.link-secondary.is-active {
  color: var(--secondary-color-active);
}

[dir] a.is-disabled {
  cursor: default;
}

a.is-disabled,
a.is-disabled:hover,
a.is-disabled:active,
a.is-disabled.is-active {
  color: var(--secondary-text-color);
}

[dir] a,
[dir] button,
[dir] [type=submit],
[dir] [type=button],
[dir] [type=reset] {
  cursor: pointer;
}

a,
input,
button,
select,
textarea,
label {
  transition: all 400ms cubic-bezier(0.17, 0.67, 0.54, 1);
}

a:focus,
input:focus,
button:focus,
select:focus,
textarea:focus,
label:focus {
  outline: none;
}

a.focus-visible,
input.focus-visible,
button.focus-visible,
select.focus-visible,
textarea.focus-visible,
label.focus-visible {
  outline: auto 5px -webkit-focus-ring-color;
}

[dir] figure {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

.iframe {
  position: relative;
}

.iframe iframe {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.table-container {
  width: 100%;
  overflow-y: auto;
}

.list-unstyled {
  display: block;
  margin: 24px 0;
  padding: 0;
}

.list-unstyled li {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.is-hidden,
[hidden] {
  display: none !important;
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .is-hidden--xl {
    display: none !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .is-hidden--lg {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .is-hidden--md {
    display: none !important;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .is-hidden--sm {
    display: none !important;
  }
}

@media (max-width: 1399px) {
  .is-hidden--xl-down {
    display: none !important;
  }
}

@media (max-width: 1199px) {
  .is-hidden--lg-down {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .is-hidden--md-down {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .is-hidden--sm-down {
    display: none !important;
  }
}

@media (max-width: 575px) {

  .is-hidden--xs,
  .is-hidden--xs-down {
    display: none !important;
  }
}

@media (min-width: 1400px) {

  .is-hidden--xxl,
  .is-hidden--xxl-up {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .is-hidden--xl-up {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .is-hidden--lg-up {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .is-hidden--md-up {
    display: none !important;
  }
}

@media (min-width: 576px) {
  .is-hidden--sm-up {
    display: none !important;
  }
}

[dir=ltr] .is-hidden--ltr {
  display: none !important;
}

[dir=rtl] .is-hidden--rtl {
  display: none !important;
}

.ui-light .is-hidden--light-mode {
  display: none !important;
}

.ui-dark .is-hidden--dark-mode {
  display: none !important;
}

/********
 Headings
 ********/
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: var(--heading-font-family);
  font-weight: 700;
}

h1,
.h1 {
  font-size: var(--heading-2-font-size);
  line-height: 1.2;
}

h2,
.h2 {
  font-size: var(--heading-3-font-size);
  line-height: 1.3;
}

h3,
.h3,
h4,
.h4 {
  font-size: var(--heading-4-font-size);
  line-height: 1.4;
}

h5,
.h5 {
  font-size: var(--heading-5-font-size);
}

h6,
.h6 {
  font-size: var(--heading-5-font-size);
}

@media (min-width: 992px) {

  h1,
  .h1 {
    font-size: var(--heading-1-font-size);
    line-height: 1.1;
  }

  h2,
  .h2 {
    font-size: var(--heading-2-font-size);
    line-height: 1.2;
  }

  h3,
  .h3 {
    font-size: var(--heading-3-font-size);
    line-height: 1.3;
  }
}

[dir] h1,
[dir] .h1 {
  margin: 0 0 1.2em;
}

[dir] .markdown h1,
[dir] .markdown .h1 {
  margin-top: 1.2em;
}

/*Code snippets and preformatted blocks */

.markdown pre {
  border-radius: var(--border-radius-base);
  background-color: var(--secondary-bg-color);
  padding: 16px;
  width: 100%;
  overflow-x: auto;
  font-size: var(--text-font-size-small);
}

.ui-light .markdown pre,
.ui-light .markdown pre code {
  color: var(--secondary-bg-color);
  background-color: var(--primary-text-color);
}

code,
kbd,
samp {
  display: block;
}

.markdown code {
  display: inline-block;
  border-radius: var(--border-radius-button);
  background-color: var(--secondary-bg-color);
  font-size: var(--text-font-size-small);
  padding: 0 4px;
}

.ui-light .markdown code {
  color: var(--secondary-bg-color);
  background-color: var(--primary-text-color);
}

.markdown pre code {
  display: block;
  margin: -16px;
  padding: 16px;
  background-color: var(--secondary-bg-color);
}

.codeSnippet, .codesnippet {
  padding-top: 25px;
  line-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  position: relative;
}

.codeSnippet::before, .codesnippet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 27px;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.codeSnippet pre, .codesnippet pre {
  font-family: "Consolas", "SF Mono", "Source Code Pro", monospace !important;
}

.codesnippet_0.codesnippet .codesnippetbody .table-container {
  padding-top: 5px;
}

pre span[style*="color"] {
  filter: brightness(2);
}

pre span[style*="color: #969896"] {
  color: darkslategray !important;
}

.ui-light .codeSnippet, .ui-light .codesnippet {
    background-color: var(--primary-text-color);
}

.ui-dark .codeSnippet, .ui-dark .codesnippet {
    background-color: var(--secondary-bg-color);   
}

.codesnippet table, .codeSnippet table, .codesnippet tr, .codeSnippet tr, .codesnippet td, .codeSnippet td {
  display: contents;
}

/**********/
/* Layout */
/**********/

body {
  display: flex;
  flex-direction: column;
}

.main-container {
  padding: 0 15px;
  width: 100%;
}

@media (min-width: 992px) {
  .main-container > .row {
    flex-wrap: nowrap;
  }
}

.content-container {
  max-width: clamp(1440px, 90vw, 1800px);
}

.sidebar-width-controller {
  display: none;
}

@media (min-width: 992px) {
  .main-container {
    flex: 1 0 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-end;
  }

  .main-container > .row {
    height: 100%;
    width: calc(100% + 30px);
    flex: 1 0 100%;
  }

  html[dir] .main-container__sidebar {
    padding: 0;
  }

  .main-container__sidebar {
    position: relative;
    width: 380px;
    max-width: 380px;
    min-width: 70px !important;
  }

  .main-container__content {
    width: calc(100% - 380px);
    max-width: calc(100% - 380px);
  }

  .main-container__sidebar.is-collapsed {
    width: 70px;
    max-width: 70px;
  }

  .main-container__sidebar.is-collapsed ~ .main-container__content {
    width: calc(100% - 70px);
    max-width: calc(100% - 70px);
  }

  .main-container__sidebar::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: calc((100vw - 1140px) / 2 + 100%);
    min-width: 100%;
    background-color: var(--sidebar-bg-color);
    z-index: -1;
  }

  .main-container__sidebar-fixed.is-active {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 0 15px;
    width: 100%;
  }

  .is-collapsed .main-container__sidebar-fixed.is-active {
    overflow: unset;
    z-index: 9;
  }

  .sidebar-width-controller {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    z-index: 9;
  }

  .sidebar-width-controller:hover::after,
  .sidebar-width-controller.is-active ::after {
    opacity: 1;
  }

  [dir] .btn.sidebar-collapse-btn {
    display: block;
    position: fixed;
    top: 50vh;
    transform: translate(-50%, -50%);
    z-index: 99;
    cursor: pointer;
  }

  .main-container__sidebar.is-collapsed .sidebar-collapse-btn i {
    transform: translate(-50%, -50%) scale(-1, 1);
  }
}

@media (max-width: 991px) {
  .main-container__sidebar {
    border-bottom: var(--border-width) solid var(--border-color);
  }

  .main-container__sidebar,
  .main-container__content {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

.main-container__content {
  padding: 0 15px;
}

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

/* Header */
@media (min-width: 992px) {
  .header__container {
    height: 60px;
    margin-right: -15px;
    margin-left: -15px;
    padding-right: 15px;
    padding-left: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .header__container--left {
    padding-left: 0;
    margin-left: 0;
    padding-top: 25px;
  }

  .header__container--right {
    display: block !important;
    transition: none !important;
    border-bottom: var(--border-width) solid var(--border-color);
  }

  .header__logo {
    display: block;
  }

  .header__nav {
    display: flex;
    align-items: center;
  }

  .header__nav > * {
    margin-left: 16px;
  }

  .header__logo span {
    display: block;
    margin-left: 8px;
  }

  .is-collapsed .header__logo span {
    display: none;
  }

  .header__mobile-menu {
    display: none;
  }
}

.header__topbar {
  display: flex;
  align-items: center;
}

@media (max-width: 991px) {
  .header__topbar {
    border-bottom: var(--border-width) solid var(--border-color);
  }

  .header__container--right {
    display: none;
  }

  .header__nav > * {
    margin-left: 6px;
  }
}

.header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--primry-text-color);
  font-size: var(--text-font-size-large);
  font-weight: 500;
}

.header__logo:hover {
  text-decoration: none;
}

.is-visible-collapse {
  display: none !important;
}

@media (min-width: 992px) {
  .is-collapsed .header__logo {
    width: 100%;
    justify-content: center;
  }

  .is-collapsed .header__logo img {
    max-width: 100%;
  }

  .is-collapsed .sidenav__item {
    display: none;
  }

  .is-collapsed .is-visible-collapse {
    display: flex !important;
  }
}

.header__container [role="search"] {
  flex: 1 1 10px;
  display: block;
  position: relative;
}

.header__container [role="search"]::before {
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  color: var(--secondary-text-color);
}

.header__container [type="search"] {
  width: 100%;
  height: 59px;
  border: none;
  box-shadow: none !important;
  padding-left: 30px;
  background-color: transparent !important;
}

.header__nav-github {
  font-size: 26px;
  color: var(--border-color);
}

.header__nav {
  display: flex;
  align-items: center;
}

.btn.header__nav-btn {
  font-weight: normal;
  color: var(--secondary-text-color);
}

.header__nav .btn + .dropdown,
.header__nav .btn + .btn {
  margin-left: 8px;
}


@media (max-width: 991px) {
  .header__container--left {
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .header__logo span {
    display: none;
  }

  .header__mobile-menu {
    display: block;
    height: 100%;
    padding: 0 5px;
    color: var(--secondary-text-color);
    font-size: 20px;
    cursor: pointer;
  }

  .header__mobile-menu.is-active,
  .header__mobile-menu:hover {
    color: var(--primary-color);
  }

  .header__locale {
    width: 100%;
    margin-bottom: 8px;
  }
}

.header__color-mode-switcher {
  display: block;
  position: relative;
  z-index: 2;
  width: 40px;
  height: 26px;
}

.header__color-mode-switcher::before {
  content: '';
  display: block;
  width: 100%;
  height: 12px;
  border-radius: 10px;
  background-color: var(--border-color);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: -1;
  opacity: .5;
}

.header__color-mode-switcher span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: all var(--duration) var(--timing-function);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--border-color);
  color: var(--white-color);
}

.ui-dark .header__color-mode-switcher span {
  transform: translateX(14px);
  color: var(--primary-bg-color);
}

.header__color-mode-switcher:hover span,
.header__color-mode-switcher:active span {
  background-color: var(--primary-color-hover);
}

.header__color-mode-switcher span i {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Header search */
.header-search-container {
  flex: 1 1 10px;
  min-height: 59px;
}

.header-search::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  content: "\f002";
}

/* Header menu */
.header__menu {
  padding-top: 24px;
  padding-bottom: 24px;
}

@media (min-width: 992px) {
  .header__menu .header-menu-toggle {
    display: none;
  }
}

@media (max-width: 991px) {
  .header__menu {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    visibility: hidden;
    transition: visibility .3s ease;
  }

  .header__menu::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    top: 0;
    left: 0;
    background-color: var(--primary-text-color);
    opacity: 0;
    transition: all .3s ease;
  }

  .ui-dark .header__menu::before {
    background-color: var(--secondary-bg-color);
  }

  .header__menu .header-menu-toggle {
    display: block;
    position: absolute;
    top: 15px;
    right: 5px;
    width: 30px;
    height: 30px;
    opacity: 0;
    transition: all .3s ease;
    color: var(--white-color);
    font-size: 16px;
    line-height: 30px;
    text-align: center;
  }

  .header__menu-box {
    width: calc(100% - 40px);
    max-width: 320px;
    background-color: var(--primary-bg-color);
    padding: 24px;
    position: absolute;
    top: 0;
    right: 100%;
    height: 100%;
    overflow-y: auto;
    transform: translateX(0);
    transition: transform .3s ease;
  }

  .header__menu.is-active {
    visibility: visible;
  }

  .header__menu.is-active::before {
    opacity: .75;
  }

  .header__menu.is-active .header__menu-box {
    transform: translateX(100%);
  }

  .header__menu.is-active .header-menu-toggle {
    opacity: 1;
  }
}

.sidebar-menu-heading {
  margin-top: 0;
  margin-bottom: 12px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: var(--text-font-size-small);
}

.sidebar-menu {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar-menu + .sidebar-menu,
.sidebar-menu + .sidebar-menu-heading {
  margin-top: 24px;
}

.sidebar-menu li {
  display: block;
  margin-right: -15px;
  padding: 0;
}

.sidebar-menu li a,
.sidebar-menu li button {
  display: flex;
  align-items: center;
  position: relative;
  font-weight: 500;
  padding: 6px 32px 6px 0;
  font-size: 14px;
  color: var(--secondary-text-color);
  border: none;
  background-color: transparent;
  transition: color .3s ease-in-out;
}

.sidebar-menu li a img,
.sidebar-menu li button img {
  display: block;
  width: 25px;
  height: 25px;
  margin-right: 12px;
}

.sidebar-menu li .sidenav__item__article {
  font-weight: normal;
}

.sidebar-menu li .sidenav__item__article.is-active {
  color: var(--primary-color);
}

.sidebar-menu li a i {
  display: block;
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
}

.sidebar-menu li a:hover,
.sidebar-menu li button:hover {
  text-decoration: none;
  color: var(--primary-color);
}

.sidebar-menu li a[aria-expanded="true"],
.sidebar-menu li a.is-active {
  color: var(--primary-color);
}

.sidebar-menu li a[aria-expanded="true"] i,
.sidebar-menu li a.is-active i {
  transform: rotate(180deg);
}

.sidebar-submenu {
  padding-left: 13px;
}

.sidebar-submenu {
  margin: 0;
  padding-left: 12px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.sidebar-submenu li {
  margin-right: 0;
}

.sidebar-submenu li.is-active {
  position: relative;
  z-index: 2;
}

.sidebar-submenu li.is-active::before {
  content: '';
  display: block;
  width: calc(100% + 12px);
  height: 100%;
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  background-color: var(--primary-bg-color);
  border: var(--border-width) solid var(--border-color);
}

@media (min-width: 992px) {
  .sidebar-submenu li.is-active::before {
    border-right: none;
    border-top-left-radius: var(--border-radius-base);
    border-bottom-left-radius: var(--border-radius-base);
  }

  .is-collapsed .sidebar-menu li {
    margin-right: 0;
  }

  .is-collapsed .sidebar-menu a {
    padding-right: 0;
    justify-content: center;
    width: 100%;
  }

  .is-collapsed .sidebar-menu a span {
    display: none;
    position: absolute;
    top: 50%;
    left: 100%;
    padding: 4px 6px;
    background-color: rgba(0, 0, 0, .7);
    color: #fff;
    transform: translateY(-50%);
    border-radius: var(--border-radius-button);
    white-space: nowrap;
  }

  .is-collapsed .sidebar-menu a span::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-width: 6px;
    border-style: solid;
    border-color: transparent rgba(0, 0, 0, .7) transparent transparent;
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
  }

  .is-collapsed .sidebar-menu a:hover span {
    display: block;
  }

  .is-collapsed .sidebar-menu a img {
    margin: 0;
  }

  .is-collapsed .sidebar-menu-heading,
  .is-collapsed .sidenav {
    display: none;
  }
}

@media (max-width: 991px) {
  .sidebar-submenu li.is-active::before {
    border-radius: var(--border-radius-base);
  }
}

.sidebar-submenu li a {
  padding-top: 4px;
  padding-bottom: 4px;
  font-weight: normal;
}

.sidebar-submenu li.is-active a,
.sidebar-submenu li a[aria-expanded] {
  color: var(--primary-text-color);
}

i.arrow-bottom {
  display: inline-block;
  width: .5em;
  height: .5em;
}

i.arrow-bottom::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-bottom: 1px solid currentColor;
  border-left: 1px solid currentColor;
  transform: rotate(-45deg);
}

[role="main"] {
  padding: 40px 0 0;
}

@media (min-width: 992px) {
  [role="main"] {
    padding: 40px 15px 0;
  }
}

[dir] .btn--avatar {
  border: none;
  padding: 0;
}

[dir] .btn--avatar img {
  width: 37px;
  height: 37px;
}

/* Welcome */
[dir] .welcome__title {
  margin: 0;
}

[dir] .welcome__subtitle {
  color: var(--secondary-text-color);
  font-size: var(--heading-2-font-size);
  margin: 12px 0 0;
}

.section__description {
  color: var(--secondary-text-color);
  font-size: var(--heading-4-font-size);
  margin: 12px 0 0;
}

.section__subscribe {
  margin-top: 24px;
}

.section + .section {
  margin-top: 40px;
}

@media (min-width: 480px) {
  .section__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .section__container > * {
    margin-top: 0 !important;
  }
}

.section__meta {
  display: flex;
  align-items: center;
  margin-top: 24px;
}

.section__meta > * + * {
  margin-left: 8px;
}

@media (min-width: 992px) {
  .section + .section {
    margin-top: 60px;
  }

  .welcome {
    margin-bottom: -20px;
  }
}

/* Helpers */
.helpers {
  position: relative;
  z-index: 2;
}

.helpers__container {
  margin-bottom: -15px;
}

.helpers__container > .col-12 {
  margin-bottom: 15px;
}

.helpers__item {
  display: flex;
  flex-direction: column;
  padding: 30px;
  position: relative;
  z-index: 2;
  height: 100%;
  border-radius: var(--border-radius-base);
  background-color: var(--secondary-bg-color);
  overflow: hidden;
  min-height: 100px;
}

.helpers__item::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, .2) 100%);
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration) var(--timing-function);
  z-index: -1;
}

@media (max-width: 575px) {
  .helpers__item {
    flex: 1 1 100%;
    min-width: 100%;
    padding-left: 108px;
  }

  .helpers__item + .helpers__item {
    border-top: var(--border-width) solid var(--border-color);
  }
}

@media (min-width: 576px) {
  .helpers__item {
    align-items: center;
    padding-top: 24px;
    padding-bottom: 32px;
    text-align: center;
  }
}

.helpers__icon {
  display: block;
  position: absolute;
  top: calc(50% - 30px);
  left: 24px;
}

@media (min-width: 576px) {
  .helpers__icon {
    margin-bottom: 16px;
    position: relative;
    top: unset;
    left: unset;
  }
}

.helpers__icon img,
.helpers__icon svg {
  display: block;
  margin: 0 auto;
  width: 60px;
  height: 60px;
}

@media (min-width: 768px) {

  .helpers__icon img,
  .helpers__icon svg {
    width: 100px;
    height: 100px;
  }
}

.helpers__title {
  color: var(--primary-text-color);
  transition: color var(--duration) var(--timing-function);
}

@media (min-width: 576px) {
  .helpers__title {
    margin-bottom: 13px;
  }
}

.helpers__description {
  color: var(--secondary-text-color);
  font-size: var(--text-font-size-small);
  transition: color var(--duration) var(--timing-function);
}

.helpers__item:hover,
.helpers__item:active {
  z-index: 3;
  background-color: var(--secondary-color);
  color: var(--white-color);
}

.helpers__item:hover::before,
.helpers__item:active::before {
  opacity: 1;
  visibility: visible;
}

.helpers__item:hover .helpers__title,
.helpers__item:active .helpers__title,
.helpers__item:hover .helpers__description,
.helpers__item:active .helpers__description {
  color: var(--white-color);
}

/* Promoted articles */
.promoted .container {
  margin-bottom: -24px;
}

.promoted__link {
  display: block;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: var(--border-radius-small);
  border: var(--border-width) solid var(--border-color);
  background-color: transparent;
  color: var(--primary-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.promoted__link:hover,
.promoted__link:active {
  background-color: var(--secondary-bg-color);
  border-color: var(--primary-color);
}

/* Category list */
.category-list .container {
  margin-bottom: -15px;
}

.category-list .col-12 {
  margin-bottom: 15px;
}

@media (min-width: 768px) {
  .category-list .container {
    margin-bottom: -30px;
  }

  .category-list .col-12 {
    margin-bottom: 30px;
  }
}

.category-list__item {
  display: block;
  position: relative;
  padding: 24px;
  height: 100%;
  background-color: var(--secondary-color);
  border-radius: var(--border-radius-base);
  z-index: 3;
  overflow: hidden;
}

.category-list__item::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, .2) 100%);
  transition: all var(--duration) var(--timing-function);
  z-index: -1;
}

.category-list__item:hover,
.category-list__item:active {
  transform: translateY(-6px);
}

.category-list__title {
  display: block;
  color: var(--primary-text-color);
}

.category-list__description {
  display: block;
  margin-top: 12px;
  color: var(--primary-text-color);
  font-size: var(--text-font-size-small);
}

.ui-dark .category-list__title,
.ui-dark .category-list__description {
  color: var(--primary-bg-color);
}

/* Category tree */
.category-tree {
  --primary-bg-color: var(--secondary-bg-color-always);
  --secondary-bg-color: var(--primary-bg-color-always);

  background-color: var(--primary-bg-color);
  border-radius: var(--border-radius-base);
  padding: 0 24px;
}

.category-tree__item + .category-tree__item {
  border-top: var(--border-width) solid var(--border-color);
}

.category-tree__heading {
  display: block;
  color: var(--primary-text-color);
  padding: 26px 40px 26px 0;
  position: relative;
}

.category-tree__heading i {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  transition: all var(--duration) var(--timing-function);
  transform: translateY(-50%);
  color: var(--secondary-text-color);
  opacity: .3;
}

.category-tree__heading:hover,
.category-tree__heading:active,
.category-tree__heading.is-active {
  color: var(--primary-color);
}

.category-tree__heading.is-active i {
  transform: rotate(180deg) translateY(50%);
  color: var(--primary-color);
  opacity: 1;
}

@media (min-width: 992px) {
  .category-tree__heading {
    font-size: 24px;
  }
}

.category-tree__content {
  padding: 22px 0 18px;
}

.category-tree__heading p {
  margin: 0;
}

.category-tree__heading p.category-tree__description {
  color: var(--secondary-text-color);
  font-size: var(--text-font-size);
  margin-top: 6px;
  font-weight: normal;
}

.category-tree__section {
  width: 100%;
  background-color: var(--secondary-bg-color);
  margin-bottom: 24px;
}

.category-tree__section-name {
  display: block;
  width: 100%;
  padding: 20px 76px 20px 24px;
  background-color: var(--primary-color);
  color: var(--white-color);
  position: relative;
}

.category-tree__section-name::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  font-weight: 900;
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  transition: all .2s ease;
}

.category-tree__section-name.is-active {
  color: var(--white-color);
}

.category-tree__section-name-home {
  display: block;
  color: var(--primary-text-color);
  margin-bottom: 24px;
}

.category-tree__section-name.is-active::after {
  transform: translateY(-50%) rotate(180deg);
}

.category-tree__section-description {
  display: block;
  color: var(--secondary-text-color);
  margin-top: 6px;
}

.category-tree__section-name:hover,
.category-tree__section-name:active {
  color: var(--white-color);
  background-color: var(--primary-color-hover);
}

.category-tree__section-description span {
  display: inline-block;
  border-radius: var(--border-radius-small);
  font-size: 12px;
  padding: 2px 4px;
  background-color: var(--secondary-bg-color);
  color: var(--primary-text-color);
  font-weight: normal;
  vertical-align: middle;
}

.category-tree__body {
  padding: 0 24px;
}

.category-tree__article,
.category-tree__subsection {
  display: block;
  padding: 16px 0;
  color: var(--primary-text-color);
}

.category-tree__article:hover,
.category-tree__subsection:hover {
  text-decoration: underline;
}

.category-tree__article + .category-tree__article,
.category-tree__subsection + .category-tree__subsection,
.category-tree__subsections ~ .category-tree__articles {
  border-top: 1px solid var(--border-color);
}

.category-tree__subsection {
  font-weight: bold;
}

.category-tree__more a {
  display: block;
  padding: 16px 0;
  color: var(--primary-text-color);
  font-weight: bold;
  border-top: 1px solid var(--border-color);
  text-decoration: underline;
}

.category-tree__more a:hover {
  text-decoration: none;
}

.category-tree__empty {
  color: var(--secondary-text-color);
  font-style: italic;
  padding: 16px 0;
}

.category-tree__empty a {
  color: var(--secondary-text-color);
}

/* Recent activity */
.recent-activity-header {
  margin-bottom: 36px;
}

.recent-activity-list {
  margin-right: -15px;
  margin-left: -15px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -30px;
}

.recent-activity-item {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 15px;
  margin-bottom: 30px;
  position: relative;
  z-index: 2;
}

@media (min-width: 768px) {
  .recent-activity-item {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (min-width: 992px) {
  .recent-activity-item {
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }
}

.recent-activity-item-parent {
  display: block;
  margin-bottom: 6px;
  color: var(--primary-color);
  font-weight: bold;
}

.recent-activity-item-parent:hover,
.recent-activity-item-parent:active {
  color: var(--primary-color-hover);
}

.recent-activity-item-link {
  display: block;
  margin-bottom: 8px;
  font-size: var(--heading-4-font-size);
  font-weight: bold;
  color: var(--primary-text-color);
}

.recent-activity-item-meta {
  font-size: 13px;
  color: var(--secondary-text-color);
}

.recent-activity-comment-icon {
  display: none;
}

.recent-activity-item-comment {
  margin-right: 12px;
}

.recent-activity-comment-icon::after {
  content: attr(data-comment-count);
}

.recent-activity-controls {
  text-align: center;
  margin-top: 40px;
}

.recent-activity-item .btn {
  margin-top: 12px;
  padding: 4px 28px 4px 16px;
  border-radius: 50px;
}

.recent-activity-item .btn::after {
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

/* CTA */
.cta__container {
  background-color: var(--primary-color);
  color: var(--white-color);
  display: flex;
  border-radius: var(--border-radius-base);
  position: relative;
  z-index: 3;
  overflow: hidden;
}

.cta__container::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, .2) 100%);
  transition: all var(--duration) var(--timing-function);
  z-index: -1;
}

.cta__content {
  padding: 12px 24px;
  flex: 1 1 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--white-color);
}

.cta__title {
  margin: 0;
}

.cta__subtitle {
  color: var(--white-color);
  margin: 12px 0 24px;
}

.cta__btn {
  color: var(--white-color);
}

[dir] .cta__btn:hover,
[dir] .cta__btn:active {
  color: var(--primary-color);
  background-color: var(--white-color);
  border-color: var(--white-color);
}

@media (min-width: 992px) {
  .cta__title {
    font-size: var(--heading-1-font-size);
  }

  .cta__subtitle {
    font-size: var(--heading-3-font-size);
  }
}

@media (min-width: 768px) {
  .cta__content {
    padding: 46px;
  }
}

/* Footer */
.footer {
  margin-top: 42px;
  padding: 24px 0;
  border-top: var(--border-width) solid var(--border-color);
}

@media (min-width: 992px) {
  .footer {
    margin-right: 15px;
    margin-left: 15px;
  }
}

.footer__soc a {
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--secondary-bg-color);
  text-align: center;
  line-height: 36px;
  color: var(--secondary-text-color);
  font-size: 18px;
  text-decoration: none;
}

.footer__soc a:hover,
.footer__soc a:active {
  color: var(--primary-bg-color);
  background-color: var(--link-color-hover);
}

.footer__copy {
  text-align: right;
  color: var(--secondary-text-color);
  font-size: 14px;
}

@media (max-width: 767px) {

  .footer__soc,
  .footer__copy {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 6px;
  }
}

@media (max-width: 991px) {
  .footer__soc {
    margin-bottom: 12px;
  }

  .footer__soc a {
    margin-left: 4px;
  }
}

/* Breadcrumbs */
.breadcrumbs {
  display: block;
  margin: 0 0 12px;
  padding: 0;
  font-weight: bold;
}

.breadcrumbs--bottom {
  margin: 12px 0 0;
}

.breadcrumbs li {
  font-size: var(--text-font-size-small);
  margin-right: 8px;
  display: inline-block;
  position: relative;
}

.breadcrumbs li + li {
  padding-left: 14px;
}

.breadcrumbs li + li::before {
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-size: 10px;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  color: var(--secondary-text-color);
}

/* Inner pages */
.inner-page-heading .section__title {
  margin-bottom: 0;
}

.inner-page-heading--center {
  text-align: center;
}

.inner-page {
  background-color: var(--primary-bg-color);
  padding-top: 48px;
  padding-bottom: 48px;
}

.inner-page__sections {
  margin-bottom: 10px;
}

.inner-page__sections .col-12 {
  margin-bottom: 30px;
}

.article-heading {
  margin: -40px 0 40px;
}

.entry-info {
  display: flex;
  font-size: 14px;
}

.entry-info__avatar {
  flex-shrink: 0;
}

[dir=ltr] .entry-info__avatar {
  padding-right: 12px;
}

[dir=rtl] .entry-info__avatar {
  padding-left: 12px;
}

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

[dir] .user-avatar {
  border-radius: 100%;
}

.user-avatar--profile {
  margin-bottom: 12px;
}

.user-avatar--default {
  width: 40px;
  height: 40px;
}

.meta {
  font-size: var(--text-font-size-small);
  color: var(--secondary-text-color);
}

.inner-page__rightbar + .inner-page__rightbar {
  margin-top: 24px;
  padding-top: 24px;
  border-top: var(--border-width) solid var(--border-color);
}

.inner-page__rightbar h3,
.recent-articles-title,
.related-articles-title,
.recent-articles h3 {
  margin: 0 0 24px;
  font-size: var(--heading-3-font-size);
}

.related-articles ul,
.recent-articles ul {
  margin: 0;
  padding: 0;
  display: block;
}

.related-articles ul li,
.recent-articles ul li {
  display: block;
  list-style: none;
  margin: 0;
  padding: 6px 0;
}

.share {
  display: flex;
  margin: 0;
  padding: 0;
}

.share li {
  display: block;
  margin: 0 12px 0 0;
  padding: 0;
  list-style: none;
}

.attachments {
  margin: 24px 0;
}

.attachment-list {
  display: block;
  margin: 24px 0;
  padding: 0;
}

.attachment-list__item {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.attachment-list__item + .attachment-list__item {
  margin-top: 8px;
}

.attachment-list__item i {
  color: var(--primary-color);
}

.article-vote {
  margin: 40px 0;
  border-top: var(--border-width) solid var(--border-color);
  padding-top: 24px;
  text-align: center;
}

.article-vote__title {
  margin: 0 0 24px;
}

.article-vote__count {
  margin-top: 12px;
}

.article-more-questions {
  margin: 40px 0;
}

.article-lists {
  margin: 40px 0 0;
  border-top: var(--border-width) solid var(--border-color);
  padding-top: 40px;
}

@media (max-width: 767px) {
  .article-lists .col-12 + .col-12 {
    margin-top: 40px;
  }
}

/* Comments */
.comments {
  border-top: var(--border-width) solid var(--border-color);
  padding-top: 40px;
}

.comments__heading {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}

.comments__title {
  margin: 0;
}

.comments__container {
  background-color: var(--secondary-bg-color);
  border-radius: var(--border-radius-base);
  padding: 40px;
}

.comment-form__body textarea {
  height: 112px;
}

.comment-form__attachments,
.comment-form__controls {
  margin-top: 8px;
}

.comment-form__ccs ul {
  display: block;
  margin: 0 0 8px;
}

.comment-form__mark-as-solved {
  display: flex;
  margin-bottom: 8px;
}

.comment-form__mark-as-solved label {
  margin-left: 8px;
}

.comments__list {
  padding: 0 40px 16px;
  margin: 0 -40px 40px;
  border-bottom: var(--border-width) solid var(--border-color);
}

.comments__list--content {
  margin-right: 0;
  margin-left: 0;
  padding-right: 0;
  padding-left: 0;
}

.comment {
  position: relative;
  margin-bottom: 24px;
}

.comment__left {
  width: 100%;
}

.comment__sidebar {
  width: 30px;
  margin-left: 12px;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
}

.comment__sidebar ~ .comment__left {
  width: calc(100% - 42px);
  min-height: 80px;
}

.comment + .comment {
  padding-top: 24px;
  border-top: var(--border-width) solid var(--border-color);
}

.comment + .comment .comment__sidebar {
  top: 24px;
}

.comment__heading {
  display: flex;
  align-items: center;
}

.user-avatar {
  margin-right: 12px;
}

.comment__body {
  margin-top: 12px;
}

.comment__actions {
  margin-top: 4px;
}

.request-details {
  display: flex;
  flex-wrap: wrap;
}

.request-details dt {
  flex: 0 0 50%;
  max-width: 50%;
  margin: 0;
  font-weight: bold;
}

.request-details dd {
  flex: 0 0 50%;
  max-width: 50%;
  margin: 0;
  color: var(--secondary-text-color);
}

.request-status {
  padding: 2px 8px;
  border: var(--border-radius-button);
  background-color: var(--secondary-bg-color);
  font-size: var(--text-font-size-small);
}

.request-status--open,
.request-status--new {
  background-color: var(--danger-color);
  color: var(--white-color);
}

.request-status--answered {
  background-color: var(--warning-color);
  color: var(--white-color);
}

.request-status--solved,
.request-status--closed {
  background-color: var(--success-color);
  color: var(--white-color);
}

/**/
.my-activities-menu {
  display: flex;
  margin: 36px 0 0;
  padding: 0;
  font-weight: bold;
  border-bottom: var(--border-width) solid var(--border-color);
}

.my-activities-menu__item {
  display: block;
  margin: 0 32px 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 480px) {
  .my-activities-menu__item {
    margin: 0 12px 0 0;
  }
}

.my-activities-menu__item.is-active {
  padding: 0 0 12px;
  border-bottom: 3px solid var(--primary-color);
}

.my-activities {
  width: 100%;
}

.my-activities thead {
  font-weight: bold;
}

.my-activities thead td {
  padding-bottom: 12px;
}

.my-activities tbody td {
  padding: 4px 0;
}

.my-activities__btn {
  width: 10px;
}

.pagination {
  display: block;
  margin: 24px 0;
}

.pagination-list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.pagination-list li {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination-list li + li {
  margin-left: 4px;
}

@media (max-width: 767px) {
  .my-activities__is-hidden {
    display: none !important;
  }
}

.my-activities thead .requests-link,
.my-activities thead .requests-link:hover,
.my-activities thead .requests-link:active {
  color: var(--primary-text-color);
}

.my-activities thead .requests-sort-symbol {
  font-size: 10px;
  color: var(--link-color);
  margin-left: 4px;
}

#search-filter {
  margin-bottom: 40px;
}

.filter {
  margin: 0;
}

@media (min-width: 768px) {
  .filter {
    display: block !important;
    height: auto !important;
  }
}

@media (max-width: 767px) {
  #search-filter h3::after {
    font-family: "Font Awesome 5 Free";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-weight: 900;
    content: "\f107";
    color: var(--secondary-text-color);
    margin-left: 8px;
  }
}


.filter li {
  padding: 4px 0;
}

.filter__btn {
  margin-top: 24px;
}

.topic-list {
  margin-bottom: -16px;
}

.topic-list__item {
  padding: 24px;
  margin-bottom: 16px;
  border-radius: var(--border-radius-base);
  background-color: var(--secondary-bg-color);
}

.topic-list__heading {
  margin-top: 0;
}

.topic-list + .pagination {
  margin-top: 40px;
}

.topic-controls {
  margin-bottom: 40px;
}

.vote-sum {
  margin: 0 12px;
}

/* Profile */
.profile-stats:first-child {
  margin-top: 0;
}

.profile-stats__stat {
  display: flex !important;
}

.profile-stats__label {
  display: block;
  flex: 0 0 50%;
  max-width: 50%;
  color: var(--secondary-text-color);
  font-size: var(--text-font-size-small);
}

.profile-stats__label::after {
  content: ':';
}

.profile-stats__value {
  display: block;
  flex: 0 0 50%;
  max-width: 50%;
  font-weight: bold;
  font-size: var(--text-font-size-small);
}

.community-badges-block {
  padding-bottom: 24px;
}

.community-badges {
  display: flex;
  flex-wrap: wrap;
}

.community-badges img {
  width: 40px;
  height: 40px;
  margin-right: 4px;
}

.community-badge-titles {
  display: inline-block;
  font-family: var(--text-font-family);
  font-size: var(--text-font-size-small);
  font-weight: normal;
  background-color: var(--secondary-color);
  padding: 2px 12px 2px 4px;
  border-radius: var(--border-radius-button);
  color: var(--white-color);
  line-height: 1;
  vertical-align: middle;
}

.profile-heading {
  margin-bottom: 40px;
}

.profile-heading h2 {
  margin: 0 0 12px;
}

.profile-user-meta > span {
  display: block;
  font-weight: bold;
  color: var(--primary-text-color);
}

.profile-badges-item-image {
  display: block;
  margin-right: 12px;
}

.profile-badges-item-image img {
  width: 40px;
  height: 40px;
  display: block;
}

.profile-badges-item-image.titles {
  border-radius: 50%;
  background-color: var(--secondary-text-color);
}

.profile-badges-item-metadata {
  margin-top: 12px;
}

@media (max-width: 767px) {
  .request-sidebar {
    margin-top: 36px;
    background-color: var(--secondary-bg-color);
    border-radius: var(--border-radius-base);
    padding: 12px;
  }
}

.my-activities__filter {
  display: flex;
  align-items: flex-end;
  margin-top: 12px;
  margin-bottom: 32px;
}

.my-activities__filter > * + * {
  margin-left: 8px;
}

.my-activities__filter label[for] {
  margin-bottom: 4px;
}

.my-activities__search {
  width: 50%;
  position: relative;
}

.my-activities__search input[type="search"] {
  padding-left: 42px;
}

.my-activities__search::before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-size: 14px;
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  content: "\f002";
  left: 15px;
  color: var(--secondary-text-color);
}

@media (max-width: 575px) {
  .my-activities__filter {
    flex-direction: column;
  }

  .my-activities__filter > * {
    width: 100%;
  }

  .my-activities__filter > * + * {
    margin-left: 0;
    margin-top: 8px;
  }
}

.markdown > * {
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.ui-dark #hc-wysiwyg [class^=wysiwyg-icon-]:active,
.ui-dark #hc-wysiwyg [class^=wysiwyg-icon-][aria-selected=true] {
  background-color: var(--primary-bg-color);
  border-color: var(--primary-bg-color);
}

#hc-wysiwyg [role=form] input {
  min-height: 28px;
  border-radius: 2px;
}

.ui-dark #hc-wysiwyg [role=form] input {
  color: #000;
}

.ui-dark #hc-wysiwyg [role=form] label {
  color: #000;
}

.ui-dark .wysiwyg-icon-formats {
  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='%23fff' stroke-linecap='round' d='M2.5 1.5h6m-3 0v10'/%3E%3C/svg%3E") !important;
}

.ui-dark .wysiwyg-icon-bold {
  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='%23fff' d='M5.4 1c1.69 0 3.1 1.336 3.1 3 0 .95-.46 1.794-1.17 2.342C8.317 6.842 9 7.842 9 9c0 1.664-1.41 3-3.1 3H2.5a.5.5 0 01-.5-.5v-10a.5.5 0 01.5-.5h2.9zM3 11h2.9C7.05 11 8 10.1 8 9s-.95-2-2.1-2H3v4zm2.4-9H3v4h2.4c1.15 0 2.1-.9 2.1-2s-.95-2-2.1-2z'/%3E%3C/svg%3E") !important;
}

.ui-dark .wysiwyg-icon-italic {
  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='%23fff' stroke-linecap='round' d='M5.5 1.5h2m-1 0l-2 10m-1 0h2'/%3E%3C/svg%3E") !important;
}

.ui-dark .wysiwyg-icon-bullist {
  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='%23fff' stroke-linecap='round' d='M5 2.5h5.5M5 6.5h5.5m-5.5 4h5.5'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='2' cy='2.5' r='1'/%3E%3Ccircle cx='2' cy='6.5' r='1'/%3E%3Ccircle cx='2' cy='10.5' r='1'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.ui-dark .wysiwyg-icon-numlist {
  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='%23fff' d='M4.5 3a.5.5 0 010-1h6a.5.5 0 110 1h-6zm0 4a.5.5 0 010-1h6a.5.5 0 110 1h-6zm0 4a.5.5 0 110-1h6a.5.5 0 110 1h-6zM1.49 3.22c-.13 0-.21-.08-.21-.22v-.09c0-.13.08-.21.21-.21h.28V1.57l-.05.05c-.05.05-.1.07-.15.07-.04 0-.1-.01-.15-.08l-.07-.06a.242.242 0 01-.06-.15c0-.04.01-.09.07-.15l.41-.39c.07-.07.14-.1.22-.1h.14c.13 0 .21.08.21.22V2.7h.28c.13 0 .22.08.22.21V3c0 .13-.08.22-.22.22H1.49zm-.12 4.02c-.14 0-.23-.09-.23-.22 0-.58.38-.85.69-1.06.21-.15.39-.27.39-.42 0-.18-.14-.24-.27-.24-.15 0-.24.1-.28.14-.05.06-.11.09-.17.09a.21.21 0 01-.13-.05l-.08-.07c-.1-.08-.12-.19-.05-.29.13-.17.36-.38.75-.38.49 0 .83.31.83.76 0 .46-.37.71-.66.9-.17.11-.31.21-.37.32h.84c.13 0 .22.08.22.21v.09c0 .14-.08.22-.22.22H1.37zm.59 4c-.32 0-.56-.13-.71-.24-.1-.08-.12-.19-.04-.3l.06-.1c.05-.08.12-.1.16-.1.04 0 .09.01.13.04.08.06.21.13.37.13.19 0 .33-.11.33-.26 0-.25-.31-.28-.41-.28-.15 0-.22-.04-.27-.14a.239.239 0 01.03-.29s.37-.44.38-.45h-.56c-.13 0-.21-.08-.21-.21v-.08c0-.13.08-.22.21-.22h1.13c.13 0 .22.08.22.21s-.03.19-.08.26l-.41.48c.3.09.56.33.56.72-.01.41-.31.83-.89.83z'/%3E%3C/svg%3E") !important;
}

.ui-dark .wysiwyg-icon-code-block {
  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='%23fff'%3E%3Crect width='11' height='9' x='.5' y='1.5' rx='.5' ry='.5'/%3E%3Cpath stroke-linecap='round' d='M5.5 8.5h4m-7-5l2.1 2.1a.5.5 0 010 .7L2.5 8.5'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.ui-dark .wysiwyg-icon-link {
  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='%23fff' d='M3.328 5.176l.673.673-.701.715-.325-.326-1.397 1.396a1.975 1.975 0 000 2.792l.108.1c.776.67 1.95.637 2.685-.1l1.396-1.395-.345-.346.7-.715.706.706a.5.5 0 010 .708l-1.75 1.75A2.975 2.975 0 01.871 6.926l1.75-1.75a.5.5 0 01.707 0zm4.892-2.09a.5.5 0 01.689.702l-.059.07-2.525 2.474L3.857 8.85l-.069.059a.5.5 0 01-.702-.69l.057-.069 2.475-2.525L8.15 3.143l.07-.057zM11.134.87a2.975 2.975 0 010 4.207l-1.75 1.75a.5.5 0 01-.708 0l-.705-.705.715-.701.344.345 1.396-1.396a1.975 1.975 0 000-2.793l-.108-.1a1.975 1.975 0 00-2.684.1L6.238 2.974l.326.327-.715.7-.673-.673a.5.5 0 010-.707l1.75-1.75a2.975 2.975 0 014.208 0z'/%3E%3C/svg%3E") !important;
}

.ui-dark .wysiwyg-icon-image {
  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='%23fff'%3E%3Crect width='11' height='9' x='.5' y='1.5' rx='.5' ry='.5'/%3E%3Cpath d='M.5 10.5l3.65-3.65a.5.5 0 01.71 0l1.79 1.8a.5.5 0 00.71 0l.79-.79a.5.5 0 01.71 0L11 10'/%3E%3C/g%3E%3Ccircle cx='8' cy='4' r='1' fill='%23fff'/%3E%3C/svg%3E") !important;
}

.ui-dark .wysiwyg-icon-quote {
  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='%23fff' stroke-linecap='round' d='M5 6.5H3c-.3 0-.5-.2-.5-.5V4c0-.3.2-.5.5-.5h2c.3 0 .5.2.5.5v2c0 .3-.2.5-.5.5zm5 0H8c-.3 0-.5-.2-.5-.5V4c0-.3.2-.5.5-.5h2c.3 0 .5.2.5.5v2c0 .3-.2.5-.5.5zM9.5 10c.5-.5 1-1.5 1-3V5.5m-6 4.5c.5-.5 1-1.5 1-3V5.5'/%3E%3C/svg%3E") !important;
}

#tinymce {
  display: block;
  padding: 12px;
  background: transparent;
  height: 100%;
  min-height: 100%;
}

#tinymce a {
  text-decoration: underline;
}

#tinymce a:hover {
  text-decoration: none;
}

#tinymce > *:first-child {
  margin-top: 0;
}

#tinymce > *:last-child {
  margin-bottom: 0;
}

#tinymce pre {
  background-color: var(--primary-bg-color);
  border: none;
}

#hc-wysiwyg [role=menu],
#hc-wysiwyg [role=menu] > [role=button] {
  background-color: var(--primary-bg-color);
  border-color: var(--border-color);
}

#hc-wysiwyg [role=menu] > [role=button]:hover {
  background: var(--secondary-bg-color);
}

/* Wysiwyg body */
.wysiwyg-body p code {
  display: inline-block;
  padding: 0 0.25em;
  border-radius: 2px;
  border: 1px solid var(--border-color);
  background-color: var(--secondary-bg-color);
  color: var(--primary-text-color);
  white-space: pre;
}

.wysiwyg-body pre code {
  border-radius: var(--border-radius-small);
  padding: 10px 15px;
  overflow-x: auto;
}

.wysiwyg-body pre .hljs {
  font-size: var(--text-font-size-small);
}

.ui-light .wysiwyg-body pre .hljs {
  color: var(--secondary-bg-color);
  background-color: var(--primary-text-color);
}

.ui-dark .wysiwyg-body pre .hljs {
  background-color: var(--secondary-bg-color);
}

.ui-dark .comments__container .wysiwyg-body pre .hljs {
  background-color: var(--primary-bg-color);
}

.wysiwyg-body a {
  text-decoration: underline;
  word-break: break-all;
}

.wysiwyg-body a:hover {
  text-decoration: none;
}

.wysiwyg-body blockquote {
  border-left: 5px solid var(--border-color);
  font-style: italic;
  margin-left: 0;
  margin-right: 0;
  overflow: hidden;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

/* Top banner */
.topbarmessage {
  text-align: center;
  margin-right: -15px;
  margin-left: -15px;
  padding: 6px 15px 10px;
  background-color: transparent;
}

.topbarmessage span {
  font-family: var(--heading-font-family);
  color: var(--primary-text-color);
  font-weight: 500;
  font-size: 12px;
}

.topbarmessage a {
  background-color: var(--primary-color);
  padding: 8px 15px;
  border-radius: 100px;
  color: var(--white-color);
  font-family: var(--heading-font-family);
  font-weight: 700;
  margin-left: 10px;
  font-size: 12px;
}

.topbarmessage a:hover {
  background-color: var(--primary-color-hover);
}

.topbarmobilebreak {
  display: none;
}

@media all and (min-width:0px) and (max-width: 420px) {
  .topbarmobilebreak {
    display: inline-block;
    margin-bottom: 10px !important;
  }
}

.stiky-header {
  position: sticky;
  top: 0;
  z-index: 99;
  background-color: var(--primary-bg-color);
}

.community-tabs__links {
  display: inline-flex;
  border-radius: var(--border-radius-button);
  background-color: var(--secondary-bg-color);
}

.community-tabs__links--filter {
  display: flex;
  border-radius: 0;
  background-color: transparent;
  border-bottom: 1px solid var(--border-color);
}

.community-tabs__links a {
  display: block;
  padding: 12px 56px;
  border-radius: var(--border-radius-button);
  background-color: transparent;
  color: var(--primary-text-color);
  font-weight: bold;
}

.community-tabs__links--filter a {
  border-radius: 0;
  background-color: transparent;
  padding: 8px 24px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.community-tabs__links a.is-active {
  background-color: var(--primary-color);
  color: var(--white-color);
}

@media (max-width: 1200px) {
  .community-tabs__links a {
    padding: 8px 24px;
    font-weight: normal;
  }
}

@media (max-width: 991px) {
  .community-tabs__links a {
    font-size: var(--text-font-size-small);
  }
}

@media (max-width: 767px) {
  .community-tabs__links {
    flex-direction: column;
    border-radius: var(--border-radius-base);
  }

  .community-tabs__links a {
    border-radius: var(--border-radius-base);
  }
}

.community-tabs__links--filter a.is-active {
  background-color: transparent;
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.community-tabs__containers {
  overflow: hidden;
  position: relative;
  transition: height 400ms cubic-bezier(0.17, 0.67, 0.54, 1);
}

.community-tabs__containers {
  border-top: 0;
}

.community-tabs__container {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  transition: all 400ms cubic-bezier(0.17, 0.67, 0.54, 1);
  top: 0;
  padding-top: 36px;
  width: 100%;
}

[dir=ltr] .community-tabs__container {
  left: 0;
}

[dir=rtl] .community-tabs__container {
  right: 0;
}

.community-tabs__container.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.custom-post {
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom-post + .custom-post {
  border-top: 1px solid var(--border-color);
}

.custom-post__content {
  flex: 1 1 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.custom-post__meta {
  display: flex;
  gap: 24px;
}

.custom-post__title {
  font-size: var(--text-font-size-large);
  font-weight: bold;
  text-decoration: underline;
  color: var(--primary-text-color);
}

.custom-post__title:hover,
.custom-post__title:focus {
  color: var(--link-color);
  text-decoration: none;
}

@media (min-width: 768px) {
  .custom-post__meta-item {
    text-align: center;
  }

  .custom-post__meta-item b {
    font-size: 28px;
    line-height: 1;
    display: block;
    margin-bottom: 6px;
    color: var(--secondary-text-color);
  }

  .custom-post__meta-item span {
    font-size: var(--text-font-size-small);
  }
}

@media (max-width: 767px) {
  .custom-post {
    flex-direction: column;
    align-items: flex-start;
  }
}

.custom-post__status {
  display: inline-block;
  padding: 0 4px;
  border-radius: var(--border-radius-small);
  font-size: 14px;
  background-color: var(--secondary-color);
  text-transform: capitalize;
  font-weight: bold;
  margin-left: 2px;
}

.custom-post__status--planned {
  background-color: var(--warning-color);
  color: var(--dark-color);
}

.custom-post__status--answered {
  background-color: var(--info-color);
  color: var(--white-color);
}

.custom-post__status--completed {
  background-color: var(--success-color);
  color: var(--white-color);
}

.custom-post__status--not-planned,
.custom-post__status--not_planned {
  background-color: var(--danger-color);
  color: var(--white-color);
}

.custom-post__footer {
  font-size: var(--text-font-size-small);
  color: var(--secondary-text-color);
}

h1.none {
  display: none;
}

.article-heading h1 {
  color: var(--primary-color);
}

p.ProcedureHeading, p.RelatedTopics {
  font-weight: bold;
  font-size: var(--text-font-size-large);
}

ol > li > ol {
  list-style: lower-alpha;
}

ol > li > ol > li > ol {
  list-style: disc;
}

span.Emphasis {
  font-style: italic;
}

span.Strong,
span.UIField {
  font-weight: bold;
}

span.Key {
  font-weight: bold;
  font-family: monospace;
}

span.green {
  color: var(--success-color);
}

span.red {
  color: var(--danger-color);
}

div.Note,
div.note,
div.Warning,
div.warning,
div.Tip,
div.tip,
div.Banner,
div.banner,
div.ClassicUI,
div.classicui,
div.Caution,
div.caution {
  page-break-inside: avoid;
  padding: 10px;
  margin: 20px 0;
  color: var(--primary-text-color);
}
.ui-dark div.Note,
.ui-dark div.note,
.ui-dark div.Warning,
.ui-dark div.warning,
.ui-dark div.Tip,
.ui-dark div.tip,
.ui-dark div.Banner,
.ui-dark div.banner,
.ui-dark div.ClassicUI,
.ui-dark div.classicui,
.ui-dark div.Caution,
.ui-dark div.caution {
  color: var(--primary-bg-color);
}
.ui-dark div.Note code,
.ui-dark div.note code,
.ui-dark div.Warning code,
.ui-dark div.warning code,
.ui-dark div.Tip code,
.ui-dark div.tip code,
.ui-dark div.Banner code,
.ui-dark div.banner code,
.ui-dark div.ClassicUI code,
.ui-dark div.classicui code,
.ui-dark div.Caution code,
.ui-dark div.caution code {
  color: white;
}

code a {
  color: white;
  text-decoration: underline;
}


div.Tip,
div.tip {
  background-color: #F1F9D2;
  border-top: solid #CDFF4E 6px;
}
div.Warning,
div.warning {
  background-color: #ffefef;
  border-top: solid #e10000 6px;
}
div.Note,
div.note {
  background-color: #D8EDEF;
  border-top: solid var(--primary-color) 6px;
}
div.Banner,
div.banner {
  background-color: #e2f5e2;
  border-top: solid #13BA7C 6px;
}
div.ClassicUI,
div.classicui {
  background-color: #EDEDED;
}
div.Caution,
div.caution {
  background-color: rgb(255, 245, 241);
  border-top: solid rgb(255, 119, 63) 6px;
}

img {
  max-width: 100%;
  height: auto;
}

img.max-width-100 {
  max-width: 100%;
}

img.max-width-90 {
  max-width: 90%;
}

img.max-width-80 {
  max-width: 80%;
}

img.max-width-70 {
  max-width: 70%;
}

img.max-width-60 {
  max-width: 60%;
}

img.max-width-50 {
  max-width: 50%;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

[dir] .toc__container .is-hidden {
  display: block !important;
}

.alert-body {
  padding: 10px 0;
}

.alert-body + .alert-body {
  border-top: 1px solid var(--border-color);
}

/* Paragraph centering styles */
p.Center {
  text-align: center;
}

/* REMOVED (this pass): the entire legacy ".TableStyle-Basic" system that
   used to live here -- a base rule plus ~50 per-cell rules keyed to
   auto-generated Flare classes like "TableStyle-Basic-BodyA-Column1-Body1"
   (encoding row-letter/column/cell-role, applied by Flare's own export
   directly to individual <td>/<th> elements). Confirmed via a real
   published example that this pipeline's actual output -- both Paligo's
   and Flare-descended content alike -- never puts those per-cell classes
   on cells at all (bare <td>/<th>, no class whatsoever). The whole system
   was dead weight regardless of content origin. Replaced by one universal
   rule set in section 7 (Tables) further down, which doesn't depend on
   any per-cell classes existing.
   ---------------------------------------------------------------------------- */

h1.none {
  display: none;
}

[dir] a.lightbox-img {
  display: inline-block;
  position: relative;
  cursor: zoom-in;
}

[dir] a.lightbox-img img {
  box-shadow: 0 0 0 2px transparent;
  transition: all .3s ease;
}

[dir] a.lightbox-img img:hover {
  box-shadow: 0 0 0 2px var(--primary-color);
}

img.inline {
  display: inline;
  vertical-align: middle;
}

@media (min-width: 768px) {
  .markdown[itemprop="articleBody"] .table-container table {
    table-layout: auto;
    width: auto;              /* no longer forced to container width */
    word-break: normal;
    overflow-wrap: break-word;
  }
}

/* Give every column a comfortable floor width. Once total column
   widths exceed the container, the table overflows and the wrapper
   below scrolls — instead of every column being squeezed to fit. */
.markdown[itemprop="articleBody"] .table-container table td,
.markdown[itemprop="articleBody"] .table-container table th {
  min-width: 220px;
}

/* Reference-style tables (informaltable — no caption) commonly pair a
   short-identifier first column with much longer Values/Description
   columns. Unbreakable identifiers (colons/periods, no spaces) would
   otherwise stretch column 1 well past its 220px floor to avoid
   wrapping, starving the columns that actually need the room. Capped
   here, scoped to div.informaltable specifically so div.table
   (captioned comparison tables, e.g. scope-of-support) is unaffected. */
.markdown[itemprop="articleBody"] div.informaltable .table-container table td:first-child,
.markdown[itemprop="articleBody"] div.informaltable .table-container table th:first-child {
  max-width: 240px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.markdown[itemprop="articleBody"] .table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.subscribe-btn {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

[dir] .subscribe-btn button {
  line-height: 24px;
}

@media (min-width: 768px) {
  [dir] .subscribe-btn button {
    padding: calc(12px - var(--border-width)) calc(32px - var(--border-width));
    font-weight: bold;
  }
}

.ui-dark .request-list-beta {
  padding: 15px;
  border-radius: var(--border-radius-base);
  background-color: #fff;
  color: #2f3941;
}

.anchor-link {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: -1.5em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: opacity 0.15s ease, visibility 0s linear 0.3s;
}

/* PATCHED: extended from "h1, h2, h3, p.ProcedureHeading" to h1-h6, to
   match the anchor-link injection script.js was extended to cover the
   same headings — see the "anchor-link" jQuery plugin further down this
   file (or in script.js on the live site) for the actual injection logic
   and the admonition-heading exclusion. No exclusion needed here in CSS:
   since the script no longer injects an .anchor-link element into
   admonition h3.title elements at all, there's nothing for this rule to
   reveal there regardless of scope. */
h1, h2, h3, h4, h5, h6, p.ProcedureHeading {
  position: relative;
}

h1:hover .anchor-link,
h2:hover .anchor-link,
h3:hover .anchor-link,
h4:hover .anchor-link,
h5:hover .anchor-link,
h6:hover .anchor-link,
p.ProcedureHeading:hover .anchor-link,
.anchor-link:hover {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.15s ease, visibility 0s;
}

.anchor-link.copied i {
  color: #2ecc71;
}

.anchor-link.copied {
  left: -1em;
  visibility: visible;
  opacity: 1;
}

/* Copy to Clipboard Styling for Code Snippets*/

.copy-code-btn {
  position: absolute;
  top: 4px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #aaa;
  cursor: pointer;
  padding: 2px;
  transition: color 0.15s;
  line-height: 0;
}

.copy-code-btn:hover {
  color: #fff;
  background: transparent;
}

.copy-code-btn.copied {
  color: #4caf50;
}

.copy-code-btn:before {
    content: "Copy\00a0\00a0";
    font-size: smaller;
}


/* ============================================================================
   PALIGO CONTENT FACELIFT — Nerdio brand theme for Paligo-published articles
   ----------------------------------------------------------------------------
   Everything ABOVE this line is your existing theme stylesheet, completely
   unmodified (aside from one pre-existing bug fix — see note at the bottom
   of this comment) — so all navigation chrome (header, sidebar, category
   tree, breadcrumbs, footer, comments, profile, pagination, etc.) keeps
   working exactly as it does today, regardless of which articles use the
   rules below.

   Everything BELOW this line targets ONLY the classes Paligo generates
   inside an article body (span.guilabel, div.note/tip/warning/caution/
   important, ol.procedure > li.step, .table/.informaltable, etc.) and gives
   them the "facelift" look: the Nerdio brand palette and Poppins typography
   already worked out for the Paligo portal theme (nerdio-theme2-overrides),
   the graphical circular step-numbers and icon-led admonitions from Paligo's
   own HTML5 output, ported onto Zendesk's plain DocBook markup.

   IMPORTANT CASCADE NOTE — please read before publishing site-wide:
   Your existing Flare-descended content already uses lowercase div.note /
   div.tip / div.warning / div.caution (see the parity stylesheet notes for
   why). Because this section is appended AFTER those rules and targets the
   same class names, uploading this file site-wide will re-skin OLD Flare
   admonitions with the new Paligo/Nerdio colors too, not just new content —
   there's no markup difference between the two once they're both sitting in
   Zendesk. If you want old and new content to look different until the
   migration is fully done, the cleanest options are: (a) hold off uploading
   this file until Flare content has fully cut over, or (b) we add a
   distinguishing wrapper/class to Paligo's publish target so these rules
   can be scoped to it specifically — happy to build that out if useful.

   One incidental fix while assembling this file: your original stylesheet
   had a malformed comment right before ".alert-body" (missing the opening
   "/*"), which meant the browser was almost certainly silently dropping the
   "p.Center { text-align: center; }" rule that followed it. Fixed in place
   above — worth a spot-check that centered paragraphs in existing articles
   look right after you upload this.

   UPDATE (this pass): admonition severity re-map — Important now takes the
   old Caution yellow, Caution takes the old plain-Warning orange, and
   Warning (+ .danger, folded into one rule) moves to a bright-red border
   with a solid light-pink fill. Added "!" via ::after onto the
   Important/Caution/Warning h3.title labels. Also extended the table
   header teal styling to thead td (not just th), since DocBook allows
   thead>tr>td as a stand-in for thead>tr>th and Paligo renders both the
   same way. See section 5 and section 7 below.

   UPDATE (later pass, same day): fixed several light/dark-mode contrast
   bugs — table cell text, keycaps, and article-body link hover in dark
   mode now match their light-mode look/contrast rather than each having
   their own separate (and in two cases, broken) treatment. Also replaced
   Zendesk's native inline <code>/<code class="filename"> pill styling
   with Paligo HTML5's pink/rose treatment. span.quote is a known
   remaining issue (faint background icon, ugly side bars, missing
   margins) — deliberately deferred, no inline quotes exist in the docs
   yet, will be tackled as its own pass.

   CORRECTION (same day, third pass): every ".article-body" selector in
   this file — headings navy color, link LVHA colors (light AND dark
   mode), and the inline-code fix above — was silently matching NOTHING.
   There is no ".article-body" class anywhere in the live page; the actual
   markup is `<div data-article-body><div class="markdown"
   itemprop="articleBody">` — "article-body" is only an attribute name on
   the OUTER div, and the class on the INNER one (which everything actually
   needs to be scoped to) is "markdown". All instances replaced with
   `.markdown[itemprop="articleBody"]`, which — unlike a bare ".markdown"
   — won't also catch community posts or comments if those ever reuse the
   same "markdown" class for their own rendered content. If a future
   change to headings, links, or code colors doesn't seem to take effect,
   check this first: confirm the selector actually matches something in a
   live page's dev tools before assuming a specificity/cascade problem.

   FINAL PASS (2026-08-14): styling assignment marked complete by the
   person. Later fixes not yet mentioned above: admonition h3.title labels
   forced back to navy in dark mode (were losing to the general
   heading-teal rule — direct rules beat inherited ones regardless of
   specificity); the site's anchor-link "copy heading link" feature
   (script.js, not this file — see SKILL.md) extended to h1-h6 and
   excluded from admonition headings; definition-list terms bolded;
   blockquote and span.quote both rebuilt using the real computed
   admonition values the person provided directly (padding/margin/radius/
   border-left width), rather than guessed ones, with a dark-mode
   navy->teal border swap; span.quote's decorative quote-mark graphic
   fully replaced (not recolored — original mechanism invisible to us) in
   Nerdio purple, with a nested span.quote-inside-span.quote markup quirk
   handled via `all: unset` + explicit ::before/::after suppression on the
   inner one; the sidebar callout floated right with a light-mode-only
   border + offset shadow; standard (non-hover) links fixed to Nerdio teal
   in both modes, splitting a dark-mode rule that had wrongly lumped
   :link and :visited into one color. The span.quote opening-mark's
   `top` offset (0.1em) was tuned live by the person in dev tools, not
   calculated — if the box's font-size/line-height/font-family ever
   change, that value may need re-tuning the same way.

   TABLE REBUILD (2026-08-15): section 7 rewritten from scratch, and the
   legacy .TableStyle-Basic system (previously further up this file)
   removed entirely — see each section's own removal/rebuild notes for
   the full reasoning. Short version: Zendesk's own native
   [data-plugin-formatting] .table styling (in their bundled CSS, not
   this file) was bleeding onto Paligo's .table/.informaltable wrapper
   divs due to a class-name collision, giving formal-table captions an
   unwanted border; the .TableStyle-Basic system depended on per-cell
   classes Paligo's actual output never uses; and admonition-embedded
   layout-hack tables (confirmed via a real example) turned out to need
   no special exclusion at all, since they never carry a
   .table/.informaltable wrapper in the first place. New border color
   is #595959 (a genuine dark grey, replacing the previous #9999a0) per
   explicit request — an estimate, not color-picked against a live
   render; adjust if it reads too dark/light.

   ACCORDION FIX (this pass): the sidebar-callout exclusion below was
   missing a ":not(.accordion)" guard, so <sidebar role="accordion">
   elements (used for collapsible "Learn more" panels) were being
   wrongly caught by the reuse-plumbing/aside heuristic and floated
   right as a narrow callout box, stacking a second border/shadow on
   top of the one already applied to the accordion's own expanded-box
   styling (the ":has(> .panel-body.collapse.in)" rules near the end of
   this file). Added below wherever that selector appears.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Font import & brand color tokens
   ---------------------------------------------------------------------------- */
/* Poppins is imported at the very top of this file instead — see line 1.
   Per the CSS spec, @import rules must appear before every other rule in
   a stylesheet (aside from @charset); an @import placed here, this deep
   into the file, would be silently discarded by the browser. No
   FontAwesome import — Zendesk's theme asset pipeline is built around
   uploaded assets rather than arbitrary third-party CDN @imports, and CSP
   behavior for that varies by account. Admonitions use a colored left
   border + tint instead of an icon, so there's nothing depending on an
   icon font loading correctly. */

:root {
  --nerdio-navy: #042838;        /* Navy orbit */
  --nerdio-teal: #1E9DB8;        /* Nerdio blue / azure — primary accent */
  --nerdio-teal-dark: #12677A;   /* Hover/active variant of teal */
  --nerdio-green: #CDFF4E;       /* Green galaxy */
  --nerdio-green-dark: #B7E63F;  /* Hover state for green */
  --nerdio-purple: #A795C7;      /* Visited-link purple */
}

/* ----------------------------------------------------------------------------
   2. Typography — Poppins site-wide, everything else about nav/layout left as-is
   ---------------------------------------------------------------------------- */
body {
  --text-font-family: 'Poppins', 'Arial Unicode MS', Arial, Helvetica, sans-serif;
  --heading-font-family: 'Poppins', 'Arial Unicode MS', Arial, Helvetica, sans-serif;
  font-weight: 300;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-weight: 500;
}

.markdown[itemprop="articleBody"] h1,
.markdown[itemprop="articleBody"] h2,
.markdown[itemprop="articleBody"] h3, 
.markdown[itemprop="articleBody"] p.related-topics-heading,
.markdown[itemprop="articleBody"] h4,
.markdown[itemprop="articleBody"] h5,
.markdown[itemprop="articleBody"] h6,
.markdown[itemprop="articleBody"] .titlepage .title {
  font-weight: 500;
  color: var(--nerdio-navy);
}


/* ----------------------------------------------------------------------------
   3. Links within article content — LVHA order matters, keep as written
   ---------------------------------------------------------------------------- */
.markdown[itemprop="articleBody"] a:link {
  color: var(--nerdio-teal);
}

.markdown[itemprop="articleBody"] a:visited {
  color: var(--nerdio-purple);
}

.markdown[itemprop="articleBody"] a:hover,
.markdown[itemprop="articleBody"] a:focus {
  color: var(--nerdio-navy);
  background-color: var(--nerdio-green);
}

.markdown[itemprop="articleBody"] a:active {
  color: var(--nerdio-navy);
  background-color: transparent;
  text-decoration: underline;
  text-decoration-color: var(--nerdio-green);
  text-underline-offset: 2px;
}

/* ----------------------------------------------------------------------------
   4. Inline character-level elements
   ---------------------------------------------------------------------------- */
span.guilabel,
span.guibutton,
span.guimenu,
span.guisubmenu,
span.guimenuitem,
span.menuchoice {
  font-weight: 500;
}

span.keycap {
  display: inline-block;
  font-weight: normal;
  font-family: monospace;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.1em 0.5em;
  margin: 0 0.2em;
  box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
  background-color: #f7f7f7;
  color: var(--nerdio-navy);
}

code.literal,
span.literal,
span.filename,
span.systemitem,
span.command,
span.option,
span.replaceable,
span.parameter,
span.varname,
span.classname,
span.methodname,
span.prompt,
span.userinput,
span.computeroutput,
span.database,
span.application,
span.hardware,
span.envar,
span.errorcode {
  font-family: "Consolas", "SF Mono", "Source Code Pro", monospace;
  background-color: var(--secondary-bg-color);
  border-radius: 3px;
  padding: 0 4px;
}

.markdown[itemprop="articleBody"] code.code,
.markdown[itemprop="articleBody"] code.filename {
  color: var(--primary-text-color);
  background-color: color-mix(in srgb, var(--primary-bg-color) 92%, var(--primary-text-color) 8%);
  border-radius: 4px;
  padding: 2px 4px;
  font-size: var(--text-font-size-small);
}

/* ----------------------------------------------------------------------------
   5. Admonitions — Nerdio-tinted boxes, no icon font dependency
   ---------------------------------------------------------------------------- */

div.note,
div.tip,
div.warning,
div.caution,
div.important {
  display: block;
  padding: 14px 20px;
  margin: 20px 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 6px;
  border: none;
  border-left: 6px solid;
  line-height: 1.5;
}

div.note > h3.title,
div.tip > h3.title,
div.warning > h3.title,
div.caution > h3.title,
div.important > h3.title {
  font-family: 'Poppins', 'Arial Unicode MS', Arial, Helvetica, sans-serif;
  font-size: var(--text-font-size-large);
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 6px;
  line-height: 1.3;
  color: var(--nerdio-navy);
}

div.note, div.tip, div.warning, div.caution, div.important {
  display: flow-root;
}

div.note {
  border-left-color: var(--nerdio-green);
  background-color: #F8FFE4;
}

div.tip {
  border-left-color: var(--nerdio-teal);
  background-color: #EDF7F9;
}

div.important {
  border-left-color: #ffe81a;
  background-color: #FFFEF4;
}

div.caution {
  border-left-color: #ffb74d;
  background-color: #FFF9F1;
}

div.warning,
div.warning.danger {
  border-left-color: red;
  background-color: #FFF0F0;
}

.ui-dark div.note,
.ui-dark div.tip,
.ui-dark div.warning,
.ui-dark div.caution,
.ui-dark div.important {
  color: var(--nerdio-navy);
}

.ui-dark .markdown[itemprop="articleBody"] div.note h3.title,
.ui-dark .markdown[itemprop="articleBody"] div.tip h3.title,
.ui-dark .markdown[itemprop="articleBody"] div.warning h3.title,
.ui-dark .markdown[itemprop="articleBody"] div.caution h3.title,
.ui-dark .markdown[itemprop="articleBody"] div.important h3.title {
  color: var(--nerdio-navy);
}

div.important > h3.title::after,
div.caution > h3.title::after,
div.warning > h3.title::after {
  content: "!";
}

/* ----------------------------------------------------------------------------
   6. Procedures — graphical circular step numbers
   ---------------------------------------------------------------------------- */

ol.procedure {
  counter-reset: procedure-step;
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

ol.procedure > li.step {
  counter-increment: procedure-step;
  position: relative;
  padding-left: 44px;
  margin-bottom: 1.1em;
  min-height: 30px;
}

ol.procedure > li.step::before {
  content: counter(procedure-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: 50%;
  background-color: var(--nerdio-teal);
  color: #ffffff;
  font-family: 'Poppins', 'Arial Unicode MS', Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: var(--text-font-size-small);
  text-align: center;
}

ol.procedure ol.procedure {
  list-style-type: lower-alpha;
  counter-reset: none;
  margin-top: 0.5em;
}

ol.procedure ol.procedure > li.step {
  counter-increment: none;
  padding-left: 0;
}

ol.procedure ol.procedure > li.step::before {
  content: none;
}

ol.procedure ol.procedure ol.procedure {
  list-style-type: lower-roman;
}

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

ul.procedure > li.step {
  padding-left: 0;
}

div.procedure > p.title,
div.procedure > div.titlepage .title {
  font-family: 'Poppins', 'Arial Unicode MS', Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: var(--text-font-size-large);
  color: var(--nerdio-navy);
}

/* ----------------------------------------------------------------------------
   7. Tables — teal header, uniform grey body, dark-grey borders throughout
   ---------------------------------------------------------------------------- */

.markdown[itemprop="articleBody"] div.table,
.markdown[itemprop="articleBody"] div.informaltable {
  border: none;
  width: auto;
  overflow-x: visible;
}

.markdown[itemprop="articleBody"] table:not(:where(div.note table, div.tip table, div.warning table, div.caution table, div.important table)) {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 18px;
  border: 1px solid #595959;
}

.markdown[itemprop="articleBody"] table:not(:where(div.note table, div.tip table, div.warning table, div.caution table, div.important table)) td,
.markdown[itemprop="articleBody"] table:not(:where(div.note table, div.tip table, div.warning table, div.caution table, div.important table)) th {
  padding: 8px 12px;
  vertical-align: top;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

.markdown[itemprop="articleBody"] table:not(:where(div.note table, div.tip table, div.warning table, div.caution table, div.important table)) th,
.markdown[itemprop="articleBody"] table:not(:where(div.note table, div.tip table, div.warning table, div.caution table, div.important table)) thead td {
  padding: 8px;
  border: 1px solid #595959;
  background-color: var(--nerdio-teal);
  color: #ffffff;
  font-family: 'Poppins', 'Arial Unicode MS', Arial, Helvetica, sans-serif;
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
}

.markdown[itemprop="articleBody"] table:not(:where(div.note table, div.tip table, div.warning table, div.caution table, div.important table)) th p,
.markdown[itemprop="articleBody"] table:not(:where(div.note table, div.tip table, div.warning table, div.caution table, div.important table)) thead td p {
  color: #ffffff;
  font-family: 'Poppins', 'Arial Unicode MS', Arial, Helvetica, sans-serif;
  font-weight: 500;
  margin: 0;
}

.markdown[itemprop="articleBody"] table:not(:where(div.note table, div.tip table, div.warning table, div.caution table, div.important table)) td {
  padding: 8px;
  border: 1px solid #595959;
  background-color: #f2f2f2;
  color: var(--nerdio-navy);
  text-align: left;
  vertical-align: top;
}

.markdown[itemprop="articleBody"] table:not(:where(div.note table, div.tip table, div.warning table, div.caution table, div.important table)) td p {
  color: var(--nerdio-navy);
}

.markdown[itemprop="articleBody"] .table > p.title {
  font-family: 'Poppins', 'Arial Unicode MS', Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: var(--text-font-size-large);
  color: var(--nerdio-navy);
  margin: 0 0 8px 0;
}

.ui-dark .markdown[itemprop="articleBody"] .table > p.title {
  color: var(--nerdio-teal);
}

.markdown[itemprop="articleBody"] table:not(:where(div.note table, div.tip table, div.warning table, div.caution table, div.important table)) thead,
.markdown[itemprop="articleBody"] table:not(:where(div.note table, div.tip table, div.warning table, div.caution table, div.important table)) tfoot {
  background-color: transparent;
  font-weight: normal;
}

.markdown[itemprop="articleBody"] table:not(:where(div.note table, div.tip table, div.warning table, div.caution table, div.important table)) thead td,
.markdown[itemprop="articleBody"] table:not(:where(div.note table, div.tip table, div.warning table, div.caution table, div.important table)) tfoot td {
  border-color: #595959;
}

.expandable-hidden-row {
  display: none;
}
table.table-expandable.is-expanded .expandable-hidden-row {
  display: table-row;
}

.table-expand-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 18px 0;
  padding: 10px 14px;
  border: 1px solid var(--nerdio-teal);
  border-top: none;
  border-radius: 0 0 4px 4px;
  background-color: rgba(0, 149, 158, 0.06);
  color: var(--nerdio-teal);
  font-family: 'Poppins', 'Arial Unicode MS', Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 0.95em;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.table-expand-toggle:hover {
  background-color: var(--nerdio-teal);
  color: #fff;
}
.table-expand-toggle .chevron-icon {
  display: inline-flex;
  transition: transform 0.2s ease;
}
.table-expand-toggle[aria-expanded="true"] .chevron-icon {
  transform: rotate(180deg);
}
.markdown[itemprop="articleBody"] table.table-expandable {
  margin-bottom: 0;
}

/* ----------------------------------------------------------------------------
   8. Media objects — figure/screenshot spacing
   ---------------------------------------------------------------------------- */
.mediaobject {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

.mediaobject img {
  border: 1px solid #DEDEDE;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.14);
  border-radius: 6px;
  max-width: 100%;
}

.inlinemediaobject {
  display: inline-block;
}

.inlinemediaobject img {
  height: 1.2em;
  vertical-align: 0.1em;
}

/* ----------------------------------------------------------------------------
   8b. Definition lists, blockquotes, and the Paligo "sidebar" callout
   ---------------------------------------------------------------------------- */

span.term {
  font-weight: 500;
}

div.blockquote {
  margin: 0;
}

blockquote.blockquote {
  display: flow-root;
  padding: 14px 20px;
  margin: 20px 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 6px;
  border: none;
  border-left: 6px solid var(--nerdio-navy);
  line-height: 1.5;
  background-color: #F5F5F5;
  color: var(--nerdio-navy);
}

.ui-dark blockquote.blockquote {
  border-left-color: var(--nerdio-teal);
}

.markdown[itemprop="articleBody"] span.quote {
  display: block;
  position: relative;
  overflow: hidden;
  padding: 14px 20px 14px 40px;
  margin: 1em 0;
  border-radius: 6px;
  border: none;
  border-left: 6px solid var(--nerdio-navy);
  line-height: 1.5;
  background-color: #F5F5F5;
  color: var(--nerdio-navy);
}

.ui-dark .markdown[itemprop="articleBody"] span.quote {
  border-left-color: var(--nerdio-teal);
}

.markdown[itemprop="articleBody"] span.quote span.quote {
  all: unset;
}

.markdown[itemprop="articleBody"] span.quote::before,
.markdown[itemprop="articleBody"] span.quote::after {
  position: absolute;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 3.5em;
  line-height: 1;
  color: var(--nerdio-purple);
  opacity: 0.45;
  pointer-events: none;
}

.markdown[itemprop="articleBody"] span.quote::before {
  content: "\201C";
  top: 0.1em;
  left: 0.15em;
}

.markdown[itemprop="articleBody"] span.quote::after {
  content: "\201D";
  bottom: -0.35em;
  right: 0.15em;
}

.markdown[itemprop="articleBody"] span.quote span.quote::before,
.markdown[itemprop="articleBody"] span.quote span.quote::after {
  content: none;
}

.markdown[itemprop="articleBody"] .sidebar:not(:has(> a:first-child[id^="UUID-"])):not(.accordion) {
  float: right;
  width: 35%;
  max-width: 320px;
  margin: 0 0 1em 1.5em;
  padding: 1em 1.25em;
  background-color: #f2f2f2;
  color: var(--nerdio-navy);
  border-radius: var(--border-radius-base);
}

.markdown[itemprop="articleBody"] .sidebar:not(:has(> a:first-child[id^="UUID-"])):not(.accordion) .titlepage .title,
.markdown[itemprop="articleBody"] .sidebar:not(:has(> a:first-child[id^="UUID-"])):not(.accordion) p {
  color: var(--nerdio-navy);
}

.ui-light .markdown[itemprop="articleBody"] .sidebar:not(:has(> a:first-child[id^="UUID-"])):not(.accordion) {
  border: 1px solid var(--nerdio-navy);
  box-shadow: 3px 3px 0 0 var(--nerdio-navy);
}

/* ----------------------------------------------------------------------------
   9. Related-topic / section-TOC touches carried over from the Paligo
   portal overrides, for visual consistency between the two surfaces.
   ---------------------------------------------------------------------------- */
.bridgehead {
  margin-bottom: 2em;
  font-family: 'Poppins', 'Arial Unicode MS', Arial, Helvetica, sans-serif;
  font-weight: 500;
  color: var(--nerdio-navy);
}

.related-topic p {
  margin-bottom: 0;
  margin-top: 0;
}

/* ----------------------------------------------------------------------------
   9b. Syntax-highlighted code blocks (highlight.js, atom-one-dark-reasonable)
   ---------------------------------------------------------------------------- */
pre[data-language] {
  position: relative;
  overflow: visible;
  border-radius: var(--border-radius-base);
  margin: 20px 0;
}

pre[data-language] code.hljs {
  display: block;
  padding: 16px;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--border-radius-base);
  font-family: "Consolas", "SF Mono", "Source Code Pro", monospace;
  font-size: var(--text-font-size-small);
  line-height: 1.5;
}

pre[data-language] .copy-code-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #ccc;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  padding: 3px 8px;
}

pre[data-language] .copy-code-btn::after {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2215%22%20height%3D%2215%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23999999%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%229%22%20y%3D%229%22%20width%3D%2213%22%20height%3D%2213%22%20rx%3D%222%22%20ry%3D%222%22%3E%3C/rect%3E%3Cpath%20d%3D%22M5%2015H4a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2h9a2%202%200%200%201%202%202v1%22%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

pre[data-language] .copy-code-btn:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
}

pre[data-language] .copy-code-btn:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2215%22%20height%3D%2215%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%229%22%20y%3D%229%22%20width%3D%2213%22%20height%3D%2213%22%20rx%3D%222%22%20ry%3D%222%22%3E%3C/rect%3E%3Cpath%20d%3D%22M5%2015H4a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2h9a2%202%200%200%201%202%202v1%22%3E%3C/path%3E%3C/svg%3E");
}

pre[data-language] .copy-code-btn.copied::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2215%22%20height%3D%2215%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%234caf50%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%229%22%20y%3D%229%22%20width%3D%2213%22%20height%3D%2213%22%20rx%3D%222%22%20ry%3D%222%22%3E%3C/rect%3E%3Cpath%20d%3D%22M5%2015H4a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2h9a2%202%200%200%201%202%202v1%22%3E%3C/path%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------------------
   10. Dark mode
   ---------------------------------------------------------------------------- */

.ui-dark .markdown[itemprop="articleBody"] h1,
.ui-dark .markdown[itemprop="articleBody"] h2,
.ui-dark .markdown[itemprop="articleBody"] h3,
.ui-dark .markdown[itemprop="articleBody"] p.related-topics-heading,
.ui-dark .markdown[itemprop="articleBody"] h4,
.ui-dark .markdown[itemprop="articleBody"] h5,
.ui-dark .markdown[itemprop="articleBody"] h6,
.ui-dark .markdown[itemprop="articleBody"] .titlepage .title {
  color: var(--nerdio-teal);
}

.ui-dark .bridgehead {
  color: var(--nerdio-teal);
}

.ui-dark div.procedure > p.title,
.ui-dark div.procedure > div.titlepage .title {
  color: var(--nerdio-teal);
}

.ui-dark .markdown[itemprop="articleBody"] a:link {
  color: var(--nerdio-teal);
}

.ui-dark .markdown[itemprop="articleBody"] a:visited {
  color: var(--nerdio-purple);
}

.ui-dark .markdown[itemprop="articleBody"] a:hover,
.ui-dark .markdown[itemprop="articleBody"] a:focus {
  color: var(--nerdio-navy);
  background-color: var(--nerdio-green);
}

.ui-dark .markdown[itemprop="articleBody"] a:active {
  color: #ffffff;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--nerdio-green);
  text-underline-offset: 2px;
}

/* ----------------------------------------------------------------------------
   11. Links inside admonitions — always light-mode styling, even in dark mode
   ---------------------------------------------------------------------------- */

.ui-dark div.note a:link,
.ui-dark div.tip a:link,
.ui-dark div.warning a:link,
.ui-dark div.caution a:link,
.ui-dark div.important a:link {
  color: blue;
}

.ui-dark div.note a:visited,
.ui-dark div.tip a:visited,
.ui-dark div.warning a:visited,
.ui-dark div.caution a:visited,
.ui-dark div.important a:visited {
  color: var(--nerdio-purple);
}

.ui-dark div.note a:hover,
.ui-dark div.tip a:hover,
.ui-dark div.warning a:hover,
.ui-dark div.caution a:hover,
.ui-dark div.important a:hover,
.ui-dark div.note a:focus,
.ui-dark div.tip a:focus,
.ui-dark div.warning a:focus,
.ui-dark div.caution a:focus,
.ui-dark div.important a:focus {
  color: var(--nerdio-navy);
  background-color: var(--nerdio-green);
}

.ui-dark div.note a:active,
.ui-dark div.tip a:active,
.ui-dark div.warning a:active,
.ui-dark div.caution a:active,
.ui-dark div.important a:active {
  color: var(--nerdio-navy);
  background-color: transparent;
  text-decoration: underline;
  text-decoration-color: var(--nerdio-green);
  text-underline-offset: 2px;
}

/* Accordion — collapsed state: heading reads as a plain page element,
   no box. Expanded state: heading + body together become one seamless
   rounded box, detected via :has() on the shared .panel.panel-default
   parent from the body's own toggled .in/.show classes (added by the
   existing script.js click handler — no JS changes needed for this). */

.markdown[itemprop="articleBody"] .panel-body.collapse {
  display: none;
}
.markdown[itemprop="articleBody"] .panel-body.collapse.in,
.markdown[itemprop="articleBody"] .panel-body.collapse.show {
  display: block;
}

.markdown[itemprop="articleBody"] .panel-heading {
  cursor: pointer;
  user-select: none;
  padding: 0.5em 1.25em;
}
.markdown[itemprop="articleBody"] .panel-body.collapse {
  padding: 0 1.25em 1em;
}

/* Arrow marker — larger, and moved before the heading text instead of
   floated right, so it reads as an obvious click affordance. */
.markdown[itemprop="articleBody"] .panel-heading .title::before {
  content: "\25BE";
  display: inline-block;
  margin-right: 0.5em;
  font-size: 1.4em;
  line-height: 1;
  vertical-align: middle;
  transition: transform 0.2s ease;
}
.markdown[itemprop="articleBody"] .panel-heading.panel-open .title::before {
  transform: rotate(-180deg);
}

/* Expanded box: same fixed grey as table cells (section 7), with navy
   text applied unconditionally in both light/dark mode -- same reasoning
   as table cells and keycaps elsewhere in this file: a fixed-color
   background needs fixed-color text regardless of site theme. */
.markdown[itemprop="articleBody"] .panel.panel-default:has(> .panel-body.collapse.in),
.markdown[itemprop="articleBody"] .panel.panel-default:has(> .panel-body.collapse.show) {
  background-color: #f2f2f2;
  border-radius: var(--border-radius-base);
  overflow: hidden;
}

.markdown[itemprop="articleBody"] .panel.panel-default:has(> .panel-body.collapse.in) .panel-heading .title,
.markdown[itemprop="articleBody"] .panel.panel-default:has(> .panel-body.collapse.show) .panel-heading .title,
.markdown[itemprop="articleBody"] .panel.panel-default:has(> .panel-body.collapse.in) .panel-body,
.markdown[itemprop="articleBody"] .panel.panel-default:has(> .panel-body.collapse.in) .panel-body p,
.markdown[itemprop="articleBody"] .panel.panel-default:has(> .panel-body.collapse.in) .panel-body li,
.markdown[itemprop="articleBody"] .panel.panel-default:has(> .panel-body.collapse.in) .panel-body .guilabel,
.markdown[itemprop="articleBody"] .panel.panel-default:has(> .panel-body.collapse.in) .panel-body code,
.markdown[itemprop="articleBody"] .panel.panel-default:has(> .panel-body.collapse.show) .panel-body,
.markdown[itemprop="articleBody"] .panel.panel-default:has(> .panel-body.collapse.show) .panel-body p,
.markdown[itemprop="articleBody"] .panel.panel-default:has(> .panel-body.collapse.show) .panel-body li,
.markdown[itemprop="articleBody"] .panel.panel-default:has(> .panel-body.collapse.show) .panel-body .guilabel,
.markdown[itemprop="articleBody"] .panel.panel-default:has(> .panel-body.collapse.show) .panel-body code {
  color: var(--nerdio-navy);
}

/* Border + shadow, brought over from the popup sidebar variant (section
   8b) -- same problem, same fix: grey alone reads fine in dark mode but
   nearly disappears against the light-mode page background. */
.ui-light .markdown[itemprop="articleBody"] .panel.panel-default:has(> .panel-body.collapse.in),
.ui-light .markdown[itemprop="articleBody"] .panel.panel-default:has(> .panel-body.collapse.show) {
  border: 1px solid var(--nerdio-navy);
  box-shadow: 3px 3px 0 0 var(--nerdio-navy);
}

/* ===== Tabs component ===== */

.tabs-container {
  border: var(--border-width, 1px) solid var(--border-color);
  border-radius: var(--border-radius-base);
  margin: 1em 0;
  overflow: hidden;
}

.tabs-nav {
  display: flex;
  border-bottom: var(--border-width, 1px) solid var(--border-color);
  background: var(--secondary-bg-color);
}

.tabs-nav .tab-button {
  margin: 0;
  padding: 0.75em 1.25em;
  cursor: pointer;
  font-weight: 600;
  color: var(--secondary-text-color);
  border-bottom: 3px solid transparent;
  user-select: none;
}

.tabs-nav .tab-button:hover {
  color: var(--primary-text-color);
  background: var(--secondary-bg-color-hover);
}

.tabs-nav .tab-button.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.tab-panel {
  display: none;
  padding: 1em 1.25em;
  background: var(--primary-bg-color);
  color: var(--primary-text-color);
}

.tab-panel.active {
  display: block;
}