@charset "UTF-8";
/***** Normalize.css *****/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/******START Google fonts********/
.montserrat-<uniquifier> {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
/*****END Google fonts********/

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

body {
  margin: 0;
  background:#f4f2f0;
}

main {
  display: block;
  background-color:#f4f2f0;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

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

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

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/***** Base *****/
* {
  box-sizing: border-box;
}

body {
  background-color: #FFFFFF;
  color: rgba(21, 30, 71, 1);
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, sans-serif;
  margin-top: 0;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

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

h4 {
  font-size: 16px;
}

a {
  color: rgba(61, 52, 173, 1);
  text-decoration: none;
}
a:visited {
  color: rgba(78, 103, 159, 1);
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}

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

input {
  max-width: 100%;
  box-sizing: border-box;
  transition: border 0.12s ease-in-out;
}
input:not([type=checkbox]) {
  outline: none;
}
input:not([type=checkbox]):focus {
  border: 1px solid rgba(61, 52, 173, 1);
}

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

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

textarea {
  border: 1px solid #87929D;
  border-radius: 2px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}
textarea:focus {
  border: 1px solid rgba(61, 52, 173, 1);
}

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

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

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

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

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

/***** Buttons *****/
.button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
  background-color: transparent;
  border: 1px solid rgba(61, 52, 173, 1);
  border-radius: 4px;
  color: rgba(61, 52, 173, 1);
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  line-height: 2.34;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out, color 0.15s ease-in-out;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  -webkit-touch-callout: none;
}
@media (min-width: 768px) {
  .button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
    width: auto;
  }
}
.button:visited, .pagination-next-link:visited, .pagination-prev-link:visited, .pagination-first-link:visited, .pagination-last-link:visited, .subscriptions-subscribe button:visited, .requests-table-toolbar .organization-subscribe button:visited, .community-follow button:visited, .article-subscribe button:visited, .section-subscribe button:visited, .split-button button:visited {
  color: rgba(61, 52, 173, 1);
}
.button:hover, .pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover, .subscriptions-subscribe button:hover, .requests-table-toolbar .organization-subscribe button:hover, .community-follow button:hover, .article-subscribe button:hover, .section-subscribe button:hover, .split-button button:hover, .button:active, .pagination-next-link:active, .pagination-prev-link:active, .pagination-first-link:active, .pagination-last-link:active, .subscriptions-subscribe button:active, .requests-table-toolbar .organization-subscribe button:active, .community-follow button:active, .article-subscribe button:active, .section-subscribe button:active, .split-button button:active, .button:focus, .pagination-next-link:focus, .pagination-prev-link:focus, .pagination-first-link:focus, .pagination-last-link:focus, .subscriptions-subscribe button:focus, .requests-table-toolbar .organization-subscribe button:focus, .community-follow button:focus, .article-subscribe button:focus, .section-subscribe button:focus, .split-button button:focus, .button.button-primary, .button-primary.pagination-next-link, .button-primary.pagination-prev-link, .button-primary.pagination-first-link, .button-primary.pagination-last-link, .subscriptions-subscribe button.button-primary, .subscriptions-subscribe button[data-selected=true], .requests-table-toolbar .organization-subscribe button.button-primary, .requests-table-toolbar .organization-subscribe button[data-selected=true], .community-follow button.button-primary, .article-subscribe button.button-primary, .article-subscribe button[data-selected=true], .section-subscribe button.button-primary, .section-subscribe button[data-selected=true], .split-button button.button-primary {
  background-color: rgba(61, 52, 173, 1);
  color: #FFFFFF;
  text-decoration: none;
}
.button.button-primary:hover, .button-primary.pagination-next-link:hover, .button-primary.pagination-prev-link:hover, .button-primary.pagination-first-link:hover, .button-primary.pagination-last-link:hover, .subscriptions-subscribe button.button-primary:hover, .subscriptions-subscribe button[data-selected=true]:hover, .requests-table-toolbar .organization-subscribe button.button-primary:hover, .requests-table-toolbar .organization-subscribe button[data-selected=true]:hover, .community-follow button.button-primary:hover, .article-subscribe button.button-primary:hover, .article-subscribe button[data-selected=true]:hover, .section-subscribe button.button-primary:hover, .section-subscribe button[data-selected=true]:hover, .split-button button:hover, .button.button-primary:focus, .button-primary.pagination-next-link:focus, .button-primary.pagination-prev-link:focus, .button-primary.pagination-first-link:focus, .button-primary.pagination-last-link:focus, .subscriptions-subscribe button.button-primary:focus, .subscriptions-subscribe button[data-selected=true]:focus, .requests-table-toolbar .organization-subscribe button.button-primary:focus, .requests-table-toolbar .organization-subscribe button[data-selected=true]:focus, .community-follow button.button-primary:focus, .article-subscribe button.button-primary:focus, .article-subscribe button[data-selected=true]:focus, .section-subscribe button.button-primary:focus, .section-subscribe button[data-selected=true]:focus, .split-button button.button-primary:focus, .button.button-primary:active, .button-primary.pagination-next-link:active, .button-primary.pagination-prev-link:active, .button-primary.pagination-first-link:active, .button-primary.pagination-last-link:active, .subscriptions-subscribe button.button-primary:active, .subscriptions-subscribe button[data-selected=true]:active, .requests-table-toolbar .organization-subscribe button.button-primary:active, .requests-table-toolbar .organization-subscribe button[data-selected=true]:active, .community-follow button.button-primary:active, .article-subscribe button.button-primary:active, .article-subscribe button[data-selected=true]:active, .section-subscribe button.button-primary:active, .section-subscribe button[data-selected=true]:active, .split-button button.button-primary:active {
  background-color: #211c5f;
  border-color: #211c5f;
}
.button[data-disabled], [data-disabled].pagination-next-link, [data-disabled].pagination-prev-link, [data-disabled].pagination-first-link, [data-disabled].pagination-last-link, .subscriptions-subscribe button[data-disabled], .requests-table-toolbar .organization-subscribe button[data-disabled], .community-follow button[data-disabled], .article-subscribe button[data-disabled], .section-subscribe button[data-disabled], .split-button button[data-disabled] {
  cursor: default;
}

.button-large, input[type=submit] {
  cursor: pointer;
  background-color: rgba(61, 52, 173, 1);
  border: 0;
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 14px;
  line-height: 2.72;
  min-width: 190px;
  padding: 0 1.9286em;
  width: 100%;
}
@media (min-width: 768px) {
  .button-large, input[type=submit] {
    width: auto;
  }
}
.button-large:visited, input[type=submit]:visited {
  color: #FFFFFF;
}
.button-large:hover, .button-large:active, .button-large:focus, input[type=submit]:hover, input[type=submit]:active, input[type=submit]:focus {
  background-color: #211c5f;
}
.button-large[disabled], input[type=submit][disabled] {
  background-color: #ddd;
}

.button-secondary {
  color: #2c3f96;
  border: 1px solid #87929D;
  background-color: transparent;
}
.button-secondary:visited {
  color: #2c3f96;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: rgba(21, 30, 71, 1);
  border: 1px solid #87929D;
  background-color: #f7f7f7;
}

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

.split-button button {
  background-color: rgba(61, 52, 173, 1);
  border: 0;
  color: #FFFFFF;
  height: 32px;
  line-height: 16px;
  outline-color: rgba(61, 52, 173, 1);
}

[dir=rtl] .split-button button:not(:only-child):first-child {
  border-left: 1px solid #FFFFFF;
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):first-child {
  border-right: 1px solid #FFFFFF;
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}
.split-button button:not(:only-child):last-child {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  min-width: 26px;
  max-width: 26px;
  padding: 0;
}
[dir=rtl] .split-button button:not(:only-child):last-child {
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):last-child {
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}

/***** Tables *****/
.table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  border-spacing: 0;
}

.table:not(.int-table) th,
.table:not(.int-table) th a {
  color: #2c3f96;
  font-size: 13px;
  text-align: left;
}
[dir=rtl] .table:not(.int-table) th,
[dir=rtl] .table:not(.int-table) th a {
  text-align: right;
}

.table:not(.int-table) tr {
  border-bottom: 1px solid #ddd;
  display: block;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .table:not(.int-table) tr {
    display: table-row;
  }
}
.table:not(.int-table) td {
  display: block;
}
@media (min-width: 768px) {
  .table:not(.int-table) td {
    display: table-cell;
  }
}
@media (min-width: 1024px) {
  .table td, .table th {
    padding: 20px 30px;
  }
}
@media (min-width: 768px) {
  .table td, .table th {
    padding: 10px 20px;
    height: 60px;
  }
}

.article table:not(.int-table) thead th {
  background-color: #151E47;
  color: #fff;
  font-weight: bold;
  padding: 14px 16px;
  text-align: left;
  border: solid 1px #cccccc;
}

.article table:not(.int-table) tbody td {
  padding: 14px 16px;
  text-align: left;
}

/* === UNIFIED HEADER VISUAL STYLE (SAFE FOR ALL TABLE TYPES) === */
.table thead th,
.int-table thead th {
  background-color: #151E47;
  color: #fff;
  font-weight: bold;
  padding: 14px 16px;
  text-align: left;
  border: 1px solid #cccccc;
}

/* Optional: unified body cell appearance */
.table tbody td,
.int-table tbody td {
  padding: 14px 16px;
  text-align: left;
  border: 1px solid #cccccc;
}

/* Only normal tables get the display:block trick */
.article table:not(.int-table) {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* Scroll wrapper specifically for DataTables */
.int-table-wrapper {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  display: block;
  position: relative;
}

/* Hard-fix the DataTables body scroll container */
.dataTables_scrollBody {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-width: 100% !important;
  display: block !important;
}

.dataTables_scroll {
  overflow: hidden !important;
  width: 100% !important;
}

.dataTables_scrollBody {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-width: 100% !important;
}

.dataTables_scrollBody {
  overflow-x: auto !important;
}

.dataTables_scrollBody table {
  width: 100% !important;    /* allow DataTables to size columns */
}

/* Fix for Zendesk WYSIWYG wrapper around DataTables */
figure.wysiwyg-table {
  overflow-x: auto !important;
  overflow-y: visible !important;
  max-width: 100% !important;
  display: block !important;
  position: relative;
}

figure.wysiwyg-table > table:not(.int-table) {
  width: auto !important;
  max-width: 100% !important;
  display: table !important;
}


/***** Forms *****/
.form {
  max-width: 650px;
}

.form-field ~ .form-field {
  margin-top: 25px;
}

.form-field label {
  display: block;
  font-size: 13px;
  margin-bottom: 5px;
}

.form-field input {
  border: 1px solid #87929D;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}
.form-field input:focus {
  border: 1px solid rgba(61, 52, 173, 1);
}

.form-field input[type=text] {
  border: 1px solid #87929D;
  border-radius: 4px;
}
.form-field input[type=text]:focus {
  border: 1px solid rgba(61, 52, 173, 1);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.logo a {
  display: inline-block;
}

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

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

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

@media (max-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: inline-block;
  }
}
.nav-wrapper-desktop a {
  border: 0;
  color: rgba(61, 52, 173, 1);
  display: none;
  font-size: 14px;
  padding: 0 20px 0 0;
  width: auto;
}
@media (min-width: 768px) {
  .nav-wrapper-desktop a {
    display: inline-block;
  }
}
[dir=rtl] .nav-wrapper-desktop a {
  padding: 0 0 0 20px;
}
.nav-wrapper-desktop a:hover, .nav-wrapper-desktop a:focus, .nav-wrapper-desktop a:active {
  background-color: transparent;
  color: rgba(61, 52, 173, 1);
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .nav-wrapper-mobile {
    display: none;
  }
}
.nav-wrapper-mobile .menu-button-mobile {
  background: none;
  border: 0;
  width: auto;
  min-width: 71px;
  cursor: pointer;
}
.nav-wrapper-mobile .menu-button-mobile .icon-menu {
  padding: 7px;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
  background: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile {
  position: absolute;
  background-color: #fff;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 2;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
  display: block;
}
.nav-wrapper-mobile .menu-list-mobile-items .item {
  margin: 4px 0;
}
.nav-wrapper-mobile .menu-list-mobile-items li:empty:not(.nav-divider) {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  border-bottom: 0.1px solid #ddd;
  padding: 0;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider:last-child {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items button {
  background: none;
  border: none;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: rgba(21, 30, 71, 1);
  cursor: pointer;
  text-align: start;
}
.nav-wrapper-mobile .menu-list-mobile-items button:active, .nav-wrapper-mobile .menu-list-mobile-items button:focus, .nav-wrapper-mobile .menu-list-mobile-items button:hover {
  background-color: #f3f3f3;
  text-decoration: underline;
}
.nav-wrapper-mobile .menu-list-mobile-items a {
  display: block;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: rgba(21, 30, 71, 1);
}
.nav-wrapper-mobile .menu-list-mobile-items a:active, .nav-wrapper-mobile .menu-list-mobile-items a:focus, .nav-wrapper-mobile .menu-list-mobile-items a:hover {
  background-color: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile {
  display: flex;
  line-height: 1.5;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile .my-profile-tooltip {
  font-size: 12px;
  color: #68737D;
}
.nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  margin-top: 1px;
}
[dir=rtl] .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  margin-right: 0;
  margin-left: 8px;
}

.skip-navigation {
  align-items: center;
  background-color: black;
  color: white;
  display: flex;
  font-size: 14px;
  justify-content: center;
  left: -999px;
  margin: 20px;
  padding: 20px;
  overflow: hidden;
  position: absolute;
  top: auto;
  z-index: -999;
}
[dir=rtl] .skip-navigation {
  left: initial;
  right: -999px;
}
.skip-navigation:focus, .skip-navigation:active {
  left: auto;
  overflow: auto;
  text-align: center;
  text-decoration: none;
  top: auto;
  z-index: 999;
}
[dir=rtl] .skip-navigation:focus, [dir=rtl] .skip-navigation:active {
  left: initial;
  right: auto;
}

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

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

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

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

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

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

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

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

/***** Search field *****/
.search-container {
  position: relative;
}

.search {
  border-color: #87929D;
  border-radius: 30px;
  border-style: solid;
  border-width: 1px;
  display: flex;
  position: relative;
  transition: border 0.12s ease-in-out;
}
.search:focus-within {
  border-color: rgba(61, 52, 173, 1);
}
.search input[type=search],
.search .clear-button {
  background-color: #fff;
  border-radius: 30px;
  border: none;
}
.search-full input[type=search], .search-full .clear-button {
  border-color: #fff;
}
.search input[type=search] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  color: #666;
  flex: 1 1 auto;
  height: 40px;
  width: 100%;
}
.search input[type=search]:focus {
  color: #555;
}
.search input[type=search]::-webkit-search-decoration, .search input[type=search]::-webkit-search-cancel-button, .search input[type=search]::-webkit-search-results-button, .search input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
.search input[type=search]:-webkit-autofill, .search input[type=search]:-webkit-autofill:hover, .search input[type=search]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
.search .clear-button {
  align-items: center;
  box-sizing: border-box;
  color: #777;
  cursor: pointer;
  display: none;
  flex: none;
  justify-content: center;
  padding: 0 15px;
}
.search .clear-button:hover {
  background-color: rgba(61, 52, 173, 1);
  color: #fff;
}
.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(61, 52, 173, 1);
}
.search-has-value .clear-button {
  display: flex;
}

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

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

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

/***** Hero component *****/
.hero {
  background-image: url(/hc/theming_assets/01M25AQ6Y1YMJRVFJK8BM50XV3);
  background-position: center;
  background-size: cover;
  height: 300px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}
.hero-inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-width: 610px;
  margin: 0 auto;
}
.hero-title {
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 20px;
}
.page-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 10px 0;
}

.login-banner {
  padding: 12px 16px;
  border: 1px solid #f5c2c7;
  background: #f8d7da;
  color: #842029;
  border-radius: 6px;
  flex: 0 0 auto;
  margin-top: auto;        /* pushes banner to the bottom */
}

.login-banner a {
  color: inherit;
  text-decoration: underline;
}

@media (min-width: 768px) {
  .page-header {
    align-items: baseline;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 16px;
    margin: 0;
  }
}
.page-header .section-subscribe {
  flex-shrink: 0;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .page-header .section-subscribe {
    margin-bottom: 0;
  }
}
.page-header h1 {
  flex-grow: 1;
  margin-bottom: 30px;
}
.page-header-description {
  /*font-style: italic;*/
  margin: 0 0 30px 0;
  word-break: break-word;
}
@media (min-width: 1024px) {
  .page-header-description {
    flex-basis: 100%;
  }
}
.page-header .icon-lock {
  height: 20px;
  width: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

.sub-nav {
  align-items: baseline;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 15px 30px;
  justify-content: space-between;
  margin-bottom: 55px;
}
@media (min-width: 768px) {
  .sub-nav {
    flex-direction: row;
  }
}
.sub-nav .breadcrumbs {
  margin: 0;
}
.sub-nav .search-container {
  max-width: 300px;
  width: 100%;
}
@media (min-width: 768px) {
  .sub-nav .search-container {
    flex: 0 1 300px;
  }
}
.sub-nav input[type=search]::after {
  font-size: 15px;
}

/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
}
@media (min-width: 768px) {
  .blocks-list {
    margin: 0 -15px;
  }
}
.blocks-item {
  border: 1px solid #3D34AD;
  border-radius: 4px;
  box-sizing: border-box;
  color: #3D34AD;
  background-color: #ffffff;
  display: flex;
  flex: 1 0 340px;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
}
@media (min-width: 768px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  background-color: #3D34AD;
}

/*LUCY2 - Make general text in blocks elements white upon hover, e.g. Forum homepage*/
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  /*color: #FFFFFF;*/
  color: #ffffff;
  text-decoration: none;
}

/*LUCY2 - Make larger titles in blocks elements white upon hover, e.g. Forum homepage*/
.blocks-list .blocks-item:hover *, .blocks-list .blocks-item:focus *, .blocks-list .blocks-item:active * {
  /*color: #FFFFFF;*/
  color: #ffffff;
  text-decoration: none;
}

.blocks-item-internal {
  background-color: transparent;
  border: 1px solid #ddd;
}
.blocks-item-internal .icon-lock {
  height: 15px;
  width: 15px;
  bottom: 5px;
  position: relative;
}
.blocks-item-internal a {
  color: rgba(21, 30, 71, 1);
}
.blocks-item-link {
  color: #3D34AD;
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  border-radius: inherit;
}
.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active {
  color: inherit;
  text-decoration: none;
}
.blocks-item-link:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #3D34AD;
  text-decoration: none;
}
.blocks-item-title {
  margin-bottom: 0;
  font-size: 18px;
  font-weight:600;
}
.blocks-item-description {
  margin: 0;
  color: #151e47;
  font-size: 14px;
}
.blocks-item-description:not(:empty) {
  margin-top: 10px;
}


/* ===== Lucy adapter (plain CSS): categories, sections & legacy classes =====
Place this after the Blocks section in the published style.css.
This version uses concrete colors from the Lucy stylesheet (no variables). */
.orbus-container {
font-family: "Montserrat", sans-serif;
color: #151e47;
background-color: #f4f2f0;
}

/* Grid containers */
.category-grid,
.section-grid,
.blocks-list {
display: flex;
flex-wrap: wrap;
gap: 32px;
justify-content: flex-start;
margin-top: 32px;
padding: 0;
list-style: none;
box-sizing: border-box;
}

/* Card base for multiple classnames */
.category-card,
.section-card,
.blocks-item,
.card,
.cards-item {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 2px 16px rgba(0,0,0,0.08);
border: 1px solid #bbbbbb;
padding: 28px 24px;
flex: 1 0 340px;
min-height: 160px;
display: flex;
flex-direction: column;
align-items: flex-start;
transition: box-shadow 0.2s, border-color 0.2s;
box-sizing: border-box;
text-align: left;
color: #151e47;
}

/* Ensure children don't overflow when flex-shrinking */
.category-card > *,
.section-card > *,
.blocks-item > * {
min-width: 0;
}

/* Image / icon sizing inside cards */
.category-card img,
.section-card img,
.blocks-item img {
max-width: 55px;
height: auto;
margin-bottom: 18px;
margin-top: 3px;
flex-shrink: 0;
display: block;
}

/* Title & description */
.category-card h3,
.section-card h3,
.blocks-item .blocks-item-title,
.blocks-item h3 {
font-size: 1.18em;
margin: 0 0 10px 0;
font-weight: 600;
color: #151e47;
word-break: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
/*LUCY2*/ width: 100%;
}

.category-card p,
.section-card p,
.blocks-item .blocks-item-description {
color: #5e6c7a; /* muted copy color */
margin: 0 0 10px 0;
font-size: 1em;
font-weight: 400;
}

/* Link styling (accent and hover) /
.category-card a,
.section-card a,
.blocks-item .blocks-item-link,
.blocks-item a {
color: #3d34ad; / brand accent */
text-decoration: none;
transition: color 0.15s;
}

.category-card a:hover, .category-card a:focus,
.section-card a:hover, .section-card a:focus,
.blocks-item .blocks-item-link:hover,
.blocks-item .blocks-item-link:focus {
color: #151e47;
text-decoration: underline;
}

/* Hover / focus card container /
.category-card:hover, .category-card:focus-within,
.section-card:hover, .section-card:focus-within,
.blocks-item:hover, .blocks-item:focus-within {
box-shadow: 0 4px 24px rgba(42,114,229,0.13);
border-color: #3d34ad;
color: #ffffff; / on hover, children that inherit color may need to switch - keep safe */
}

/* Focus ring (visible) */
.category-card:focus-within,
.section-card:focus-within,
.blocks-item:focus-within {
outline: none;
box-shadow: 0 0 0 3px rgba(61,52,173,0.18);
}

/* Responsive adjustments */
@media (max-width: 900px) {
.category-grid,
.section-grid,
.blocks-list {
gap: 20px;
}
.category-card,
.section-card,
.blocks-item {
flex: 1 0 100%;
min-width: 0;
margin-bottom: 18px;
width: auto;
}
}

@media (max-width: 700px) {
.category-grid,
.section-grid,
.blocks-list {
flex-direction: column;
gap: 0;
}
.category-card,
.section-card,
.blocks-item {
width: 100%;
margin-bottom: 18px;
}
}

/* Map Lucy block focus to whole-card visual for templates where only title is linked */
.blocks-item-link:focus,
.category-card a:focus,
.section-card a:focus {
box-shadow: 0 0 0 3px rgba(61,52,173,0.18);
}

/* Backwards-compat helpers so .blocks-* and legacy class combos behave consistently */
.blocks-list .category-card,
.blocks-list .section-card,
.blocks-item .category-card,
.blocks-item .section-card {
flex: 1 0 340px;
}

/* End adapter */


/*END of JD Addition*/


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

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

/***** Promoted articles *****/
.promoted-articles {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

/*LUCY2 - adding star to promo list items*/
.promoted-articles li::before {
  content: "\1F7CA \0020 \0020"; position: relative; left: 0; font-size:25px; color: #6F55E5;
}

@media (min-width: 1024px) {
  .promoted-articles {
    flex-direction: row;
  }
}
.promoted-articles-item {
  flex: 1 0 auto;
  /*LUCY2*/margin-bottom:30px; font-size:18px; font-weight:500;
}
@media (min-width: 1024px) {
  .promoted-articles-item {
    align-self: flex-end;
    flex: 0 0 auto;
    /*LUCY2*/padding: 20px 0; border-bottom: 1px solid #aaaaaa; margin-right:10px; margin-bottom:40px;
    padding-right: 30px;
    width: 33%; /* Three columns on desktop */
  }
  [dir=rtl] .promoted-articles-item {
    padding: 0 0 0 30px;
  }
}
.promoted-articles-item:nth-child(3n) {
  padding-right: 0;
}
.promoted-articles-item a {
  /*LUCY2 display: block; border-bottom: 1px solid #bbbbbb; padding: 15px 0;*/
}


.promoted-articles-item .icon-lock {
  vertical-align: baseline;
}
.promoted-articles-item:last-child a {
  border: 0;
}
@media (min-width: 1024px) {
  .promoted-articles-item:last-child a {
    /*LUCY2 border-bottom: 1px solid #bbbbbb;*/
  }
}

/***** Community section in homepage *****/
.community {
  text-align: center;
}
.community-image {
  min-height: 300px;
  margin-top: 32px;
  background-image: url(/hc/theming_assets/01KBPZVBK4MY6FC98X2031BGP1);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}
.community a {
  color: rgba(61, 52, 173, 1);
  text-decoration: underline;
}
.community a:visited {
  color: rgba(78, 103, 159, 1);
}
.community a:hover, .community a:active, .community a:focus {
  color: rgba(34, 59, 116, 1);
}

.community,
.activity {
  border-top: 1px solid #ddd;
  padding: 30px 0;
}

/***** Recent activity *****/
.recent-activity-header {
  margin-bottom: 10px;
  text-align: center;
}
.recent-activity-list {
  padding: 0;
}
.recent-activity-item {
  border-bottom: 1px solid #bbbbbb;
  overflow: auto;
  padding: 20px 0;
}
.recent-activity-item h3 {
  margin: 0;
}
.recent-activity-item-parent {
  font-size: 16px;
  font-weight: 600;
}
.recent-activity-item-parent, .recent-activity-item-link {
  margin: 6px 0;
  display: inline-block;
  width: 100%;
}
@media (min-width: 768px) {
  .recent-activity-item-parent, .recent-activity-item-link {
    width: 70%;
    margin: 0;
  }
}
.recent-activity-item-link {
  font-size: 14px;
  color: #151e47;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-activity-item-meta {
  color: rgba(21, 30, 71, 1);
  margin: 15px 0 0 0;
  float: none;
}
@media (min-width: 768px) {
  .recent-activity-item-meta {
    margin: 0;
    float: right;
  }
  [dir=rtl] .recent-activity-item-meta {
    float: left;
  }
}
.recent-activity-item-time, .recent-activity-item-comment {
  display: inline-block;
  font-size: 13px;
}
.recent-activity-item-comment {
  padding-left: 5px;
}
[dir=rtl] .recent-activity-item-comment {
  padding: 0 5px 0 0;
}
.recent-activity-item-comment::before {
  display: inline-block;
}
.recent-activity-controls {
  padding-top: 15px;
}
.recent-activity-controls a {
  color: rgba(61, 52, 173, 1);
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: rgba(78, 103, 159, 1);
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: rgba(34, 59, 116, 1);
}
.recent-activity-accessibility-label {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.recent-activity-comment-icon svg {
  vertical-align: middle;
  color: rgba(61, 52, 173, 1);
  width: 16px;
  height: 16px;
}
.recent-activity-comment-icon:after {
  content: attr(data-comment-count);
  margin-left: 3px;
}
[dir=rtl] .recent-activity-comment-icon:after {
  margin-left: 0;
  margin-right: 3px;
}

/***** Category pages *****/
.category-container {
  display: flex;
  /*justify-content: flex-end;*/
  justify-content: center;
  margin: 40px auto; padding: 40px; background: #fff; border-radius: 12px; border: 1px solid #bbbbbb; box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}
.category-content {
  flex: 1;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .category-content {
    flex: 0 0 80%;
  }
}

.section-tree {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .section-tree {
    flex-direction: row;
  }
}
.section-tree .section {
  flex: initial;
  max-width: 100%;
}
@media (min-width: 768px) {
  .section-tree .section {
    flex: 0 0 45%; /* Two columns for tablet and desktop. Leaving 5% separation between columns */
  }
}
.section-tree-title {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 600;
}
.section-tree-title a {
  color: rgba(21, 30, 71, 1);
}
.section-tree .see-all-articles {
  display: block;
  padding: 15px 0;
}

.article-list-item {
  font-size: 16px;
  padding: 15px 0;
  text-overflow: ellipsis;
  overflow: hidden;
}

/*LUCY2 - adding triangle to article list items*/
.section-content .article-list li::before {
  content: "\1F782 \0020 \0020"; position: relative; left: 0; font-size:18px; vertical-align:top; 
}


.article-list-item a {
  /*color: rgba(21, 30, 71, 1);*/
  /*LUCY2*/ color: #3D34AD; font-size:17px;
}

/* BS - Add lock icon to the articles list */
.article-lock-section {
  height: 14px;    /* proportional to the header’s 20px */
  width: auto;     /* keeps correct proportions */
  vertical-align: -2px;  /* aligns to baseline like the header */
  margin-left: 6px;
}

.article-lock {
  height: 14px;    /* proportional to the header’s 20px */
  width: auto;     /* keeps correct proportions */
  margin-left: 2px;
}

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

/***** Category pages accordion - added by Lucy ******/
 .lvl2-menu-columns { display: flex; gap: 32px; flex-wrap: wrap; }
    .lvl2-menu-column { flex: 1 1 300px; min-width: 270px; display: flex; flex-direction: column; gap: 18px; }
	  
    .accordion { background: #fff; border-radius: 6px; box-shadow: 0 1px 4px rgba(42,114,229,0.05); border: none; outline: none; transition: background 0.3s;  }
    .accordion-header { display: flex; align-items: center; justify-content: flex-start; padding: 14px 16px; cursor: pointer; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, sans-serif; font-weight: bold; font-size: 1.1em;  border: none; width: 100%; text-align: left; gap: 16px; background: none; border-radius: 6px 6px 0 0; border-bottom: 1px solid #3D34AD;  transition: background 0.2s; }
    .accordion-header:hover, .accordion-header.active {  background: #f2f2fc; }
    .accordion-header img { max-width: 55px; height: auto;  margin-right: 10px; flex-shrink: 0; }
    .accordion-header-content { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;  min-width: 0; }
    .accordion-heading { font-size: 1.08em;  font-weight: bold; color: #151e47; word-break: break-word; }
    .accordion-desc { font-size: 0.97em; font-weight: normal; color: #5e6c7a;  margin: 0; word-break: break-word; }
    .accordion-content { max-height: 0; padding: 0px; overflow: hidden; background: #ffffff; border-radius: 0 0 6px 6px; transition: max-height 0.3s ease, padding 0.3s; }
    .accordion-content.open { padding: 10px; max-height: 200px; transition: max-height 0.5s ease, padding 0.3s;  }
	.accordion-content ul{margin:5px; list-style-type:none; /*LUCY2*/ min-width:100%;}
	.accordion-content ul li{ margin:10px; margin-left: 0px;  }
    .accordion-header .arrow { transition: transform 0.3s;  font-size: 1.2em; margin-left: 10px; margin-top: 2px; color: #3d34ad; }
    .accordion-header.active .arrow { transform: rotate(90deg); }
	  
    @media (max-width: 700px) {
      .lvl2-menu-columns { flex-direction: column; gap: 0; }
      .lvl2-menu-column { margin-bottom: 24px;}
    }


/***** Section pages *****/
.section-container {
  display: flex;
  /*LUCY2  justify-content: flex-end;*/
  justify-content: center;
}
.section-content {
  flex: 1;
  max-width: 100%;
  /*LUCY2*/margin: 0px auto; margin-bottom:50px; padding: 40px; background: #fff; border-radius: 12px; border: 1px solid #bbbbbb; box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}
@media (min-width: 1024px) {
  .section-content {
    flex: 0 0 80%;
  }
}
.section-list {
  margin: 40px 0;
}

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

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

/***** Article *****/
.article {
  /*
  * The article grid is defined this way to optimize readability:
  * Sidebar | Content | Free space
  * 17%     | 66%     | 17%
  */
  flex: 1 0 auto;
  margin: 0px auto; padding: 40px; background: #fff; border-radius: 12px; border: 1px solid #bbbbbb; box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}

.article table {width:100% !important;}

@media (min-width: 1024px) {
  .article {
    flex: 1 0 66%;
    max-width: 66%;
    min-width: 640px;
    padding: 40px 40px;
  }
}
.article-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .article-container {
    flex-direction: row;
  }
}
.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 40px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}
.article-avatar {
  margin-right: 10px;
}
.article-author {
  margin-bottom: 10px;
}
.article-title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (min-width: 768px) {
  .article-title {
    flex-basis: 100%; /* Take entire row */
  }
}
.article-title .icon-lock {
  position: relative;
  left: -5px;
  vertical-align: baseline;
}
.article [role=button] {
  flex-shrink: 0; /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
  width: 100%;
}
@media (min-width: 768px) {
  .article [role=button] {
    width: auto;
  }
}
.article-info {
  max-width: 100%;
}
.article-meta {
  display: inline-block;
  vertical-align: middle;
}
.article-body {
  display: flow-root;
}
.article-body a {
  color: rgba(61, 52, 173, 1);
  text-decoration: underline;
}
.article-body a:visited {
  color: rgba(78, 103, 159, 1);
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: rgba(34, 59, 116, 1);
}
.article-body img {
  height: auto;
  max-width: 100%;
}
.article-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figure.image {
  display: table;
  margin: 0 auto;
}
.article-body figure.image > img {
  display: block;
  width: 100%;
}
.article-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.article-body ul,
.article-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .article-body ul,
[dir=rtl] .article-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.article-body ul > ul,
.article-body ol > ol,
.article-body ol > ul,
.article-body ul > ol,
.article-body li > ul,
.article-body li > ol {
  margin: 0;
}
.article-body ul {
  list-style-type: disc;
}
.article-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.article-body blockquote {
  border-left: 1px solid #ddd;
  color: #2c3f96;
  font-style: italic;
  padding: 0 15px;
}
.article-body > p:last-child {
  margin-bottom: 0;
}
.article-content {
  line-height: 1.6;
  margin: 40px 0;
  word-wrap: break-word;
}
.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.article-comment-count {
  color: #2c3f96;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: rgba(61, 52, 173, 1);
  width: 18px;
  height: 18px;
}
.article-sidebar {
  position: sticky;
  top: 100px; /* Adjust based on your header's height */
  max-height: calc(100vh - 120px); /* Prevent overflow */
  overflow-y: auto;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
}
@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    flex: 0 0 17%;
    height: auto;
    max-width: 17%;
    margin-right: 12px;
  }
}
.article-relatives {
  border-top: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .article-relatives {
    flex-direction: row;
  }
}
.article-relatives > * {
  flex: 1 0 50%;
  min-width: 50%;
  overflow-wrap: break-word;
  margin-right: 0;
}
.article-relatives > *:last-child {
  padding: 0;
}
@media (min-width: 768px) {
  .article-relatives > * {
    padding-right: 20px;
  }
}
.article-votes {
  border-top: 1px solid #ddd;
  padding: 30px 0;
  text-align: center;
}
.article-vote {
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}
.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}
.article-more-questions a {
  color: rgba(61, 52, 173, 1);
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: rgba(78, 103, 159, 1);
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: rgba(34, 59, 116, 1);
}
.article-return-to-top {
  border-top: 1px solid #87929D;
}
@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}
.article-return-to-top a {
  color: rgba(21, 30, 71, 1);
  display: block;
  padding: 20px 0;
}
.article-return-to-top a:hover, .article-return-to-top a:focus {
  text-decoration: none;
}
.article-return-to-top-icon {
  transform: rotate(0.5turn);
}
.article td > p:first-child,
.article th > p:first-child {
  margin-top: 0;
}
.article td > p:last-child,
.article th > p:last-child {
  margin-bottom: 0;
}

.sidenav-title {
  /*LUCY2*/font-size: 17px; line-height: 18px; padding-right:10px;
  position: relative;
  font-weight: 600;
}
.sidenav-item {
  display: block;
  margin-top: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-articles li,
.related-articles li {
  margin-bottom: 15px;
}

/***** Attachments *****/
/* Styles attachments inside posts, articles and comments */
.attachments .attachment-item {
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}
.attachments .attachment-item:last-child {
  margin-bottom: 0;
}
.attachments .attachment-item .attachment-icon {
  color: rgba(21, 30, 71, 1);
  left: 0;
  position: absolute;
  top: 5px;
}
[dir=rtl] .attachments .attachment-item {
  padding-left: 0;
  padding-right: 20px;
}
[dir=rtl] .attachments .attachment-item .attachment-icon {
  left: auto;
  right: 0;
}

.upload-dropzone span {
  color: #2c3f96;
}

/***** Social share links *****/
.share {
  padding: 0;
  white-space: nowrap;
}

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

.share li {
  height: 25px;
  width: 25px;
}

.share a {
  color: #2c3f96;
}
.share a:hover {
  text-decoration: none;
  color: rgba(61, 52, 173, 1);
}
.share a svg {
  height: 18px;
  width: 18px;
  display: block;
}

/***** Comments *****/
/* Styles comments inside articles, posts and requests */
.comment {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}
.comment-heading, .recent-articles-title,
.related-articles-title {
  margin-bottom: 5px;
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
}
.comment-overview {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 20px 0;
}
.comment-overview p {
  margin-top: 0;
}
.comment-callout {
  color: #2c3f96;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}
.comment-callout a {
  color: rgba(61, 52, 173, 1);
  text-decoration: underline;
}
.comment-callout a:visited {
  color: rgba(78, 103, 159, 1);
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: rgba(34, 59, 116, 1);
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: #2c3f96;
  font-size: 13px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid rgba(61, 52, 173, 1);
  padding: 40px 20px 20px;
}
@media (min-width: 768px) {
  .comment-wrapper.comment-official {
    padding-top: 20px;
  }
}
.comment-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .comment-info {
  padding-right: 0;
  padding-left: 20px;
}
.comment-author {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .comment-author {
    justify-content: space-between;
  }
}
.comment-avatar {
  margin-right: 10px;
}
[dir=rtl] .comment-avatar {
  margin-left: 10px;
  margin-right: 0;
}
.comment-meta {
  flex: 1 1 auto;
}
.comment-labels {
  flex-basis: 100%;
}
@media (min-width: 768px) {
  .comment-labels {
    flex-basis: auto;
  }
}
.comment .status-label:not(.status-label-official) {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .comment .status-label:not(.status-label-official) {
    margin-top: 0;
  }
}
.comment-form {
  display: flex;
  padding-top: 30px;
  word-wrap: break-word;
}
.comment-container {
  width: 100%;
}
.comment-form-controls {
  display: none;
  margin-top: 10px;
  text-align: left;
}
@media (min-width: 768px) {
  [dir=ltr] .comment-form-controls {
    text-align: right;
  }
}
.comment-form-controls input[type=submit] {
  margin-top: 15px;
}
@media (min-width: 1024px) {
  .comment-form-controls input[type=submit] {
    margin-left: 15px;
  }
  [dir=rtl] .comment-form-controls input[type=submit] {
    margin-left: 0;
    margin-right: 15px;
  }
}
.comment-form-controls input[type=checkbox] {
  margin-right: 5px;
}
.comment-form-controls input[type=checkbox] [dir=rtl] {
  margin-left: 5px;
}
.comment-ccs {
  display: none;
}
.comment-ccs + textarea {
  margin-top: 10px;
}
.comment-attachments {
  margin-top: 10px;
}
.comment-attachments a {
  color: rgba(61, 52, 173, 1);
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  color: rgba(61, 52, 173, 1);
  text-decoration: underline;
}
.comment-body a:visited {
  color: rgba(78, 103, 159, 1);
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: rgba(34, 59, 116, 1);
}
.comment-body img {
  height: auto;
  max-width: 100%;
}
.comment-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figure.image {
  display: table;
  margin: 0 auto;
}
.comment-body figure.image > img {
  display: block;
  width: 100%;
}
.comment-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.comment-body ul,
.comment-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .comment-body ul,
[dir=rtl] .comment-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.comment-body ul > ul,
.comment-body ol > ol,
.comment-body ol > ul,
.comment-body ul > ol,
.comment-body li > ul,
.comment-body li > ol {
  margin: 0;
}
.comment-body ul {
  list-style-type: disc;
}
.comment-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.comment-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.comment-body blockquote {
  border-left: 1px solid #ddd;
  color: #2c3f96;
  font-style: italic;
  padding: 0 15px;
}
.comment-mark-as-solved {
  display: inline-block;
}

/***** Vote *****/
/* Used in article comments, post comments and post */
.vote {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.vote a:active, .vote a:hover, .vote a:focus {
  text-decoration: none;
}

.vote-sum {
  color: #2c3f96;
  display: block;
  margin: 3px 0;
}
[dir=rtl] .vote-sum {
  direction: ltr;
  unicode-bidi: bidi-override;
}

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

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

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

.vote-voted {
  color: rgba(61, 52, 173, 1);
}

.vote-voted:hover {
  color: #211c5f;
}

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

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

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

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

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

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

/* Topic, post and user follow button */
.community-follow {
  margin-bottom: 10px;
  width: 100%;
}

@media (min-width: 768px) {
  .community-follow {
    margin-bottom: 0;
    width: auto;
  }
}
.community-follow button {
  line-height: 30px;
  padding: 0 10px 0 15px;
  position: relative;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow button {
    width: auto;
  }
}
.community-follow button:hover {
  background-color: rgba(61, 52, 173, 1);
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: #FFFFFF;
  color: #FFFFFF;
}
.community-follow button[data-selected=true] {
  background-color: rgba(61, 52, 173, 1);
  color: #FFFFFF;
}
.community-follow button[data-selected=true]::after {
  border-left: 1px solid #FFFFFF;
  color: #FFFFFF;
}
.community-follow button[data-selected=true]:hover {
  background-color: #211c5f;
  border-color: #211c5f;
}
.community-follow button::after {
  border-left: 1px solid rgba(61, 52, 173, 1);
  content: attr(data-follower-count);
  color: rgba(61, 52, 173, 1);
  display: inline-block;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, sans-serif;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}
@media (min-width: 768px) {
  .community-follow button::after {
    position: static;
  }
}
[dir=rtl] .community-follow button::after {
  border-left: 0;
  border-right: 1px solid rgba(61, 52, 173, 1);
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
}

/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  padding: 0;
}
.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #bbbbbb;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}
.striped-list-info {
  flex: 2;
}
.striped-list-title {
  color: rgba(61, 52, 173, 1);
  margin-bottom: 10px;
  margin-right: 5px;
  font-size: 17px;
  font-weight: 500;
}
.striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active {
  text-decoration: underline;
}
.striped-list-title:visited {
  color: rgba(78, 103, 159, 1);
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #2c3f96;
  font-size: 13px;
  justify-content: flex-start;
  text-transform: capitalize;
}
@media (min-width: 768px) {
  .striped-list-count {
    display: flex;
    flex: 1;
    justify-content: space-around;
  }
}
.striped-list-count-item::after {
  content: "·";
  display: inline-block;
  padding: 0 5px;
}
@media (min-width: 768px) {
  .striped-list-count-item::after {
    display: none;
  }
}
.striped-list-count-item:last-child::after {
  display: none;
}
.striped-list-number {
  text-align: center;
}
@media (min-width: 768px) {
  .striped-list-number {
    color: rgba(21, 30, 71, 1);
    display: block;
  }
}

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

/***** Post *****/
/*
* The post grid is defined this way:
* Content | Sidebar
* 70%     | 30%
*/
.post {
  flex: 1;
  margin-bottom: 10px;
  background-color: #ffffff;
  padding: 30px;
  border: 1px solid #bbbbbb;
  border-radius: 10px;
}
@media (min-width: 1024px) {
  .post {
    flex: 1 0 70%;
    max-width: 70%;
  }
}
.post-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .post-container {
    flex-direction: row;
  }
}
.post-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .post-header {
    align-items: baseline;
    flex-direction: row;
  }
}
.post-header .status-label {
  vertical-align: super;
}
.post-title {
  margin-bottom: 20px;
  width: 100%;
}
@media (min-width: 768px) {
  .post-title {
    margin-bottom: 0;
    padding-right: 10px;
  }
}
.post-title h1 {
  display: inline;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .post-title h1 {
    margin-right: 5px;
  }
}
.post-author {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}
.post-avatar {
  margin-bottom: 30px;
}
.post-content {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, sans-serif;
  line-height: 1.6;
  word-break: break-word;
}
.post-info-container {
  display: flex;
  margin-bottom: 40px;
}
.post-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .post-info {
  padding-right: 0;
  padding-left: 20px;
}
.post-meta {
  display: inline-block;
  flex: 1;
  margin-left: 10px;
  vertical-align: middle;
}
[dir=rtl] .post-meta {
  margin-left: 0;
  margin-right: 10px;
}
.post-body {
  display: flow-root;
}
.post-body a {
  color: rgba(61, 52, 173, 1);
  text-decoration: underline;
}
.post-body a:visited {
  color: rgba(78, 103, 159, 1);
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: rgba(34, 59, 116, 1);
}
.post-body img {
  height: auto;
  max-width: 100%;
}
.post-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.post-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.post-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.post-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.post-body figure.image {
  display: table;
  margin: 0 auto;
}
.post-body figure.image > img {
  display: block;
  width: 100%;
}
.post-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.post-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.post-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.post-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.post-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.post-body ul,
.post-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .post-body ul,
[dir=rtl] .post-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.post-body ul > ul,
.post-body ol > ol,
.post-body ol > ul,
.post-body ul > ol,
.post-body li > ul,
.post-body li > ol {
  margin: 0;
}
.post-body ul {
  list-style-type: disc;
}
.post-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.post-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.post-body blockquote {
  border-left: 1px solid #ddd;
  color: #2c3f96;
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: #2c3f96;
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: rgba(61, 52, 173, 1);
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 5px;
  vertical-align: middle;
}
.post-sidebar {
  border-top: 1px solid #ddd;
  flex: 1;
  max-width: 350px;
  padding: 30px 0;
  text-align: center;
}
@media (min-width: 1024px) {
  .post-sidebar {
    border: 0;
    flex: 1 0 30%;
    padding: 0 0 0 50px;
    text-align: initial;
  }
  [dir=rtl] .post-sidebar {
    padding: 0 50px 0 0;
  }
}
.post-sidebar-title {
  font-size: 18px;
  font-weight: 600;
}
.post-comments {
  margin-bottom: 20px;
}
@media (min-width: 1024px) {
  .post-comments {
    margin-bottom: 0;
  }
}

/***** Community Badges *****/
/* Styles labels used next to the authors of article comments, community posts, and community comments */
.community-badge-title {
  background-color: #04444d;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 0px 8px;
  vertical-align: top;
  white-space: nowrap;
  display: inline-block;
  line-height: 18px;
  vertical-align: middle;
}

.community-badge-titles {
  display: inline;
}

.community-badge-achievement {
  display: block;
  height: 16px;
  white-space: nowrap;
  width: 16px;
}
.community-badge-achievement img {
  width: 100%;
  height: 100%;
}

.community-badge-achievements {
  display: flex;
}

.community-badge-achievements-rest {
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  vertical-align: top;
}

.community-badge {
  margin: 2px;
}

.profile-info .community-badge-title {
  padding: 2px 8px;
  line-height: 20px;
}
.profile-info .community-badge-achievement {
  height: 40px;
  width: 40px;
}
.profile-info .community-badge-achievements-rest {
  line-height: 40px;
  font-size: 20px;
}

/* Navigation element that collapses on mobile */
.collapsible-nav {
  flex-direction: column;
  font-size: 14px;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav {
    flex-direction: row;
  }
}

.collapsible-nav-border {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
}
@media (min-width: 768px) {
  .collapsible-nav-border {
    border-top: 0;
  }
}

.collapsible-nav-toggle {
  top: 22.5px;
  transform: translateY(-50%);
  position: absolute;
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 768px) {
  .collapsible-nav-toggle {
    display: none;
  }
}
[dir=rtl] .collapsible-nav-toggle {
  left: 0;
  right: auto;
}
.collapsible-nav-toggle-icon {
  display: none;
}
.collapsible-nav-toggle[aria-expanded=false] .chevron-icon {
  display: inline-block;
}
.collapsible-nav-toggle[aria-expanded=true] .x-icon {
  display: inline-block;
}
.collapsible-nav-toggle:focus {
  outline: none;
  border: 1px solid rgba(61, 52, 173, 1);
}

.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}
.collapsible-nav-list li {
  color: rgba(21, 30, 71, 1);
  line-height: 45px;
  order: 1;
}
@media (min-width: 768px) {
  .collapsible-nav-list li {
    line-height: normal;
    margin-right: 30px;
  }
  [dir=rtl] .collapsible-nav-list li {
    margin-left: 30px;
    margin-right: 0;
  }
  .collapsible-nav-list li a {
    text-decoration: none;
    padding: 15px 0;
  }
}
.collapsible-nav-list li a {
  color: rgba(21, 30, 71, 1);
  display: block;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:hover {
    border-bottom: 4px solid #ddd;
  }
  .collapsible-nav-list li:hover a:not([aria-current=page]) {
    padding: 15px 0 11px 0;
    text-decoration: none;
  }
}
.collapsible-nav-list li:not([aria-selected=true]),
.collapsible-nav-list li:not(.current) {
  display: none;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:not([aria-selected=true]),
  .collapsible-nav-list li:not(.current) {
    display: block;
  }
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true] {
    padding: 15px 0 11px 0;
  }
}
.collapsible-nav-list li[aria-selected=true],
.collapsible-nav-list li.current {
  order: 0;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true],
  .collapsible-nav-list li.current {
    border-bottom: 4px solid rgba(61, 52, 173, 1);
    order: 1;
  }
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
  color: rgba(21, 30, 71, 1);
}

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

/* Sidebar navigation that collapses on mobile */
.collapsible-sidebar {
  flex: 1;
  max-height: 45px;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
}
@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 0;
  }
}
.collapsible-sidebar-title {
  margin-top: 0;
}
.collapsible-sidebar-toggle {
  position: absolute;
  top: 22.5px;
  transform: translateY(-50%);
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-toggle {
    display: none;
  }
}
[dir=rtl] .collapsible-sidebar-toggle {
  left: 0;
  right: auto;
}
.collapsible-sidebar-toggle-icon {
  display: none;
}
.collapsible-sidebar-toggle[aria-expanded=false] .chevron-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle[aria-expanded=true] .x-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle:focus {
  outline: none;
  border: 1px solid rgba(61, 52, 173, 1);
}
.collapsible-sidebar-body {
  display: none;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-body {
    display: block;
  }
}
.collapsible-sidebar[aria-expanded=true] {
  max-height: none;
}
.collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-body {
  display: block;
}

.collapsible-sidebar-body ul {
  padding-right:20px;
}

/***** "Lessons in this course" nav (article sidebar) *****/
/* Same card treatment as #toc and .article: white panel, rounded corners,
   light border, soft shadow -- so the nav reads as part of the same page
   system instead of a plain list. */
#course-nav {
  background-color: #fff;
  border-radius: 12px;
  border: 1px solid #bbbbbb;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 16px;
}
#course-nav .collapsible-sidebar-body {
  margin-top: 8px;
}
.course-module {
  border-bottom: 1px solid #ddd;
  padding: 12px 0;
}
.course-module:last-child {
  border-bottom: 0;
}
.course-module-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: rgba(21, 30, 71, 1);
}
.course-module-title {
  font-weight: 600;
  font-size: 15px;
  margin: 0;
}
.course-module.is-current-module .course-module-title {
  color: rgba(61, 52, 173, 1);
}
.course-module-chevron {
  transition: transform 0.15s ease;
  flex-shrink: 0;
  margin-left: 8px;
  color: rgba(21, 30, 71, 1);
}
.course-module.collapsed .course-module-chevron {
  transform: rotate(-90deg);
}
.course-module-articles {
  margin-top: 10px;
}
.course-module.collapsed .course-module-articles {
  display: none;
}
/* Lesson titles read as a level below their module heading */
.course-module-articles .sidenav-item {
  font-size: 13px;
  margin-top: 6px;
  margin-bottom: 6px;
}

/***** My activities *****/
.my-activities-nav {
  background-color: #f2f2f2;
  margin-bottom: 20px;
}
.my-activities-sub-nav {
  margin-bottom: 30px;
}
.my-activities-table .striped-list-title { /* My activities tables */
  display: block;
  margin-bottom: 10px;
  max-width: 350px;
  white-space: normal;
}
@media (min-width: 1024px) {
  .my-activities-table .striped-list-title {
    margin-bottom: 0;
    max-width: 500px;
    min-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.my-activities-table thead {
  display: none;
}
@media (min-width: 768px) {
  .my-activities-table thead {
    display: table-header-group;
  }
}
.my-activities-table th:first-child,
.my-activities-table td:first-child {
  padding-left: 0;
}
@media (min-width: 1024px) {
  .my-activities-table th:first-child,
  .my-activities-table td:first-child {
    width: 500px;
  }
}
.my-activities-table th:last-child,
.my-activities-table td:last-child {
  padding-right: 0;
}
.my-activities-table td:not(:first-child) {
  display: none;
}
@media (min-width: 768px) {
  .my-activities-table td:not(:first-child) {
    display: table-cell;
  }
}

/* Requests table */
.requests-search {
  width: 100%;
}
.requests-table-toolbar {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .requests-table-toolbar {
    flex-direction: row;
  }
}
.requests-table-toolbar .search {
  flex: 1;
  width: 100%;
}
.requests-table-toolbar .request-table-filter {
  width: 100%;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-table-filter {
    width: auto;
  }
}
.requests-table-toolbar .request-filter {
  display: block;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-filter {
    margin: 0 0 0 30px;
  }
  [dir=rtl] .requests-table-toolbar .request-filter {
    margin: 0 30px 0 0;
  }
}
.requests-table-toolbar .request-filter-label {
  font-size: 13px;
  margin-top: 30px;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-filter-label {
    margin-top: 0;
  }
}
.requests-table-toolbar select {
  max-height: 40px;
  margin-bottom: 30px;
  width: 100%;
}
@media (min-width: 768px) {
  .requests-table-toolbar select {
    margin-bottom: 0;
    max-width: 300px;
    width: auto;
  }
}
@media (min-width: 768px) {
  .requests-table-toolbar .organization-subscribe {
    margin-left: 10px;
  }
  [dir=rtl] .requests-table-toolbar .organization-subscribe {
    margin: 0 10px 0 0;
  }
}
.requests-table-toolbar .organization-subscribe button {
  line-height: 40px;
  max-height: 40px;
  padding: 0 20px;
}
.requests-table-toolbar + .requests-search-info {
  margin-top: 15px;
}
.requests-table-toolbar + .requests-search-info.meta-data::after {
  content: "";
  margin: 0;
}
.requests-table-toolbar + .requests-search-info + .requests {
  margin-top: 20px;
}
.requests-table-toolbar + .requests {
  margin-top: 40px;
}
.requests .requests-table-meta {
  display: block;
}
@media (min-width: 768px) {
  .requests .requests-table-meta {
    display: none;
  }
}
.requests .requests-table thead {
  display: none;
}
@media (min-width: 768px) {
  .requests .requests-table thead {
    display: table-header-group;
  }
}
.requests .requests-table-info {
  display: block;
}
@media (min-width: 768px) {
  .requests .requests-table-info {
    display: table-cell;
    vertical-align: middle;
    width: auto;
  }
}
.requests .requests-table .requests-link {
  position: relative;
}
.requests .requests-table .requests-sort-symbol {
  position: absolute;
  left: calc(100% + 3px);
  bottom: 0;
  font-size: 10px;
}

/* Following table */
@media (min-width: 768px) {
  .subscriptions-subscribe button {
    width: auto;
  }
}
.subscriptions-table td:last-child {
  display: block;
}
@media (min-width: 768px) {
  .subscriptions-table td:last-child {
    display: table-cell;
  }
}
.subscriptions-table td:first-child {
  display: flex;
  align-items: center;
}
.subscriptions-table .user-avatar {
  margin-right: 10px;
}
.subscriptions .striped-list-title {
  display: inline-block;
  vertical-align: middle;
}

/* Contributions table */
.contributions-table td:last-child {
  color: #2c3f96;
  font-size: 13px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: #2c3f96;
}

/***** Request *****/
.request-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .request-container {
    align-items: flex-start;
    flex-direction: row;
  }
}
.request-container .comment-container {
  min-width: 0;
}
.request-breadcrumbs {
  margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .request-breadcrumbs {
    margin-bottom: 60px;
  }
}
.request-main {
  flex: 1 0 auto;
  order: 1;
}
.request-main .comment-fields, .request-main .request-submit-comment {
  display: none;
}
.request-main .comment-fields.shown {
  display: block;
}
.request-main .request-submit-comment.shown {
  display: inline;
}
@media (min-width: 1024px) {
  .request-main {
    flex: 0 0 66%;
    order: 0;
    min-width: 0;
  }
}
.request-main .comment-form-controls {
  display: block;
}
.request-main .comment-ccs {
  display: block;
}
.request-main .comment-show-container {
  border-radius: 2px;
  border: 1px solid #ddd;
  color: #2c3f96;
  text-align: inherit;
  padding: 8px 25px;
  width: 100%;
}
.request-main .comment-show-container.hidden {
  display: none;
}
.request-main .form-field.comment-ccs > ul {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.request-main .form-field.comment-ccs > ul[data-hc-focus=true] {
  border: 1px solid rgba(61, 52, 173, 1);
}
.request-main .form-field.comment-ccs > input[type=text] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.request-main .comment-ccs + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}
.request-main .comment-ccs + textarea:focus {
  border-top: 1px solid rgba(61, 52, 173, 1);
}
.request-main input#mark_as_solved {
  display: none;
}
.request-title {
  width: 100%;
}
@media (min-width: 1024px) {
  .request-title {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    max-width: 66%;
    padding-bottom: 20px;
  }
}
.request-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  order: 0;
}
@media (min-width: 1024px) {
  .request-sidebar {
    background-color: #f7f7f7;
    border: 0;
    font-size: 13px;
    flex: 0 0 auto;
    padding: 0 20px;
    width: 30%;
  }
}
.request-sidebar h2 {
  font-size: 15px;
  font-weight: 600;
  position: relative;
}
@media (min-width: 1024px) {
  .request-sidebar h2 {
    display: none;
  }
}
.request-details {
  border-bottom: 1px solid #ddd;
  font-size: 0;
  margin: 0;
  padding-bottom: 20px;
}
.request-details:last-child {
  border: 0;
}
.request-details dt, .request-details dd {
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  margin: 20px 0 0 0;
}
.request-details dd {
  padding: 0 10px;
  width: 60%;
}
.request-details dd::after {
  content: "\a";
  white-space: pre;
}
.request-details dt {
  color: #2c3f96;
  width: 40%;
}
.request-details .request-collaborators {
  display: inline-block;
}
.request-attachments dt, .request-attachments dd {
  width: 100%;
}
.request-attachments dd {
  margin: 10px 0 0 0;
}
.request-form textarea {
  min-height: 120px;
}
.request-follow-up {
  padding-top: 20px;
}

/***** Pagination *****/
.pagination {
  margin: 20px 0;
  text-align: center;
}
.pagination-next, .pagination-prev, .pagination-first, .pagination-last {
  display: inline-block;
}
.pagination-first-link, .pagination-last-link {
  padding: 0 10px;
}
.pagination-first-text, .pagination-last-text {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.pagination-next-link {
  padding-right: 10px;
}
.pagination-next-text {
  margin-right: 10px;
}
[dir=rtl] .pagination-next-link {
  padding-left: 10px;
}
[dir=rtl] .pagination-next-text {
  margin-left: 10px;
}
.pagination-prev-link {
  padding-left: 10px;
}
.pagination-prev-text {
  margin-left: 10px;
}
[dir=rtl] .pagination-prev-link {
  padding-right: 10px;
}
[dir=rtl] .pagination-prev-text {
  margin-right: 10px;
}

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

.meta-group-opposite {
  float: right;
}

[dir=rtl] .meta-group-opposite {
  float: left;
}

.meta-group * {
  display: inline;
}

.meta-data {
  color: #2c3f96;
  font-size: 13px;
}
.meta-data:not(:last-child)::after {
  content: "·";
  margin: 0 5px;
}

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

.profile-header .container {
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .profile-header .container {
    flex-wrap: nowrap;
  }
}

.profile-header .profile-info {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}

.profile-avatar {
  position: relative;
  line-height: 0;
  align-self: center;
  margin-right: 10px;
}
[dir=rtl] .profile-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.profile-avatar .user-avatar {
  width: 80px;
  height: 80px;
}

.profile-avatar .icon-agent {
  bottom: 0;
  right: 0;
}

.profile-header .basic-info {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}
.profile-header .basic-info .name {
  margin: 0;
  line-height: 25px;
  vertical-align: middle;
  display: inline;
}

.profile-header .options {
  display: flex;
  flex-basis: 100%;
  margin-top: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .profile-header .options {
    flex-wrap: nowrap;
    flex-basis: auto;
    margin-top: 0;
    margin-left: 10px;
  }
  [dir=rtl] .profile-header .options {
    margin-left: 0;
    margin-right: 10px;
  }
  .profile-header .options > :not(:last-child) {
    margin-bottom: 0;
    margin-right: 10px;
  }
  [dir=rtl] .profile-header .options > :not(:last-child) {
    margin-left: 10px;
    margin-right: 0;
  }
}

.user-profile-actions {
  width: 100%;
  margin-bottom: 15px;
}

.profile-header .description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  margin: 15px 0;
  flex-basis: 100%;
}

.profile-stats {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

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

.profile-stats .stat-label {
  color: #2c3f96;
  flex: 0 0 100px;
  margin-right: 10px;
}
[dir=rtl] .profile-stats .stat-label {
  margin-left: 10px;
  margin-right: 0;
}

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

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

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

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

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

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

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

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

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

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

.profile-nav {
  background-color: #f2f2f2;
  margin-bottom: 37px;
}

.profile-section {
  width: 100%;
}
@media (min-width: 1024px) {
  .profile-section {
    width: calc(100% - 330px);
  }
}

.profile-section-header {
  display: flex;
  flex-wrap: wrap;
}

.profile-section-title {
  flex-basis: 100%;
  margin-bottom: 0;
}

.profile-section-description {
  flex-basis: 100%;
  padding: 10px 0;
  color: #2c3f96;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .profile-section-description {
    flex: 1 0 50%;
    padding-bottom: 0;
  }
}

.profile-section-sorter {
  flex-basis: 100%;
  border-top: solid 1px #eee;
  font-size: 13px;
}
.profile-section-sorter .dropdown-toggle {
  padding: 10px 0;
  width: 100%;
}
.profile-section-sorter .dropdown-toggle::after {
  position: absolute;
  right: 0;
}
[dir=rtl] .profile-section-sorter .dropdown-toggle::after {
  left: 0;
  right: initial;
}
@media (min-width: 768px) {
  .profile-section-sorter .dropdown-toggle::after {
    position: relative;
  }
}
@media (min-width: 768px) {
  .profile-section-sorter {
    flex: 0 1 auto;
    padding-top: 0;
    border-top: 0;
    margin-left: 20px;
  }
  [dir=rtl] .profile-section-sorter {
    margin-left: 0;
    margin-right: 20px;
  }
}

.profile-badges-items {
  margin-top: 25px;
}
.profile-badges-item {
  border-top: 1px solid #ddd;
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: flex-start;
  padding: 27px 12px;
}
.profile-badges-item > div {
  padding-right: 12px;
  padding-left: 12px;
}
.profile-badges-item-image {
  height: 40px;
  width: 40px;
  margin-right: 12px;
}
.profile-badges-item-image img {
  max-height: 40px;
}
[dir=rtl] .profile-badges-item-image {
  margin-left: 12px;
  margin-right: 0;
}
.profile-badges-item-title, .profile-badges-item-metadata-title {
  font-size: 15px;
  margin-bottom: 10px;
}
.profile-badges-item-title {
  font-weight: 600;
}
.profile-badges-item-description, .profile-badges-item-metadata-description {
  color: #2c3f96;
  font-size: 13px;
  margin: 0;
}
.profile-badges-item-metadata {
  margin-left: auto;
  text-align: right;
}
[dir=rtl] .profile-badges-item-metadata {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.profile-contribution {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  padding: 20px 0;
  position: relative;
}

.profile-contribution-header {
  margin-bottom: 5px;
}

.profile-contribution-title {
  margin: 0 0 5px 0;
  display: inline;
  line-height: 21px;
  font-size: 15px;
  vertical-align: middle;
}

.profile-contribution-body {
  margin: 10px 0;
}

.profile-contribution-list > .profile-contribution {
  border-top: 1px solid #eee;
}
@media (min-width: 768px) {
  .profile-contribution-list > .profile-contribution {
    padding-left: 30px;
  }
  [dir=rtl] .profile-contribution-list > .profile-contribution {
    padding-right: 30px;
    padding-left: 0;
  }
}

.profile-contribution-list > .profile-contribution:last-child {
  border-bottom: 1px solid #eee;
}

.profile-contribution-icon {
  left: 0;
  position: absolute;
  color: #ccc;
  line-height: 25px;
}
[dir=rtl] .profile-contribution-icon {
  right: 0;
}
.profile-contribution-icon svg {
  vertical-align: middle;
}

.profile-contribution-list .profile-contribution-header {
  margin-left: 30px;
}
[dir=rtl] .profile-contribution-list .profile-contribution-header {
  padding-right: 30px;
  padding-left: 0;
}
@media (min-width: 768px) {
  .profile-contribution-list .profile-contribution-header {
    margin-left: 0;
  }
  [dir=rtl] .profile-contribution-list .profile-contribution-header {
    padding-right: 0;
  }
}

.profile-comments .profile-contribution-breadcrumbs {
  margin-left: 30px;
}
[dir=rtl] .profile-comments .profile-contribution-breadcrumbs {
  padding-right: 30px;
  padding-left: 0;
}
@media (min-width: 768px) {
  .profile-comments .profile-contribution-breadcrumbs {
    margin-left: 0;
  }
  [dir=rtl] .profile-comments .profile-contribution-breadcrumbs {
    padding-right: 0;
  }
}

.profile-section .no-activity,
.profile-section .private-activity {
  display: block;
  margin-top: 40px;
  color: #999;
}

.private-activity-icon {
  margin-right: 10px;
}
[dir=rtl] .private-activity-icon {
  margin-right: 0;
  margin-left: 10px;
}

.profile-activity-list {
  margin-top: 25px;
}

.profile-activity {
  position: relative;
  padding-bottom: 30px;
}
@media (min-width: 768px) {
  .profile-activity {
    padding-left: 20px;
  }
  [dir=rtl] .profile-activity {
    padding-right: 20px;
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .profile-activity:not(:last-child) {
    border-left: 1px solid #ddd;
  }
  [dir=rtl] .profile-activity:not(:last-child) {
    border-left: 0;
    border-right: 1px solid #ddd;
  }
}

.profile-activity-header {
  display: flex;
  align-items: center;
  margin-left: 35px;
}
[dir=rtl] .profile-activity-header {
  margin-left: 0;
  margin-right: 35px;
}
@media (min-width: 768px) {
  .profile-activity-header {
    margin-left: 0;
  }
  [dir=rtl] .profile-activity-header {
    margin-right: 0;
  }
}

.profile-activity-header .user-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  min-width: 40px;
  align-self: flex-start;
}
[dir=rtl] .profile-activity-header .user-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.profile-activity-description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  margin: 0;
  min-width: 0;
  width: 100%;
}

.profile-activity-description span:first-child {
  font-weight: 600;
  display: inline;
}

.profile-activity-contribution {
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background-color: #f7f7f7;
}
@media (min-width: 768px) {
  .profile-activity-contribution {
    margin-top: 0;
    margin-left: 50px;
  }
  [dir=rtl] .profile-activity-contribution {
    margin-left: 0;
    margin-right: 50px;
  }
}

.profile-activity-icon {
  position: absolute;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-color: #FFFFFF;
  background-position: 50% 50%;
  text-align: center;
  color: #ccc;
}
[dir=rtl] .profile-activity-icon {
  right: 0;
}
@media (min-width: 768px) {
  .profile-activity-icon {
    left: -14px;
  }
  [dir=rtl] .profile-activity-icon {
    right: -14px;
  }
}

.profile-activity-icon svg {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  margin: auto;
}

/***** Search results *****/
.search-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .search-results {
    flex-direction: row;
  }
}
.search-results-column {
  flex: 1;
}
@media (min-width: 1024px) {
  .search-results-column {
    flex: 0 0 75%;
  }
}
.search-results-sidebar {
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .search-results-sidebar {
    border: 0;
    flex: 0 0 20%;
    height: auto;
  }
}
.search-results-sidebar .sidenav-item {
  border-radius: 4px;
  padding: 10px 36px;
  margin-bottom: 4px;
  color: rgba(21, 30, 71, 1);
}
.search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current {
  background-color: #e9ebed;
  text-decoration: none;
}
.search-results-sidebar .sidenav-subitem {
  unicode-bidi: embed;
}
.search-results-sidebar .sidenav-tag {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-grow: 0;
}
.search-results-sidebar .sidenav-tag .content-tag {
  background: #E9EBED;
  border-radius: 4px;
  padding: 4px 12px;
  text-decoration: none;
}
.search-results-sidebar .sidenav-tag .content-tag .label {
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  letter-spacing: -0.000427656px;
  color: #49545C;
  flex-grow: 0;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .sidenav-tag .content-tag .close-icon {
  color: #555555;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .collapsible-sidebar {
  margin-bottom: 30px;
}
.search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
  display: none;
}
@media (min-width: 1024px) {
  .search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
    display: block;
  }
}
.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n+6) {
  display: none;
}
.search-results-sidebar .multibrand-filter-list .doc-count {
  color: #666;
}
.search-results-sidebar .see-all-filters {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  padding: 10px;
  color: rgba(61, 52, 173, 1);
}
.search-results-sidebar .see-all-filters[aria-hidden=true] {
  display: none;
}
.search-results-sidebar .see-all-filters:hover {
  text-decoration: underline;
}
.search-results-sidebar .see-all-filters::after {
  content: " ⌄";
  font-weight: bold;
}
.search-results-subheading {
  font-size: 18px;
  font-weight: 600;
}
.search-results-list {
  margin-bottom: 25px;
}
.search-results-list > li {
  padding: 20px 0;
}
.search-results-list > li:first-child {
  border-top: 1px solid #ddd;
}
.search-results .no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rem;
}
.search-results .no-results .headline {
  color: #2F3941;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.45px;
}
.search-results .no-results .action-prompt {
  color: #68737D;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.154px;
}
.search-results .no-results .action-prompt a {
  color: rgba(61, 52, 173, 1);
}
.search-results .no-results .action-prompt a:visited {
  color: rgba(61, 52, 173, 1);
}

.search-result-title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-result-title {
  font-size: 16px;
  margin-bottom: 0;
}
.search-result-votes, .search-result-meta-count {
  color: #2c3f96;
  font-size: 13px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: rgba(61, 52, 173, 1);
  vertical-align: middle;
  width: 13px;
  height: 13px;
}
[dir=ltr] .search-result-votes, [dir=ltr] .search-result-meta-count {
  margin-left: 20px;
}
[dir=rtl] .search-result-votes, [dir=rtl] .search-result-meta-count {
  margin-right: 20px;
}
.search-result-meta-container {
  color: #666;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .search-result-meta-container {
    flex-direction: row;
    align-items: center;
  }
}
@media (min-width: 1024px) {
  .search-result-meta-container nav {
    flex: 1;
  }
}
@media (min-width: 1024px) {
  [dir=ltr] .search-result-meta-container .meta-data {
    margin-left: 20px;
  }
}
@media (min-width: 1024px) {
  [dir=rtl] .search-result-meta-container .meta-data {
    margin-right: 20px;
  }
}
.search-result-meta-container .meta-data::after {
  content: none;
}
.search-result-breadcrumbs {
  margin: 0;
}
.search-result-description {
  margin-top: 10px;
  margin-bottom: 0;
  word-break: break-word;
}

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

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

/***** Notifications *****/
.notification {
  border: 1px solid;
  display: table;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, sans-serif;;
  font-size: 12px;
  padding: 13px 15px;
  transition: height 0.2s;
  width: 100%;
  color: #555;
}

.notification a {
  color: #158ec2;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (min-width: 1024px) {
  .article {
    max-width: 100%;
  }
  
  .container,
  .header,
  .footer-inner{
    max-width:100vw;
  }
}

/** BS - TOC **/
#toc {
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  padding: 0 12px 12px 12px; /* top, right, bottom, left */
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  border: 1px solid #bbbbbb;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

  scrollbar-width: thin;
  scrollbar-color: #c5c5c5 transparent;
}

#toc ul {
  list-style-type: none;
  padding-left: 0;
}

#toc .toc-item {
  margin: 6px 0;
}

#toc .toc-item:last-child {
  margin-bottom: 0;
}

#toc .toc-heading {
  padding-top: 12px;
  padding-bottom: 4px;
  margin: 0;
}

/* Right Column Layout (TOC)   */
.article-toc-wrapper {
  grid-column: 3;
  position: sticky;
  top: 100px;
}

@media (min-width: 1024px) {
  .article-toc-wrapper {
    border: 0;
    flex: 0 0 17% !important;
    height: auto;
    max-width: 17% !important;
    margin-left: 12px;
  }
}

/* Scrollbar Styling           */
#toc::-webkit-scrollbar {
  width: 6px;
}

#toc::-webkit-scrollbar-track {
  background: transparent;
}

#toc::-webkit-scrollbar-thumb {
  background: #c5c5c5;
  border-radius: 3px;
}

#toc:hover::-webkit-scrollbar-thumb {
  background: #a9a9a9;
}

/* H2 Alignment                */
#toc .toc-h2-row {
  display: flex;
  align-items: center;
  position: relative;
}

#toc .toc-h2-row a {
  padding-left: 12px;
  display: inline-block;
  font-size: 0.97em;
}

/* H3 Styling                  */
#toc .toc-h3-list {
  margin-left: 24px;
}

#toc .toc-h3 a {
  font-size: 0.94em;
}

/* Chevron SVGs                */
.toc-icon {
  width: 12px;
  height: 12px;
  vertical-align: middle;
  transition: transform 0.15s ease;
}

.toc-icon-right {
  transform: rotate(0deg);
}

.toc-icon-down {
  transform: rotate(90deg);
}

/* Toggle Button               */
.toc-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  color: #17494D;
}

#toc a.toc-active {
  font-weight: 600;
}

/* Mobile Hide                 */
@media only screen and (max-width: 767px) {
  #toc {
    display: none;
  }
}

/* BS - Tooltip when you hover over an element */
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip {
    position: relative;
    cursor: pointer;
    border-bottom: 1px dotted #0073e6; /* Optional: Underline effect */
}

.tooltip::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%; /* Positions above the word */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 5px;
    white-space: nowrap;
    font-size: 12px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.tooltip:hover::before {
    visibility: visible;
    opacity: 1;
}

.download-button {
  display: inline-block;
  padding: 10px 15px;
  font-size: 14px;
  background-color: #17494D;
  color: #fff;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  position: relative; /* Keeps it inside the article container */
  margin-bottom: 10px; /* Adds space between button and article */
  cursor: pointer;
}

.download-button:hover {
  background-color: #000000;
}

.read-aloud-button {
    display: inline-block;
  padding: 10px 15px;
  font-size: 14px;
  background-color: #17494D;
  color: #fff;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  position: relative; /* Keeps it inside the article container */
  margin-bottom: 10px; /* Adds space between button and article */
  cursor: pointer;
}

.read-aloud-button:hover {
    background-color: #000000;
}

.article-body figure {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers the image and caption */
  justify-content: center;
  text-align: center;
  margin: 1em auto; /* Centers the figure horizontally */
  }

.article-body figcaption {
  font-size: 14px;
    color: #555;
    font-style: italic;
    margin-top: 5px;
  	max-width: 100%; /* Ensures it doesn't exceed the image width */
    word-wrap: break-word; /* Prevents long words from overflowing */
}

/* Standard Image Styling for Articles */
.article-body img {
  max-width: 600px;  /* Set a uniform width */
  display: block;    /* Ensures proper alignment */
  margin: 10px auto; /* Centers images and adds spacing */
}

/* Small Image Styling (for icons or thumbnails) */
.article-body img.small {
  width: 100px;  /* Thumbnail size */
  height: auto;
}

/* BS - Inline Icon */
.article-body img.inline-icon {
  display: inline-block !important;   /* Fix block-level override */
  width: 20px !important;             /* Keep consistent inline icon width */
  height: 20px !important;            /* Keep consistent inline icon height */
  margin: 0 !important;               /* Prevent centering from theme */
  max-width: none !important;         /* Override global max-width: 600px */
  vertical-align: text-bottom;        /* Keeps the icon at the same level as text */
}

/* BS - Inline Icon Wide */
.article-body img.inline-icon-wide {
  display: inline-block !important;   /* Fix block-level override */
  height: 20px !important;             /* Keep consistent inline icon height */
  width: auto !important;              /* Maintain aspect ratio */
  object-fit: contain;                 /* ensures the image scales properly */
  vertical-align: text-bottom;         /* Keeps the icon at the same level as text */
  margin: 0 !important;                /* Prevent centering from theme */
  max-width: none !important;          /* Override global max-width: 600px */
}

/* BS - Make embedded YouTube videos match article image width */
.article-body .wysiwyg-media iframe,
.article-body iframe {
  max-width: 600px !important;     /* match image width */
  width: 100% !important;           /* responsive scaling */
  aspect-ratio: 16 / 9 !important;  /* correct height */
  height: auto !important;          /* recalc height from aspect ratio */
  display: block !important;        /* center like images */
  margin: 10px auto !important;     /* same spacing as images */
}

.article-body .wysiwyg-media div {
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}


/* JD_Critical Prompt Style */
.critical-prompt {
    background-color: #fce1dc; /* Light red background */
  	background-image: url('/hc/theming_assets/01KBQPA71FNAQNSYP8CE0MWP6J'); background-repeat: no-repeat; background-size: 30px; background-position: 10px 20px;
    color: #151E47; /* Midnight Blue text (same as body text)*/
    border: 2px solid #ce325f; /* Red border */
    padding: 20px; padding-left:50px;
    margin: 15px 0;
    border-radius: 10px;
    font-weight: 600;
}

/* JD_Warning Prompt Style */
.warning-prompt {
    background-color: #fef7d9; /* Light yellow background */
  background-image: url('/hc/theming_assets/01KBQPA70NDJFZ9QATGD9Z65AH'); background-repeat: no-repeat; background-size: 30px; background-position: 10px 20px;
    color: #151E47; /* Midnight Blue text (same as body text)*/
    border: 2px solid #fda92e; /* Yellow border */
    padding: 20px; padding-left:50px;
    margin: 15px 0;
    border-radius: 10px;
    font-weight: 600;
}

/* JD_Note Prompt Style */
.note-prompt {
    background-color: #acddef; /* Light Blue background */
    color: #151E47; /* Midnight Blue text (same as body text)*/
    /*border: 1px solid #0096D6;*/ /* Blue border - removed*/
    padding: 20px;
    margin: 15px 0;
    border-radius: 10px;
    font-weight: 600;
}

/* KB_Action Prompt Style */
.action-prompt {
    background-color: #FEF2F2; /* Light red background */
    border: 2px solid #FECACA;
    border-left: 12px solid #B91C1C;
    color: #151E47; /* Midnight Blue text (same as body text)*/
    padding: 12px 16px;
    box-sizing: border-box;
    border-radius: 3px;
    font-weight: 600;
    display: block;
    width:100%
}

.action-prompt_title {
  font-weight: 500;
  font-size: 10px;     /* adjust as needed */
  line-height: 1.3;
  margin: 0 0 10px 0;
  color: #111;
}
.action-prompt_text {
  margin: 0;
  font-size: 13px;     /* adjust as needed */
  line-height: 1.5;
  color: #222;
}

/* KB_Attention Prompt Style */
.attention-prompt {
    background-color: #fef7d9; /* Light orange background */
    border: 2px solid #FDE68A;
    border-left: 12px solid #fda92e;
    color: #151E47; /* Midnight Blue text (same as body text)*/
    padding: 12px 16px;
    box-sizing: border-box;
    border-radius: 3px;

    font-weight: 600;
    display: block;
    width:100%
}

.attention-prompt_title {
  font-weight: 500;
  font-size: 10px;     /* adjust as needed */
  line-height: 1.3;
  margin: 0 0 10px 0;
  color: #111;
}
.attention-prompt_text {
  margin: 0;
  font-size: 10px;     /* adjust as needed */
  line-height: 1.5;
  color: #222;
}

/* KB_Information Prompt Style */
.information-prompt {
    background-color: #eaf4fb; /* Light Blue background */
  	border: 1px solid #1a73e8;
    border-left: 12px solid #1a73e8;
    color: #151E47; /* Midnight Blue text (same as body text)*/
    padding: 12px 16px;
    box-sizing: border-box;
    border-radius: 3px;
    font-weight: 600;
    display: block;
    width:100%
}

.information-prompt_title {
  font-weight: 500;
  font-size: 10px;     /* adjust as needed */
  line-height: 1.3;
  margin: 0 0 10px 0;
  color: #111;
}
.information-prompt_text {
  margin: 0;
  font-size: 10px;     /* adjust as needed */
  line-height: 1.5;
  color: #222;
}

/* Sections / Accordion styles moved from Section page */
.orbus-container { font-family: Montserrat, sans-serif; background: #f4f2f0; color:#151e47; }

.section-articles-title {
/*LUCY2*/font-size: 1.35em;
font-weight: 600;
margin-bottom: 12px;
color: #151e47;
}

.section-grid {
display: flex;
flex-wrap: wrap;
gap: 32px;
justify-content: flex-start;
margin-top: 32px;
  /*LUCY2*/padding-bottom:50px;
}

/* Make cards flexible so they expand when space is available */
.section-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 16px rgba(0,0,0,0.08);
border: 1px solid #bbbbbb;
padding: 28px 24px;
width: auto;
flex: 1 0 340px;
min-width: 220px;
min-height: 160px;
display: flex;
flex-direction: column;
align-items: flex-start;
transition: box-shadow 0.2s, border-color 0.2s;
margin-bottom: 10px;
box-sizing: border-box;
}

/* Accordion header and content */
.accordion-header { display: flex; align-items: center; width: 100%; padding: 0; margin-bottom: 10px; }
.accordion-header-content { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.accordion-heading { font-size: 1.08em; font-weight: bold; color: #151e47; }

/* subsection link/title */
.subsection-link {
color: #3d34ad;
text-decoration: none;
transition: color 0.15s;
word-break: break-word;
white-space: normal;
overflow-wrap: anywhere;
display: inline-block;
max-width: 90%;
}
.subsection-link:hover { color: #151e47; text-decoration: underline; }

.accordion-desc { font-size: 0.97em; color: #5e6c7a; margin: 0; word-break: break-word; }

/* toggle button and arrow */
.accordion-toggle {
background: none;
border: none;
cursor: pointer;
padding: 6px;
margin-left: 8px;
}
.accordion-toggle:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(61,52,173,0.18);
border-radius: 6px;
}

.arrow {
transition: transform 0.3s;
font-size: 1.2em;
margin-left: 10px;
color: #3d34ad;
display: inline-block;
}

/* collapsed/expanded content */
.section-card .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.section-card.open .accordion-content { max-height: 500px; transition: max-height 0.5s ease; }
/*LUCY2*/.section-card.open .arrow { transform: rotate(-180deg); }

/* list styles inside the card */
.section-card ul { margin: 0; padding-left: 10px; padding-right:10px; font-size: 0.97em; }
.section-card li { margin-bottom: 6px; }

/* article links inside card */
.article-title {
color: #3d34ad;
text-decoration: none;
transition: color 0.15s;
word-break: break-word;
white-space: normal;
overflow-wrap: anywhere;
display: inline-block;
max-width: 90%;
}
.article-title:hover { color: #151e47; text-decoration: underline; }

/* BS - Remove link-style behavior from the main article page title */
.article-header .article-title {
  color: inherit !important;
  text-decoration: none !important;
  transition: none !important;
  cursor: text !important;
}

.article-header .article-title:hover {
  color: inherit !important;
  text-decoration: none !important;
}

/* hover effect on card */
.section-card:hover { box-shadow: 0 4px 24px rgba(42,114,229,0.13); border-color: #3d34ad; }

/* responsive */
@media (max-width: 900px) {
.section-grid { gap: 20px; }
.section-card { width: 100%; min-width: 0; flex: 1 0 100%; }
}
@media (max-width: 700px) {
.section-grid { flex-direction: column; gap: 0; }
.section-card { width: 100%; }
}
/* — Fix: subsection titles use full available width and allow graceful breaks — */
html body .accordion-header .accordion-heading,
html body .accordion-header .accordion-header-content,
html body .subsection-link {
display: block !important;           / make the title take the full header width /
width: 100% !important;              / avoid 90% cap that causes awkward breaks /
box-sizing: border-box !important;
white-space: normal !important;
overflow-wrap: anywhere !important;  / allow breaks anywhere if needed /
word-break: break-word !important;
-webkit-hyphens: auto !important;
-ms-hyphens: auto !important;
hyphens: auto !important;
line-height: 1.25 !important;        / slightly looser spacing to avoid tight wrapping */
max-width: none !important;
}

/* BS - Bold numbers in lists */
.bold-numbers li::marker { font-weight: 700; }

/*BS - Bold numbers only in the top list */
.bold-top > li::marker { font-weight: 700; }

/* BS - Second-level bullets (empty circles) */
.article-body > ul > li > ul {
  list-style-type: circle; /* empty circle */
}

/* LB - Width */
.section-card .subsection-link,
.section-card .article-title {
  max-width: 100%;
  width: 100%;
}

/* BS - Highlight the currently opened section */
.sidenav-item-wrapper.is-current > .sidenav-item {
  font-weight: 600;
}

.hidden-article {
  display: none;
}

/* BS - Show more/less in section card */
.show-more-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;

  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 600;
  color: rgba(61, 52, 173, 1); /* match .article-title if needed */
  text-decoration: none;
}

.show-more-btn:hover {
  text-decoration: underline;
}

/* BS - Explore sections inside sections */
.subsection-placeholder {
  margin: 12px 0 4px;
  padding: 0;
  font-size: 14px;
	color: rgba(61, 52, 173, 1);
}

.subsection-icon {
  font-size: 16px;
  margin-right: 3px;
  vertical-align: baseline;
}

.explore-toggle {
  color: #4B3EC4;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-size: 14px;
}

.explore-toggle:hover {
  text-decoration: underline;
}

.explore-arrow {
  font-size: 12px;
  margin-left: 4px;
  display: inline-block;
  transition: transform 0.15s ease;
  position: relative;
  top: -1px;
}

/* BS - Print */
.print-button {
  display: inline-block;
  padding: 0 20px;
  font-size: 12px;
  line-height: 2.34;
  background-color: transparent;
  transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out, color 0.15s ease-in-out;
  color: rgba(61, 52, 173, 1);
  border: 1px solid rgba(61, 52, 173, 1);
  border-radius: 4px;
  position: sticky;
  cursor: pointer;
  margin: 0;
  user-select: none;
  white-space: nowrap;
}

.print-button svg {
  vertical-align: middle;
  margin-top: -2px;   /* fine‑tunes baseline alignment */
}

.print-button:hover {
  background-color: rgba(61, 52, 173, 1);
  color: #FFFFFF;
  text-decoration: none;
}

.article-subscribe {
  display: flex;
  gap: 12px;   /* spacing between buttons */
  align-items: center;
}

/* BS - PRINT‑OPTIMIZED ARTICLE PDF */

@media print {

  @page {
    size: A4;
    margin: 15mm;
  }
  
/* Hide everything except main article body */
  nav,
  .article-sidebar,
  .article-toc-wrapper,
  .article-author,
  .article-subscribe,
  .article-votes,
  .article-relatives,
  .article-comments,
  .article-footer,
  .article-more-questions,
  .article-return-to-top,
  .article-share,
  .article-votes,
  .icon-lock,
  footer,
  #toc,
  #preview-bar-container,
  #navbar-container,
  .header,
  .content-tags,
  .container-divider,
  .search-container,
  .article-comment-count,
  .zd-card,
  .content,
  .request-callout {
      display: none !important;
  }
  .tooltip {
    border-bottom: none !important;
    position: static !important;
  }
  .article {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
  
  /* Prevent headings from being isolated at page bottom */
  h1, h2, h3 {
    page-break-after: avoid !important;
    break-after: avoid !important;
  }
  
  /* Keep heading WITH the next paragraph or content block */
  h1 + p,
  h2 + p,
  h3 + p,
  h2 + ul,
  h3 + ul,
  h2 + div,
  h3 + div,
  h2 + section,
  h3 + section {
    page-break-before: avoid !important;
    break-before: avoid !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  
  /* Hide Zendesk Messaging / Web Widget */
  #launcher,
  iframe#launcher,
  iframe[src*="web_widget"],
  iframe[src*="messaging"],
  [title="Button to launch messaging window"],
  .zEWidget-launcher,
  .zEWidget,
  .zE-widget-launcher,
  div[id*="Widget"],
  div[class*="widget"],
  iframe {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  /* Allow article to use full width */
  .container,
  .article-container,
  .article {
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
  }
  
  /* Typography cleanup */
  h1 {
    font-size: 24pt;
    margin-bottom: 10pt;
  }
  
   /* If an H1 is the first element, remove even more space */
  .article-body h1:first-child {
    margin-top: 0pt !important;
  }
}
  h2 {
    font-size: 18pt;
    margin-top: 14pt !important;
    padding-top: 14pt;
  }

  h3 {
    font-size: 15pt;
    margin-top: 14pt;
  }
  
  /* Prevent images from splitting across pages */
  img,
  figure,
  .article-body img {
      page-break-inside: avoid !important;
      break-inside: avoid !important;
  }
  
  figure {
      margin: 0 0 12pt 0;
  }

  figcaption {
      font-size: 10pt;
      text-align: center;
      margin-top: 4pt;
      page-break-inside: avoid !important;
  }
  
/* OrbusInfinity exam widget — append to the theme's style.css.
   Scoped entirely under .orbus-exam*, so this can't affect any other
   page or article. Swap the two brand colors below to match your theme. */

/* Defined on the root mount element (not the form) so the result box and
   retake button — siblings of the form, not descendants — can see them too. */
.orbus-exam-root {
  --orbus-exam-brand: #151E47;
  --orbus-exam-brand-hover: #5EDAC3;
  --orbus-exam-pass: #1e7e34;
  --orbus-exam-pass-bg: #eaf7ee;
  --orbus-exam-fail: #b3261e;
  --orbus-exam-fail-bg: #fdecea;
  --orbus-exam-border: #e0e0e0;
}

.orbus-exam {
  max-width: 640px;
  margin: 24px 0;
  font-size: 15px;
}

.orbus-exam__question {
  border: 1px solid var(--orbus-exam-border);
  border-radius: 10px;
  padding: 18px 20px;
  margin: 0 0 16px;
  background: #fff;
}

.orbus-exam__legend {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 0 12px;
  font-weight: 600;
  line-height: 1.4;
}

.orbus-exam__q-status {
  flex: none;
  margin-left: auto;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
}

.orbus-exam__q-status--correct {
  color: var(--orbus-exam-pass);
}

.orbus-exam__q-status--incorrect {
  color: var(--orbus-exam-fail);
}

.orbus-exam__question--correct {
  border-color: var(--orbus-exam-pass);
  background: var(--orbus-exam-pass-bg);
}

.orbus-exam__question--incorrect {
  border-color: var(--orbus-exam-fail);
  background: var(--orbus-exam-fail-bg);
}

.orbus-exam__badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--orbus-exam-brand);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.orbus-exam__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.orbus-exam__option:hover {
  background: #f5f7f6;
}

.orbus-exam__option--selected {
  background: #eef4f3;
  font-weight: 600;
}

.orbus-exam__input {
  accent-color: var(--orbus-exam-brand);
  width: 17px;
  height: 17px;
  flex: none;
}

.orbus-exam__option-text {
  line-height: 1.4;
}

.orbus-exam--submitted .orbus-exam__question {
  opacity: 0.7;
}

.orbus-exam--submitted .orbus-exam__option {
  cursor: default;
}

.orbus-exam--submitted .orbus-exam__option:hover {
  background: none;
}

.orbus-exam__error {
  margin: 0 0 16px;
  font-weight: 600;
}

.orbus-exam__submit,
.orbus-exam__retake {
  display: inline-block;
  background: var(--orbus-exam-brand);
  color: #fff;
  border: none;
  padding: 11px 22px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.orbus-exam__submit:hover,
.orbus-exam__retake:hover {
  background: var(--orbus-exam-brand-hover);
}

.orbus-exam__result {
  margin-top: 20px;
  padding: 20px 24px;
  border-radius: 10px;
  text-align: center;
}

.orbus-exam__result--pass {
  background: var(--orbus-exam-pass-bg);
  border: 1px solid var(--orbus-exam-pass);
}

.orbus-exam__result--fail {
  background: var(--orbus-exam-fail-bg);
  border: 1px solid var(--orbus-exam-fail);
}

.orbus-exam__icon {
  font-size: 32px;
  line-height: 1;
  margin: 0 0 6px;
}

.orbus-exam__result--pass .orbus-exam__icon,
.orbus-exam__result--pass .orbus-exam__verdict {
  color: var(--orbus-exam-pass);
}

.orbus-exam__result--fail .orbus-exam__icon,
.orbus-exam__result--fail .orbus-exam__verdict {
  color: var(--orbus-exam-fail);
}

.orbus-exam__score {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
}

.orbus-exam__verdict {
  margin: 0 0 16px;
  font-weight: 600;
}

/* Guidance shown only on a pass, above the View certificate/Retake buttons --
   see quiz-widget.js's showResult(). Neutral text color (not the bright pass
   green reserved for the icon/verdict above), since this is instructional
   copy, not part of the result itself. */
.orbus-exam__pass-note {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #3a3a3a;
}

.orbus-exam__pass-note a {
  color: var(--orbus-exam-brand);
  font-weight: 600;
}

@media (max-width: 480px) {
  .orbus-exam__question {
    padding: 14px 16px;
  }
  .orbus-exam__submit,
  .orbus-exam__retake {
    width: 100%;
  }
}

/* ---- Certificate trigger (shown inline after a passing attempt).
   The certificate itself is NOT styled here -- as of the v8 certificate
   redesign, the widget builds it with the exact same markup and classes
   as the standalone certificate article (.orbus-certificate*), styled by
   orbus-certificate-theme.css (DESIGN_DOC.md §4.8), so both surfaces can
   never visually drift apart. That file also owns the shared print button
   (.orbus-cert-print-btn) and the shared print-isolation rule -- there is
   no widget-specific print CSS left here. ---- */

.orbus-exam__cert-btn {
  display: inline-block;
  background: #fff;
  color: var(--orbus-exam-brand);
  border: 1px solid var(--orbus-exam-brand);
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-right: 8px;
}

.orbus-exam__cert-btn:hover {
  background: var(--orbus-exam-pass-bg);
}

.orbus-exam__certificate-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.orbus-exam__cert-close {
  display: inline-block;
  border-radius: 6px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  color: var(--orbus-exam-brand);
  border: 1px solid var(--orbus-exam-border);
}



/* =============================================================================
   ORBUS CERTIFICATE - THEME STYLESHEET (v15)
   Paste this entire block into your Zendesk theme's stylesheet.css.

   Do NOT paste this into the article body.

   v15 changes -- on-screen only, print untouched, found live 2026-09-29
   testing the certificate in Firefox specifically: v12's on-screen
   responsive scaling (`transform: scale(calc(100cqw / var(--orbus-cert-
   native-w)))`) worked perfectly in Chrome/Edge -- the certificate
   rescaled to stay fully visible at any zoom level -- but in Firefox the
   certificate stayed pinned at its fixed native size and overflowed the
   frame as soon as you zoomed in. Root cause, confirmed via direct
   `CSS.supports()` testing in Firefox's own console rather than assumed:
   Firefox's `container-type: inline-size` support is fine (confirmed:
   `getComputedStyle(frame).containerType` returned `"inline-size"`), but
   Firefox rejects `calc(100cqw / <length>)` as an invalid value for
   `scale()` regardless of the other length's unit -- tested both
   `calc(100cqw / 297mm)` and `calc(100cqw / 1122.52px)`, `CSS.supports()`
   returned `false` for both. Because the whole `calc()` expression is
   invalid in Firefox, the entire `transform` declaration is dropped and
   computes to its initial value, `none` -- confirmed live: `getComputedStyle
   (cert).transform` was `"none"` at every zoom level tested, while the
   frame's own width was genuinely reflowing correctly with zoom
   (`frameWidth` dropped from ~1058px to ~679px between 100% and 150%
   zoom) -- so this was never a "doesn't update on zoom" bug, it never
   applied at all, in any browser that rejects that specific calc() form.

   Fixed by moving the scale computation out of CSS calc() entirely and
   into JS: a `ResizeObserver` (`OrbusCertInitResponsiveScale()` in
   certificate-name.js) measures `.orbus-certificate-frame`'s actual
   rendered width whenever it changes (covering both real resizes and
   zoom-triggered reflow) and sets a plain numeric `--orbus-cert-scale`
   custom property, which `.orbus-certificate`'s `transform: scale(var(
   --orbus-cert-scale, 1))` below then just reads -- plain JS division has
   none of calc()'s cross-browser length-type-checking quirks, so this
   works identically in Chrome and Firefox. `container-type: inline-size`
   on `.orbus-certificate-frame` is no longer load-bearing for the scale
   mechanism itself (nothing uses `cqw` anywhere in this file any more) --
   left in place purely because the `@supports not (container-type:
   inline-size)` fallback below still gates on it for the small set of
   very old browsers with no container-query support at all, and removing
   it wasn't necessary to fix the reported bug. Print safety is now
   explicit rather than incidental: v12 relied on the frame's print-time
   fixed 297mm width making the cqw ratio naturally evaluate to 1 (a
   no-op); that's no longer guaranteed to happen before a ResizeObserver
   callback fires and updates the inline custom property in time for the
   print snapshot, so `body.orbus-cert-printing .orbus-certificate-frame`
   now explicitly sets `--orbus-cert-scale: 1 !important` below, which
   wins the cascade over the JS-set inline value regardless of timing.

   v14 changes -- print only, found live 2026-09-11 testing the OI Admin
   exam: v13's `body.orbus-cert-printing { height: 0; overflow: hidden; }`
   was published live and confirmed NOT to fix the blank-pages symptom
   (James re-tested and still got the trailing blank pages) -- so a
   CSS-only fix has now been abandoned as unreliable. It's very likely the
   print engine's pagination pass doesn't respect a collapsed `height`/
   `overflow: hidden` on an ancestor as a reason to stop paginating through
   still-present (merely `visibility: hidden`) descendants -- `visibility`
   never removes anything from the render tree, so the browser may still be
   walking the full original layout of the hidden content regardless of
   what box its ancestor computes to. Removed the ineffective
   `body.orbus-cert-printing { height: 0; overflow: hidden; }` rule.

   The actual fix has moved to JS: `window.OrbusCertPrint()`
   (certificate-name.js) now walks up the DOM from `.orbus-certificate-
   frame` to `<body>` and sets every sibling's `display` to `none` directly
   (recording and restoring each one's original inline value afterwards),
   before calling `window.print()`. `display: none` -- unlike `visibility:
   hidden` -- genuinely removes an element from the render tree, so it
   cannot contribute to the page count no matter how the print engine
   paginates. The CSS `visibility: hidden` rule below is left in place as a
   defence-in-depth fallback (so nothing is visible even if the JS ever
   fails to run for any reason), but it is no longer what suppresses the
   extra pages -- that's the JS's job now. NOT yet independently confirmed
   via a real print/PDF test against the live theme -- re-test before
   treating this as closed.

   v13 changes -- print only, found live 2026-09-11 testing the OI Admin
   exam: the certificate itself printed fine on page 1, but several fully
   blank pages followed. Root cause diagnosed as: the print-isolation
   rule's `visibility: hidden` hides the rest of the page but doesn't
   collapse its layout height, so the browser still paginates through the
   full height of whatever page the certificate happens to be printed
   from. Attempted fix (forcing body's own box to zero height with
   overflow hidden during print) did NOT work when tested live -- see v14
   above for the real fix and why this one fell short.

   v12 changes -- on-screen only, print untouched (2026-09-11): removed the
   fixed A4-physical-size behaviour on screen (previously the certificate
   never reflowed/shrank at any viewport width, scrolling horizontally
   inside .orbus-certificate-frame instead) in favour of scaling the whole
   certificate to fit whatever width .orbus-certificate-frame actually
   renders at, on screen, at any zoom level. .orbus-certificate keeps its
   fixed 297mm x 210mm design size (so every fixed-px child keeps its
   authored proportions) but is now visually scaled with `transform:
   scale()`, sized via a container query unit (`cqw`) read off
   .orbus-certificate-frame's own rendered width -- pure CSS, no JS. See
   the comments on .orbus-certificate and .orbus-certificate-frame below
   for the full mechanism, and the @supports fallback right after
   .orbus-certificate-frame for browsers without container query support.
   Print is unaffected: the print-only rules override
   .orbus-certificate-frame back to fixed absolute 297mm x 210mm at higher
   selector specificity, same as before this change, so the print/PDF
   output is byte-for-byte the same as v11.

   v11 changes -- fixes a Chrome/Edge-only print whitespace bug found live
   2026-09-11, after the v10 fix was confirmed live and correct in Firefox
   but the certificate still printed shrunk to ~60-70% of the page (pinned
   to the top-left, blank margin bottom-right) in Chrome and Edge. Root
   cause: `body.orbus-cert-printing .orbus-certificate-frame { position:
   absolute; ...; width: 100%; }` -- this element has no positioned ancestor
   anywhere in the DOM (confirmed live via Claude in Chrome against the real
   page), so its `width: 100%` resolves against the initial containing
   block, which Chrome and Firefox have a known history of computing
   differently for absolutely-positioned elements with zero positioned
   ancestors during paginated print (Chrome anchoring it to the last
   on-screen layout width instead of the physical page). That left the
   frame narrower than the fixed-297mm-wide .orbus-certificate it contains.
   Fixed by giving the frame the same fixed `width: 297mm; height: 210mm;`
   as the certificate itself under `body.orbus-cert-printing
   .orbus-certificate-frame`, removing the percentage-width ambiguity
   entirely. See the rule itself for the full explanation.

   v10 changes -- fixes a print/PDF pagination bug found live 2026-09-10:
   The certificate was spilling onto a second page (a thin sliver of the
   navy border), independent of the print dialog's Scale or Margins
   settings -- confirmed by testing both directly. Root cause: .orbus-
   certificate's own `margin: 24px auto` (for on-screen centering) was
   never reset for print, and .orbus-certificate-frame's `overflow-x: auto`
   establishes a new block formatting context, which prevents that margin
   from collapsing the way it would on screen -- so print was adding
   ~48px (top + bottom) on top of the certificate's actual 210mm height,
   just enough to overflow one page. Fixed by adding `margin: 0` to the
   existing `.orbus-certificate { box-shadow: none; }` rule inside
   @media print. Confirmed via direct PDF measurement (not just visual
   inspection): the certificate's navy border box went from ~59% of the
   page to ~98% full-bleed, and the page count went from 2 back to 1 --
   see DESIGN_DOC.md §10 item 12 for the full investigation.

   v9 changes -- fixes two print bugs found live after v8 (2026-08-27):
   1. Print dialog was defaulting to Portrait with NO orientation option at
      all (Chrome's Layout/Orientation dropdown was missing entirely from
      the print preview). Root cause: the CSS `page` property (used here to
      assign `.orbus-certificate-frame` to the named `@page orbus-cert`
      rule) only actually takes effect on elements that trigger a forced
      page break -- Chromium applies it "in the same cases as when
      break-before/break-after apply", not merely because the property is
      set on some element in the document. Since printing a certificate is
      a single page with no break, the named page never actually matched
      anything, so printing silently fell back to the UA default (Portrait,
      no author size) -- yet Chrome still detected an authored `@page` size
      rule *somewhere* in the stylesheet and hid the orientation control on
      that basis, even though it never applied. Confirmed against MDN/
      Chromium bug-tracker discussion of the `page` property before fixing
      (see DESIGN_DOC.md §10 for links) rather than assumed.
      Fix: removed `page: orbus-cert` from `.orbus-certificate-frame` below
      and removed the named `@page orbus-cert { ... }` rule entirely. An
      UNNAMED `@page :first { size: A4 landscape; margin: 0; }` is now
      injected as a temporary <style> tag by `window.OrbusCertPrint()`
      (certificate-name.js) immediately before `window.print()`, and
      removed again on cleanup -- so it only ever exists in the DOM for the
      duration of a certificate print job, which keeps the v8 fix's actual
      goal (don't leak A4-landscape into unrelated print jobs elsewhere in
      the Help Center) without relying on named-page scoping that Chrome
      doesn't apply the way this design needed. A plain @page with no
      `:first` was tried first and still failed live: the theme separately
      has its own unrelated, sitewide "BS - PRINT-OPTIMIZED ARTICLE PDF"
      rule (`@page { size: A4; margin: 15mm; }`) for general article
      printing, which tied with ours on specificity and won depending on
      source order. `:first` has strictly higher CSS Paged Media
      specificity ((0,1,0) vs (0,0,0)) than a bare `@page`, and always
      matches since a certificate print is exactly one page -- so it
      reliably wins over that other rule regardless of where either
      stylesheet loads.
   2. None of the certificate's decorative visuals (dot-wave banner, logo,
      favicon, gold seal, signature -- all CSS background-image/gradient,
      not <img> tags) printed at all. Chrome's "Print backgrounds" option
      is unchecked by default, which suppresses all background-image/
      background-color content, and a learner has no reason to know to
      check that box. Fixed by adding `print-color-adjust: exact` (plus
      the `-webkit-print-color-adjust` and legacy `color-adjust` variants)
      to `.orbus-certificate` and to every individual element below that
      uses `background-image`, so those visuals print regardless of that
      checkbox's state.

   v8 changes:
   1. The exam widget's inline certificate (quiz-widget.js) now builds this
      exact v7 markup instead of its own separate, older design (the old
      .orbus-exam__certificate* classes) -- the two certificate surfaces
      can no longer visually drift apart, since they share one markup
      shape and one stylesheet block. The old widget-only certificate CSS
      has been removed from exam-styles.css.
   2. Added a shared, reusable "Print" button (.orbus-cert-print-btn) and
      print-isolation rule usable by both the article and the widget, via
      one shared window.OrbusCertPrint() helper (certificate-name.js) --
      see the new block right before this comment for both.
   3. Fixed an unscoped @page rule that was forcing every print job
      anywhere in the Help Center into A4 landscape, not just certificate
      pages -- .orbus-certificate-frame now carries `page: orbus-cert`,
      paired with a named `@page orbus-cert` rule, so the override only
      applies to print contexts that actually contain a certificate.
   4. Removed a leftover pre-v7 `.orbus-certificate*` rule block that was
      still live in the sandbox theme's actual stylesheet.css (this repo's
      own copy of this file never had it, so this fix is sandbox-only --
      see DESIGN_DOC.md §4.8 for the collision this created). Also fixed
      two stale/contradictory comments above .orbus-certificate-banner
      that had drifted from the actual rule beneath them -- same fix
      already applied to this repo's copy on 2026-08-26, now also applied
      live.

   v7 changes:
   1. Moved the gold seal out of the centred footer row and into its own
      corner slot, anchored to the bottom-left of the certificate card
      (.orbus-certificate-seal-slot, absolutely positioned at the same
      left/bottom offsets as the card's own padding). It no longer sits
      inline next to the signature.
   2. The signature block is now the only thing in the footer row, and is
      centred on the same centre line as the eyebrow/name/course text
      above it (via .orbus-certificate's own text-align: center plus
      inline-flex on .orbus-certificate-sign-cell), instead of being offset
      to one side of a two-item row.
   3. The dot-wave banner now stretches to fill the full inner width of
      the card - from just inside the left edge to just inside the right
      edge - rather than sitting as a narrower, centred strip with empty
      margins on either side. It is inset by a few pixels on left/right/top
      so it never overlaps the navy border, the white outline ring, or the
      inset teal ring that make up the card's frame.

   v6 changes:
   1. Removed the Date field entirely (value, underline and "Date" label).
      A "Pass Date" custom field on the user account cannot be read inside
      a Guide session, and printing today's date would be wrong anyway -
      it would always show whatever date the certificate happens to be
      viewed on, not the date the course was actually completed. Rather
      than show an inaccurate date, there is no date on the certificate.
   2. The footer is now a centred flex row holding just the seal and the
      signature, so that group sits centred under the certificate instead
      of being pushed to one side now that the date column is gone.
      Matches the article body markup change (see the HTML files).
   3. Fixed the seal's right-hand edge looking ragged/uneven. The gold
      medal is drawn with a CSS clip-path scallop outline; the old outline
      was hand-tweaked and not evenly spaced, so the cut points landed
      closer together on the right than the left, which read as an
      inconsistent edge. Replaced it with a mathematically even 14-point
      scallop (28 vertices at equal 12.857 degree steps) so the edge is
      identical all the way round. Also set overflow: visible on
      .orbus-certificate-seal so the ribbon tails are never clipped.

   v5 change - fixed a portrait-looking render:
   Most Zendesk Guide themes ship a broad CSS reset along the lines of
   ".article-body *, img { max-width: 100%; }". That reset was overriding
   the certificate's width: 297mm, squeezing it down to the article's
   narrow text column while height: 210mm stayed fixed - which is what
   made a landscape frame render as a tall, narrow, portrait-looking box.
   Fixed by pinning max-width: none !important and min-width: 297mm (plus
   the height equivalents) on .orbus-certificate, so no theme-level reset
   can shrink it. The frame is A4 LANDSCAPE (297mm wide x 210mm tall) and
   stays that exact size on screen, in print, and in export.

   v4 changes (still in effect):
   1. The certificate is a fixed A4 landscape frame (297mm x 210mm,
      box-sizing: border-box) instead of a responsive max-width box. It
      does not shrink, reflow, or change at any viewport width - there is
      no mobile @media rule that shrinks padding/border/font-size, so the
      frame stays identical everywhere. A matching @page rule keeps
      printing at the same A4 landscape dimensions.
   2. The footer (seal / date / signature) is a single shared grid with a
      fixed-height value row, a rule row, then a label row. This
      guarantees the horizontal rule under the date and the rule under
      the signature sit at an identical height, regardless of the
      signature image being taller than the date text, or the signer's
      two-line title wrapping differently than the one-line "Date"
      caption.

   IMPORTANT - use the CROPPED dot artwork, not the original:
   The original "dot banner.png" is 1919x1079px, but the actual dot-wave
   artwork only occupies the bottom ~460px of that canvas - the rest is
   blank white space. Upload dot-banner-cropped.png (1919x460, tightly
   cropped around just the dot wave) as the Zendesk asset instead, and
   point --orbus-cert-dot-banner at that asset's URL. Do not point this
   variable at the original uncropped file.

   Banner placement: the dot-wave artwork sits INSIDE the certificate
   card, as an absolutely positioned layer near the top of the card, inside
   the navy border - not as a standalone strip above the card. This keeps
   the artwork visually contained within the certificate boundary. The
   cropped 1919x460 image stays proportional (background-size: contain)
   within a fixed-size band, and the eyebrow/intro/name text sit above it
   with a z-index bump so they remain readable over the lighter parts of
   the wave.

   Before this will render correctly you must:
   1. Upload the CROPPED dot-banner-cropped.png (not the original dot
      banner.png) and signature.png as Theme assets (Guide admin >
      Customize design > Edit code > Assets), or host them anywhere
      reachable over HTTPS.
   2. Replace the two placeholder URLs below with the real asset URLs.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&family=Montserrat+Alternates:wght@600&display=swap');

.orbus-certificate {
  --orbus-cert-dot-banner: url(/hc/theming_assets/01M230TBK5HGNKA6FFX1TS8MMK);
  --orbus-cert-signature: url(/hc/theming_assets/01M11WTRJFJDM6V2550SGWXM42);
  --orbus-cert-logo: url(/hc/theming_assets/01J0NWV3PK8FVSNGAXM04BTTW7);
  --orbus-cert-favicon: url(/hc/theming_assets/01KZZZKS6TGAPFNP8JF7H787GG);

  --orbus-cert-brand: #17494d;
  --orbus-cert-navy: #264971;
  --orbus-cert-teal: #19667d;
  --orbus-cert-gold: #E4A73B;
  --orbus-cert-gold-dark: #B9791F;

  /* Fixed A4 LANDSCAPE design size, in physical units, so every fixed-px
     child (banner, logos, badge, fonts, padding) keeps its authored
     proportions no matter how small or large the certificate ends up
     rendering on screen. box-sizing: border-box means the border and
     padding below are carved out of this fixed 297mm x 210mm box rather
     than adding to it.

     max-width: none !important and min-width: 297mm are both required
     here because most Zendesk Guide themes ship a broad reset such as
     ".article-body *, img { max-width: 100%; }" that otherwise overrides
     the width above and squeezes it down to the article's text column
     width, while height: 210mm stays fixed - which is exactly what turns
     a landscape frame into a tall, narrow, portrait-looking box. Pinning
     both max-width and min-width to the same 297mm value makes the frame
     immune to that kind of theme-level reset. flex-shrink: 0 gives the
     same protection if the certificate ever ends up inside a flex
     container. This box's OWN dimensions never change on screen (that's
     what keeps every child's fixed-px sizing correct) -- responsive
     "fit the screen frame at any width/zoom" (v12, 2026-09-11) is instead
     done purely by visually scaling this whole fixed-size box down (or up)
     with `transform: scale()` below.

     v15 (2026-09-29): the scale factor is now a plain custom property,
     `--orbus-cert-scale`, computed in JS (OrbusCertInitResponsiveScale()
     in certificate-name.js, via a ResizeObserver on .orbus-certificate-
     frame) rather than a CSS `calc(100cqw / <length>)` expression --
     Firefox rejects that calc() form outright (confirmed via
     CSS.supports(), see the file header), which silently dropped the
     whole `transform` declaration there and left the certificate
     permanently unscaled. Plain JS division has no equivalent
     cross-browser quirk. Defaults to `1` (native size, unscaled) via the
     var() fallback if JS hasn't run yet or ResizeObserver isn't
     available, same graceful-degradation posture as before. Print is
     handled explicitly now rather than incidentally: see the print-only
     rules further down, which force `--orbus-cert-scale: 1 !important`
     regardless of whatever the JS last computed on screen. */
  --orbus-cert-native-w: 297mm;
  --orbus-cert-native-h: 210mm;
  position: relative;
  width: var(--orbus-cert-native-w);
  min-width: var(--orbus-cert-native-w);
  max-width: none !important;
  height: var(--orbus-cert-native-h);
  min-height: var(--orbus-cert-native-h);
  flex-shrink: 0;
  box-sizing: border-box;
  margin: 0;
  transform: scale(var(--orbus-cert-scale, 1));
  transform-origin: top left;
  background: #fff;
  border: 10px solid var(--orbus-cert-navy);
  outline: 2px solid #fff;
  outline-offset: -18px;
  box-shadow: 0 0 0 3px var(--orbus-cert-teal) inset;
  border-radius: 2px;
  overflow: hidden;
  padding: 64px 72px 56px;
  text-align: center;
  font-family: 'Montserrat', Arial, sans-serif;

  /* Chrome's "Print backgrounds" option is OFF by default, which hides
     every background-image/background-color/gradient on the page when
     printing -- and every decorative visual on this certificate (banner,
     logo, favicon, seal, signature) is drawn that way, not with <img>
     tags. `exact` forces those to print regardless of that checkbox. Also
     set explicitly on each individual background-image element below,
     since not every browser reliably inherits this property the same way
     (v9 fix, see file header). */
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}

/* Wrap the certificate in this class. Also hardened against the same
   theme-level "max-width: 100%" reset described above (via `width: 100%`
   here matching it rather than fighting it, unlike .orbus-certificate).

   container-type: inline-size (v12, 2026-09-11) originally existed so
   `cqw` units inside .orbus-certificate's `transform: scale()` could
   resolve against THIS element's own on-screen width, giving a pure-CSS,
   no-JS scale factor. As of v15 (2026-09-29) that's no longer how the
   scale is computed -- Firefox rejects the `calc(100cqw / <length>)` form
   the old approach relied on (see file header and .orbus-certificate's
   own comment), so a ResizeObserver in certificate-name.js now measures
   this element's rendered width directly and sets a plain numeric
   `--orbus-cert-scale` custom property instead. `container-type:
   inline-size` is kept here regardless -- it's harmless, and the
   `@supports not (container-type: inline-size)` fallback further below
   still gates on it for the very small set of browsers with no
   container-query support at all -- but it is no longer load-bearing for
   the scale mechanism itself. aspect-ratio keeps this frame's own box
   always proportioned like the certificate (297:210) as its width
   responds to whatever column it sits in, and overflow: hidden clips the
   certificate's own unscaled (native-size) layout footprint down to that
   visible box -- transforms don't change an element's contribution to
   normal-flow layout, only how it paints, so without this the frame would
   still reserve the certificate's full native ~793px height even while
   it's rendered visually smaller. Previously (pre-v12) this container
   just scrolled horizontally via `overflow-x: auto` when too narrow for
   the certificate's un-shrinkable fixed size; that's superseded now that
   the certificate scales down to fit instead.

   None of this touches print: the print-only rules below already reset
   .orbus-certificate-frame to `position: absolute` with fixed physical
   297mm x 210mm dimensions at higher selector specificity
   (body.orbus-cert-printing .orbus-certificate-frame), and as of v15 that
   same rule also explicitly forces `--orbus-cert-scale: 1 !important`
   rather than relying on the frame's print-time size alone to produce a
   1:1 ratio, so container-type/aspect-ratio/overflow/scale here are all
   fully overridden before a real print job ever sees them.

   No `page` property or `@page` rule here as of v9 -- an earlier version
   assigned this element to a NAMED page (`page: orbus-cert`, paired with
   a named `@page orbus-cert` rule) specifically to avoid the v8 bug of an
   unscoped `@page` leaking A4-landscape into every print job in the Help
   Center. That named-page approach turned out not to work: the CSS `page`
   property only actually takes effect on elements that force a page
   break, which a single-page certificate print never does, so the named
   page silently never applied -- yet Chrome still detected an authored
   `@page` size rule somewhere in the stylesheet and hid the print
   dialog's orientation control anyway, leaving printing stuck on
   Portrait with no way to change it. Fixed by dropping named-page scoping
   entirely: `window.OrbusCertPrint()` (certificate-name.js) now injects an
   unnamed `@page :first { size: A4 landscape; margin: 0; }` as a
   temporary <style> tag immediately before `window.print()`, and removes
   it again on cleanup -- it only exists in the DOM for the duration of a
   certificate print, which keeps the original goal (no leakage into
   unrelated print jobs) without relying on named-page matching. The
   `:first` pseudo-class (not just a bare `@page`) is required: the theme
   independently has its own unrelated, sitewide "BS - PRINT-OPTIMIZED
   ARTICLE PDF" rule (`@page { size: A4; margin: 15mm; }`) for general
   article printing, and a bare `@page` here would tie with it on
   specificity and lose depending on source order -- confirmed live, a
   plain unnamed @page was tried first and the certificate still printed
   portrait with 15mm margins, i.e. that other rule's values. Per the CSS
   Paged Media spec, page-selector specificity is (page-type-count,
   :first-or-:blank-count, :left-or-:right-count): a bare @page is
   (0,0,0), `@page :first` is (0,1,0) -- strictly higher regardless of
   which stylesheet loads first. Since a certificate print is always
   exactly one page, `:first` always matches it and reliably wins. */
.orbus-certificate-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 297 / 210;
  overflow: hidden;
  container-type: inline-size;
}

/* Fallback for browsers without container query support: undo the v12
   scaling setup and restore the pre-v12 behaviour (fixed native size,
   horizontal scroll on narrow viewports) rather than rendering a
   zero-scaled or distorted certificate. `scale(calc(100cqw / ...))` would
   compute to a nonsensical value (cqw is invalid/inert) in a browser that
   doesn't support container queries, hence overriding it back to none. */
@supports not (container-type: inline-size) {
  .orbus-certificate-frame {
    aspect-ratio: none;
    overflow-x: auto;
    overflow-y: visible;
  }
  .orbus-certificate {
    transform: none;
    margin: 24px auto;
  }
}

/* Dot-wave banner, sitting INSIDE the certificate card as an absolutely
   positioned layer near the top, inside the navy border - not as a
   standalone strip above the card. Sitting inside the navy border keeps
   the artwork visually contained within the certificate boundary. left/
   right insets (not a fixed-width box) let it span the full inner width
   of the card at any certificate width; a fixed 150px height keeps it
   from growing into the copy below. background-size: 100% 100% (below)
   deliberately stretches the cropped 1919x460 artwork to exactly fill
   this box, rather than "contain" - see v7 note above for why: this runs
   the wave the entire width of the card instead of leaving empty margins
   on either side. Two earlier, now-superseded comments describing a
   "contain"/fixed-aspect-ratio version of this rule (v6 and prior) were
   removed from here since they no longer matched the rule below. */
.orbus-certificate-banner {
  position: absolute;
  top: 18px;
  /* left/right insets (rather than a fixed centred width) so the artwork
     spans the full inner width of the card - edge to edge of the content
     area - on any certificate width. The 6px inset keeps it clear of the
     inset teal box-shadow ring, which sits right at this same padding
     edge, so the banner never overlaps the navy border, the white
     outline, or the teal ring that make up the card's frame. */
  left: 6px;
  right: 6px;
  height: 150px;
  background-image: var(--orbus-cert-dot-banner);
  background-repeat: no-repeat;
  background-position: center;
  /* Stretches to fill the full box in both dimensions - deliberately not
     "contain" - so the wave runs the entire width of the certificate
     rather than sitting as a narrower, centred strip with white space on
     either side. */
  background-size: 100% 100%;
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}

/* Orbus Software logo, top-left corner, and the Orbus Academy favicon,
   top-right corner. Both logos share the same "Orbus circle" motif drawn
   at a different scale inside their own source artwork - the logo's
   circle occupies roughly 343px of its 363px-tall source, the favicon's
   circle occupies roughly 376px of its 600px-tall source. Rather than
   setting the two marks to the same box height (which would make the
   circle itself render at two different sizes), each box below is sized
   so the circle motif itself comes out the same rendered diameter
   (48px) in both marks: the logo box is 280 x 51px (the logo is a wide
   lockup - circle plus wordmark - so it is much wider than it is tall),
   the favicon box is 77 x 77px (a square mark). Both sit above the
   dot-wave banner in stacking order (z-index: 2, same layer as the
   eyebrow/name text) since the banner already spans full width at the
   top of the card. */
.orbus-certificate-logo,
.orbus-certificate-favicon {
  /* !important on position guards against .orbus-certificate > * below,
     which sets position: relative on every direct child of the card (to
     lift the text content above the dot-wave banner) - that rule has
     equal specificity to this one and comes later in the file, so
     without !important here it would silently win and turn these two
     marks from absolutely-positioned corner elements into ordinary
     in-flow boxes stacked at the top of the content column. */
  position: absolute !important;
  top: 32px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 2;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}

.orbus-certificate-logo {
  left: 40px;
  width: 280px;
  height: 51px;
  background-image: var(--orbus-cert-logo);
}

.orbus-certificate-favicon {
  right: 40px;
  top: 19px;
  width: 77px;
  height: 77px;
  background-image: var(--orbus-cert-favicon);
}

/* Certificate content sits above the banner layer. The eyebrow, intro and
   name lines get an extra z-index bump so they stay legible over the
   lighter parts of the wave. */
.orbus-certificate > * {
  position: relative;
  z-index: 1;
}

.orbus-certificate-eyebrow,
.orbus-certificate-intro,
.orbus-certificate-name {
  position: relative;
  z-index: 2;
}

.orbus-certificate-eyebrow {
  margin: 0 0 20px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 700;
  color: var(--orbus-cert-brand);
}

.orbus-certificate-intro {
  margin: 0 0 6px;
  font-size: 16px;
  color: #1a1a1a;
}

.orbus-certificate-name {
  margin: 0 0 8px;
  font-size: 30px;
  font-weight: 600;
  font-family: 'Montserrat Alternates', 'Montserrat', Arial, sans-serif;
  color: var(--orbus-cert-navy);
}

.orbus-certificate-name::after {
  content: "";
  display: block;
  width: 70%;
  margin: 14px auto 0;
  border-bottom: 1px dotted var(--orbus-cert-teal);
}

.orbus-certificate-body {
  margin: 22px 0 4px;
  font-size: 16px;
  color: #1a1a1a;
}

.orbus-certificate-course {
  margin: 6px 0 10px;
  font-size: 24px;
  font-weight: 600;
  color: #1a1a1a;
}

.orbus-certificate-assoc {
  margin: 0 0 40px;
  font-size: 15px;
  color: #3a3a3a;
}

/* Footer holds just the signature, centred under the certificate content -
   aligned with the eyebrow/name/course text above it, which are also
   centred via .orbus-certificate's text-align: center. The gold seal has
   been moved out of this row entirely (see .orbus-certificate-seal-slot
   below) and anchored to the bottom-left corner of the card instead, so
   it no longer competes with the signature for the centre of the page. */
.orbus-certificate-footer {
  margin-top: 28px;
  text-align: center;
}

/* The seal now lives in its own corner slot, absolutely positioned
   against the certificate card rather than sitting inline next to the
   signature. left matches the card's own left padding (72px) so the
   medal lines up with the same left margin the body text uses. bottom is
   tuned to 200px (not the card's 56px bottom padding) so the medal sits
   roughly level with the signature/label block above the very bottom
   edge, rather than sitting lower than the signature and looking
   disconnected from it. */
.orbus-certificate-seal-slot {
  position: absolute;
  left: 72px;
  bottom: 200px;
  z-index: 1;
}

/* Wide enough to hold "Chief Revenue Officer, Orbus Software" on one
   line at this font size without wrapping, while still narrower than the
   signature/rule column widths below - text-align: center keeps the
   image, rule and label all sharing one centre line regardless. */
.orbus-certificate-sign-cell {
  display: inline-block;
  width: 280px;
  text-align: center;
}

/* Signature, sized off its real 1024x791 (~1.29:1) aspect ratio. Height is
   the controlling dimension (background-size: contain keeps proportions). */
.orbus-certificate-signature {
  display: inline-block;
  height: 108px;
  width: 285px;
  background-image: var(--orbus-cert-signature);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}

.orbus-certificate-rule--sign {
  width: 220px;
  max-width: 100%;
  /* margin: 6px auto 8px, not "6px 0 8px" - this div is a block element
     sitting inside an inline-block parent (.orbus-certificate-sign-cell),
     so the parent's text-align: center has no effect on it (text-align
     only centers inline/inline-block content, never a block child's own
     box). Without auto left/right margins the rule was hugging the left
     edge of the sign-cell instead of sitting centred under the signature
     - auto margins are what actually centre a block element of a fixed
     width within its container. */
  margin: 6px auto 8px;
  border-bottom: 1px solid #1a1a1a;
}

.orbus-certificate-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #4a4a4a;
  line-height: 1.5;
}

/* Gold seal, redrawn in CSS (no image asset was supplied for this element).
   Now sits in its own bottom-left corner slot (.orbus-certificate-seal-slot)
   rather than inline next to the signature. overflow: visible is required
   here: the ribbon tails below extend outside the medal's own 96x96 box,
   and the previous default (inherited "hidden" from a parent) was
   clipping the right-hand tail, which is what read as a ragged /
   inconsistent edge on that side. */
.orbus-certificate-seal {
  position: relative;
  width: 96px;
  height: 96px;
  overflow: visible;
  z-index: 1;
}

.orbus-certificate-seal-ribbon {
  position: absolute;
  top: 62px;
  left: 22px;
  width: 52px;
  height: 60px;
}

.orbus-certificate-seal-ribbon::before,
.orbus-certificate-seal-ribbon::after {
  content: "";
  position: absolute;
  top: 0;
  width: 22px;
  height: 56px;
  background: var(--orbus-cert-gold-dark);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}

.orbus-certificate-seal-ribbon::before {
  left: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  transform: rotate(-6deg);
}

.orbus-certificate-seal-ribbon::after {
  right: 0;
  background: var(--orbus-cert-gold);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  transform: rotate(6deg);
}

.orbus-certificate-seal-medal {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #FFE39A 0%, var(--orbus-cert-gold) 45%, var(--orbus-cert-gold-dark) 100%);
  /* Symmetric 14-point scalloped badge outline (28 vertices, alternating
     outer/inner radius every 360/28 = 12.857 degrees). The previous
     outline was hand-tweaked and not evenly spaced, so the points landed
     slightly closer together on the right side than the left - at this
     size that reads as a ragged / inconsistently-cut edge on that side
     even though nothing was actually covering it. This version is
     generated from equal angular steps so every scallop is identical and
     the edge is even all the way round. */
  clip-path: polygon(
    50% 0%, 59.23% 9.54%, 71.69% 4.95%, 75.87% 17.55%,
    89.09% 18.83%, 87.39% 31.99%, 98.75% 38.87%, 91.5% 50%,
    98.75% 61.13%, 87.39% 68.01%, 89.09% 81.17%, 75.87% 82.45%,
    71.69% 95.05%, 59.23% 90.46%, 50% 100%, 40.77% 90.46%,
    28.31% 95.05%, 24.13% 82.45%, 10.91% 81.17%, 12.61% 68.01%,
    1.25% 61.13%, 8.5% 50%, 1.25% 38.87%, 12.61% 31.99%,
    10.91% 18.83%, 24.13% 17.55%, 28.31% 4.95%, 40.77% 9.54%
  );
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}

.orbus-certificate-seal-inner {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 34px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}

/* The certificate frame is fixed at A4 landscape and intentionally does
   NOT reflow or resize at any viewport width - there is no small-screen
   breakpoint here by design. Wrap the certificate in a horizontally
   scrolling container (see .orbus-certificate-frame above) on narrow
   viewports rather than shrinking the frame itself. */

/* ---- Print button + print isolation, SHARED between every certificate
   surface: the standalone view-anytime article and the exam widget's
   inline certificate (quiz-widget.js). Both markup one `.orbus-cert-print-
   btn` and rely on the same `window.OrbusCertPrint()` helper
   (certificate-name.js) to toggle the `orbus-cert-printing` body class
   below -- one shared mechanism instead of two copies that could drift.
   The widget's own certificate is built with these exact class names
   (see quiz-widget.js's showCertificate()), so this rule needs no
   widget-specific variant. ---- */
.orbus-cert-print-btn {
  display: inline-block;
  margin: 20px 6px 0;
  background: var(--orbus-cert-navy, #264971);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Montserrat', Arial, sans-serif;
  cursor: pointer;
}

.orbus-cert-print-btn:hover {
  background: var(--orbus-cert-teal, #19667d);
}

/* Toggled by window.OrbusCertPrint() immediately before/after window.print()
   -- hides everything on the page except whichever .orbus-certificate-frame
   is present, regardless of what other print rules the rest of the theme
   defines. Works unmodified for both the article (certificate sits directly
   in .article-body) and the widget (certificate sits inside #exam-root),
   since both produce the same .orbus-certificate-frame markup. */
@media print {
  /* margin: 0 added (v10, 2026-09-10): .orbus-certificate's own `margin: 24px
     auto` (for on-screen centering) was never reset for print. Because
     .orbus-certificate-frame has `overflow-x: auto`, it establishes a new
     block formatting context, which prevents that margin from collapsing
     the way it would on screen -- so print was adding ~48px (both top and
     bottom margins) on top of the certificate's actual 210mm height, just
     enough to spill a thin sliver onto a second page, independent of any
     print-dialog Scale/Margins setting (confirmed by testing both directly
     against a real exported PDF -- see DESIGN_DOC.md §10 item 12). */
  .orbus-certificate { box-shadow: none; margin: 0; }

  /* v13's `body.orbus-cert-printing { height: 0; overflow: hidden; }` lived
     here and was confirmed NOT to fix the blank-pages symptom live -- see
     the v14 file-header note for the full story. Removed rather than left
     in place, since it did nothing and only adds confusion. The rest of
     the page is now actually removed from layout by JS
     (window.OrbusCertPrint() in certificate-name.js, via display: none on
     every sibling up the ancestor chain) before window.print() runs, which
     is what suppresses the extra pages. `visibility: hidden` below stays
     as a belt-and-suspenders fallback in case that JS ever fails to run,
     but it is no longer relied on to control the page count. */
  body.orbus-cert-printing * {
    visibility: hidden;
  }
  body.orbus-cert-printing .orbus-certificate-frame,
  body.orbus-cert-printing .orbus-certificate-frame * {
    visibility: visible;
  }
  /* width/height pinned to the same fixed 297mm x 210mm physical size as
     .orbus-certificate itself (v11, 2026-09-11), instead of `width: 100%`.
     This element has no positioned ancestor anywhere in the DOM (confirmed
     live), so as position: absolute its `width: 100%` resolves against the
     initial containing block -- which the CSS Paged Media spec says should
     be the printed page box, but which Chrome and Firefox have a known
     history of resolving inconsistently for absolutely-positioned elements
     with zero positioned ancestors during paginated print (Chrome has been
     observed anchoring it to the last on-screen layout width instead of the
     physical page width). That mismatch -- frame narrower than the fixed-
     width .orbus-certificate child it contains -- reproduces exactly the
     "certificate shrunk and pinned top-left, blank margin bottom-right"
     symptom seen in Chrome/Edge PDF exports while Firefox printed correctly.
     Using fixed physical units here removes the ambiguity entirely: no
     containing-block percentage math for the print engine to get wrong.

     overflow: visible added (v11 follow-up, 2026-09-11): the base
     .orbus-certificate-frame rule sets `overflow-x: auto`, which per spec
     forces overflow-y to compute as auto too. With frame and certificate
     now pinned to the identical 297mm x 210mm, the two independent
     mm-to-px conversions can round to a fraction-of-a-pixel mismatch --
     enough to trigger that auto overflow and, in Chrome specifically,
     print an actual scrollbar into the PDF (Firefox doesn't render one for
     the same overflow). Scrolling is meaningless on a printed page, so
     overflow is just turned off outright here rather than chased further.

     --orbus-cert-scale: 1 !important added (v15, 2026-09-29): the
     on-screen responsive scale is now computed by a ResizeObserver in JS
     (certificate-name.js) rather than falling out naturally from a CSS
     cqw ratio, so it's no longer guaranteed to already be 1 by the time
     a print snapshot is taken -- explicitly forcing it here removes any
     dependency on ResizeObserver timing during the print transition.
     `!important` is required: the JS sets --orbus-cert-scale as a plain
     (non-important) inline style, which would otherwise always win over
     a non-important rule from an external stylesheet regardless of
     selector specificity. */
  body.orbus-cert-printing .orbus-certificate-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 297mm;
    height: 210mm;
    margin: 0;
    overflow: visible;
    --orbus-cert-scale: 1 !important;
  }
  body.orbus-cert-printing .orbus-cert-print-btn,
  body.orbus-cert-printing .orbus-exam__cert-close {
    display: none;
  }
}




/* ============================================================
   ORBUS SOFTWARE - WISTIA RESPONSIVE VIDEO EMBED STYLING
   Purpose: Provides the aspect-ratio-preserving sizing for the
   Wistia video embed's two wrapper divs. Wistia's own default
   embed code normally supplies this as inline styles on each
   individual embed; centralizing it here means every article's
   embed snippet can stay free of inline styles (see
   WISTIA_VIDEO_EMBED_PATTERN.md), maintained in one place
   instead of once per video.
   Added by: James Dorney, Director, Global Support Services
   ============================================================ */
.wistia_responsive_padding {
  padding: 56.25% 0 0 0;
  position: relative;
}
.wistia_responsive_wrapper {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/* ==================== END WISTIA RESPONSIVE VIDEO EMBED STYLING ==================== */
/* ============================================================
   ORBUS SOFTWARE - WISTIA TRANSCRIPT EMBED STYLING
   Purpose: Constrains the auto-generated <wistia-transcript>
   element to a fixed height with a border and internal
   scrollbar, so long transcripts don't push the rest of the
   article down the page. This only styles the transcript's
   outer container, not its internals (which live in shadow
   DOM and can't be styled from page CSS). The player's own
   autoscroll behaviour still drives the transcript as normal.
   Added by: James Dorney, Director, Global Support Services
   ============================================================ */
.wistia-transcript-placeholder {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid #d8dcde;
  border-radius: 6px;
  padding: 12px;
  box-sizing: border-box;
}
/* ==================== END WISTIA TRANSCRIPT EMBED STYLING ==================== */

/* ============================================================
   ORBUS SOFTWARE - COURSE PREV/NEXT LESSON PAGE NAV
   Purpose: A fixed bar pinned to the bottom of the viewport (not
   inside the article body, so it needs no per-article editing and
   is always visible without scrolling to the sidebar) with Previous/
   Next links that walk the learner through the course's articles in
   order, crossing from the last article of one section into the
   first article of the next. Built by course-navigation.js, which
   already fetches the course's full section/article order for the
   "Course Content" sidebar and reuses that same list here rather
   than fetching it twice. Degrades to nothing if the fetch fails or
   this script doesn't run.
   v7 (2026-09-29): bar shrunk after James reported it took up too much
   real estate at 100%+ browser zoom. Label + title moved from two
   stacked lines to one row, arrow badge 36px -> 26px, tighter padding
   throughout. Measured bar height dropped to 56px (was ~80px), still
   above the ~44px minimum touch-target guideline.
   Added by: James Dorney, Director, Global Support Services
   ============================================================ */
.course-pagenav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(61, 52, 173, 1);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
}
body.has-course-pagenav {
  padding-bottom: 64px;
}
.course-pagenav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  max-width: 46%;
  min-width: 0;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  color: rgba(21, 30, 71, 1);
  box-sizing: border-box;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.course-pagenav-prev {
  justify-content: flex-start;
}
.course-pagenav-next {
  justify-content: flex-end;
  text-align: right;
}
.course-pagenav-link:not(.is-disabled):hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.course-pagenav-link:not(.is-disabled):active {
  transform: scale(0.97);
}
.course-pagenav-link.is-disabled {
  color: rgba(255, 255, 255, 0.55);
  cursor: default;
  background: transparent;
  box-shadow: none;
}
.course-pagenav-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
  background: rgba(61, 52, 173, 1);
  color: #FFFFFF;
}
.course-pagenav-link.is-disabled .course-pagenav-arrow {
  background: transparent;
}
.course-pagenav-text {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.course-pagenav-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(21, 30, 71, 0.55);
  white-space: nowrap;
  flex: 0 0 auto;
}
.course-pagenav-link.is-disabled .course-pagenav-label {
  color: rgba(255, 255, 255, 0.55);
}
.course-pagenav-title {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
@media (max-width: 640px) {
  .course-pagenav-link {
    padding: 6px 12px;
    gap: 8px;
  }
  .course-pagenav-arrow {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }
  .course-pagenav-title {
    max-width: 34vw;
  }
  .course-pagenav-label {
    display: none;
  }
}
@media print {
  .course-pagenav {
    display: none;
  }
}
/* ==================== END COURSE PREV/NEXT LESSON PAGE NAV ==================== */


/* ===== ORBUS SOFTWARE - HEADER NAV BUTTONS (Help Center / Submit a request) - same design as the Support theme =====
   Two-tier hierarchy: Help Center is a secondary white pill (destination);
   Submit a request is the single primary brand-filled pill (the key action).
   Scoped to .nav-btn so the profile dropdown / sign-in links are untouched. */
.user-nav-list {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.nav-wrapper-desktop .user-nav-list a.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border: 1px solid rgba(rgba(61, 52, 173, 1), 0.25);
  border-radius: 999px;
  background-color: #fff;
  color: rgba(61, 52, 173, 1);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(21, 30, 71, 0.08);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.nav-wrapper-desktop .user-nav-list a.nav-btn:hover,
.nav-wrapper-desktop .user-nav-list a.nav-btn:focus {
  background-color: rgba(rgba(61, 52, 173, 1), 0.06);
  border-color: rgba(rgba(61, 52, 173, 1), 0.5);
  color: rgba(61, 52, 173, 1);
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(21, 30, 71, 0.14);
  transform: translateY(-1px);
}
.nav-wrapper-desktop .user-nav-list a.nav-btn:focus-visible {
  outline: 2px solid rgba(61, 52, 173, 1);
  outline-offset: 2px;
}
.nav-wrapper-desktop .user-nav-list a.nav-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(21, 30, 71, 0.08);
}
.nav-wrapper-desktop .user-nav-list a.nav-btn-primary {
  background-color: rgba(61, 52, 173, 1);
  border-color: rgba(61, 52, 173, 1);
  color: #FFFFFF;
}
.nav-wrapper-desktop .user-nav-list a.nav-btn-primary:hover,
.nav-wrapper-desktop .user-nav-list a.nav-btn-primary:focus {
  background-color: #322b8e;
  border-color: #322b8e;
  color: #FFFFFF;
}
.nav-btn-icon {
  flex-shrink: 0;
}
.nav-wrapper-desktop .user-nav-list a.sign-in {
  padding: 0 4px;
  font-weight: 600;
}
.nav-wrapper-desktop {
  align-items: center;
  gap: 18px;
}
@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: inline-flex;
  }
}
/* ===== END HEADER NAV BUTTONS ===== */


/* ===== ORBUS SOFTWARE - CATEGORY / SECTION CARD HOVER (same as the Support theme) =====
   Lift + brand border + navy shadow on hover, matching the Support theme's homepage/section cards.
   Scoped to cards inside .category-grid / .section-grid so the Exam Builder custom page's own
   `.section-card` editing panels (inside #sectionsContainer, not a grid) are NOT affected.
   - Homepage category cards and category-page section cards (icon, h3 title link, description):
     whole card clickable by stretching the h3 link over the card.
   - Section-page accordion cards (toggle button + article links): hover only - they have no h3,
     so the stretched link never applies and their inner links/buttons keep working.
   Overrides the existing `.section-card:hover` (blue-tinted shadow, no lift). The original
   category/section hover rule further up is inside a malformed comment and has never applied;
   it is deliberately left disabled (it would also set `color: #ffffff` - white text on white). */
.category-grid > .category-card,
.section-grid > .section-card {
  position: relative;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.category-grid > .category-card:hover,
.category-grid > .category-card:focus-within,
.section-grid > .section-card:hover,
.section-grid > .section-card:focus-within {
  border-color: rgba(61, 52, 173, 1);
  box-shadow: 0 6px 22px rgba(21, 30, 71, 0.14);
  transform: translateY(-2px);
}
.category-grid > .category-card h3 a::after,
.section-grid > .section-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
}
.category-grid > .category-card h3 a:focus-visible,
.section-grid > .section-card h3 a:focus-visible {
  outline: 2px solid rgba(61, 52, 173, 1);
  outline-offset: 3px;
}
/* ===== END CATEGORY / SECTION CARD HOVER ===== */