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

/* Reset the box-sizing */

*,
*:before,
*:after,
input,
input:before,
input:after,
select,
select:before,
select:after,
textarea,
textarea:before,
textarea:after,
input[type="search"],
input[type="search"]:before,
input[type="search"]:after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

/* Body reset */

html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #373C50;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

[dir] body {
  background-color: rgba(248, 249, 252, 1);
}

body.menu-opened {
  overflow: hidden;
}

.body-overlay {
  position: fixed;
  top: 0;
  z-index: 98;
  display: block;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;
}

[dir] .body-overlay {
  background: rgba(248, 249, 252, 1);
}

[dir="ltr"] .body-overlay {
  left: 0;
}

[dir="rtl"] .body-overlay {
  right: 0;
}

.menu-opened .body-overlay {
  visibility: visible;
  opacity: 0.7;
}

/* Reset fonts for relevant elements */

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

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

/* Placeholder */

::-webkit-input-placeholder {
  /* Chrome */
  color: #373C50;
}

:-ms-input-placeholder {
  /* IE 10+ */
  color: #373C50;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #373C50;
  opacity: 1;
}

:-moz-placeholder {
  /* Firefox 4 - 18 */
  color: #373C50;
  opacity: 1;
}

/* Links */

a {
  color: #006ada;
  text-decoration: none;
  transition: all 0.3s;
}

a:hover,
a:focus {
  color: #00458d;
  text-decoration: none;
}

[dir] figure {
  margin: 0;
  margin-bottom: 20px; /* image bottom spacing updated on 25-Sep-2025 */
}

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

hr {
  display: block;
  height: 1px;
}

[dir] hr {
  padding: 0;
  margin: 1em 0;
  border: 0;
  border-top: 1px solid #eceeef;
}

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

/* Headings */

h1 {
  font-weight: 600;
  line-height: 1.2;
}

h2 {
  font-weight: 600;
  line-height: 1.2;
}

h3 {
  font-weight: 600;
  line-height: 1.2;
}

h4 {
  font-weight: 600;
  line-height: 1.2;
}

h5 {
  font-weight: 600;
  line-height: 1.2;
}

h6 {
  font-weight: 600;
  line-height: 1.2;
}

.h1 {
  font-weight: 600;
  line-height: 1.2;
}

.h2 {
  font-weight: 600;
  line-height: 1.2;
}

.h3 {
  font-weight: 600;
  line-height: 1.2;
}

.h4 {
  font-weight: 600;
  line-height: 1.2;
}

.h5 {
  font-weight: 600;
  line-height: 1.2;
}

.h6 {
  font-weight: 600;
  line-height: 1.2;
}

.wysiwyg-font-size-x-large {
  font-weight: 600;
  line-height: 1.2;
}

.wysiwyg-font-size-large {
  font-weight: 600;
  line-height: 1.2;
}

.wysiwyg-font-size-medium {
  font-weight: 600;
  line-height: 1.2;
}

[dir] h1 {
  margin: 0 0 calc(16px * 1.5);
}

[dir] h2 {
  margin: 0 0 calc(16px * 1.5);
}

[dir] h3 {
  margin: 0 0 calc(16px * 1.5);
}

[dir] h4 {
  margin: 0 0 calc(16px * 1.5);
}

[dir] h5 {
  margin: 0 0 calc(16px * 1.5);
}

[dir] h6 {
  margin: 0 0 calc(16px * 1.5);
}

[dir] .h1 {
  margin: 0 0 calc(16px * 1.5);
}

[dir] .h2 {
  margin: 0 0 calc(16px * 1.5);
}

[dir] .h3 {
  margin: 0 0 calc(16px * 1.5);
}

[dir] .h4 {
  margin: 0 0 calc(16px * 1.5);
}

[dir] .h5 {
  margin: 0 0 calc(16px * 1.5);
}

[dir] .h6 {
  margin: 0 0 calc(16px * 1.5);
}

[dir] p {
  margin: 0 0 calc(16px * 1.5);
}

[dir] .wysiwyg-font-size-x-large {
  margin: 0 0 calc(16px * 1.5);
}

[dir] .wysiwyg-font-size-large {
  margin: 0 0 calc(16px * 1.5);
}

[dir] .wysiwyg-font-size-medium {
  margin: 0 0 calc(16px * 1.5);
}

[dir] ul {
  margin: calc(16px * 1.5) 0;
}

[dir] ol {
  margin: calc(16px * 1.5) 0;
}

h1 {
  font-size: calc(16px * 2);
}

.h1 {
  font-size: calc(16px * 2);
}

h2 {
  font-size: calc(16px * 1.5);
}

.h2 {
  font-size: calc(16px * 1.5);
}

.wysiwyg-font-size-x-large {
  font-size: calc(16px * 1.5);
}

h3 {
  font-size: calc(16px * 1.25);
}

.h3 {
  font-size: calc(16px * 1.25);
}

.wysiwyg-font-size-large {
  font-size: calc(16px * 1.25);
}

h4 {
  font-size: calc(16px * 1);
}

.h4 {
  font-size: calc(16px * 1);
}

.wysiwyg-font-size-medium {
  font-size: calc(16px * 1);
}

h5 {
  font-size: calc(16px * 1);
}

.h5 {
  font-size: calc(16px * 1);
}

h6 {
  font-size: calc(16px * 1);
}

.h6 {
  font-size: calc(16px * 1);
}

b,
strong {
  font-weight: 600;
}

small,
.small {
  font-size: 80%;
  font-weight: normal;
  line-height: 1;
}

/* Description Lists */

[dir] dl {
  margin-top: 0;
  margin-bottom: calc(16px * 1.5);
}

dt {
  line-height: 1.5;
}

[dir] dt {
  margin-bottom: calc(16px * 1.5 / 2);
}

dd {
  line-height: 1.5;
}

[dir] dd {
  margin-bottom: calc(16px * 1.5 / 2);
}

dt {
  font-weight: bold;
}

dd {
  /* Undo browser default */
}

[dir="ltr"] dd {
  margin-left: 0;
}

[dir="rtl"] dd {
  margin-right: 0;
}

.dl-horizontal:before,
.dl-horizontal:after {
  display: table;
  content: "";
}

[dir] .dl-horizontal:after {
  clear: both;
}

.dl-horizontal dt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


@media (min-width: 768px) {
  .dl-horizontal dt {
    width: 30%;
  }
  
  

  [dir] .dl-horizontal dt {
    clear: both;
  }

  [dir="ltr"] .dl-horizontal dt {
    float: left;
    padding-right: 15px;
  }

  [dir="rtl"] .dl-horizontal dt {
    float: right;
    padding-left: 15px;
  }
}

@media (min-width: 768px) {
  .dl-horizontal dd {
    width: 70%;
  }

  [dir="ltr"] .dl-horizontal dd {
    float: right;
  }

  [dir="rtl"] .dl-horizontal dd {
    float: left;
  }
}

/* Abbreviations and acronyms */

[dir] abbr[title] {
  cursor: help;
  border-bottom: 1px dotted #818a91;
}

[dir] abbr[data-original-title] {
  cursor: help;
  border-bottom: 1px dotted #818a91;
}

/* Blockquotes */

blockquote {
  font-family: 'Lato', sans-serif;
  font-style: italic;
}

[dir] blockquote {
  padding: calc(16px * 1.5 / 2)
    calc(16px * 1.5);
  margin: 0 0 calc(16px * 1.5);
  background-color: #f7f7f9;
}

[dir="ltr"] blockquote {
  border-left: 5px solid #eceeef;
}

[dir="rtl"] blockquote {
  border-right: 5px solid #eceeef;
}

[dir="ltr"] blockquote.is-colored {
  border-left: 5px solid rgba(0, 44, 151, 1);
}

[dir="rtl"] blockquote.is-colored {
  border-right: 5px solid rgba(0, 44, 151, 1);
}

[dir] blockquote p:last-child,
[dir] blockquote ul:last-child,
[dir] blockquote ol:last-child {
  margin-bottom: 0;
}

/* ===== Code Styling (Deprecated) ===== */

/*
[dir] code {
  padding: 20px !important;
  border-radius: 0 !important;
}
*/

/* New Code Styling - Updated Jan 2025 */
/*
[dir] code {
  padding: 1px 3px !important;
  border-radius: 3px !important;
  font-family: monospace, Courier, "Courier New" !important;
}
*/

/* Inline code styling - minimal for paragraph use - updated Dec 2025 */
/* Inline code styling - minimal for paragraph use */
p code,
div code,
li code {
  padding: 1px 3px !important;
  border-radius: 3px !important;
  font-family: monospace, Courier, "Courier New" !important;
  font-size: 0.9em !important;
  color: #333 !important;
}

/*  Addresses */

address {
  font-style: normal;
  line-height: 1.5;
}

[dir] address {
  margin-bottom: calc(16px * 1.5);
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

[dir] .clearfix:after {
  clear: both;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

[dir] .sr-only {
  padding: 0;
  margin: -1px;
  border: 0;
}

.list-unstyled {
  list-style: none;
}

[dir] .list-unstyled {
  margin: 0;
}

[dir="ltr"] .list-unstyled {
  padding-left: 0;
}

[dir="rtl"] .list-unstyled {
  padding-right: 0;
}

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

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

.visibility-hidden,
.recent-activity-accessibility-label,
.pagination-first-text,
.pagination-last-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
}

[dir] .visibility-hidden,
[dir] .recent-activity-accessibility-label,
[dir] .pagination-first-text,
[dir] .pagination-last-text {
  padding: 0;
  margin: -1px;
  border: 0;
}

/* Components */

[dir="ltr"] .container {
  padding-right: 15px;
  padding-left: 15px;
}

[dir="rtl"] .container {
  padding-right: 15px;
  padding-left: 15px;
}

@media (min-width: 768px) {
  [dir="ltr"] .container {
    padding-right: calc(15px * 2);
    padding-left: calc(15px * 2);
  }

  [dir="rtl"] .container {
    padding-right: calc(15px * 2);
    padding-left: calc(15px * 2);
  }
}

.container-inner {
  /* max-width: 1200px; */
}

.container-inner--small {
  max-width: 1200px;
}

[dir] .container-inner {
  margin: 0 auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

[dir="ltr"] .row {
  margin-right: calc(15px * -1);
  margin-left: calc(15px * -1);
}

[dir="rtl"] .row {
  margin-right: calc(15px * -1);
  margin-left: calc(15px * -1);
}

.column {
  position: relative;
  width: 100%;
  min-height: 1px;
}

[dir="ltr"] .column {
  float: left;
  padding-right: 15px;
  padding-left: 15px;
}

[dir="rtl"] .column {
  float: right;
  padding-right: 15px;
  padding-left: 15px;
}

.column--xs-1 {
  width: 8.33333%;
}

.column--xs-2 {
  width: 16.66667%;
}

.column--xs-3 {
  width: 25%;
}

.column--xs-4 {
  width: 33.33333%;
}

.column--xs-5 {
  width: 41.66667%;
}

.column--xs-6 {
  width: 50%;
}

.column--xs-7 {
  width: 58.33333%;
}

.column--xs-8 {
  width: 66.66667%;
}

.column--xs-9 {
  width: 75%;
}

.column--xs-10 {
  width: 83.33333%;
}

.column--xs-11 {
  width: 91.66667%;
}

.column--xs-12 {
  width: 100%;
}

[dir="ltr"] .column--xs-offset-0 {
  margin-left: 0%;
}

[dir="rtl"] .column--xs-offset-0 {
  margin-right: 0%;
}

[dir="ltr"] .column--xs-offset-1 {
  margin-left: 8.33333%;
}

[dir="rtl"] .column--xs-offset-1 {
  margin-right: 8.33333%;
}

[dir="ltr"] .column--xs-offset-2 {
  margin-left: 16.66667%;
}

[dir="rtl"] .column--xs-offset-2 {
  margin-right: 16.66667%;
}

[dir="ltr"] .column--xs-offset-3 {
  margin-left: 25%;
}

[dir="rtl"] .column--xs-offset-3 {
  margin-right: 25%;
}

[dir="ltr"] .column--xs-offset-4 {
  margin-left: 33.33333%;
}

[dir="rtl"] .column--xs-offset-4 {
  margin-right: 33.33333%;
}

[dir="ltr"] .column--xs-offset-5 {
  margin-left: 41.66667%;
}

[dir="rtl"] .column--xs-offset-5 {
  margin-right: 41.66667%;
}

[dir="ltr"] .column--xs-offset-6 {
  margin-left: 50%;
}

[dir="rtl"] .column--xs-offset-6 {
  margin-right: 50%;
}

[dir="ltr"] .column--xs-offset-7 {
  margin-left: 58.33333%;
}

[dir="rtl"] .column--xs-offset-7 {
  margin-right: 58.33333%;
}

[dir="ltr"] .column--xs-offset-8 {
  margin-left: 66.66667%;
}

[dir="rtl"] .column--xs-offset-8 {
  margin-right: 66.66667%;
}

[dir="ltr"] .column--xs-offset-9 {
  margin-left: 75%;
}

[dir="rtl"] .column--xs-offset-9 {
  margin-right: 75%;
}

[dir="ltr"] .column--xs-offset-10 {
  margin-left: 83.33333%;
}

[dir="rtl"] .column--xs-offset-10 {
  margin-right: 83.33333%;
}

[dir="ltr"] .column--xs-offset-11 {
  margin-left: 91.66667%;
}

[dir="rtl"] .column--xs-offset-11 {
  margin-right: 91.66667%;
}

[dir="ltr"] .column--xs-offset-12 {
  margin-left: 100%;
}

[dir="rtl"] .column--xs-offset-12 {
  margin-right: 100%;
}

@media (min-width: 768px) {
  .column--sm-1 {
    width: 8.33333%;
  }

  .column--sm-2 {
    width: 16.66667%;
  }

  .column--sm-3 {
    width: 25%;
  }

  .column--sm-4 {
    width: 33.33333%;
  }

  .column--sm-5 {
    width: 41.66667%;
  }

  .column--sm-6 {
    width: 50%;
  }

  .column--sm-7 {
    width: 58.33333%;
  }

  .column--sm-8 {
    width: 66.66667%;
  }

  .column--sm-9 {
    width: 75%;
  }

  .column--sm-10 {
    width: 83.33333%;
  }

  .column--sm-11 {
    width: 91.66667%;
  }

  .column--sm-12 {
    width: 100%;
  }

  [dir="ltr"] .column--sm-offset-0 {
    margin-left: 0%;
  }

  [dir="rtl"] .column--sm-offset-0 {
    margin-right: 0%;
  }

  [dir="ltr"] .column--sm-offset-1 {
    margin-left: 8.33333%;
  }

  [dir="rtl"] .column--sm-offset-1 {
    margin-right: 8.33333%;
  }

  [dir="ltr"] .column--sm-offset-2 {
    margin-left: 16.66667%;
  }

  [dir="rtl"] .column--sm-offset-2 {
    margin-right: 16.66667%;
  }

  [dir="ltr"] .column--sm-offset-3 {
    margin-left: 25%;
  }

  [dir="rtl"] .column--sm-offset-3 {
    margin-right: 25%;
  }

  [dir="ltr"] .column--sm-offset-4 {
    margin-left: 33.33333%;
  }

  [dir="rtl"] .column--sm-offset-4 {
    margin-right: 33.33333%;
  }

  [dir="ltr"] .column--sm-offset-5 {
    margin-left: 41.66667%;
  }

  [dir="rtl"] .column--sm-offset-5 {
    margin-right: 41.66667%;
  }

  [dir="ltr"] .column--sm-offset-6 {
    margin-left: 50%;
  }

  [dir="rtl"] .column--sm-offset-6 {
    margin-right: 50%;
  }

  [dir="ltr"] .column--sm-offset-7 {
    margin-left: 58.33333%;
  }

  [dir="rtl"] .column--sm-offset-7 {
    margin-right: 58.33333%;
  }

  [dir="ltr"] .column--sm-offset-8 {
    margin-left: 66.66667%;
  }

  [dir="rtl"] .column--sm-offset-8 {
    margin-right: 66.66667%;
  }

  [dir="ltr"] .column--sm-offset-9 {
    margin-left: 75%;
  }

  [dir="rtl"] .column--sm-offset-9 {
    margin-right: 75%;
  }

  [dir="ltr"] .column--sm-offset-10 {
    margin-left: 83.33333%;
  }

  [dir="rtl"] .column--sm-offset-10 {
    margin-right: 83.33333%;
  }

  [dir="ltr"] .column--sm-offset-11 {
    margin-left: 91.66667%;
  }

  [dir="rtl"] .column--sm-offset-11 {
    margin-right: 91.66667%;
  }

  [dir="ltr"] .column--sm-offset-12 {
    margin-left: 100%;
  }

  [dir="rtl"] .column--sm-offset-12 {
    margin-right: 100%;
  }
}

@media (min-width: 992px) {
  .column--md-1 {
    width: 8.33333%;
  }

  .column--md-2 {
    width: 16.66667%;
  }

  .column--md-3 {
    width: 25%;
  }

  .column--md-4 {
    width: 33.33333%;
  }

  .column--md-5 {
    width: 41.66667%;
  }

  .column--md-6 {
    width: 50%;
  }

  .column--md-7 {
    width: 58.33333%;
  }

  .column--md-8 {
    width: 66.66667%;
  }

  .column--md-9 {
    width: 75%;
  }

  .column--md-10 {
    width: 83.33333%;
  }

  .column--md-11 {
    width: 91.66667%;
  }

  .column--md-12 {
    width: 100%;
  }

  [dir="ltr"] .column--md-offset-1 {
    margin-left: 8.33333%;
  }

  [dir="rtl"] .column--md-offset-1 {
    margin-right: 8.33333%;
  }

  [dir="ltr"] .column--md-offset-2 {
    margin-left: 16.66667%;
  }

  [dir="rtl"] .column--md-offset-2 {
    margin-right: 16.66667%;
  }

  [dir="ltr"] .column--md-offset-3 {
    margin-left: 25%;
  }

  [dir="rtl"] .column--md-offset-3 {
    margin-right: 25%;
  }

  [dir="ltr"] .column--md-offset-4 {
    margin-left: 33.33333%;
  }

  [dir="rtl"] .column--md-offset-4 {
    margin-right: 33.33333%;
  }

  [dir="ltr"] .column--md-offset-5 {
    margin-left: 41.66667%;
  }

  [dir="rtl"] .column--md-offset-5 {
    margin-right: 41.66667%;
  }

  [dir="ltr"] .column--md-offset-6 {
    margin-left: 50%;
  }

  [dir="rtl"] .column--md-offset-6 {
    margin-right: 50%;
  }

  [dir="ltr"] .column--md-offset-7 {
    margin-left: 58.33333%;
  }

  [dir="rtl"] .column--md-offset-7 {
    margin-right: 58.33333%;
  }

  [dir="ltr"] .column--md-offset-8 {
    margin-left: 66.66667%;
  }

  [dir="rtl"] .column--md-offset-8 {
    margin-right: 66.66667%;
  }

  [dir="ltr"] .column--md-offset-9 {
    margin-left: 75%;
  }

  [dir="rtl"] .column--md-offset-9 {
    margin-right: 75%;
  }

  [dir="ltr"] .column--md-offset-10 {
    margin-left: 83.33333%;
  }

  [dir="rtl"] .column--md-offset-10 {
    margin-right: 83.33333%;
  }

  [dir="ltr"] .column--md-offset-11 {
    margin-left: 91.66667%;
  }

  [dir="rtl"] .column--md-offset-11 {
    margin-right: 91.66667%;
  }

  [dir="ltr"] .column--md-offset-12 {
    margin-left: 100%;
  }

  [dir="rtl"] .column--md-offset-12 {
    margin-right: 100%;
  }
}

@media (min-width: 1200px) {
  .column--lg-1 {
    width: 8.33333%;
  }

  .column--lg-2 {
    width: 16.66667%;
  }

  .column--lg-3 {
    width: 25%;
  }

  .column--lg-4 {
    width: 33.33333%;
  }

  .column--lg-5 {
    width: 41.66667%;
  }

  .column--lg-6 {
    width: 50%;
  }

  .column--lg-7 {
    width: 58.33333%;
  }

  .column--lg-8 {
    width: 66.66667%;
  }

  .column--lg-9 {
    width: 75%;
  }

  .column--lg-10 {
    width: 83.33333%;
  }

  .column--lg-11 {
    width: 91.66667%;
  }

  .column--lg-12 {
    width: 100%;
  }

  [dir="ltr"] .column--lg-pull-0 {
    right: auto;
  }

  [dir="rtl"] .column--lg-pull-0 {
    left: auto;
  }

  [dir="ltr"] .column--lg-pull-1 {
    right: 8.33333%;
  }

  [dir="rtl"] .column--lg-pull-1 {
    left: 8.33333%;
  }

  [dir="ltr"] .column--lg-pull-2 {
    right: 16.66667%;
  }

  [dir="rtl"] .column--lg-pull-2 {
    left: 16.66667%;
  }

  [dir="ltr"] .column--lg-pull-3 {
    right: 25%;
  }

  [dir="rtl"] .column--lg-pull-3 {
    left: 25%;
  }

  [dir="ltr"] .column--lg-pull-4 {
    right: 33.33333%;
  }

  [dir="rtl"] .column--lg-pull-4 {
    left: 33.33333%;
  }

  [dir="ltr"] .column--lg-pull-5 {
    right: 41.66667%;
  }

  [dir="rtl"] .column--lg-pull-5 {
    left: 41.66667%;
  }

  [dir="ltr"] .column--lg-pull-6 {
    right: 50%;
  }

  [dir="rtl"] .column--lg-pull-6 {
    left: 50%;
  }

  [dir="ltr"] .column--lg-pull-7 {
    right: 58.33333%;
  }

  [dir="rtl"] .column--lg-pull-7 {
    left: 58.33333%;
  }

  [dir="ltr"] .column--lg-pull-8 {
    right: 66.66667%;
  }

  [dir="rtl"] .column--lg-pull-8 {
    left: 66.66667%;
  }

  [dir="ltr"] .column--lg-pull-9 {
    right: 75%;
  }

  [dir="rtl"] .column--lg-pull-9 {
    left: 75%;
  }

  [dir="ltr"] .column--lg-pull-10 {
    right: 83.33333%;
  }

  [dir="rtl"] .column--lg-pull-10 {
    left: 83.33333%;
  }

  [dir="ltr"] .column--lg-pull-11 {
    right: 91.66667%;
  }

  [dir="rtl"] .column--lg-pull-11 {
    left: 91.66667%;
  }

  [dir="ltr"] .column--lg-pull-12 {
    right: 100%;
  }

  [dir="rtl"] .column--lg-pull-12 {
    left: 100%;
  }

  [dir="ltr"] .column--lg-push-0 {
    left: auto;
  }

  [dir="rtl"] .column--lg-push-0 {
    right: auto;
  }

  [dir="ltr"] .column--lg-push-1 {
    left: 8.33333%;
  }

  [dir="rtl"] .column--lg-push-1 {
    right: 8.33333%;
  }

  [dir="ltr"] .column--lg-push-2 {
    left: 16.66667%;
  }

  [dir="rtl"] .column--lg-push-2 {
    right: 16.66667%;
  }

  [dir="ltr"] .column--lg-push-3 {
    left: 25%;
  }

  [dir="rtl"] .column--lg-push-3 {
    right: 25%;
  }

  [dir="ltr"] .column--lg-push-4 {
    left: 33.33333%;
  }

  [dir="rtl"] .column--lg-push-4 {
    right: 33.33333%;
  }

  [dir="ltr"] .column--lg-push-5 {
    left: 41.66667%;
  }

  [dir="rtl"] .column--lg-push-5 {
    right: 41.66667%;
  }

  [dir="ltr"] .column--lg-push-6 {
    left: 50%;
  }

  [dir="rtl"] .column--lg-push-6 {
    right: 50%;
  }

  [dir="ltr"] .column--lg-push-7 {
    left: 58.33333%;
  }

  [dir="rtl"] .column--lg-push-7 {
    right: 58.33333%;
  }

  [dir="ltr"] .column--lg-push-8 {
    left: 66.66667%;
  }

  [dir="rtl"] .column--lg-push-8 {
    right: 66.66667%;
  }

  [dir="ltr"] .column--lg-push-9 {
    left: 75%;
  }

  [dir="rtl"] .column--lg-push-9 {
    right: 75%;
  }

  [dir="ltr"] .column--lg-push-10 {
    left: 83.33333%;
  }

  [dir="rtl"] .column--lg-push-10 {
    right: 83.33333%;
  }

  [dir="ltr"] .column--lg-push-11 {
    left: 91.66667%;
  }

  [dir="rtl"] .column--lg-push-11 {
    right: 91.66667%;
  }

  [dir="ltr"] .column--lg-push-12 {
    left: 100%;
  }

  [dir="rtl"] .column--lg-push-12 {
    right: 100%;
  }

  [dir="ltr"] .column--lg-offset-0 {
    margin-left: 0%;
  }

  [dir="rtl"] .column--lg-offset-0 {
    margin-right: 0%;
  }

  [dir="ltr"] .column--lg-offset-1 {
    margin-left: 8.33333%;
  }

  [dir="rtl"] .column--lg-offset-1 {
    margin-right: 8.33333%;
  }

  [dir="ltr"] .column--lg-offset-2 {
    margin-left: 16.66667%;
  }

  [dir="rtl"] .column--lg-offset-2 {
    margin-right: 16.66667%;
  }

  [dir="ltr"] .column--lg-offset-3 {
    margin-left: 25%;
  }

  [dir="rtl"] .column--lg-offset-3 {
    margin-right: 25%;
  }

  [dir="ltr"] .column--lg-offset-4 {
    margin-left: 33.33333%;
  }

  [dir="rtl"] .column--lg-offset-4 {
    margin-right: 33.33333%;
  }

  [dir="ltr"] .column--lg-offset-5 {
    margin-left: 41.66667%;
  }

  [dir="rtl"] .column--lg-offset-5 {
    margin-right: 41.66667%;
  }

  [dir="ltr"] .column--lg-offset-6 {
    margin-left: 50%;
  }

  [dir="rtl"] .column--lg-offset-6 {
    margin-right: 50%;
  }

  [dir="ltr"] .column--lg-offset-7 {
    margin-left: 58.33333%;
  }

  [dir="rtl"] .column--lg-offset-7 {
    margin-right: 58.33333%;
  }

  [dir="ltr"] .column--lg-offset-8 {
    margin-left: 66.66667%;
  }

  [dir="rtl"] .column--lg-offset-8 {
    margin-right: 66.66667%;
  }

  [dir="ltr"] .column--lg-offset-9 {
    margin-left: 75%;
  }

  [dir="rtl"] .column--lg-offset-9 {
    margin-right: 75%;
  }

  [dir="ltr"] .column--lg-offset-10 {
    margin-left: 83.33333%;
  }

  [dir="rtl"] .column--lg-offset-10 {
    margin-right: 83.33333%;
  }

  [dir="ltr"] .column--lg-offset-11 {
    margin-left: 91.66667%;
  }

  [dir="rtl"] .column--lg-offset-11 {
    margin-right: 91.66667%;
  }

  [dir="ltr"] .column--lg-offset-12 {
    margin-left: 100%;
  }

  [dir="rtl"] .column--lg-offset-12 {
    margin-right: 100%;
  }
}

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

.dropdown-toggle {
  display: inline-block;
  vertical-align: middle;
}

[dir] .dropdown-toggle {
  padding: 0;
  text-align: initial;
  cursor: pointer;
  background: none;
  border: 0;
}


.dropdown-toggle:after {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-size: calc(16px - 4px);
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
  content: "\f107"; 
transition: content 0.2s ease; 
 -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dropdown-toggle[aria-expanded="true"]::after {
  content: "\f106";
}

.user-chevron {
  margin-left: 6px;
  transition: transform 0.3s ease;
}












[dir="ltr"] .dropdown-toggle:after {
  margin-left: 8px;
}

[dir="rtl"] .dropdown-toggle:after {
  margin-right: 8px;
}

.dropdown-toggle:hover {
  text-decoration: none;
}

.dropdown-toggle > * {
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  z-index: 1000;
  display: none;
  min-width: 170px;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
}

[dir] .dropdown-menu {
  padding: 10px 0;
  margin-top: 1px;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 0;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

[dir="ltr"] .dropdown-menu {
  left: 0;
  text-align: left;
}

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

[dir="rtl"] .dropdown-menu {
  text-align: right;
}

.dropdown-menu[aria-expanded="true"] {
  display: block;
}

.dropdown-menu [role="separator"] {
  display: block;
  font-size: 11px;
  font-weight: normal;
  color: #969696;
}

[dir] .dropdown-menu [role="separator"] {
  padding: 5px 0;
  margin: 5px 20px 10px;
  border-bottom: 1px solid #d8d8d8;
}

.dropdown-menu [role="menuitem"] {
  display: block;
  width: 100%;
  line-height: inherit;
  color: #333;
  white-space: nowrap;
  -webkit-appearance: none;
}

[dir] .dropdown-menu [role="menuitem"] {
  text-align: start;
  cursor: pointer;
  background-color: transparent;
  border: 0;
}

[dir="ltr"] .dropdown-menu [role="menuitem"] {
  padding: 7px 40px 7px 20px;
}

[dir="rtl"] .dropdown-menu [role="menuitem"] {
  padding: 7px 20px 7px 40px;
}

[dir="rtl"] .dropdown-menu [role="menuitem"] {
  padding: 7px 20px 7px 40px;
}

.dropdown-menu [role="menuitem"]:hover,
.dropdown-menu [role="menuitem"]:focus {
  color: #333;
  text-decoration: none;
}

[dir] .dropdown-menu [role="menuitem"]:hover,
[dir] .dropdown-menu [role="menuitem"]:focus {
  background: #f3f3f3;
}

[dir] .dropdown-menu [role="menuitem"][aria-selected="true"] {
  cursor: default;
}

.dropdown-menu [role="menuitem"][aria-selected="true"]:after {
  display: inline-block;
  width: 12px;
  height: 12px;
  content: "";
}

[dir] .dropdown-menu [role="menuitem"][aria-selected="true"]:after {
  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");
}

[dir="ltr"] .dropdown-menu [role="menuitem"][aria-selected="true"]:after {
  margin-left: 10px;
}

[dir="rtl"] .dropdown-menu [role="menuitem"][aria-selected="true"]:after {
  margin-right: 10px;
}

[dir="rtl"] .dropdown-menu [role="menuitem"][aria-selected="true"]:after {
  float: left;
  margin-right: 10px;
  margin-left: 0;
}

.dropdown-menu [role="menuitem"][hidden],
.dropdown-menu [role="menuitem"][aria-hidden="true"] {
  display: none !important;
}

[dir="ltr"] .dropdown-menu-end {
  right: 0;
  left: auto;
}

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

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

[dir] .dropdown-menu-top {
  margin-bottom: 1px;
}

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

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

.dropdown-toggle--user {
  font-size: calc(16px - 2px);
  font-weight: 600;
  line-height: 1.5;
  color: rgba(76, 96, 114, 1);
}

[dir] .dropdown-toggle--user {
  padding: 0;
  border: 0;
}

/* Updated May 2025: Override user name color in topbar for better contrast on blue background */
.dropdown-toggle--user [data-user-name] {
  color: #ffffff !important;
}



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

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

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

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

@media (max-width: 479px) {
  .hidden-xxs {
    display: none !important;
  }
}

.btn {
  display: inline-block;
  overflow: hidden;
  font-size: calc(16px - 4px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1px;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: all 0.3s ease;
  touch-action: manipulation;
}

[dir] .btn {
  padding: 9px 16px;
  margin-bottom: 0;
  text-align: center;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(55, 60, 80, 0.05);
}

input[type="submit"] {
  display: inline-block;
  overflow: hidden;
  font-size: calc(16px - 4px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1px;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: all 0.3s ease;
  touch-action: manipulation;
}

[dir] input[type="submit"] {
  padding: 9px 16px;
  margin-bottom: 0;
  text-align: center;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(55, 60, 80, 0.05);
}

.section-subscribe button {
  display: inline-block;
  overflow: hidden;
  font-size: calc(16px - 4px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1px;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: all 0.3s ease;
  touch-action: manipulation;
}

[dir] .section-subscribe button {
  padding: 9px 16px;
  margin-bottom: 0;
  text-align: center;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(55, 60, 80, 0.05);
}

.article-subscribe button {
  display: inline-block;
  overflow: hidden;
  font-size: calc(16px - 4px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1px;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: all 0.3s ease;
  touch-action: manipulation;
}

[dir] .article-subscribe button {
  padding: 9px 16px;
  margin-bottom: 10px;
  text-align: center;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(55, 60, 80, 0.05);
}

.community-follow button {
  display: inline-block;
  overflow: hidden;
  font-size: calc(16px - 4px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1px;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: all 0.3s ease;
  touch-action: manipulation;
}

[dir] .community-follow button {
  padding: 9px 16px;
  margin-bottom: 0;
  text-align: center;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(55, 60, 80, 0.05);
}

.requests-table-toolbar .organization-subscribe button {
  display: inline-block;
  overflow: hidden;
  font-size: calc(16px - 4px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1px;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: all 0.3s ease;
  touch-action: manipulation;
}

[dir] .requests-table-toolbar .organization-subscribe button {
  padding: 9px 16px;
  margin-bottom: 0;
  text-align: center;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(55, 60, 80, 0.05);
}

.subscriptions-subscribe button {
  display: inline-block;
  overflow: hidden;
  font-size: calc(16px - 4px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1px;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: all 0.3s ease;
  touch-action: manipulation;
}

[dir] .subscriptions-subscribe button {
  padding: 9px 16px;
  margin-bottom: 0;
  text-align: center;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(55, 60, 80, 0.05);
}

.edit-profile-button a {
  display: inline-block;
  overflow: hidden;
  font-size: calc(16px - 4px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1px;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: all 0.3s ease;
  touch-action: manipulation;
}

[dir] .edit-profile-button a {
  padding: 9px 16px;
  margin-bottom: 0;
  text-align: center;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(55, 60, 80, 0.05);
}

.pagination-next-link {
  display: inline-block;
  overflow: hidden;
  font-size: calc(16px - 4px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1px;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: all 0.3s ease;
  touch-action: manipulation;
}

[dir] .pagination-next-link {
  padding: 9px 16px;
  margin-bottom: 0;
  text-align: center;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(55, 60, 80, 0.05);
}

.pagination-prev-link {
  display: inline-block;
  overflow: hidden;
  font-size: calc(16px - 4px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1px;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: all 0.3s ease;
  touch-action: manipulation;
}

[dir] .pagination-prev-link {
  padding: 9px 16px;
  margin-bottom: 0;
  text-align: center;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(55, 60, 80, 0.05);
}

.pagination-first-link {
  display: inline-block;
  overflow: hidden;
  font-size: calc(16px - 4px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1px;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: all 0.3s ease;
  touch-action: manipulation;
}

[dir] .pagination-first-link {
  padding: 9px 16px;
  margin-bottom: 0;
  text-align: center;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(55, 60, 80, 0.05);
}

.pagination-last-link {
  display: inline-block;
  overflow: hidden;
  font-size: calc(16px - 4px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1px;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: all 0.3s ease;
  touch-action: manipulation;
}

[dir] .pagination-last-link {
  padding: 9px 16px;
  margin-bottom: 0;
  text-align: center;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(55, 60, 80, 0.05);
}

.btn:focus,
.btn:active:focus,
input[type="submit"]:focus,
input[type="submit"]:active:focus,
.section-subscribe button:focus,
.section-subscribe button:active:focus,
.article-subscribe button:focus,
.article-subscribe button:active:focus,
.community-follow button:focus,
.community-follow button:active:focus,
.requests-table-toolbar .organization-subscribe button:focus,
.requests-table-toolbar .organization-subscribe button:active:focus,
.subscriptions-subscribe button:focus,
.subscriptions-subscribe button:active:focus,
.edit-profile-button a:focus,
.edit-profile-button a:active:focus,
.pagination-next-link:focus,
.pagination-next-link:active:focus,
.pagination-prev-link:focus,
.pagination-prev-link:active:focus,
.pagination-first-link:focus,
.pagination-first-link:active:focus,
.pagination-last-link:focus,
.pagination-last-link:active:focus {
  outline: none;
}

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

[dir] .btn:hover {
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

.btn:focus {
  text-decoration: none;
}

[dir] .btn:focus {
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

input[type="submit"]:hover {
  text-decoration: none;
}

[dir] input[type="submit"]:hover {
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

input[type="submit"]:focus {
  text-decoration: none;
}

[dir] input[type="submit"]:focus {
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

.section-subscribe button:hover {
  text-decoration: none;
}

[dir] .section-subscribe button:hover {
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

.section-subscribe button:focus {
  text-decoration: none;
}

[dir] .section-subscribe button:focus {
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

.article-subscribe button:hover {
  text-decoration: none;
}

[dir] .article-subscribe button:hover {
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

.article-subscribe button:focus {
  text-decoration: none;
}

[dir] .article-subscribe button:focus {
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

.community-follow button:hover {
  text-decoration: none;
}

[dir] .community-follow button:hover {
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

.community-follow button:focus {
  text-decoration: none;
}

[dir] .community-follow button:focus {
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

.requests-table-toolbar .organization-subscribe button:hover {
  text-decoration: none;
}

[dir] .requests-table-toolbar .organization-subscribe button:hover {
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

.requests-table-toolbar .organization-subscribe button:focus {
  text-decoration: none;
}

[dir] .requests-table-toolbar .organization-subscribe button:focus {
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

.subscriptions-subscribe button:hover {
  text-decoration: none;
}

[dir] .subscriptions-subscribe button:hover {
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

.subscriptions-subscribe button:focus {
  text-decoration: none;
}

[dir] .subscriptions-subscribe button:focus {
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

.edit-profile-button a:hover {
  text-decoration: none;
}

[dir] .edit-profile-button a:hover {
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

.edit-profile-button a:focus {
  text-decoration: none;
}

[dir] .edit-profile-button a:focus {
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

.pagination-next-link:hover {
  text-decoration: none;
}

[dir] .pagination-next-link:hover {
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

.pagination-next-link:focus {
  text-decoration: none;
}

[dir] .pagination-next-link:focus {
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

.pagination-prev-link:hover {
  text-decoration: none;
}

[dir] .pagination-prev-link:hover {
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

.pagination-prev-link:focus {
  text-decoration: none;
}

[dir] .pagination-prev-link:focus {
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

.pagination-first-link:hover {
  text-decoration: none;
}

[dir] .pagination-first-link:hover {
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

.pagination-first-link:focus {
  text-decoration: none;
}

[dir] .pagination-first-link:focus {
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

.pagination-last-link:hover {
  text-decoration: none;
}

[dir] .pagination-last-link:hover {
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

.pagination-last-link:focus {
  text-decoration: none;
}

[dir] .pagination-last-link:focus {
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

.btn:active {
  outline: none;
}

[dir] .btn:active {
  background-image: none;
  box-shadow: inset 0 1px 3px rgba(55, 60, 80, 0.15);
}

input[type="submit"]:active {
  outline: none;
}

[dir] input[type="submit"]:active {
  background-image: none;
  box-shadow: inset 0 1px 3px rgba(55, 60, 80, 0.15);
}

.section-subscribe button:active {
  outline: none;
}

[dir] .section-subscribe button:active {
  background-image: none;
  box-shadow: inset 0 1px 3px rgba(55, 60, 80, 0.15);
}

.article-subscribe button:active {
  outline: none;
}

[dir] .article-subscribe button:active {
  background-image: none;
  box-shadow: inset 0 1px 3px rgba(55, 60, 80, 0.15);
}

.community-follow button:active {
  outline: none;
}

[dir] .community-follow button:active {
  background-image: none;
  box-shadow: inset 0 1px 3px rgba(55, 60, 80, 0.15);
}

.requests-table-toolbar .organization-subscribe button:active {
  outline: none;
}

[dir] .requests-table-toolbar .organization-subscribe button:active {
  background-image: none;
  box-shadow: inset 0 1px 3px rgba(55, 60, 80, 0.15);
}

.subscriptions-subscribe button:active {
  outline: none;
}

[dir] .subscriptions-subscribe button:active {
  background-image: none;
  box-shadow: inset 0 1px 3px rgba(55, 60, 80, 0.15);
}

.edit-profile-button a:active {
  outline: none;
}

[dir] .edit-profile-button a:active {
  background-image: none;
  box-shadow: inset 0 1px 3px rgba(55, 60, 80, 0.15);
}

.pagination-next-link:active {
  outline: none;
}

[dir] .pagination-next-link:active {
  background-image: none;
  box-shadow: inset 0 1px 3px rgba(55, 60, 80, 0.15);
}

.pagination-prev-link:active {
  outline: none;
}

[dir] .pagination-prev-link:active {
  background-image: none;
  box-shadow: inset 0 1px 3px rgba(55, 60, 80, 0.15);
}

.pagination-first-link:active {
  outline: none;
}

[dir] .pagination-first-link:active {
  background-image: none;
  box-shadow: inset 0 1px 3px rgba(55, 60, 80, 0.15);
}

.pagination-last-link:active {
  outline: none;
}

[dir] .pagination-last-link:active {
  background-image: none;
  box-shadow: inset 0 1px 3px rgba(55, 60, 80, 0.15);
}

.btn--default,
.section-subscribe button,
.article-subscribe button,
.community-follow button,
.requests-table-toolbar .organization-subscribe button,
.subscriptions-subscribe button,
.edit-profile-button a,
.pagination-next-link,
.pagination-prev-link,
.pagination-first-link,
.pagination-last-link {
  color: #373C50;
}

[dir] .btn--default,
[dir] .section-subscribe button,
[dir] .article-subscribe button,
[dir] .community-follow button,
[dir] .requests-table-toolbar .organization-subscribe button,
[dir] .subscriptions-subscribe button,
[dir] .edit-profile-button a,
[dir] .pagination-next-link,
[dir] .pagination-prev-link,
[dir] .pagination-first-link,
[dir] .pagination-last-link {
  background-color: #fff;
  border-color: rgba(225, 229, 231, 0);
}

.btn--default:hover,
.btn--default:focus,
.btn--default:active,
.section-subscribe button:hover,
.section-subscribe button:focus,
.section-subscribe button:active,
.article-subscribe button:hover,
.article-subscribe button:focus,
.article-subscribe button:active,
.community-follow button:hover,
.community-follow button:focus,
.community-follow button:active,
.requests-table-toolbar .organization-subscribe button:hover,
.requests-table-toolbar .organization-subscribe button:focus,
.requests-table-toolbar .organization-subscribe button:active,
.subscriptions-subscribe button:hover,
.subscriptions-subscribe button:focus,
.subscriptions-subscribe button:active,
.edit-profile-button a:hover,
.edit-profile-button a:focus,
.edit-profile-button a:active,
.pagination-next-link:hover,
.pagination-next-link:focus,
.pagination-next-link:active,
.pagination-prev-link:hover,
.pagination-prev-link:focus,
.pagination-prev-link:active,
.pagination-first-link:hover,
.pagination-first-link:focus,
.pagination-first-link:active,
.pagination-last-link:hover,
.pagination-last-link:focus,
.pagination-last-link:active {
  color: #1e212c;
}

[dir] .btn--default:hover,
[dir] .btn--default:focus,
[dir] .btn--default:active,
[dir] .section-subscribe button:hover,
[dir] .section-subscribe button:focus,
[dir] .section-subscribe button:active,
[dir] .article-subscribe button:hover,
[dir] .article-subscribe button:focus,
[dir] .article-subscribe button:active,
[dir] .community-follow button:hover,
[dir] .community-follow button:focus,
[dir] .community-follow button:active,
[dir] .requests-table-toolbar .organization-subscribe button:hover,
[dir] .requests-table-toolbar .organization-subscribe button:focus,
[dir] .requests-table-toolbar .organization-subscribe button:active,
[dir] .subscriptions-subscribe button:hover,
[dir] .subscriptions-subscribe button:focus,
[dir] .subscriptions-subscribe button:active,
[dir] .edit-profile-button a:hover,
[dir] .edit-profile-button a:focus,
[dir] .edit-profile-button a:active,
[dir] .pagination-next-link:hover,
[dir] .pagination-next-link:focus,
[dir] .pagination-next-link:active,
[dir] .pagination-prev-link:hover,
[dir] .pagination-prev-link:focus,
[dir] .pagination-prev-link:active,
[dir] .pagination-first-link:hover,
[dir] .pagination-first-link:focus,
[dir] .pagination-first-link:active,
[dir] .pagination-last-link:hover,
[dir] .pagination-last-link:focus,
[dir] .pagination-last-link:active {
  background-color: #fff;
  border-color: rgba(191,200,204,0);
}

input[type="submit"],
.btn--primary {
  color: #fff;
}

[dir] input[type="submit"],
[dir] .btn--primary {
  background-color: rgba(227, 241, 255, 1);
  border-color: rgba(227, 241, 255, 1);
}

input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="submit"]:active,
.btn--primary:hover,
.btn--primary:focus,
.btn--primary:active {
  color: #fff;
}

[dir] input[type="submit"]:hover,
[dir] input[type="submit"]:focus,
[dir] input[type="submit"]:active,
[dir] .btn--primary:hover,
[dir] .btn--primary:focus,
[dir] .btn--primary:active {
  background-color: #a6d2ff;
  border-color: #a6d2ff;
}

.btn--topbar {
  font-size: calc(16px - 2px);
  color: rgba(227, 241, 255, 1);
}

[dir] .btn--topbar {
  padding: calc(16px * 1.5 / 2);
  background-color: transparent;
  box-shadow: none !important;
}

@media (max-width: 991px) {
  .btn--topbar {
    font-size: 16px;
  }
}

.btn--topbar:hover,
.btn--topbar:focus,
.btn--topbar:active {
  /*color: rgba(rgba(227, 241, 255, 1), 0.85); // 85% opaque text*/
  color: #ffffff !important; // Force white text
}

[dir] .btn--topbar:hover,
[dir] .btn--topbar:focus,
[dir] .btn--topbar:active {
  background-color: transparent;
}

[dir] .btn--submit-a-request {
  border-color: rgba(255, 255, 255, 0.3);
}

[dir="ltr"] .btn--submit-a-request {
  padding-right: calc(16px * 1.5 - 2px);
  padding-left: calc(16px * 1.5 - 2px);
}

[dir="rtl"] .btn--submit-a-request {
  padding-right: calc(16px * 1.5 - 2px);
  padding-left: calc(16px * 1.5 - 2px);
}

@media (max-width: 991px) {
  .btn--submit-a-request {
    width: 100%;
  }

  [dir] .btn--submit-a-request {
    margin: 0 0 30px;
  }
}

@media (max-width: 991px) {
  [dir] .topbar__locales {
    margin: 20px 0 0;
  }
}

/* need to delete this post May 2025 update
.btn--login {
  font-size: calc(16px - 2px);
  color: rgba(33, 96, 212, 1);
}

[dir] .btn--login {
  padding: calc(16px * 1.5 / 2)
    calc(16px * 1.5 * 1.85);
  background-color: rgba(227, 241, 255, 1);
  box-shadow: 0 1px 3px rgba(55, 60, 80, 0.15);
}

@media (max-width: 991px) {
  .btn--login {
    width: 100%;
    font-size: 16px;
  }

  [dir] .btn--login {
    margin: 0;
  }
}

.btn--login:hover {
  color: #373C50;
  opacity: 0.08;
}
.btn--login:hover {
  color: #373C50;
  opacity: 0.95;
}


[dir] .btn--login:hover {
  border-color: transparent;
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}
[dir] .btn--login:hover {
  background-color: #fff;
}


.btn--login:focus {
  color: #373C50;
  opacity: 0.08;
}

[dir] .btn--login:focus {
  border-color: transparent;
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

.btn--login:active {
  color: #373C50;
  opacity: 0.08;
}

[dir] .btn--login:active {
  border-color: transparent;
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

.btn--login {
  font-size: calc(16px - 2px);
  color: rgba(33, 96, 212, 1);
}

[dir] .btn--login {
  padding: calc(16px * 1.5 / 2)
    calc(16px * 1.5 * 1.85);
  background-color: rgba(227, 241, 255, 1);
  box-shadow: 0 1px 3px rgba(55, 60, 80, 0.15);
}

@media (max-width: 991px) {
  .btn--login {
    width: 100%;
    font-size: 16px;
  }

  [dir] .btn--login {
    margin: 0;
  }
}

.btn--login:hover {
  color: #373C50;
  opacity: 0.8;
}

[dir] .btn--login:hover {
  border-color: transparent;
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.8);
}

.btn--login:focus {
  color: #373C50;
  opacity: 0.8;
}

[dir] .btn--login:focus {
  border-color: transparent;
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.8);
}

.btn--login:active {
  color: #373C50;
  opacity: 0.8;
}

[dir] .btn--login:active {
  border-color: transparent;
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.8);
}

// May 2025: Updated login button styling

.btn--login {
  font-size: calc(16px - 2px);
  color: rgba(33, 96, 212, 1);
  transition: color 0.2s ease, box-shadow 0.2s ease;
}

[dir] .btn--login {
  padding: calc(16px * 1.5 / 2)
           calc(16px * 1.5 * 1.85);
  background-color: rgba(227, 241, 255, 1);
  box-shadow: 0 1px 3px rgba(55, 60, 80, 0.15);
}

@media (max-width: 991px) {
  .btn--login {
    width: 100%;
    font-size: 16px;
  }

  [dir] .btn--login {
    margin: 0;
  }
}

.btn--login:hover,
.btn--login:focus,
.btn--login:active {
  color: rgba(#373C50, 0.8); // Text only, not full opacity
}

[dir] .btn--login:hover,
[dir] .btn--login:focus,
[dir] .btn--login:active {
  border-color: transparent;
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.8);
}*/

/* May 2025 sign in button update after color palette change */
.btn--login {
  font-size: calc(16px - 2px);
  color: rgba(33, 96, 212, 1);
  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

[dir] .btn--login {
  padding: calc(16px * 1.5 / 2)
    calc(16px * 1.5 * 1.85);
  background-color: rgba(227, 241, 255, 1);
  box-shadow: 0 1px 3px rgba(55, 60, 80, 0.15);
  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

@media (max-width: 991px) {
  .btn--login {
    width: 100%;
    font-size: 16px;
  }

  [dir] .btn--login {
    margin: 0;
  }
}

.btn--login:hover,
.btn--login:focus,
.btn--login:active {
  color: #373C50;
}

[dir] .btn--login:hover,
[dir] .btn--login:focus,
[dir] .btn--login:active {
  background-color: #4aa5ff;
  border-color: transparent;
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}



.community-subscribe button {
  position: relative;
}

[dir="ltr"] .community-subscribe button {
  padding-left: calc(16px * 1.5 * 1.3);
}

[dir="rtl"] .community-subscribe button {
  padding-right: calc(16px * 1.5 * 1.3);
}

.article-subscribe button {
  position: relative;
}

[dir="ltr"] .article-subscribe button {
  padding-left: calc(16px * 1.5 * 1.3);
}

[dir="rtl"] .article-subscribe button {
  padding-right: calc(16px * 1.5 * 1.3);
}

.community-subscribe button:before,
.article-subscribe button:before {
  position: absolute;
  top: 48%;
  display: block;
  font-size: 26px;
  line-height: 1;
  color: #64b1ff;
  content: "+";
}

[dir] .community-subscribe button:before,
[dir] .article-subscribe button:before {
  transform: translateY(-50%);
}

[dir="ltr"] .community-subscribe button:before,
[dir="ltr"] .article-subscribe button:before {
  left: 9px;
  margin-right: 5px;
}

[dir="rtl"] .community-subscribe button:before,
[dir="rtl"] .article-subscribe button:before {
  right: 9px;
  margin-left: 5px;
}

[dir] .callout {
  padding: calc(16px * 1.5) 20px;
  margin-bottom: calc(16px * 1.5);
  background-color: #eceeef;
}

[dir="ltr"] .callout {
  border-left-style: solid;
  border-left-width: 5px;
}

[dir="rtl"] .callout {
  border-right-style: solid;
  border-right-width: 5px;
}

[dir] .callout p:last-child {
  margin-bottom: 0;
}

[dir] .callout--transparent {
  background-color: transparent;
  border-color: #dedede;
  border-width: 1px;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.14);
}

.callout--success {
  color: #373C50;
}

[dir] .callout--success {
  background-color: #d1fff4;
  border-color: #0c9;
}

.callout--success .callout__title {
  color: #0c9;
}

.callout--info {
  color: #373C50;
}

[dir] .callout--info {
  background-color: #F2F9FF;
  border-color: #5bc0de;
}

.callout--info .callout__title {
  color: #5bc0de;
}

.callout--warning {
  color: #373C50;
}

[dir] .callout--warning {
  background-color: #fffbf3;
  border-color: #fad782;
}

/*Updated on 2025-03-19: Adjusted for a darker warning color instead of #fad782;*/
.callout--warning .callout__title {
  color: #A38D3F !important;
}

.callout--danger {
  color: #373C50;
}

[dir] .callout--danger {
  background-color: #fff5f5;
  border-color: #ff5252;
}

.callout--danger .callout__title {
  color: #ff5252;
}

.callout--primary {
  color: #373C50;
}

[dir] .callout--primary {
  background-color: #e9efff;
  border-color: rgba(0, 44, 151, 1);
}

.callout--primary .callout__title {
  color: rgba(0, 44, 151, 1);
}

[dir] .callout--dashed {
  border-style: dashed;
  border-width: 1px;
}

.topbar {
  position: relative;
  z-index: 99;
  width: 100%;
  color: rgba(76, 96, 114, 1);
}

[dir] .topbar {
  margin-bottom: calc(16px * 1.5);
  background-color: rgba(33, 96, 212, 1);
}

@media (min-width: 1200px) {
  [dir] .topbar {
    margin-bottom: calc(16px * 1.5 * 2);
  }
}

[dir] .topbar--bordered {
  border-color: $topbar_border_color transparent #eee transparent;
  border-style: solid;
  border-width: 4px 0 1px;
}

.topbar__inner {
  width: 100%;
}

[dir] .topbar__inner {
  margin: 0 auto;
}

@media (min-width: 1200px) {
  .topbar__inner {
    display: flex;
    align-items: center;
  }
}

.topbar__col {
  position: relative;
}

@media (max-width: 1199px) {
  [dir] .topbar__col {
    padding: calc(16px * 1.5) 0;
  }
}

@media (min-width: 1200px) {
  [dir] .topbar__col {
    padding: calc(16px * 1.5 / 2) 0;
  }
}

@media (min-width: 1200px) {
  [dir="ltr"] .topbar__controls {
    float: right;
  }

  [dir="rtl"] .topbar__controls {
    float: left;
  }
}

@media (max-width: 1199px) {
  .topbar__controls {
    width: 100%;
    max-width: 266px;
  }

  [dir] .topbar__controls {
    margin: 0 auto;
    text-align: center;
  }
}

@media (max-width: 767px) {
  [dir] .topbar__controls > * + * {
    margin-top: 16px;
  }
}

@media (min-width: 768px) {
  [dir="ltr"] .topbar__controls > * + * {
    margin-left: 16px;
  }

  [dir="rtl"] .topbar__controls > * + * {
    margin-right: 16px;
  }
}

@media (max-width: 1199px) {
  .topbar__collapse {
    display: none;
  }

  [dir] .topbar__collapse {
    padding-top: calc(16px * 1.5 / 2);
    padding-bottom: calc(16px * 1.5);
  }
}

@media (min-width: 1200px) {
  .topbar__collapse {
    display: block !important;
  }
}

@media (max-width: 1199px) {
  .topbar__menu {
    position: absolute;
    width: 100%;
  }

  [dir] .topbar__menu {
    padding: 0 15px;
    background: #205ccb;
  }

  [dir="ltr"] .topbar__menu {
    left: 0;
  }

  [dir="rtl"] .topbar__menu {
    right: 0;
  }
}

@media (min-width: 1200px) {
  .topbar__menu {
    flex: 1 1 100px;
  }
}

@media (min-width: 1200px) {
  [dir] .topbar__col {
    padding: 30px 0;
  }
}

@media (min-width: 1200px) {
  [dir="ltr"] .topbar__logo {
    margin-right: calc(16px * 1.5 * 2.6);
  }

  [dir="rtl"] .topbar__logo {
    margin-left: calc(16px * 1.5 * 2.6);
  }
}

.topbar__navigation {
  display: block;
}

[dir] .topbar__navigation {
  padding: 0;
}

@media (min-width: 1200px) {
  [dir] .topbar__navigation {
    margin: 0;
  }

  [dir="ltr"] .topbar__navigation {
    float: left;
  }

  [dir="rtl"] .topbar__navigation {
    float: right;
  }
}

@media (max-width: 1199px) {
  .topbar__navigation {
    display: flex;
    width: 100%;
    max-width: 400px;
    justify-content: center;
    flex-wrap: wrap;
  }

  [dir] .topbar__navigation {
    margin: 0 auto 10px;
  }
}

.topbar__navigation li {
  display: block;

  list-style: none;
}

[dir] .topbar__navigation li {
  padding: 2px 0 0;
}

[dir="ltr"] .topbar__navigation li {
  float: left;
}

[dir="rtl"] .topbar__navigation li {
  float: right;
}

@media (min-width: 1200px) {
  [dir="ltr"] .topbar__navigation li {
    margin-left: calc(16px * 1.5 * 1.5);
  }

  [dir="rtl"] .topbar__navigation li {
    margin-right: calc(16px * 1.5 * 1.5);
  }

  [dir="ltr"] .topbar__navigation li:first-child {
    margin-left: 0;
  }

  [dir="rtl"] .topbar__navigation li:first-child {
    margin-right: 0;
  }
}

@media (max-width: 1199px) {
  [dir] .topbar__navigation li {
    margin: 0 calc(16px * 1.5 * 0.75);
  }
}

.topbar__navigation li a {
  display: inline-block;
  font-weight: 600;
  color: #fff;
  transition: opacity 0.2s;
}

[dir] .topbar__navigation li a {
  padding: calc(16px * 1.5 / 2) 0;
}

@media (min-width: 1200px) {
  .topbar__navigation li a {
    font-size: calc(16px - 2px);
  }
}

@media (max-width: 1199px) {
  .topbar__navigation li a {
    font-size: 16px;
  }
}

.topbar__navigation li a:hover {
  opacity: 0.6;
}

.logo-wrapper {
  display: inline-block;
  vertical-align: middle;
}

.logo img {
  display: block;
  height: 35px !important;
}

.help-center-name {
  display: inline-block;
  vertical-align: middle;
}

[dir] .help-center-name {
  margin: 0;
}

@media (max-width: 767px) {
  .help-center-name {
    display: none;
  }
}

.hero-unit {
  position: relative;
  z-index: 2;
}

[dir] .hero-unit {
  margin-top: calc(16px * 1.5 * -1);
  background-color: rgba(33, 96, 212, 1);
}

@media (min-width: 1200px) {
  [dir] .hero-unit {
    margin-top: calc(16px * 1.5 * -2);
  }

  .hero-unit .row {
    flex-wrap: nowrap;
  }
}

@media (min-width: 992px) {
  [dir] .hero-unit .search-box {
    margin-top: 5%;
  }
}

@media (max-width: 991px) {
  [dir] .hero-unit .search-box {
    margin-top: 40px;
  }
}

.no-custom-blocks:after {
  position: absolute;
  bottom: 0;
  z-index: -1;
  display: block;
  width: 100vw;
  height: 20px;
  content: "";
}

[dir] .no-custom-blocks:after {
  background: rgba(248, 249, 252, 1);
}

[dir="ltr"] .no-custom-blocks:after {
  left: 0;
}

[dir="rtl"] .no-custom-blocks:after {
  right: 0;
}

@media (min-width: 992px) {
  .hero-unit__row {
    display: flex;
    align-items: center;
  }
}

@media (max-width: 991px) {
  [dir] .hero-unit__row {
    text-align: center;
  }
}

.hero-unit__title {
  font-size: calc(calc(16px * 2.11) * 1.38);
  font-weight: 600;
  line-height: calc(1.5 - 0.22);
  color: #ffffff;
}

@media (min-width: 992px) {
  [dir] .hero-unit__title {
    margin-bottom: 2%;
  }
}

@media (max-width: 991px) {
  [dir] .hero-unit__title {
    margin-bottom: 30px;
  }
}

.hero-unit__title .underline {
  position: relative;
  z-index: 2;
  display: inline-block;
}

[dir="ltr"] .hero-unit__title .underline {
  text-shadow: 3px 0 0 rgba(33, 96, 212, 1), -3px 0 0 rgba(33, 96, 212, 1);
}

[dir="rtl"] .hero-unit__title .underline {
  text-shadow: -3px 0 0 rgba(33, 96, 212, 1), 3px 0 0 rgba(33, 96, 212, 1);
}

.hero-unit__title .underline:before {
  position: absolute;
  bottom: 5px;
  z-index: -1;
  display: block;
  width: 100%;
  height: 3px;
  content: "";
}

[dir] .hero-unit__title .underline:before {
  background: #fff;
}

[dir="ltr"] .hero-unit__title .underline:before {
  left: 0;
}

[dir="rtl"] .hero-unit__title .underline:before {
  right: 0;
}

.hero-unit__subtitle {
  max-width: 500px;
  line-height: calc(1.5 + 0.22);
  /* opacity: 0.7; */
  color: rgba(255, 255, 255, 1);
}

@media (max-width: 991px) {
  [dir] .hero-unit__subtitle {
    margin: 0 auto 30px;
  }
}

@media (min-width: 992px) {
  [dir="ltr"] .hero-unit__image-box {
    text-align: right;
  }

  [dir="rtl"] .hero-unit__image-box {
    text-align: left;
  }
}

@media (max-width: 991px) {
  [dir] .hero-unit__image-box {
    text-align: center;
  }
}

.hero-unit__image {
  max-width: 95%;
}

.lines-button {
  width: calc(27px + 16px);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: 0.3s;
}

[dir] .lines-button {
  padding: 8px;
  cursor: pointer;
  background-color: transparent !important;
  border: 0;
  box-shadow: none !important;
}

[dir="ltr"] .lines-button {
  float: right;
}

[dir="rtl"] .lines-button {
  float: left;
}

.lines-button:focus,
.lines-button:active {
  outline: none;
}

.lines-button:hover {
  opacity: 1;
}

.lines-button:active {
  outline: 0;
  transition: none;
}

[dir] .lines-button:active {
  box-shadow: none;
}

.lines-button:focus {
  outline: 0;
}

/*common to all three-liners */

.lines,
.lines:before,
.lines:after {
  display: block;
  height: 2px;
  transition: 0.3s;
}

[dir] .lines,
[dir] .lines:before,
[dir] .lines:after {
  background: rgba(76, 96, 114, 1);
  border-radius: 2px;
}

.lines {
  position: relative;
  width: 22px;
}

[dir="ltr"] .lines {
  margin: 8px 0 8px 5px;
}

[dir="rtl"] .lines {
  margin: 8px 5px 8px 0;
}

.lines:before,
.lines:after {
  position: absolute;
  width: 27px;
  content: "";
}

[dir="ltr"] .lines:before,
[dir="ltr"] .lines:after {
  right: 0;
  transform-origin: calc(30px / 14) center;
}

[dir="rtl"] .lines:before,
[dir="rtl"] .lines:after {
  left: 0;
  transform-origin: calc(100% - (30px / 14)) center;
}

.lines:before {
  top: 8px;
}

.lines:after {
  bottom: 8px;
}

[dir] .lines-button.is-active {
  transform: scale3d(0.8, 0.8, 0.8);
}

[dir] .lines-button.is-active .lines {
  background: transparent;
}

.lines-button.is-active .lines:before,
.lines-button.is-active .lines:after {
  top: 0;
  width: 30px;
}

[dir] .lines-button.is-active .lines:before,
[dir] .lines-button.is-active .lines:after {
  transform-origin: 50% 50%;
}

[dir="ltr"] .lines-button.is-active .lines:before {
  transform: translateX(2px) rotate3d(0, 0, 1, 45deg);
}

[dir="rtl"] .lines-button.is-active .lines:before {
  transform: translateX(-2px) rotate3d(0, 0, 1, -45deg);
}

[dir="ltr"] .lines-button.is-active .lines:after {
  transform: translateX(2px) rotate3d(0, 0, 1, -45deg);
}

[dir="rtl"] .lines-button.is-active .lines:after {
  transform: translateX(-2px) rotate3d(0, 0, 1, 45deg);
}

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

.avatar--agent:before {
  position: absolute;
  bottom: -4px;
  display: flex;
  width: 18px;
  height: 18px;
  font-family: "Font Awesome 5 Free";
  font-size: 6px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  content: "\f007";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  align-items: center;
  justify-content: center;
}

[dir] .avatar--agent:before {
  background-color: rgba(0, 44, 151, 1);
  border: 2px solid rgba(248, 249, 252, 1);
  border-radius: 100%;
}

[dir="ltr"] .avatar--agent:before {
  right: -4px;
}

[dir="rtl"] .avatar--agent:before {
  left: -4px;
}

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

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

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

[dir="ltr"] .user-avatar--topbar {
  margin-right: 8px;
}

[dir="rtl"] .user-avatar--topbar {
  margin-left: 8px;
}

.search-box {
  position: relative;
}

[dir] .search-box {
  clear: both;
}

.search-box svg {
  position: absolute;
  top: 50%;
  display: block;
  width: 25px;
  height: 26px;
  fill: rgba(0, 44, 151, 1);
}

[dir] .search-box svg {
  transform: translateY(-50%);
}

@media (min-width: 992px) {
  [dir="ltr"] .search-box svg {
    left: 30px;
  }

  [dir="rtl"] .search-box svg {
    right: 30px;
  }
}

@media (max-width: 991px) {
  [dir="ltr"] .search-box svg {
    left: 24px;
  }

  [dir="rtl"] .search-box svg {
    right: 24px;
  }
}

.search-box .search {
  width: 100%;
}

.search-box #query {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

[dir] .search-box #query {
  background: #fff;
  border: none;
  border-bottom: 1px solid #eceeef;
  border-radius: 0 0 0 0;
}

@media (min-width: 992px) {
  .search-box #query {
    height: 95px;
    font-size: calc(16px * 1.45);
  }

  [dir="ltr"] .search-box #query {
    padding: 2px 10px 0 70px;
  }

  [dir="rtl"] .search-box #query {
    padding: 2px 70px 0 10px;
  }
}

@media (max-width: 991px) {
  .search-box #query {
    height: 73px;
    font-size: calc(16px * 1.21);
  }

  [dir="ltr"] .search-box #query {
    padding: 2px 10px 0 60px;
  }

  [dir="rtl"] .search-box #query {
    padding: 2px 60px 0 10px;
  }
}

[dir] .search-box.search-box_page #query {
  border-bottom: none;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(55, 60, 80, 0.05);
}

.search-box input[type="submit"] {
  display: none;
}

[dir] .custom-blocks {
  background: #fff;
  border-radius: 0 0 0 0;
  box-shadow: 0 1px 3px rgba(55, 60, 80, 0.05);
}

@media (min-width: 768px) {
  [dir] .custom-blocks {
    padding: calc(15px * 2);
  }

  .custom-blocks .row {
    flex-wrap: nowrap;
  }
}

@media (max-width: 767px) {
  [dir] .custom-blocks {
    padding: 0 15px 15px;
  }

  [dir] .custom-blocks .column {
    padding-top: 15px;
  }
}

.custom-block__link {
  display: block;
  height: 100%;
  transition: border-color 0.3s;
}

[dir] .custom-block__link {
  text-align: center;
  background: #f7f7f9;
  border: 1px solid #eceeef;
  border-radius: 0;
}

[dir] .custom-block__link:hover {
  border-color: rgba(0, 44, 151, 1);
}

.custom-block__link:hover .custom-block__title {
  color: rgba(0, 44, 151, 1);
}

@media (min-width: 768px) {
  [dir] .custom-block__link {
    padding: calc(15px * 2);
  }
}

@media (max-width: 767px) {
  [dir] .custom-block__link {
    padding: 15px;
  }
}

.custom-block__icon {
  position: relative;
  width: 86px;
  height: 86px;
}

[dir] .custom-block__icon {
  margin: calc(16px * 1.5) auto
    calc(16px * 1.5 * 1.6);
}

.custom-block__icon img {
  position: absolute;
  top: 50%;
  max-width: 100%;
  max-height: 100%;
}

[dir="ltr"] .custom-block__icon img {
  left: 50%;
  transform: translate(-50%, -50%);
}

[dir="rtl"] .custom-block__icon img {
  right: 50%;
  transform: translate(50%, -50%);
}

.custom-block__icon svg {
  width: 100%;
  height: 100%;
  fill: rgba(33, 96, 212, 1);
}

.custom-block__title {
  font-size: calc(16px * 1.45);
  font-weight: 600;
  color: #373C50;
  transition: color 0.3s;
}

[dir] .custom-block__title {
  margin-bottom: 16px;
}

.custom-block__description {
  font-size: calc(16px * 0.89);
  color: #9aa0b9;
}

[dir] .custom-block__description {
  margin: 0;
}

@media (min-width: 992px) {
  [dir] .custom-block__description {
    padding: 0 calc(15px * 2);
  }
}

@media (max-width: 767px) {
  [dir] .custom-block__description {
    padding: 0 calc(15px * 2);
  }
}

@media (min-width: 768px) {
  [dir] .category-tree__item {
    margin-top: calc(16px * 1.5 * 3);
  }
}

@media (max-width: 767px) {
  [dir] .category-tree__item {
    margin-top: calc(16px * 1.5 * 2);
  }
}

[dir] .category-tree__title {
  margin: 0;
}

.category-tree__title-link {
  color: #373C50;
}

.category-tree__title-link:hover,
.category-tree__title-link:focus,
.category-tree__title-link:active {
  color: rgba(0, 44, 151, 1);
}

.category-tree__description {
  font-size: calc(16px - 1px);
  color: #9aa0b9;
}

[dir] .category-tree__description {
  margin: 5px 0 calc(16px * 1.5 * 1.5);
}

@media (max-width: 767px) {
  [dir] .category-tree__description {
    margin-bottom: calc(16px * 1.5);
  }
}

.section {
  overflow: hidden;
  transition: box-shadow 0.3s;
}

[dir] .section {
  background: #fff;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(55, 60, 80, 0.05);
}

@media (min-width: 768px) {
  [dir] .section {
    margin-top: calc(16px * 1.5 * 0.9);
  }
}

@media (max-width: 767px) {
  [dir] .section {
    margin-top: calc(16px * 1.5 * 0.8);
  }
}

[dir] .section.is-active {
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

.section__title {
  position: relative;
}

[dir] .section__title {
  cursor: pointer;
}

@media (min-width: 768px) {
  [dir="ltr"] .section__title {
    padding: calc(16px * 1.5 * 1.15) calc(15px * 5)
      calc(16px * 1.5 * 1.15) calc(15px * 2);
  }

  [dir="rtl"] .section__title {
    padding: calc(16px * 1.5 * 1.15) calc(15px * 2)
      calc(16px * 1.5 * 1.15) calc(15px * 5);
  }
}

@media (max-width: 767px) {
  [dir="ltr"] .section__title {
    padding: calc(16px * 1.5) calc(15px * 4)
      calc(16px * 1.5) 15px;
  }

  [dir="rtl"] .section__title {
    padding: calc(16px * 1.5) 15px
      calc(16px * 1.5) calc(15px * 4);
  }
}

.section__title:hover .section__title-name,
.section__title:focus .section__title-name,
.section__title:active .section__title-name {
  color: #373C50;
}

.section__title.is-active .section__title-icon {
  color: #fff;
}

[dir] .section__title.is-active .section__title-icon {
  background: rgba(0, 44, 151, 1);
}

[dir="ltr"] .section__title.is-active .section__title-icon {
  transform: rotate(180deg);
}

[dir="rtl"] .section__title.is-active .section__title-icon {
  transform: rotate(-180deg);
}

.section__title-name {
  font-size: calc(16px * 1.11);
  font-weight: 500;
  color: rgba(0, 44, 151, 1);
  transition: color 0.3s;
}

[dir] .section__title-name {
  margin: 0;
}

.section__title-icon {
  position: absolute;
  top: calc(50% - 15px);
  width: 30px;
  height: 30px;
  font-size: calc(16px * 1.45);
  color: rgba(0, 44, 151, 1);
  transition: all 0.3s;
}

[dir] .section__title-icon {
  text-align: center;
  background: #a1bdff;
  border-radius: 50%;
}

[dir="ltr"] .section__title-icon {
  right: calc(15px * 2);
}

[dir="rtl"] .section__title-icon {
  left: calc(15px * 2);
}

.section__title-icon .fa {
  display: block;
  line-height: 30px;
}

.article-list {
  display: none;
}

[dir] .article-list {
  margin-top: calc(15px * -1);
  margin-bottom: 0;
}

.article-list.article-list_page {
  display: block;
}

[dir] .article-list.article-list_page {
  margin-top: 0;
}

@media (min-width: 768px) {
  [dir] .article-list {
    padding: 0 calc(15px * 2);
  }
}

@media (max-width: 767px) {
  [dir] .article-list {
    padding: 0 15px;
  }
}

.article-list__item {
  display: block;
  list-style: none;
}

[dir] .article-list__item {
  padding: calc(16px * 1.5 * 0.8) 0;
  border-top: 1px solid #eceeef;
}

[dir] .article-list__item:first-child {
  border: none;
}

.article-list__item .fa {
  width: 16px;
  height: 16px;
  font-size: calc(16px - 6px);
  line-height: 1.5;
  color: rgba(39, 144, 255, 1);
}

[dir] .article-list__item .fa {
  text-align: center;
  border: 1px solid rgba(39, 144, 255, 1);
  border-radius: 50%;
  transform: translateY(-2px);
}

[dir="ltr"] .article-list__item .fa {
  margin-right: calc(15px / 2);
}

[dir="rtl"] .article-list__item .fa {
  margin-left: calc(15px / 2);
}

.article-list__item-link {
  color: #4c536e;
}

.article-list__item-link:hover,
.article-list__item-link:focus,
.article-list__item-link:active {
  color: rgba(39, 144, 255, 1);
}

@media (min-width: 768px) {
  [dir] .promoted-articles {
    margin-top: calc(16px * 1.5 * 3);
  }
}

@media (max-width: 767px) {
  [dir] .promoted-articles {
    margin-top: calc(16px * 1.5 * 2);
  }
}

[dir] .promoted-articles__title {
  margin: 0;
}

.promoted-articles__description {
  font-size: calc(16px - 1px);
  color: #9aa0b9;
}

[dir] .promoted-articles__description {
  margin: 5px 0 calc(16px * 1.5 / 3);
}

@media (max-width: 767px) {
  [dir] .promoted-articles__description {
    margin-bottom: calc(16px * 1.5 / 4);
  }
}

@media (min-width: 768px) {
  [dir] .promoted-articles__list .column {
    padding-top: calc(15px * 2);
  }
}

@media (max-width: 767px) {
  [dir] .promoted-articles__list .column {
    padding-top: calc(16px * 1.5 * 0.8);
  }
}

.promoted-articles__item {
  width: 100%;
  height: 100%;
  transition: box-shadow 0.3s;
}

[dir] .promoted-articles__item {
  padding: 15px calc(15px * 2);
  background: #fff;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(55, 60, 80, 0.05);
}

@media (max-width: 767px) {
  [dir] .promoted-articles__item {
    padding: 15px calc(15px * 2 - 5px);
  }
}

[dir] .promoted-articles__item:hover {
  box-shadow: 0 6px 12px rgba(55, 60, 80, 0.08);
}

.promoted-articles__item-title {
  display: block;
  font-size: calc(16px * 1.21);
  font-weight: 500;
}

[dir] .promoted-articles__item-title {
  margin-bottom: 5px;
}

.promoted-articles__item-text {
  font-size: calc(16px - 2px);
  color: #9aa0b9;
}

[dir] .promoted-articles__item-text {
  margin: 0;
}

.promoted-articles__item-header {
  overflow: hidden;
}

[dir] .promoted-articles__item-header {
  margin-bottom: calc(16px * 1.5 / 1.6);
}

.promoted-articles__item-img {
  width: 42px;
  height: 42px;
  overflow: hidden;
}
.article img {
  box-shadow: 3px 3px 10px #ccc;
}

[dir] .promoted-articles__item-img {
  margin: 0;
  border-radius: 50%;
}

[dir="ltr"] .promoted-articles__item-img {
  float: left;
}

[dir="rtl"] .promoted-articles__item-img {
  float: right;
}

.promoted-articles__item-img img {
  display: block;
  width: 100%;
  height: 100%;
}

.promoted-articles__item-time {
  font-size: calc(16px - 4px);
  line-height: 42px;
  color: #9aa0b9;
}

[dir] .promoted-articles__item-time {
  margin: 0;
}

[dir="ltr"] .promoted-articles__item-time {
  float: right;
}

[dir="rtl"] .promoted-articles__item-time {
  float: left;
}

[dir] .still-have-questions {
  background: #fff;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(55, 60, 80, 0.05);
}

@media (min-width: 768px) {
  [dir] .still-have-questions {
    padding: calc(15px * 2 + 6px) calc(15px * 4.7);
    margin-top: calc(16px * 1.5 * 3.1);
  }
}

@media (max-width: 767px) {
  [dir] .still-have-questions {
    padding: calc(15px * 2 + 6px) calc(15px * 2 - 5px);
    margin-top: calc(16px * 1.5 * 1.92);
    text-align: center;
  }
}

.still-have-questions .row {
  align-items: center;
}

.still-have-questions__title {
  font-size: calc(calc(16px * 2.11) + 4px);
}

.still-have-questions__title .underline {
  position: relative;
  z-index: 2;
  display: inline-block;
}

.still-have-questions__title .underline:before {
  position: absolute;
  bottom: 2px;
  z-index: -1;
  display: block;
  width: 100%;
  height: 3px;
  content: "";
}

[dir] .still-have-questions__title .underline:before {
  background: #373C50;
}

[dir="ltr"] .still-have-questions__title .underline:before {
  left: 0;
}

[dir="rtl"] .still-have-questions__title .underline:before {
  right: 0;
}

.still-have-questions__text {
  font-size: calc(16px - 1px);
  line-height: calc(1.5 + 0.2);
  color: #9aa0b9;
}

[dir] .still-have-questions__text {
  margin-bottom: calc(16px * 1.5 * 1.15);
}

.still-have-questions__btn {
  font-size: calc(16px - 2px);
  line-height: 1.2;
}

[dir] .still-have-questions__btn {
  padding: 15px calc(15px * 2);
}

@media (min-width: 768px) {
  [dir="ltr"] .still-have-questions__img-box {
    text-align: right;
  }

  [dir="rtl"] .still-have-questions__img-box {
    text-align: left;
  }
}

@media (max-width: 767px) {
  [dir] .still-have-questions__img-box {
    margin-top: calc(16px * 1.5 * 1.5);
    text-align: center;
  }
}

.still-have-questions__img {
  max-width: 100%;
}

.footer {
  font-size: calc(16px - 4px);
  color: #4c536e;
}

[dir] .footer {
  padding: calc(15px * 4) 0;
  margin-top: calc(15px * 1.33);
  background: linear-gradient(to bottom, rgba(248, 249, 252, 1), #fff, #fff);
}

@media (max-width: 767px) {
  [dir] .footer {
    padding-bottom: calc(15px * 1.33);
  }
}

.footer a {
  color: #006ada;
}

.footer a:hover,
.footer a:focus,
.footer a:active {
  color: rgba(0, 44, 151, 1);
}

[dir] .footer__logo {
  margin-bottom: calc(16px * 1.5);
}

.footer__logo img {
  height: 35px !important;
}

.footer__text {
  max-width: 370px;
}

@media (max-width: 767px) {
  [dir] .footer__text {
    margin-bottom: calc(16px * 1.5);
  }
}

.footer__header {
  font-size: calc(16px - 3px);
  font-weight: 600;
  color: #373C50;
  text-transform: uppercase;
}

[dir] .footer__header {
  margin-bottom: calc(16px * 1.5);
}

.footer__menu {
  display: block;
}

[dir] .footer__menu {
  padding: 0;
  margin: 0;
}

@media (max-width: 767px) {
  [dir] .footer__menu {
    margin-bottom: calc(16px * 1.5);
  }
}

.footer__menu li {
  display: block;
  list-style: none;
}

[dir] .footer__menu li {
  padding: 0;
  margin-bottom: calc(16px * 1.5 / 2);
}

.footer__menu_contacts {
  overflow: hidden;
}

@media (max-width: 767px) {
  .footer__menu_contacts li {
    width: 50%;
  }

  [dir] .footer__menu_contacts li {
    margin: 0;
  }

  [dir="ltr"] .footer__menu_contacts li {
    float: left;
  }

  [dir="rtl"] .footer__menu_contacts li {
    float: right;
  }

  [dir="ltr"] .footer__menu_contacts li:nth-child(2n + 2) {
    padding-left: 15px;
  }

  [dir="rtl"] .footer__menu_contacts li:nth-child(2n + 2) {
    padding-right: 15px;
  }
}

.footer__social {
  display: flex;
}

[dir] .footer__social {
  margin-top: 3px;
}

@media (max-width: 767px) {
  .footer__social {
    justify-content: space-around;
  }

  [dir] .footer__social {
    margin-bottom: calc(16px * 1.5);
  }
}

.footer__social-link {
  display: block;
  color: #fff !important;
}

[dir] .footer__social-link {
  text-align: center;
  border-radius: 50%;
}

@media (min-width: 768px) {
  .footer__social-link {
    width: 24px;
    height: 24px;
    line-height: 24px !important;
  }

  [dir="ltr"] .footer__social-link {
    margin-left: 9%;
  }

  [dir="rtl"] .footer__social-link {
    margin-right: 9%;
  }
}

@media (max-width: 767px) {
  .footer__social-link {
    width: 40px;
    height: 40px;
    font-size: 20px !important;
    line-height: 40px !important;
  }

  [dir] .footer__social-link {
    margin: 0;
  }
}

[dir="ltr"] .footer__social-link:first-child {
  margin-left: 0;
}

[dir="rtl"] .footer__social-link:first-child {
  margin-right: 0;
}

[dir] .footer__social-link_facebook {
  background: #3b5998;
}

[dir] .footer__social-link_facebook:hover {
  background: #2a3f6c;
}

[dir] .footer__social-link_twitter {
  background: #9bcef5;
}

[dir] .footer__social-link_twitter:hover {
  background: #55acee;
}

.footer__social-link_google-plus {
  font-size: 12px !important;
}

[dir] .footer__social-link_google-plus {
  background: #e88a82;
}

[dir] .footer__social-link_google-plus:hover {
  background: #dc4e41;
}

[dir] .footer__social-link_linkedin {
  background: #03a9ff;
}

[dir] .footer__social-link_linkedin:hover {
  background: #0077b5;
}

[dir] .footer__social-link_youtube-play {
  background: #e88a82;
}

[dir] .footer__social-link_youtube-play:hover {
  background: #dc4e41;
}

[dir] .footer__social-link_instagram {
  background: #9bcef5;
}

[dir] .footer__social-link_instagram:hover {
  background: #55acee;
}

@media (max-width: 767px) {
  [dir] .footer_copyright {
    text-align: center;
  }
}

.breadcrumbs {
  display: block;
  overflow: hidden;
}

[dir] .breadcrumbs {
  padding: 0;
  margin: 0 0 calc(15px * 1.33);
}

.breadcrumbs li {
  position: relative;
  display: block;
  color: #4c536e;
  list-style: none;
}

[dir] .breadcrumbs li {
  margin: 0;
}

[dir="ltr"] .breadcrumbs li {
  float: left;
  padding: 0 37px 0 0;
}

[dir="rtl"] .breadcrumbs li {
  float: right;
  padding: 0 0 0 37px;
}

@media (min-width: 768px) {
  .breadcrumbs li {
    font-size: 16px;
  }
}

.breadcrumbs li:before {
  position: absolute;
  top: 46%;
  display: block;
  font: normal normal normal 20px / 1.5 "Font Awesome 5 Free";
  font-weight: 900;
  color: rgba(0, 44, 151, 1);
  content: "\f105";
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

[dir] .breadcrumbs li:before {
  transform: translateY(-50%);
}

[dir="ltr"] .breadcrumbs li:before {
  right: 14px;
}

[dir="rtl"] .breadcrumbs li:before {
  left: 14px;
}

[dir="ltr"] .breadcrumbs li:last-child {
  padding-right: 0;
}

[dir="rtl"] .breadcrumbs li:last-child {
  padding-left: 0;
}

.breadcrumbs li:last-child:before {
  display: none;
}

.breadcrumbs li a {
  color: #4c536e;
}

.breadcrumbs li a:hover,
.breadcrumbs li a:focus,
.breadcrumbs li a:active {
  color: #4c536e;
  text-decoration: underline;
}

[dir="rtl"] .breadcrumbs li:before {
  content: "\f104";
}

.article__subscribe {
  display: inline-block;
}

[dir="ltr"] .article__subscribe {
  margin-left: 10px;
}

[dir="rtl"] .article__subscribe {
  margin-right: 10px;
}

.article__header {
  align-items: center;
}

[dir] .article__header {
  margin-bottom: calc(15px * 2);
}

[dir] .article__title {
  margin-bottom: calc(16px * 1.5 / 2);
}

.article__body {
  word-break: break-word;
}

[dir] .article__vote {
  text-align: center;
}

.article__vote-question {
  font-size: calc(16px * 1.45);
  font-weight: 600;
}

[dir] .article__vote-question {
  margin-bottom: calc(15px * 2);
}

@media (max-width: 479px) {
  .article__vote-controls {
    display: flex;
    justify-content: space-around;
  }
}

.article__vote-item {
  font-size: calc(16px - 2px);
  font-weight: 500;
}

[dir] .article__vote-item {
  padding: calc(15px - 2px) calc(15px * 2.8);
  margin: 0 calc(15px - 4px);
}

@media (max-width: 479px) {
  .article__vote-item {
    flex: 1 1 10px;
  }

  [dir] .article__vote-item {
    text-align: center;
  }

  [dir="ltr"] .article__vote-item {
    padding-right: 0;
    padding-left: 0;
  }

  [dir="rtl"] .article__vote-item {
    padding-right: 0;
    padding-left: 0;
  }
}

.article__vote-item:before {
  display: inline-block;
  vertical-align: middle;
  content: "";
}

[dir="ltr"] .article__vote-item:before {
  margin-right: 10px;
}

[dir="rtl"] .article__vote-item:before {
  margin-left: 10px;
}

.article__vote-item:after {
  display: inline-block;
  vertical-align: middle;
  content: attr(title);
}

.article__vote-item_up:before {
  width: 16px;
  height: 12px;
}

.article__vote-item_down:before {
  width: 13px;
  height: 13px;
}

[dir] .article__vote-count {
  padding-top: calc(15px * 2);
}

[dir] .article__attachments {
  margin-bottom: calc(16px * 1.5 * 2);
}

.article-container {
  display: flex;
  flex-wrap: wrap;
}

[dir="ltr"] .article-container {
  margin-right: calc(15px * -1);
  margin-left: calc(15px * -1);
}

[dir="rtl"] .article-container {
  margin-right: calc(15px * -1);
  margin-left: calc(15px * -1);
}

.article-container__column {
  width: 100%;
}

[dir="ltr"] .article-container__column {
  padding-right: 15px;
  padding-left: 15px;
}

[dir="rtl"] .article-container__column {
  padding-right: 15px;
  padding-left: 15px;
}

.article-container__sidenav,
.article-container__toc {
  display: none;
}

.sidenav-enabled .article-container__sidenav,
.toc-enabled .article-container__toc {
  display: block;

}


[dir] .sidenav-enabled .article-container__sidenav {
  padding-bottom: 24px;
}

@media (min-width: 992px) {
  .article-container__article {
    width: calc(100% / 12 * 8);
  }

  .article-container__sidebar {
    width: calc(100% / 12 * 4);
  }

  .toc-enabled .article-container__toc {
    width: calc(100% / 12 * 4);
    min-width: 220px;
  }

  .sidenav-enabled .article-container__sidenav {
    width: calc(100% / 12 * 4);
  }

  [dir="ltr"] .sidenav-enabled .article-container__sidebar {
    margin-left: calc(100% / 12 * 4);
  }

  [dir="rtl"] .sidenav-enabled .article-container__sidebar {
    margin-right: calc(100% / 12 * 4);
  }

  .sidenav-enabled.toc-enabled .article-container__sidenav{
    width: calc(100% / 12 * 3);
  }

  /* .sidenav-enabled.toc-enabled .article-container__toc {
    flex: 0 0 320px !important;
  } */

  /* .sidenav-enabled.toc-enabled .article-container__article {
    width: calc(100% / 12 * 9);
  } */

  [dir="ltr"] .sidenav-enabled.toc-enabled .article-container__sidebar {
    margin-left: calc(100% / 12 * 3);
  }

  [dir="rtl"] .sidenav-enabled.toc-enabled .article-container__sidebar {
    margin-right: calc(100% / 12 * 3);
  }
}

@media (min-width: 1200px) {
  /* .sidenav-enabled.toc-enabled .article-container__article {
    width: calc(100% / 12 * 9);
  } */

  .sidenav-enabled.toc-enabled .article-container__toc {
    width: 320px;
  }
}

.entry-info {
  display: flex;
}

[dir] .entry-info {
  margin: 0;
}

@media (min-width: 992px) {
  .entry-info_right {
    flex-direction: row-reverse;
  }

  [dir="ltr"] .entry-info_right {
    text-align: right;
  }

  [dir="rtl"] .entry-info_right {
    text-align: left;
  }
}

@media (min-width: 992px) {
  [dir="ltr"] .entry-info_right .entry-info__avatar {
    margin-right: 0;
    margin-left: calc(16px * 1.5 * 0.8);
  }

  [dir="rtl"] .entry-info_right .entry-info__avatar {
    margin-right: calc(16px * 1.5 * 0.8);
    margin-left: 0;
  }
}

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

[dir="ltr"] .entry-info__avatar {
  margin-right: calc(16px * 1.5 * 0.8);
}

[dir="rtl"] .entry-info__avatar {
  margin-left: calc(16px * 1.5 * 0.8);
}

[dir] .entry-info__content {
  margin: 0;
}

.entry-info__author {
  display: block;
  font-weight: 500;
}

.entry-info__author a {
  color: #373C50;
}

.entry-info__author a:hover,
.entry-info__author a:focus,
.entry-info__author a:active {
  color: rgba(39, 144, 255, 1);
}

.box {
  width: 100%;
}

[dir] .box {
  padding: 15px 15px;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(55, 60, 80, 0.05);
}

@media (min-width: 768px) {
  [dir] .box {
    padding: calc(15px * 2) calc(15px * 2);
    margin-bottom: calc(16px * 1.5 * 1.54);
  }
}

@media (max-width: 767px) {
  [dir] .box {
    padding: 15px calc(15px * 1.2);
    margin-bottom: calc(16px * 1.5 * 1.15);
  }
}

@media (min-width: 768px) {
  [dir] .box_top {
    margin-top: calc(16px * 1.5 * 1.54);
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  [dir] .box_top {
    margin-top: calc(16px * 1.5 * 1.15);
    margin-bottom: 0;
  }
}

@media (min-width: 768px) {
  [dir] .box_min {
    padding: calc(15px * 2);
    margin-bottom: calc(16px * 1.5 * 1.54);
  }
}

[dir="ltr"] .text-left {
  text-align: left;
}

[dir="rtl"] .text-left {
  text-align: right;
}

[dir] .text-center {
  text-align: center;
}

[dir="ltr"] .text-right {
  text-align: right;
}

[dir="rtl"] .text-right {
  text-align: left;
}

[dir] .text-primary {
  background-color: #316dff;
}

[dir] .text-info {
  background-color: #5bc0de;
}

[dir] .text-warning {
  background-color: #fad782;
}

[dir] .text-danger {
  background-color: #ff5252;
}

[dir] .text-success {
  background-color: #0c9;
}

.list-colored,
.list-bullet {
  list-style-type: none;
  counter-reset: list;
}

[dir="ltr"] .list-colored,
[dir="ltr"] .list-bullet {
  padding-left: 0 !important;
}

[dir="rtl"] .list-colored,
[dir="rtl"] .list-bullet {
  padding-right: 0 !important;
}

.list-colored > ul,
.list-bullet > ul {
  list-style: none;
}

[dir] .list-colored > ul,
[dir] .list-bullet > ul {
  margin-bottom: 14px;
}

.list-colored > ol,
.list-bullet > ol {
  list-style-type: none;
  counter-reset: list;
}

[dir] .list-colored > ol,
[dir] .list-bullet > ol {
  margin-bottom: 14px;
}

.list-colored > li {
  position: relative;
  counter-increment: list;
}

[dir] .list-colored > li {
  margin-bottom: calc(16px * 1.5 / 1.5) !important;
}

[dir="ltr"] .list-colored > li {
  padding-left: calc(15px + 30px);
}

[dir="rtl"] .list-colored > li {
  padding-right: calc(15px + 30px);
}

.list-colored > li:before {
  position: absolute;
  top: -3px;
  z-index: 1;
  width: 30px;
  height: 30px;
  font-size: calc(16px * 0.89);
  line-height: 30px;
  color: #fff;
  content: counter(list);
}

[dir] .list-colored > li:before {
  text-align: center;
  background-color: rgba(0, 44, 151, 1);
  border-radius: 50%;
}

[dir="ltr"] .list-colored > li:before {
  left: 0;
}

[dir="rtl"] .list-colored > li:before {
  right: 0;
}

.list-bullet > li {
  position: relative;
}

[dir] .list-bullet > li {
  margin-bottom: 10px;
}

[dir="ltr"] .list-bullet > li {
  padding-left: 30px;
}

[dir="rtl"] .list-bullet > li {
  padding-right: 30px;
}

.list-bullet > li:before {
  position: absolute;
  top: -2px;
  font-family: "Font Awesome 5 Free";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  color: rgba(0, 44, 151, 1);
  content: "\f058";
}

[dir="ltr"] .list-bullet > li:before {
  left: 0;
}

[dir="rtl"] .list-bullet > li:before {
  right: 0;
}

/* table {
  border-spacing: 0px;
  border-collapse: collapse;
}
 */
[dir] table {
  background-color: transparent;
}

caption {
  color: #818a91;
}

[dir] caption {
  padding-top: 12px;
  padding-bottom: 12px;
}

[dir="ltr"] caption {
  text-align: left;
}

[dir="rtl"] caption {
  text-align: right;
}

[dir="ltr"] th {
  text-align: left;
}

[dir="rtl"] th {
  text-align: right;
}

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

[dir] .table {
  margin-bottom: calc(16px * 1.5);
}

.table th,
.table td {
  vertical-align: top;
}

[dir] .table th,
[dir] .table td {
  padding: 12px;
}

[dir] .table td {
  border-top: 1px solid #d3d6d8;
}

.table thead th {
  vertical-align: bottom;
}

[dir] .table tbody + tbody {
  border-top: 1px solid #d3d6d8;
}

[dir] .table .table {
  background-color: #fff;
}

.table--color-header th {
  color: #fff;
}

[dir] .table--color-header th {
  background-color: rgba(0, 44, 151, 1);
}

[dir] .table--striped th,
[dir] .table--striped td,
[dir] .table--striped thead th {
  border-color: #fff;
}

.table--striped tbody tr:nth-child(odd) {
  color: inherit;
}

[dir] .table--striped tbody tr:nth-child(odd) {
  background-color: #eceeef;
}

.table--hover tbody tr:hover {
  color: inherit;
}

[dir] .table--hover tbody tr:hover {
  background-color: #eceeef;
}

[dir] .table--bordered {
  border: 1px solid #d3d6d8;
}

[dir="ltr"] .table--bordered td {
  border-left: 1px solid #d3d6d8;
}

[dir="rtl"] .table--bordered td {
  border-right: 1px solid #d3d6d8;
}

[dir="ltr"] .table--bordered th {
  border-left: 1px solid #d3d6d8;
}

[dir="rtl"] .table--bordered th {
  border-right: 1px solid #d3d6d8;
}

.table-responsive {
  min-height: 0.01%;
  overflow-x: auto;
}

@media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }

  [dir] .table-responsive {
    margin-bottom: calc(16px * 1.5 * 0.75);
    border: 1px solid #d3d6d8;
  }

  [dir] .table-responsive > .table {
    margin-bottom: 0;
  }

  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
  }
}

.note {
  position: relative;
  color: #61698c;
}

[dir] .note {
  margin: calc(16px * 1.5) 0;
}

[dir="ltr"] .note {
  padding-left: 15px;
  border-left: calc(1px * 2) solid transparent;
}

[dir="rtl"] .note {
  padding-right: 15px;
  border-right: calc(1px * 2) solid transparent;
}

[dir] .note p:last-child {
  margin-bottom: 0;
}

.note-title {
  font-weight: 600;
}

[dir] .note-title {
  margin-bottom: calc(16px * 1.5 / 2);
}

[dir] .note-default {
  border-color: #818a91;
}

[dir] .note--default {
  border-color: #818a91;
}

.note-default .note-title {
  color: #818a91;
}

.note--default .note-title {
  color: #818a91;
}

[dir] .note-info,
[dir] .note--info {
  border-color: #5bc0de;
}

.note-info .note-title,
.note--info .note-title {
  color: #5bc0de;
}

[dir] .note-warning,
[dir] .note--warning {
  border-color: #fad782;
}

.note-warning .note-title,
.note--warning .note-title {
  color: #fad782;
}

[dir] .note-success,
[dir] .note--success {
  border-color: #0c9;
}

.note-success .note-title,
.note--success .note-title {
  color: #0c9;
}

[dir] .note-danger,
[dir] .note--danger {
  border-color: #ff5252;
}

.note-danger .note-title,
.note--danger .note-title {
  color: #ff5252;
}

[dir] .image-with-border {
  padding: 10px;
  border: 1px solid #d3d6d8;
  border-radius: 4px;
}

[dir] .image-with-shadow {
  box-shadow: 0 5px 15px 2px #55595c;
}

[dir] .image-with-lightbox {
  cursor: pointer;
}

.image-overlay {
  position: relative;
}

.image-overlay:before {
  position: absolute;
  top: 0;
  bottom: 0;
  content: "";
}

[dir] .image-overlay:before {
  background-color: rgba(255, 255, 255, 0.3);
}

[dir="ltr"] .image-overlay:before {
  right: 0;
  left: 0;
}

[dir="rtl"] .image-overlay:before {
  right: 0;
  left: 0;
}

.image-with-video-icon {
  position: relative;
  display: block;
}

.image-with-video-icon img {
  width: 100%;
}

.image-with-video-icon:before {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 0;
  height: 0;
  font-size: 0;
  content: "";
  transition: transform 0.6s ease;
}

[dir] .image-with-video-icon:before {
  border-style: solid;
}

[dir="ltr"] .image-with-video-icon:before {
  left: 50%;
  border-color: transparent transparent transparent #fff;
  border-width: 30px 0 30px 60px;
  transform: translate(-50%, -50%);
}

[dir="rtl"] .image-with-video-icon:before {
  right: 50%;
  border-color: transparent #fff transparent transparent;
  border-width: 30px 60px 30px 0;
  transform: translate(50%, -50%);
}

.image-with-video-icon:after {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  content: "";
}

[dir] .image-with-video-icon:after {
  background-color: rgba(0, 0, 0, 0.3);
}

[dir="ltr"] .image-with-video-icon:after {
  right: 0;
  left: 0;
}

[dir="rtl"] .image-with-video-icon:after {
  right: 0;
  left: 0;
}

[dir="ltr"] .image-with-video-icon:active:before,
[dir="ltr"] .image-with-video-icon:hover:before {
  transform: translate(-50%, -50%) scale(1.1);
}

[dir="rtl"] .image-with-video-icon:active:before,
[dir="rtl"] .image-with-video-icon:hover:before {
  transform: translate(50%, -50%) scale(1.1);
}

[dir] .accordion {
  padding-top: 0;
  margin-bottom: calc(16px * 1.5);
  border: 1px solid #ddd;
  border-radius: 0;
}

.accordion__item-title {
  position: relative;
  font-size: calc(16px * 1.21);
}

[dir] .accordion__item-title {
  cursor: pointer;
}

[dir="ltr"] .accordion__item-title {
  padding: 15px 20px 15px 52px;
}

[dir="rtl"] .accordion__item-title {
  padding: 15px 52px 15px 20px;
}

[dir] .accordion__item-title:not(.accordion__item-title--active) {
  border-bottom: 1px solid #ddd;
}

.accordion__item-title:before {
  position: absolute;
  content: "";
}

.accordion__item-content {
  display: none;
}

[dir] .accordion__item-content {
  padding: 20px;
  border-bottom: 1px solid #ddd;
}

[dir] .accordion__item-content p:last-child {
  margin-bottom: 0;
}

[dir] .accordion__item:last-child .accordion__item-title,
[dir] .accordion__item:last-child .accordion__item-content {
  border-bottom: none;
}

.accordion--default .accordion__item-title:before {
  top: 50%;
  width: 8px;
  height: 8px;
  transition: transform 0.3s;
}

[dir] .accordion--default .accordion__item-title:before {
  margin-top: -4px;
  border-bottom: 2px solid rgba(0, 44, 151, 1);
}

[dir="ltr"] .accordion--default .accordion__item-title:before {
  left: 22px;
  border-left: 2px solid rgba(0, 44, 151, 1);
  transform: rotate(-45deg);
}

[dir="rtl"] .accordion--default .accordion__item-title:before {
  right: 22px;
  border-right: 2px solid rgba(0, 44, 151, 1);
  transform: rotate(45deg);
}

[dir] .accordion--default .accordion__item-title--active {
  background-color: #f0f0f0;
}

.accordion--default .accordion__item-title--active:before {
  transition: transform 0.3s;
}

[dir="ltr"] .accordion--default .accordion__item-title--active:before {
  transform: rotate(135deg);
}

[dir="rtl"] .accordion--default .accordion__item-title--active:before {
  transform: rotate(-135deg);
}

.accordion--colored .accordion__item-title {
  transition: background-color 0.3s;
}

.accordion--colored .accordion__item-title:before,
.accordion--colored .accordion__item-title:after {
  top: 50%;
}

.accordion--colored .accordion__item-title:before {
  width: 10px;
  height: 2px;
}

[dir] .accordion--colored .accordion__item-title:before {
  margin-top: -1px;
  background-color: #818a91;
}

[dir="ltr"] .accordion--colored .accordion__item-title:before {
  left: 20px;
}

[dir="rtl"] .accordion--colored .accordion__item-title:before {
  right: 20px;
}

.accordion--colored .accordion__item-title:after {
  position: absolute;
  width: 2px;
  height: 10px;
  content: "";
}

[dir] .accordion--colored .accordion__item-title:after {
  margin-top: -5px;
  background-color: #818a91;
}

[dir="ltr"] .accordion--colored .accordion__item-title:after {
  left: 24px;
}

[dir="rtl"] .accordion--colored .accordion__item-title:after {
  right: 24px;
}

.accordion--colored .accordion__item-title--active {
  color: #fff;
  transition: background-color 0.3s;
}

[dir] .accordion--colored .accordion__item-title--active {
  background-color: rgba(0, 44, 151, 1);
}

[dir] .accordion--colored .accordion__item-title--active:before {
  background-color: #fff;
}

.accordion--colored .accordion__item-title--active:after {
  display: none;
}

[dir] .tabs {
  margin-bottom: calc(16px * 1.5);
}

.tab {
  display: block;
}

[dir] .tab {
  padding: 30px;
  margin-top: -1px;
  border: 1px solid #ddd;
}

[dir="ltr"] .tab {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

[dir="rtl"] .tab {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

[dir] .tab p:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  [dir="ltr"] .tab {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  [dir="rtl"] .tab {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

[dir="ltr"] .tab:nth-child(2) {
  border-top-left-radius: 0;
}

[dir="rtl"] .tab:nth-child(2) {
  border-top-right-radius: 0;
}

[dir="ltr"] .tab:last-child {
  border-top-right-radius: 0;
}

[dir="rtl"] .tab:last-child {
  border-top-left-radius: 0;
}

@media (min-width: 768px) {
  .tabs-menu {
    display: flex;
  }
}

.tabs-link {
  display: block;
  font-weight: 600;
  line-height: 1;
  color: #373C50;
}

[dir] .tabs-link {
  padding: calc(15px * 0.75) 15px;
  margin: 0;
  text-align: center;
  cursor: pointer;
  border-color: transparent;
  border-style: solid;
  border-width: 1px 1px 0;
}

.tabs-link:hover {
  color: rgba(0, 44, 151, 1);
}

@media (max-width: 767px) {
  [dir] .tabs-link {
    border-top-color: #ddd;
  }

  [dir="ltr"] .tabs-link {
    border-right-color: #ddd;
    border-left-color: #ddd;
  }

  [dir="rtl"] .tabs-link {
    border-right-color: #ddd;
    border-left-color: #ddd;
  }

  [dir="ltr"] .tabs-link:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  [dir="rtl"] .tabs-link:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

@media (min-width: 768px) {
  .tabs-link {
    flex: 1 1 10px;
  }
}

.is-hidden {
  display: none;
}

.tabs-link.is-active {
  color: rgba(0, 44, 151, 1);
}

[dir] .tabs-link.is-active {
  cursor: pointer;
  border-color: #ddd;
}

.tabs-link.is-active:hover {
  color: rgba(0, 44, 151, 1);
}

[dir] .tabs-link.is-active:hover {
  cursor: default;
}

@media (min-width: 768px) {
  [dir] .tabs-link.is-active {
    border-bottom: 1px solid #fff;
  }

  [dir="ltr"] .tabs-link.is-active {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  [dir="rtl"] .tabs-link.is-active {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

[dir] .tabs--colored-1 .tab {
  background-color: #f7f7f9 !important;
}

[dir] .tabs--colored-1 .tabs-link.is-active {
  background-color: #f7f7f9;
  border-bottom-color: #f7f7f9;
}

.tabs--colored-2 .tabs-link:hover {
  color: rgba(0, 44, 151, 1);
}

.tabs--colored-2 .tabs-link.is-active {
  color: #fff;
}

[dir] .tabs--colored-2 .tabs-link.is-active {
  background-color: rgba(0, 44, 151, 1);
  border-color: rgba(0, 44, 151, 1);
}

.tabs--colored-2 .tabs-link.is-active:hover {
  color: #fff;
}

[dir] .tabs--colored-2 .tab {
  background-color: #f7f7f9 !important;
}

.comments {
  position: relative;
}

[dir] .comments__callout {
  margin: 0;
}

.comments__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

[dir] .comments__title .h3 {
  margin-bottom: calc(15px / 3);
}

[dir] .comments__title .meta {
  margin: 0;
}

.comment__sorter .btn {
  font-size: calc(16px - 2px);
  font-weight: 500;
  color: #61698c;
}

[dir] .comment__sorter .btn,
[dir] .comment__sorter .btn:hover,
[dir] .comment__sorter .btn:focus,
[dir] .comment__sorter .btn:active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.comment__sorter .btn:after {
  font-size: calc(16px - 2px);
  color: rgba(0, 44, 151, 1);
}

[dir="ltr"] .comment__sorter .btn:after {
  margin-left: 10px;
}

[dir="rtl"] .comment__sorter .btn:after {
  margin-right: 10px;
}

.comments__list {
  display: block;
}

[dir] .comments__list {
  padding: 0;
  margin: 0;
}

.comment {
  position: relative;
  display: flex;
  list-style: none;
  justify-content: space-between;
}

[dir] .comment {
  padding: calc(15px * 1.33);
  margin-top: calc(15px * 1.33);
  background: #f7f7f9;
  border: 1px solid #eceeef;
  border-radius: 0;
}

@media (min-width: 768px) {
  [dir] .comment {
    padding: calc(15px * 2);
  }
}

.comment__body {
  word-break: break-word;
}

[dir] .comment__body {
  margin-top: calc(15px * 1.66);
}

[dir] .comment__body p {
  margin: 0;
}

.comment__vote-control {
  width: 100%;
  font-size: 12px !important;
  color: rgba(0, 44, 151, 1);
}

[dir] .comment__vote-control,
[dir] .comment__vote-control:hover,
[dir] .comment__vote-control:focus,
[dir] .comment__vote-control:active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.comment__vote-control:hover,
.comment__vote-control:focus,
.comment__vote-control:active {
  color: #001a5a;
}

.comment__voting-and-actions {
  flex-shrink: 0;
}

.comment__actions button {
  display: flex;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  align-items: center;
  justify-content: center;
}

[dir] .comment__actions button {
  cursor: pointer;
  background-color: transparent;
  border: none;
}

[dir="ltr"] .comment__actions button {
  margin-right: auto;
  margin-left: auto;
}

[dir="rtl"] .comment__actions button {
  margin-right: auto;
  margin-left: auto;
}

.vote-sum {
  width: 100%;
  font-size: calc(16px * 1.66);
  line-height: 1;
}

[dir] .vote-sum {
  text-align: center;
}

.comment-form {
  position: relative;
}

[dir] .comment-form {
  margin-top: calc(16px * 1.5);
}

@media (min-width: 768px) {
  [dir="ltr"] .comment-form {
    padding-left: calc(40px + 15px);
  }

  [dir="rtl"] .comment-form {
    padding-right: calc(40px + 15px);
  }
}

.comment-form__avatar {
  position: absolute;
  top: 0;
}

[dir="ltr"] .comment-form__avatar {
  left: 0;
}

[dir="rtl"] .comment-form__avatar {
  right: 0;
}

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

[dir] .comment-form__attachments {
  margin-top: 15px;
}

.comment-form__mark-as-solved {
  position: relative;
}

.comment-form__controls {
  font-size: calc(16px - 2px);
  font-weight: 500;
}

[dir] .comment-form__controls {
  padding-top: 15px;
}

[dir] .comment-form__comment-ccs ul {
  margin-bottom: 0;
}

[dir] .comment-form__ccs {
  margin-bottom: 0;
}

[dir] .comment-form__ccs + textarea {
  margin-top: 0;
}

[dir="ltr"] .comment-form__ccs + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

[dir="rtl"] .comment-form__ccs + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

[dir] .comment-form__ccs ul[data-hc-pills-container] {
  margin: 0 0 calc(1px * -1);
}

[dir="ltr"] .comment-form__ccs ul[data-hc-pills-container] {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

[dir="rtl"] .comment-form__ccs ul[data-hc-pills-container] {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.comment-form__ccs ul[data-hc-pills-container][data-hc-focus="true"] {
  position: relative;
  z-index: 2;
}

.comment__actions {
  position: relative;
}

.comment__actions button {
  text-indent: -9000px;
  text-transform: capitalize;
}

.comment__actions button:after {
  position: absolute;
  display: block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-indent: 1px;
  content: "\f013";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[dir="ltr"] .comment__actions button:after {
  margin-left: 0;
}

[dir="rtl"] .comment__actions button:after {
  margin-right: 0;
}

.comment-actions-container .vote {
  display: flex;
  flex-direction: column;
}

[dir] .comment-actions-container .vote {
  text-align: center;
}

.comment-actions-container .vote a:active,
.comment-actions-container .vote a:hover,
.comment-actions-container .vote a:focus {
  text-decoration: none;
}

.comment-actions-container .vote-sum {
  display: block;
  color: #61698c;
}

[dir] .comment-actions-container .vote-sum {
  margin: 3px 0;
}

.comment-actions-container .vote-sum {
  unicode-bidi: bidi-override;
}

[dir="ltr"] .comment-actions-container .vote-sum {
  direction: ltr;
}

[dir="rtl"] .comment-actions-container .vote-sum {
  direction: rtl;
}

[dir] .comment-actions-container .vote-up svg {
  transform: scale(1, -1);
}

.comment-actions-container .vote-up:hover,
.comment-actions-container .vote-down:hover {
  color: $brand_color;
}

.comment-actions-container .vote-up,
.comment-actions-container .vote-down {
  display: flex;
  min-width: 35px;
  min-height: 35px;
  color: #61698c;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  align-items: center;
  justify-content: center;
}

[dir] .comment-actions-container .vote-up,
[dir] .comment-actions-container .vote-down {
  cursor: pointer;
  background-color: transparent;
  border: none;
}

.comment-actions-container .vote-voted {
  color: $brand_color;
}

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

.comment__official-heading {
  position: absolute;
  top: 0;
  width: auto;
  font-size: 14px;
  color: #fff;
}

[dir] .comment__official-heading {
  padding: 1px calc(16px / 2);
  background-color: rgba(0, 44, 151, 1);
  border-radius: 0 0 0 0;
}

[dir="ltr"] .comment__official-heading {
  right: calc(16px * 5);
}

[dir="rtl"] .comment__official-heading {
  left: calc(16px * 5);
}

.comment--official {
  position: relative;
}

[dir] .comment--official {
  padding-top: calc(16px * 1.5);
  padding-bottom: calc(16px * 1.5);
  background-color: #97b5ff !important;
  border: 1px solid rgba(0, 44, 151, 1) !important;
  border-radius: 0;
}

[dir="ltr"] .comment--official {
  padding-right: calc(16px * 2);
  padding-left: calc(16px * 2);
}

[dir="rtl"] .comment--official {
  padding-right: calc(16px * 2);
  padding-left: calc(16px * 2);
}

@media (min-width: 768px) {
  [dir] .share-box {
    margin-top: calc(16px * 1.5 * 1.54);
  }
}

@media (max-width: 767px) {
  [dir] .share-box {
    margin-top: calc(16px * 1.5 * 1.15);
  }
}

@media (min-width: 1200px) {
  [dir="ltr"] .share-box__img {
    float: left;
    margin-right: calc(16px * 1.5 * 1.2);
  }

  [dir="rtl"] .share-box__img {
    float: right;
    margin-left: calc(16px * 1.5 * 1.2);
  }
}

@media (max-width: 1199px) {
  .share-box__img {
    display: inline-block;
  }
}

@media (min-width: 1200px) {
  [dir] .share-box__content {
    margin: 0;
  }

  [dir="ltr"] .share-box__content {
    float: left;
  }

  [dir="rtl"] .share-box__content {
    float: right;
  }
}

@media (min-width: 1200px) {
  [dir] .share-box__right {
    margin: 0;
  }

  [dir="ltr"] .share-box__right {
    float: right;
  }

  [dir="rtl"] .share-box__right {
    float: left;
  }
}

@media (max-width: 991px) {
  [dir] .share-box__left {
    margin-bottom: calc(15px * 1.33);
  }
}

@media (max-width: 1199px) {
  [dir] .share-box__right,
  [dir] .share-box__left {
    text-align: center;
  }
}

[dir] .share-box__title {
  margin-top: calc(16px * 1.5 * 1.2);
}

.share {
  display: flex;
}

[dir] .share {
  padding: 0;
  margin: 0;
}

@media (min-width: 1200px) {
  .share {
    justify-content: space-between;
  }
}

@media (max-width: 1199px) {
  .share {
    justify-content: space-evenly;
  }
}

.share li {
  display: block;
  list-style: none;
}

.share li a {
  position: relative;
  display: block;
  width: 35px;
  height: 35px;
  overflow: hidden;
}

[dir] .share li a {
  border-radius: 50%;
}

[dir="ltr"] .share li a {
  padding-left: 35px;
}

[dir="rtl"] .share li a {
  padding-right: 35px;
}

.share li a:before {
  position: absolute;
  top: 52%;
  display: block;
  width: 100%;
  font: normal normal normal 20px/35px "Font Awesome 5 Brands";
  color: #fff;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

[dir] .share li a:before {
  text-align: center;
  transform: translateY(-50%);
}

[dir="ltr"] .share li a:before {
  left: 0;
}

[dir="rtl"] .share li a:before {
  right: 0;
}

[dir] .share-facebook {
  background: #3b5998;
}

[dir] .share-facebook:hover {
  background: #2a3f6c;
}

.share-facebook:before {
  content: "\f09a";
}

[dir] .share-twitter {
  background: #9bcef5;
}

[dir] .share-twitter:hover {
  background: #55acee;
}

.share-twitter:before {
  content: "\f099";
}

.share-googleplus {
  font-size: 12px !important;
}

[dir] .share-googleplus {
  background: #e88a82;
}

[dir] .share-googleplus:hover {
  background: #dc4e41;
}

.share-googleplus:before {
  content: "\f0d5";
}

[dir] .share-linkedin {
  background: #03a9ff;
}

[dir] .share-linkedin:hover {
  background: #0077b5;
}

.share-linkedin:before {
  content: "\f0e1";
}

.related-articles h3:before {
  display: inline-flex;
  width: 18px;
  height: 18px;
  font: normal normal normal calc(18px - 6px) / 1.45 "Font Awesome 5 Free";
  line-height: 1;
  color: rgba(0, 44, 151, 1);
  content: "\f005";
  align-items: center;
  justify-content: center;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

[dir] .related-articles h3:before {
  text-align: center;
  border: 1px solid rgba(0, 44, 151, 1);
  border-radius: 50%;
  transform: translateY(-4px);
}

[dir="ltr"] .related-articles h3:before {
  margin-right: calc(15px / 1.5);
}

[dir="rtl"] .related-articles h3:before {
  margin-left: calc(15px / 1.5);
}

.related-articles ul {
  display: block;
}

[dir] .related-articles ul {
  padding: 0;
  margin: 0 0 calc(16px * 1.5);
}

.related-articles ul li {
  display: block;
}

[dir] .related-articles ul li {
  padding: calc(15px * 1.33) 0;
  border-bottom: 1px solid #eceeef;
}

.related-articles ul li a {
  color: #4c536e;
}

.related-articles ul li a:hover,
.related-articles ul li a:focus,
.related-articles ul li a:active {
  color: rgba(39, 144, 255, 1);
}

[dir] .my-activities-header {
  margin-bottom: calc(16px * 1.5);
}

.my-activities-items {
  width: 100%;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: collapse;
}

[dir] .my-activities-items {
  margin-bottom: calc(16px * 1.5 * 2);
}

@media (min-width: 768px) {
  .my-activities-items {
    table-layout: auto;
  }
}

.my-activities-items__head {
  display: none;
  color: #979797;
}

@media (min-width: 768px) {
  .my-activities-items__head {
    display: table-header-group;
    font-size: calc(16px * 0.89);
    font-weight: 600;
    text-transform: uppercase;
  }
}

@media (min-width: 768px) {
  .my-activities-items__body {
    display: table-row-group;
  }
}

.my-activities-items__row {
  display: block;
}

@media (min-width: 768px) {
  .my-activities-items__row {
    display: table-row;
  }
}

.my-activities-items__col {
  display: block;
}

@media (min-width: 768px) {
  .my-activities-items__col {
    display: table-cell;
  }

  [dir] .my-activities-items__col {
    padding-top: calc(16px * 1.5 / 2);
    padding-bottom: calc(16px * 1.5 / 2);
    border-bottom: 1px solid #eceeef;
  }

  [dir="ltr"] .my-activities-items__col + .my-activities-items__col {
    padding-left: 15px;
  }

  [dir="rtl"] .my-activities-items__col + .my-activities-items__col {
    padding-right: 15px;
  }
}

@media (max-width: 767px) {
  .my-activities-items__request-id {
    display: inline;
  }
}

@media (min-width: 768px) {
  .my-activities-items__request-id {
    display: none;
  }
}

@media (max-width: 767px) {
  [dir] .my-activities-item {
    padding: calc(16px * 1.5 / 2) 15px;
    margin-bottom: calc(16px * 1.5);
    border: 1px solid #eceeef;
    border-radius: 0;
  }
}

.my-activities-item__meta {
  font-size: 14px;
  color: #979797;
}

@media (max-width: 767px) {
  .my-activities-item__meta {
    display: inline-block;
  }

  [dir="ltr"] .my-activities-item__meta {
    margin-right: calc(15px / 2);
  }

  [dir="rtl"] .my-activities-item__meta {
    margin-left: calc(15px / 2);
  }

  .my-activities-item__meta + .my-activities-item__meta:before {
    content: "\2022";
  }

  [dir="ltr"] .my-activities-item__meta + .my-activities-item__meta:before {
    margin-right: calc(15px / 2);
  }

  [dir="rtl"] .my-activities-item__meta + .my-activities-item__meta:before {
    margin-left: calc(15px / 2);
  }
}

.my-activities-item__title {
  font-weight: 400;
}

@media (max-width: 767px) {
  .my-activities-item__title {
    font-size: calc(16px * 1.21);
  }
}

@media (max-width: 767px) {
  .my-activities-item__icon {
    display: inline-block;
  }
}

@media (min-width: 768px) {
  .my-activities-item__icon {
    display: none;
  }
}

.subscriptions-subscribe div {
  display: inline-block;
}

.my-activities-menu ul {
  list-style: none;
}

[dir="ltr"] .my-activities-menu ul {
  padding-left: 0;
}

[dir="rtl"] .my-activities-menu ul {
  padding-right: 0;
}

[dir] .my-activities-menu__items {
  margin-bottom: 0;
}

[dir] .my-activities-menu__item {
  margin-bottom: 0;
}

.my-activities-menu__item a {
  display: block;
}

@media (min-width: 768px) {
  [dir="ltr"] .my-activities-menu__item {
    float: left;
  }

  [dir="rtl"] .my-activities-menu__item {
    float: right;
  }
}

@media (min-width: 768px) {
  [dir="ltr"] .my-activities-menu__item + .my-activities-menu__item {
    margin-left: 15px;
  }

  [dir="rtl"] .my-activities-menu__item + .my-activities-menu__item {
    margin-right: 15px;
  }
}

[dir] .my-activities-menu--main {
  padding-bottom: calc(16px * 1.5);
  margin-bottom: calc(16px * 1.5);
  border-bottom: 1px solid #eceeef;
}

[dir] .my-activities-menu--main .my-activities-menu__item {
  padding: 6px 15px;
  background-color: #eceeef;
  border-radius: 0;
}

@media (max-width: 767px) {
  [dir] .my-activities-menu--main .my-activities-menu__item {
    margin-bottom: calc(16px * 1.5 / 3);
  }
}

.my-activities-menu--main .my-activities-menu__item.is-active {
  font-weight: 600;
  color: #373C50;
}

[dir] .my-activities-menu--sub {
  margin-bottom: calc(16px * 1.5);
}

.my-activities-menu--sub .my-activities-menu__item.is-active {
  font-weight: 600;
}

.my-activities-menu--sub .my-activities-menu__item a {
  display: inline-block;
}

@media (min-width: 768px) {
  .my-activities-menu--sub
    .my-activities-menu__item
    + .my-activities-menu__item:before {
    font-size: 10px;
    content: "\2022";
  }

  [dir="ltr"]
    .my-activities-menu--sub
    .my-activities-menu__item
    + .my-activities-menu__item:before {
    margin-right: calc(15px / 2);
  }

  [dir="rtl"]
    .my-activities-menu--sub
    .my-activities-menu__item
    + .my-activities-menu__item:before {
    margin-left: calc(15px / 2);
  }
}

@media (min-width: 768px) {
  [dir] .page-title {
    margin-top: calc(16px * 1.5 * 3);
  }
}

@media (max-width: 767px) {
  [dir] .page-title {
    margin-top: calc(16px * 1.5 * 2);
  }
}

[dir] .page-title__title {
  margin: 0;
}

.page-title__title-link {
  color: #373C50;
}

.page-title__title-link:hover,
.page-title__title-link:focus,
.page-title__title-link:active {
  color: rgba(0, 44, 151, 1);
}

.page-title__description {
  font-size: calc(16px - 1px);
  color: #9aa0b9;
}

[dir] .page-title__description {
  margin: 5px 0 calc(16px * 1.5 * 1.5);
}

@media (max-width: 767px) {
  [dir] .page-title__description {
    margin-bottom: calc(16px * 1.5);
  }
}

.request-table-toolbar {
  display: block;
  height: 100%;
}

[dir] .request-table-toolbar {
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: calc(15px * 2);
  background: #f7f7f9;
  border: 1px solid #eceeef;
  border-radius: 0;
}

.request-table-toolbar label {
  font-size: calc(16px * 0.89);
  font-weight: 500;
}

@media (min-width: 768px) {
  .request-table-filters {
    display: table;
    width: 100%;
  }
}

[dir="ltr"] .request-table-filters__item {
  padding-right: 15px;
  padding-left: 15px;
}

[dir="rtl"] .request-table-filters__item {
  padding-right: 15px;
  padding-left: 15px;
}

@media (max-width: 767px) {
  .request-table-filters__item {
    min-height: calc(16px * 1.5);
  }
}

@media (min-width: 768px) {
  .request-table-filters__item {
    display: table-cell;
    width: 33%;
    vertical-align: bottom;
  }
}

.request-table-organization {
  display: table;
  width: 100%;
}

.request-table-organization__col {
  display: table-cell;
  vertical-align: middle;
}

.request-table-organization__col--main {
  width: 100%;
}

[dir="ltr"] .request-table-organization__col--button {
  padding-left: calc(15px / 2);
}

[dir="rtl"] .request-table-organization__col--button {
  padding-right: calc(15px / 2);
}

.request-table-organization__col--button [role="button"] {
  height: calc(16px * 1.5 + 15px + 2px);
  line-height: calc(16px * 1.5 + 15px + 2px);
}

[dir] .request-table-organization__col--button [role="button"] {
  padding-top: 0;
  padding-bottom: 0;
}

.requests-sort-symbol {
  display: inline-block;
  font-size: 0;
  vertical-align: middle;
}

.requests-sort-symbol:after {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-size: 14px;
  color: #979797;
  content: "\f0d7";
}

[dir] .requests-sort-symbol:after {
  margin-bottom: 2px;
}

[dir="ltr"] .requests-sort-symbol:after {
  margin-left: 5px;
}

[dir="rtl"] .requests-sort-symbol:after {
  margin-right: 5px;
}

.requests-link {
  color: #979797;
  white-space: nowrap;
}

.requests-link[href*="asc"] .requests-sort-symbol:after {
  content: "\f0d8";
}

.requests-search {
  width: 100%;
  height: calc(16px * 1.5 * 1.5);
  font-size: calc(16px - 2px);
}

[dir] .requests-search {
  padding: 0 calc(15px * 0.66);
  background: #fff;
  border: none;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(55, 60, 80, 0.05);
}

.request-filter {
  width: 100%;
  height: calc(16px * 1.5 * 1.5);
  font-size: calc(16px - 2px);
}

[dir] .request-filter {
  padding: 0 calc(15px * 0.66);
  background: #fff;
  border: none;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(55, 60, 80, 0.05);
}

/* 
Normalize non-controls

Restyle and baseline non-control form elements. 
*/

fieldset {
  /*  
  Chrome and Firefox set a `min-width: min-content;` on fieldsets, 
  so we reset that to ensure it behaves more like a standard block element
  See https:github.com/twbs/bootstrap/issues/12359. 
  */
  min-width: 0;
}

[dir] fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  font-size: calc(16px * 1.5);
  line-height: inherit;
  color: #373a3c;
}

[dir] legend {
  padding: 0;
  margin-bottom: calc(16px * 1.5);
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

label {
  display: inline-block;
  max-width: 100%;
  font-weight: 600;
}

[dir] label {
  margin-bottom: calc(16px * 1.5 / 2);
}

/* 
 Normalize form controls

 While most of our form styles require extra classes, some basic normalization
 is required to ensure optimum display with or without those classes to better
 address browser inconsistencies. 
*/

/*  Override content-box in Normalize (* isn't specific enough) */

input[type="search"] {
  box-sizing: border-box;
}

/*  Position radios and checkboxes better */

input[type="radio"],
input[type="checkbox"] {
  line-height: normal;
}

[dir] input[type="radio"],
[dir] input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9;
}

/*  Set the height of file controls to match text inputs */

input[type="file"] {
  display: block;
}

/*  Make range inputs behave like textual form controls */

input[type="range"] {
  display: block;
  width: 100%;
}

/*  Make multiple select elements height not fixed */

select[multiple],
select[size] {
  height: auto;
}

/*  Focus for file, radio, and checkbox */

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

/*  Adjust output element */

output {
  display: block;
  font-size: 16px;
  line-height: 1.5;
  color: #55595c;
}

[dir] output {
  padding-top: 7px;
}

/* 
 Common form controls

 Shared size and type resets for form controls. Apply `.form-control` to any
 of the following form controls:
 
*/

select {
  display: block;
  width: 100%;
  height: auto;
  font-size: 16px;
  line-height: 1.5;
  color: #55595c;
  /*  Reset unusual Firefox-on-Android default style; see https:github.com/necolas/normalize.css/issues/214 */
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

[dir] select {
  padding: 6px 12px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #eceeef;
  border-radius: 0;
}

textarea {
  display: block;
  width: 100%;
  height: auto;
  font-size: 16px;
  line-height: 1.5;
  color: #55595c;
  /*  Reset unusual Firefox-on-Android default style; see https:github.com/necolas/normalize.css/issues/214 */
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

[dir] textarea {
  padding: 6px 12px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #eceeef;
  border-radius: 0;
}

input[type="text"] {
  display: block;
  width: 100%;
  height: auto;
  font-size: 16px;
  line-height: 1.5;
  color: #55595c;
  /*  Reset unusual Firefox-on-Android default style; see https:github.com/necolas/normalize.css/issues/214 */
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

[dir] input[type="text"] {
  padding: 6px 12px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #eceeef;
  border-radius: 0;
}

input[type="password"] {
  display: block;
  width: 100%;
  height: auto;
  font-size: 16px;
  line-height: 1.5;
  color: #55595c;
  /*  Reset unusual Firefox-on-Android default style; see https:github.com/necolas/normalize.css/issues/214 */
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

[dir] input[type="password"] {
  padding: 6px 12px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #eceeef;
  border-radius: 0;
}

input[type="datetime"] {
  display: block;
  width: 100%;
  height: auto;
  font-size: 16px;
  line-height: 1.5;
  color: #55595c;
  /*  Reset unusual Firefox-on-Android default style; see https:github.com/necolas/normalize.css/issues/214 */
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

[dir] input[type="datetime"] {
  padding: 6px 12px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #eceeef;
  border-radius: 0;
}

input[type="datetime-local"] {
  display: block;
  width: 100%;
  height: auto;
  font-size: 16px;
  line-height: 1.5;
  color: #55595c;
  /*  Reset unusual Firefox-on-Android default style; see https:github.com/necolas/normalize.css/issues/214 */
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

[dir] input[type="datetime-local"] {
  padding: 6px 12px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #eceeef;
  border-radius: 0;
}

input[type="date"] {
  display: block;
  width: 100%;
  height: auto;
  font-size: 16px;
  line-height: 1.5;
  color: #55595c;
  /*  Reset unusual Firefox-on-Android default style; see https:github.com/necolas/normalize.css/issues/214 */
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

[dir] input[type="date"] {
  padding: 6px 12px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #eceeef;
  border-radius: 0;
}

input[type="month"] {
  display: block;
  width: 100%;
  height: auto;
  font-size: 16px;
  line-height: 1.5;
  color: #55595c;
  /*  Reset unusual Firefox-on-Android default style; see https:github.com/necolas/normalize.css/issues/214 */
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

[dir] input[type="month"] {
  padding: 6px 12px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #eceeef;
  border-radius: 0;
}

input[type="time"] {
  display: block;
  width: 100%;
  height: auto;
  font-size: 16px;
  line-height: 1.5;
  color: #55595c;
  /*  Reset unusual Firefox-on-Android default style; see https:github.com/necolas/normalize.css/issues/214 */
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

[dir] input[type="time"] {
  padding: 6px 12px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #eceeef;
  border-radius: 0;
}

input[type="week"] {
  display: block;
  width: 100%;
  height: auto;
  font-size: 16px;
  line-height: 1.5;
  color: #55595c;
  /*  Reset unusual Firefox-on-Android default style; see https:github.com/necolas/normalize.css/issues/214 */
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

[dir] input[type="week"] {
  padding: 6px 12px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #eceeef;
  border-radius: 0;
}

input[type="number"] {
  display: block;
  width: 100%;
  height: auto;
  font-size: 16px;
  line-height: 1.5;
  color: #55595c;
  /*  Reset unusual Firefox-on-Android default style; see https:github.com/necolas/normalize.css/issues/214 */
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

[dir] input[type="number"] {
  padding: 6px 12px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #eceeef;
  border-radius: 0;
}

input[type="email"] {
  display: block;
  width: 100%;
  height: auto;
  font-size: 16px;
  line-height: 1.5;
  color: #55595c;
  /*  Reset unusual Firefox-on-Android default style; see https:github.com/necolas/normalize.css/issues/214 */
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

[dir] input[type="email"] {
  padding: 6px 12px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #eceeef;
  border-radius: 0;
}

input[type="url"] {
  display: block;
  width: 100%;
  height: auto;
  font-size: 16px;
  line-height: 1.5;
  color: #55595c;
  /*  Reset unusual Firefox-on-Android default style; see https:github.com/necolas/normalize.css/issues/214 */
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

[dir] input[type="url"] {
  padding: 6px 12px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #eceeef;
  border-radius: 0;
}

input[type="search"] {
  display: block;
  width: 100%;
  height: auto;
  font-size: 16px;
  line-height: 1.5;
  color: #55595c;
  /*  Reset unusual Firefox-on-Android default style; see https:github.com/necolas/normalize.css/issues/214 */
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

[dir] input[type="search"] {
  padding: 6px 25px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #eceeef;
  border-radius: 0;
}

input[type="tel"] {
  display: block;
  width: 100%;
  height: auto;
  font-size: 16px;
  line-height: 1.5;
  color: #55595c;
  /*  Reset unusual Firefox-on-Android default style; see https:github.com/necolas/normalize.css/issues/214 */
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

[dir] input[type="tel"] {
  padding: 6px 12px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #eceeef;
  border-radius: 0;
}

input[type="color"] {
  display: block;
  width: 100%;
  height: auto;
  font-size: 16px;
  line-height: 1.5;
  color: #55595c;
  /*  Reset unusual Firefox-on-Android default style; see https:github.com/necolas/normalize.css/issues/214 */
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

[dir] input[type="color"] {
  padding: 6px 12px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #eceeef;
  border-radius: 0;
}

.nesty-input {
  display: block;
  width: 100%;
  height: auto;
  font-size: 16px;
  line-height: 1.5;
  color: #55595c;
  /*  Reset unusual Firefox-on-Android default style; see https:github.com/necolas/normalize.css/issues/214 */
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

[dir] .nesty-input {
  padding: 6px 12px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #eceeef;
  border-radius: 0;
}

ul[data-hc-pills-container] {
  display: block;
  width: 100%;
  height: auto;
  font-size: 16px;
  line-height: 1.5;
  color: #55595c;
  /*  Reset unusual Firefox-on-Android default style; see https:github.com/necolas/normalize.css/issues/214 */
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

[dir] ul[data-hc-pills-container] {
  padding: 6px 12px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #eceeef;
  border-radius: 0;
}

/*  Customize the `:focus` state to imitate native WebKit styles. */

select:focus {
  outline: 0;
}

[dir] select:focus {
  border-color: rgba(0, 44, 151, 1);
}

textarea:focus {
  outline: 0;
}

[dir] textarea:focus {
  border-color: rgba(0, 44, 151, 1);
}

input[type="text"]:focus {
  outline: 0;
}

[dir] input[type="text"]:focus {
  border-color: rgba(0, 44, 151, 1);
}

input[type="password"]:focus {
  outline: 0;
}

[dir] input[type="password"]:focus {
  border-color: rgba(0, 44, 151, 1);
}

input[type="datetime"]:focus {
  outline: 0;
}

[dir] input[type="datetime"]:focus {
  border-color: rgba(0, 44, 151, 1);
}

input[type="datetime-local"]:focus {
  outline: 0;
}

[dir] input[type="datetime-local"]:focus {
  border-color: rgba(0, 44, 151, 1);
}

input[type="date"]:focus {
  outline: 0;
}

[dir] input[type="date"]:focus {
  border-color: rgba(0, 44, 151, 1);
}

input[type="month"]:focus {
  outline: 0;
}

[dir] input[type="month"]:focus {
  border-color: rgba(0, 44, 151, 1);
}

input[type="time"]:focus {
  outline: 0;
}

[dir] input[type="time"]:focus {
  border-color: rgba(0, 44, 151, 1);
}

input[type="week"]:focus {
  outline: 0;
}

[dir] input[type="week"]:focus {
  border-color: rgba(0, 44, 151, 1);
}

input[type="number"]:focus {
  outline: 0;
}

[dir] input[type="number"]:focus {
  border-color: rgba(0, 44, 151, 1);
}

input[type="email"]:focus {
  outline: 0;
}

[dir] input[type="email"]:focus {
  border-color: rgba(0, 44, 151, 1);
}

input[type="url"]:focus {
  outline: 0;
}

[dir] input[type="url"]:focus {
  border-color: rgba(0, 44, 151, 1);
}

input[type="search"]:focus {
  outline: 0;
}

[dir] input[type="search"]:focus {
  border-color: rgba(0, 44, 151, 1);
}

input[type="tel"]:focus {
  outline: 0;
}

[dir] input[type="tel"]:focus {
  border-color: rgba(0, 44, 151, 1);
}

input[type="color"]:focus {
  outline: 0;
}

[dir] input[type="color"]:focus {
  border-color: rgba(0, 44, 151, 1);
}

.nesty-input:focus {
  outline: 0;
}

[dir] .nesty-input:focus {
  border-color: rgba(0, 44, 151, 1);
}

ul[data-hc-pills-container]:focus {
  outline: 0;
}

[dir] ul[data-hc-pills-container]:focus {
  border-color: rgba(0, 44, 151, 1);
}

/*  Placeholder */

select::-moz-placeholder,
textarea::-moz-placeholder,
input[type="text"]::-moz-placeholder,
input[type="password"]::-moz-placeholder,
input[type="datetime"]::-moz-placeholder,
input[type="datetime-local"]::-moz-placeholder,
input[type="date"]::-moz-placeholder,
input[type="month"]::-moz-placeholder,
input[type="time"]::-moz-placeholder,
input[type="week"]::-moz-placeholder,
input[type="number"]::-moz-placeholder,
input[type="email"]::-moz-placeholder,
input[type="url"]::-moz-placeholder,
input[type="search"]::-moz-placeholder,
input[type="tel"]::-moz-placeholder,
input[type="color"]::-moz-placeholder,
.nesty-input::-moz-placeholder,
ul[data-hc-pills-container]::-moz-placeholder {
  color: #999;
  opacity: 1;
}

select:-ms-input-placeholder,
textarea:-ms-input-placeholder,
input[type="text"]:-ms-input-placeholder,
input[type="password"]:-ms-input-placeholder,
input[type="datetime"]:-ms-input-placeholder,
input[type="datetime-local"]:-ms-input-placeholder,
input[type="date"]:-ms-input-placeholder,
input[type="month"]:-ms-input-placeholder,
input[type="time"]:-ms-input-placeholder,
input[type="week"]:-ms-input-placeholder,
input[type="number"]:-ms-input-placeholder,
input[type="email"]:-ms-input-placeholder,
input[type="url"]:-ms-input-placeholder,
input[type="search"]:-ms-input-placeholder,
input[type="tel"]:-ms-input-placeholder,
input[type="color"]:-ms-input-placeholder,
.nesty-input:-ms-input-placeholder,
ul[data-hc-pills-container]:-ms-input-placeholder {
  color: #999;
  opacity: 1;
}

select::placeholder,
textarea::placeholder,
input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="datetime"]::placeholder,
input[type="datetime-local"]::placeholder,
input[type="date"]::placeholder,
input[type="month"]::placeholder,
input[type="time"]::placeholder,
input[type="week"]::placeholder,
input[type="number"]::placeholder,
input[type="email"]::placeholder,
input[type="url"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
input[type="color"]::placeholder,
.nesty-input::placeholder,
ul[data-hc-pills-container]::placeholder {
  color: #999;
  opacity: 1;
}

[dir] ul[data-hc-pills-container] {
  margin-top: 0;
}

[dir] ul[data-hc-pills-container][data-hc-focus="true"] {
  border-color: rgba(0, 44, 151, 1);
}

select {
  height: calc(16px * 1.5 + 15px + 2px);
}

/*  Reset height for `textarea`s */

textarea {
  height: auto;
  height: calc((16px * 1.5 + 15px + 2px) * 3);
  resize: vertical;
}

/*  Search inputs in iOS */

/* 
 This overrides the extra rounded corners on search inputs in iOS so that our
 `.form-control` class can properly style them. Note that this cannot simply
 be added to `.form-control` as it's not specific enough. For details, see
 https:github.com/twbs/bootstrap/issues/11586. */

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

/*  Special styles for iOS temporal inputs

 In Mobile Safari, setting `display: block` on temporal inputs causes the
 text within the input to become vertically misaligned. As a workaround, we
 set a pixel line-height that matches the given height of the input, but only
 for Safari. */

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"] {
    line-height: calc(16px * 1.5 * 2.5);
  }
}

/*  Form groups

 Designed to help with the organization and spacing of vertical forms. For
 horizontal forms, use the predefined grid classes. */

[dir] .form-field {
  margin-bottom: calc(16px * 1.5);
}

.form-field p {
  display: block;
  font-size: 90%;
  color: #6c769a;
}

[dir] .form-field p {
  margin-top: 10px;
  margin-bottom: 15px;
}

.form-field .optional {
  color: #61698c;
}

[dir="ltr"] .form-field .optional {
  margin-left: 4px;
}

[dir="rtl"] .form-field .optional {
  margin-right: 4px;
}

.form-field.boolean {
  position: relative;
}

[dir="ltr"] .form-field.boolean {
  padding-left: 20px;
}

[dir="rtl"] .form-field.boolean {
  padding-right: 20px;
}

.form-field.boolean input[type="checkbox"] {
  position: absolute;
}

[dir="ltr"] .form-field.boolean input[type="checkbox"] {
  left: 0;
}

[dir="rtl"] .form-field.boolean input[type="checkbox"] {
  right: 0;
}

.form-field.boolean label {
  min-height: calc(16px * 1.5);
  /* Ensure the input doesn't jump when there is no text */
}

[dir] .form-field.boolean label {
  margin-bottom: 0;
  cursor: pointer;
}

[dir] input[type="radio"][disabled],
[dir] input[type="radio"].disabled,
[dir] fieldset[disabled] input[type="radio"],
[dir] input[type="checkbox"][disabled],
[dir] input[type="checkbox"].disabled,
[dir] fieldset[disabled] input[type="checkbox"] {
  cursor: not-allowed;
}

/*  Help text

 Apply to any element you wish to create light text for placement immediately
 below a form control. Use for general help, formatting, or instructional text. */

.form-field p,
.help-block {
  display: block; /* account for any element using help-block */
  font-size: 90%;
  color: #6c769a; /* lighten the text some for contrast */
}

[dir] .form-field p,
[dir] .help-block {
  margin-top: 10px;
  margin-bottom: 15px;
}

[dir] .upload-dropzone {
  padding: calc(16px * 1.5) 16px;
  border-color: #eceeef;
  border-radius: 0;
}

.upload-dropzone {
  font-size: calc(16px * 0.89);
}

.upload-dropzone a {
  font-size: calc(16px * 0.89);
}

@media (min-width: 768px) and (max-width: 991px) {
  [dir] .search-results-box {
    padding: calc(15px * 2);
    margin-bottom: calc(16px * 1.5 * 1.54);
  }
}

[dir] .search-results-page {
  margin-bottom: calc(16px * 1.5 * 2);
}

.search-results-count {
  font-size: calc(16px * 1.21);
  font-weight: 600;
}

[dir] .search-result {
  margin-bottom: calc(16px * 1.5);
  border-bottom: 1px solid #eceeef;
}

.search-result__title {
  font-weight: 600;
}

[dir] .search-result__title {
  margin-bottom: calc(16px * 1.5 / 2);
}

.search-result__description {
  font-size: calc(16px * 0.89);
}

[dir] .search-result__description {
  margin-bottom: calc(16px * 1.5 / 2);
}

.search-result__description:empty {
  display: none;
}

.search-result__description em {
  font-style: normal;
  font-weight: 600;
}

[dir] .search-result__description em {
  padding: 0 3px;
  background-color: #fff3ca;
  border-radius: 3px;
}

[dir] .search-result__meta {
  margin-bottom: calc(16px * 1.5 / 2);
}

.search-result-votes {
  display: inline-block;
  font-size: calc(16px * 0.89);
  color: #fff;
}

[dir] .search-result-votes {
  padding: 2px 4px;
  background-color: rgba(0, 44, 151, 1);
  border-radius: 0;
}

/* ==========================================================================
  Search Results Filters
   ========================================================================== */

.search-results-filters {
  font-size: calc(16px - 2px);
}

[dir] .search-results-filters {
  padding: 16px;
  border: 1px solid #eceeef;
  border-radius: 0;
}

@media (max-width: 767px) {
  [dir] .search-results-filters {
    margin-bottom: calc(16px * 1.5 * 2);
  }
}

[dir] .search-results-filter + .search-results-filter {
  margin-top: 24px;
}

@media (min-width: 768px) {
  [dir] .search-results-filter + .search-results-filter {
    margin-top: 32px;
  }
}

.search-results-filter__title {
  font-weight: 600;
}

[dir] .search-results-filter__title {
  margin-bottom: 0;
}

[dir="ltr"] .search-results-filter__title {
  margin-left: 8px;
}

[dir="rtl"] .search-results-filter__title {
  margin-right: 8px;
}

@media (max-width: 767px) {
  .search-results-filter__title {
    position: relative;
    font-size: calc(16px * 1);
  }

  [dir] .search-results-filter__title {
    cursor: pointer;
  }
}

@media (max-width: 767px) {
  .search-results-filter__title:after {
    position: absolute;
    top: 50%;
    display: block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    line-height: 1.5;
    color: inherit;
    content: "\f107";
    transition: all 0.3s ease;
  }

  [dir] .search-results-filter__title:after {
    transform: translateY(-50%);
  }

  [dir="ltr"] .search-results-filter__title:after {
    right: 0;
    margin-left: 5px;
  }

  [dir="rtl"] .search-results-filter__title:after {
    left: 0;
    margin-right: 5px;
  }

  [dir="ltr"] .search-results-filter__title.is-active:after {
    transform: translateY(-50%) rotate(-180deg);
  }

  [dir="rtl"] .search-results-filter__title.is-active:after {
    transform: translateY(-50%) rotate(180deg);
  }
}

[dir] .search-results-filter__list {
  margin-top: 24px;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .search-results-filter__list {
    display: none;
  }
}

@media (min-width: 768px) {
  .search-results-filter__list {
    display: block !important;
  }
}

.search-results-filter__item {
  display: block;
}

[dir] .search-results-filter__item {
  margin-bottom: 4px;
}

.search-results-filter__item.is-active .search-results-filter__link {
  color: #fff;
}

/* Added 30% darker shade after color palette update - May 2025 */
[dir] .search-results-filter__item.is-active .search-results-filter__link {
  background-color: #4aa5ff;
  border-color: #4aa5ff;
}

.search-results-filter__item--subfilter:nth-child(n + 7) {
  display: none;
}

.search-result__subfilters--all .search-results-filter__item:nth-child(n + 7) {
  display: block;
}

.search-result__subfilters--all .search-result__show-more {
  display: none !important;
}

.search-results-filter__link {
  display: block;
  color: #373C50;
  text-decoration: none;
  transition: all 0.3s ease;
}

[dir] .search-results-filter__link {
  padding: 6px 8px;
  border: $border_width solid transparent;
  border-radius: 0;
}

[dir] .search-results-filter__link:hover {
  background-color: #f7f7f9;
  border-color: #f7f7f9;
}

[dir] .search-results-filter__link:focus {
  background-color: #f7f7f9;
  border-color: #f7f7f9;
}

[dir] .search-results-filter__link:active {
  background-color: #f7f7f9;
  border-color: #f7f7f9;
}

.search-results-filter__link:active {
  outline: none;
}

[dir] .search-results-filter__link:active {
  background-image: none;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

/* Updated opacity from 0.6 to 0.8 - May 2025 */
.search-results-filter__count {
  opacity: 0.8;
}

.search-result__show-more {
  color: rgba(227, 241, 255, 1);
}

[dir] .search-result__show-more {
  padding: 0;
  background-color: transparent;
  border: 0;
}

[dir="ltr"] .search-result__show-more {
  margin-left: 8px;
}

[dir="rtl"] .search-result__show-more {
  margin-right: 8px;
}

[dir] .error-page {
  padding-top: 10%;
  padding-bottom: 10%;
  text-align: center;
}

.error-page__title {
  text-transform: capitalize;
}

[dir] .profile-header {
  padding: calc(16px * 1.5) 15px;
  margin-bottom: calc(16px * 1.5);
/*   text-align: center; */
  background-color: #fff;
  border-radius: 0;
}

.profile-header__avatar {
  display: inline-block;
  margin-right: 1em;
}

.profile-header__name {
  font-size: calc(16px * 1.45);
  flex: 1;
}

[dir] .profile-header__name {
  margin-bottom: calc(16px * 1.5 / 2);
}

.profile-header__name a {
  color: #373C50;
}

.profile-header__name a:hover,
.profile-header__name a:focus,
.profile-header__name a:active {
  color: rgba(39, 144, 255, 1);
}

@media (min-width: 768px) {
  .profile-header__name {
    font-size: calc(16px * 2);
    font-weight: 300;
  }
}

.profile-header__options [data-action="edit-profile"] {
  color: rgba(0, 44, 151, 1);
}

[dir] .profile-header__options [data-action="edit-profile"] {
  background-color: transparent;
  border-color: rgba(0, 44, 151, 1);
}

.profile-header__options [data-action="edit-profile"]:hover,
.profile-header__options [data-action="edit-profile"]:focus,
.profile-header__options [data-action="edit-profile"]:active {
  color: #001a5a;
}

[dir] .profile-header__options [data-action="edit-profile"]:hover,
[dir] .profile-header__options [data-action="edit-profile"]:focus,
[dir] .profile-header__options [data-action="edit-profile"]:active {
  background-color: darken(transparent, 12%);
  border-color: #001a5a;
}

[dir] .profile-header__options [data-action="edit-profile"]:active {
  background-image: none;
}

.profile-header__options [data-action="edit-profile"]:hover {
  opacity: 0.8;
}

[dir] .profile-header__options [data-action="edit-profile"]:hover {
  border-color: rgba(0, 0, 0, 0.8);
}

.profile-header__private-badge {
  display: inline-block;
}

[dir] .profile-header__private-badge {
  margin-bottom: calc(16px * 1.5);
  background-color: rgba(0, 44, 151, 1);
}

.profile-header__description {
  word-break: break-all;
  word-break: break-word;
}

.profile-stats {
  font-size: calc(16px - 2px);
  color: #979797;
  list-style: none;
}

[dir] .profile-stats {
  margin-bottom: calc(16px * 1.5 / 2);
}

[dir="ltr"] .profile-stats {
  padding-left: 0;
}

[dir="rtl"] .profile-stats {
  padding-right: 0;
}

[dir] .profile-stats__stat {
  margin-bottom: calc(16px * 1.5 / 4);
}

[dir="ltr"] .profile-stats__stat {
  margin-right: 15px;
  display: flex;
  flex-direction: column;
}

[dir="rtl"] .profile-stats__stat {
  margin-left: 15px;
}

@media (max-width: 767px) {
  .profile-stats__stat {
    display: block;
  }

  .profile-stats__stat:before {
    display: none;
  }
}

[dir="ltr"] .profile-stats__label {
  margin-right: calc(15px / 2);
}

[dir="rtl"] .profile-stats__label {
  margin-left: calc(15px / 2);
}

.profile-stats__value {
  font-weight: 500;
  color: black;
  font-size: 16px;
}

.profile-nav {
  overflow: hidden;
  font-size: calc(16px * 0.89);
  font-weight: 600;
}

[dir] .profile-nav {
  margin-bottom: calc(16px * 1.5);
  background-color: #eceeef;
  border-radius: 0;
}

.profile-nav__items {
  list-style: none;
}

[dir] .profile-nav__items {
  margin: 0;
}

[dir="ltr"] .profile-nav__items {
  padding-left: 0;
}

[dir="rtl"] .profile-nav__items {
  padding-right: 0;
}

[dir] .profile-nav__item {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .profile-nav__item {
    display: inline-block;
    vertical-align: middle;
  }
}

.profile-nav__item a {
  display: block;
  color: #373C50;
}

.profile-nav__item.is-active {
  color: #fff;
}

[dir] .profile-nav__item.is-active {
  background-color: rgba(0, 44, 151, 1);
}

.profile-nav__item.is-active {
  line-height: 1;
}

[dir] .profile-nav__item.is-active {
  padding: calc(16px * 1.5 / 1.5) 15px;
}

.profile-nav__item a {
  line-height: 1;
}

[dir] .profile-nav__item a {
  padding: calc(16px * 1.5 / 1.5) 15px;
}

[dir="ltr"] .profile-nav__item:after {
  right: 15px !important;
}

[dir="rtl"] .profile-nav__item:after {
  left: 15px !important;
}

.profile-section {
  width: 100%;
}

[dir] .profile-section__header {
  margin-bottom: calc(16px * 1.5);
}

.profile-section__title {
  font-size: calc(16px * 1.45);
}

[dir] .profile-section__title {
  margin-bottom: calc(16px * 1.5 / 2);
}

.profile-section__description {
  font-size: calc(16px * 0.89);
  color: #979797;
}

@media (min-width: 768px) {
  [dir] .profile-section__description {
    padding-bottom: 0;
  }
}

.profile-section-sorter {
  font-size: calc(16px * 0.89);
}

.profile-section-sorter .dropdown {
  display: inline-block;
}

@media (min-width: 768px) {
  .profile-section-sorter {
    display: table;
    width: 100%;
  }
}

@media (min-width: 768px) {
  [dir] .profile-section-sorter {
    padding-top: 0;
    border-top: 0;
  }
}

@media (min-width: 768px) {
  .profile-section-sorter__col {
    display: table-cell;
    vertical-align: middle;
  }
}

@media (max-width: 767px) {
  [dir] .profile-section-sorter__col--main {
    margin-bottom: calc(16px * 1.5 / 2);
  }
}

@media (min-width: 768px) {
  [dir="ltr"] .profile-section-sorter__col--main {
    padding-right: 15px;
  }

  [dir="rtl"] .profile-section-sorter__col--main {
    padding-left: 15px;
  }
}

@media (min-width: 768px) {
  [dir="ltr"] .profile-section-sorter__col--btn {
    text-align: right;
  }

  [dir="rtl"] .profile-section-sorter__col--btn {
    text-align: left;
  }
}

.profile-contribution {
  position: relative;

  word-wrap: break-word;
}

[dir] .profile-contribution {
  padding: calc(16px * 1.5 / 2) 15px;
  background-color: #f4f5f6;

  border-radius: 0;
}

[dir] .profile-contribution__header {
  margin-bottom: calc(16px * 1.5 / 4);
}

[dir] .profile-contribution__status {
  margin-bottom: calc(16px * 1.5 / 4);
}

.profile-contribution__title {
  font-size: 16px;
  font-weight: 600;
}

[dir] .profile-contribution__title {
  margin-bottom: calc(16px * 1.5 / 4);
}

[dir] .profile-contribution__body {
  margin-bottom: calc(16px * 1.5 / 2);
}

.profile-contribution--list .profile-contribution__title:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[dir="ltr"] .profile-contribution--list .profile-contribution__title:before {
  margin-right: 2px;
}

[dir="rtl"] .profile-contribution--list .profile-contribution__title:before {
  margin-left: 2px;
}

.profile-contribution__breadcrumbs {
  font-size: calc(16px * 0.89);
}

[dir] .profile-contribution__breadcrumbs {
  padding: 0;
  margin-bottom: calc(16px * 1.5 / 2);
}

.profile__no-activity {
  color: #979797;
}

[dir] .profile__no-activity {
  text-align: center;
}

.profile__private-activity {
  color: #979797;
}

[dir] .profile__private-activity {
  text-align: center;
}

.profile-activity-list {
  list-style: none;
}

[dir="ltr"] .profile-activity-list {
  padding-left: 0;
}

[dir="rtl"] .profile-activity-list {
  padding-right: 0;
}

.profile-activity {
  position: relative;
}

[dir] .profile-activity {
  margin-bottom: calc(16px * 1.5 * 1.5);
}

.profile-activity__header {
  font-size: calc(16px * 0.89);
  font-weight: 600;
}

[dir] .profile-activity__header {
  margin-bottom: calc(16px * 1.5 / 2);
}

.profile-activity__header:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[dir="ltr"] .profile-activity__header:before {
  margin-right: 2px;
}

[dir="rtl"] .profile-activity__header:before {
  margin-left: 2px;
}

.profile-activity__avatar {
  width: 30px;
  height: 30px;
}

[dir="ltr"] .profile-activity__avatar {
  margin-right: calc(15px / 2);
}

[dir="rtl"] .profile-activity__avatar {
  margin-left: calc(15px / 2);
}

.profile-activity-list--articles .profile-contribution__title:before,
.profile-activity[class$="-article"] .profile-activity__header:before {
  content: "\f15c";
}

.profile-activity-list--posts .profile-contribution__title:before,
.profile-activity[class$="-post"] .profile-activity__header:before {
  content: "\f086";
}

.profile-activity-list--comments .profile-contribution__title:before,
.profile-activity[class$="-comment"] .profile-activity__header:before {
  font-weight: 400;
  content: "\f075";
}

.user-subscribe {
  display: inline-block;
}

[dir] .request-page {
  margin-bottom: calc(16px * 1.5 * 2);
}

.request {
  position: relative;
}

.request-id {
  font-weight: 600;
}

[dir] .request-id {
  margin-bottom: calc(16px * 1.5 / 2);
}

.request-subject {
  font-size: calc(16px * 1.45);
}

@media (min-width: 992px) {
  .request-subject {
    font-size: calc(16px * 2);
    font-weight: 300;
  }
}

.request-follow-up:empty {
  display: none;
}

.request-sidebar {
  font-size: 14px;
}

[dir] .request-sidebar {
  padding: calc(16px * 1.5) 15px 0;
  margin-bottom: calc(16px * 1.5);
  background: #f7f7f9;
  border: 1px solid #eceeef;
  border-radius: 0;
}

[dir] .request-sidebar dd {
  margin-bottom: calc(16px * 1.5 / 2);
}

[dir] .request__comment:first-child {
  margin-top: 0;
}

.request-status {
  display: inline-block;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
}

[dir] .request-status {
  padding: 1px calc(15px / 2);
  border-radius: 0;
}

[dir] .request-status--solved,
[dir] .request-status--closed {
  background-color: #0c9;
}

[dir] .request-status--new,
[dir] .request-status--open {
  background-color: #ff5252;
}

[dir] .request-status--answered {
  background-color: #fad782;
}

.attachment-list {
  list-style: none;
}

.attachment-list__item {
  position: relative;
  word-break: break-all;
}

[dir] .attachment-list__item {
  padding: 0;
  margin-top: calc(16px * 1.5 / 2);
}

[dir] .attachment-list__item:last-child {
  margin-bottom: 0;
}

.attachment-list__item .btn {
  width: 100%;
}

[dir] .attachment-list__item .btn {
  padding-top: calc(16px * 1.5 / 4);
  padding-bottom: calc(16px * 1.5 / 4);
}

[dir="ltr"] .attachment-list__item .btn {
  text-align: left;
}

[dir="rtl"] .attachment-list__item .btn {
  text-align: right;
}

.pagination-list {
  list-style: none;
}

[dir="ltr"] .pagination-list {
  padding-left: 0;
  margin-left: 0;
}

[dir="rtl"] .pagination-list {
  padding-right: 0;
  margin-right: 0;
}

.pagination-next,
.pagination-prev,
.pagination-first,
.pagination-last {
  display: inline-block;
}

[dir="ltr"] .pagination-next-text {
  margin-right: 16px;
}

[dir="rtl"] .pagination-next-text {
  margin-left: 16px;
}

[dir="rtl"] .pagination-next-text {
  margin-left: 16px;
}

[dir="ltr"] .pagination-prev-text {
  margin-left: 16px;
}

[dir="rtl"] .pagination-prev-text {
  margin-right: 16px;
}

[dir="rtl"] .pagination-prev-text {
  margin-right: 16px;
}

[dir] .section-articles__title {
  margin-bottom: 0;
}

.sidenav-container {
  font-size: 15px !important;
}

.sidenav-container a {
  color: #002C97;
}

.lt-toc--title,
.lt-toc {
  font-size: 14px !important;
}

.embed,
.embed-responsive {
  position: relative;
  z-index: 1;
  display: block;
  height: 0;
  overflow: hidden;
}

[dir] .embed,
[dir] .embed-responsive {
  padding: 0;
  padding-bottom: 56.25%;
  margin-bottom: 30px;
}

.embed img,
.embed-responsive img {
  width: 100%;
}

.embed iframe,
.embed embed,
.embed object,
.embed video,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

[dir] .embed iframe,
[dir] .embed embed,
[dir] .embed object,
[dir] .embed video,
[dir] .embed-responsive iframe,
[dir] .embed-responsive embed,
[dir] .embed-responsive object,
[dir] .embed-responsive video {
  border: 0;
}

[dir="ltr"] .embed iframe,
[dir="ltr"] .embed embed,
[dir="ltr"] .embed object,
[dir="ltr"] .embed video,
[dir="ltr"] .embed-responsive iframe,
[dir="ltr"] .embed-responsive embed,
[dir="ltr"] .embed-responsive object,
[dir="ltr"] .embed-responsive video {
  left: 0;
}

[dir="rtl"] .embed iframe,
[dir="rtl"] .embed embed,
[dir="rtl"] .embed object,
[dir="rtl"] .embed video,
[dir="rtl"] .embed-responsive iframe,
[dir="rtl"] .embed-responsive embed,
[dir="rtl"] .embed-responsive object,
[dir="rtl"] .embed-responsive video {
  right: 0;
}

.embed:focus,
.embed-responsive:focus {
  outline: none !important;
}

[dir] .embed-responsive--16by9 {
  padding-bottom: 56.25%;
}

[dir] .embed-responsive--4by3 {
  padding-bottom: 75%;
}

.skip-navigation {
  position: absolute;
  top: auto;
  z-index: -999;
  display: flex;
  overflow: hidden;
  font-size: 14px;
  color: white;
  align-items: center;
  justify-content: center;
}

[dir] .skip-navigation {
  padding: 20px;
  margin: 20px;
  background-color: black;
}

[dir="ltr"] .skip-navigation {
  left: -999px;
}

[dir="rtl"] .skip-navigation {
  right: -999px;
}

.skip-navigation:focus,
.skip-navigation:active {
  top: auto;
  z-index: 999;
  overflow: auto;
  text-decoration: none;
}

[dir] .skip-navigation:focus,
[dir] .skip-navigation:active {
  text-align: center;
}

[dir="ltr"] .skip-navigation:focus,
[dir="ltr"] .skip-navigation:active {
  left: auto;
}

[dir="rtl"] .skip-navigation:focus,
[dir="rtl"] .skip-navigation:active {
  right: auto;
}

/* ==========================================================================
  Notification
  ========================================================================== */

.notification {
  display: table;
  width: 100%;
  font-family: sans-serif;
  font-size: 12px;
  color: #555;
  transition: height 0.2s;
}

[dir] .notification {
  padding: 13px 15px;
  border: 1px solid;
}

.notification a {
  color: #158ec2;
}

.notification-inner {
  max-width: 980px;
}

[dir] .notification-inner {
  padding: 0 20px;
  margin: 0 auto;
}

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

.notification-text {
  width: 100%;
}

[dir] .notification-text {
  padding: 0 15px;
}

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

[dir] .notification + .notification {
  margin-bottom: -1px;
}

/* Error */

[dir] .notification-error {
  background: #ffeded;
  border-color: #f7cbcb;
}

[dir] .notification-error .notification-icon:before,
[dir] .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 */

[dir] .notification-notice {
  background: #dbf3ff;
  border-color: #b5e0f5;
}

[dir] .notification-notice .notification-icon:before,
[dir] .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;
}

[dir] .notification-alert {
  background: #fff8ed;
  border-color: #fcdba9;
}

[dir] .notification-alert .notification-icon:before,
[dir] .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 {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  content: "";
}

[dir] .notification-icon:before,
[dir] .notification-inline.notification-error:before {
  background-size: cover;
}

/* Dismiss button */

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

[dir] .notification-dismiss,
[dir] a.notification-dismiss {
  cursor: pointer;
}

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

/* Inline notifications */

.notification-inline {
  position: relative;
  line-height: 14px;
  vertical-align: middle;
}

[dir] .notification-inline {
  padding: 5px;
  margin-top: 5px;
  border-radius: 4px;
}

[dir="ltr"] .notification-inline {
  text-align: left;
}

[dir="rtl"] .notification-inline {
  text-align: right;
}

[dir="rtl"] .notification-inline {
  text-align: right;
}

.notification-inline[aria-hidden="true"] {
  display: none;
}

[dir] .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");
}

[dir="ltr"] .notification-inline.notification-error:before {
  margin: -2px 5px 0 0;
}

[dir="rtl"] .notification-inline.notification-error:before {
  margin: -2px 0 0 5px;
}

[dir="rtl"] .notification-inline.notification-error:before {
  margin: 0 0 0 5px;
}

.notification-inline.notification-error {
  color: #cc3340;
}

[dir] .notification-inline.notification-error {
  background-color: #fff0f1;
  border: 1px solid #e35b66;
}

[dir] .notification-inline.notification-large {
  padding: 13px 15px;
  margin-bottom: 25px;
}

[dir="ltr"] .notification-left-aligned {
  padding-left: 0;
  text-align: left;
}

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

/* Community */

.meta {
  font-size: calc(16px - 4px);
  color: #61698c;
}

[dir] .community-nav__item {
  padding: 7px 0;
}

[dir="ltr"] .community-nav__item {
  float: left;
}

[dir="rtl"] .community-nav__item {
  float: right;
}

[dir="ltr"] .community-nav__item + .community-nav__item {
  margin-left: 15px;
}

[dir="rtl"] .community-nav__item + .community-nav__item {
  margin-right: 15px;
}

.community-nav__item.is-active {
  font-weight: 600;
}

[dir] .community-nav__item--button {
  padding: 0;
}

[dir="ltr"] .community-nav__item--button {
  float: right;
}

[dir="rtl"] .community-nav__item--button {
  float: left;
}

[dir] .topic-list {
  margin-top: 0;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  [dir] .topic-list-page {
    margin-bottom: calc(16px * 1.5);
  }
}

[dir="ltr"] .topic-list-item:nth-child(2n + 1) {
  clear: left;
}

[dir="rtl"] .topic-list-item:nth-child(2n + 1) {
  clear: right;
}

[dir] .topic-list-item:first-child .topic-list-item__box {
  margin-top: 0;
}

@media (min-width: 768px) {
  [dir] .topic-list-item:nth-child(2) .topic-list-item__box {
    margin-top: 0;
  }
}

[dir] .topic-list-item__box {
  padding: calc(16px * 1.5) 15px;
  margin-top: calc(15px);
  background: #f7f7f9;
  border: 1px solid #eceeef;
  border-radius: 0;
}

@media (min-width: 768px) {
  [dir] .topic-list-item__box {
    margin-top: calc(15px * 2);
  }
}

[dir] .topic-list-item__title {
  margin-bottom: calc(16px * 1.5 / 2);
}

[dir="ltr"] .topic-followers {
  margin-right: calc(15px / 2);
}

[dir="rtl"] .topic-followers {
  margin-left: calc(15px / 2);
}

[dir="ltr"] .topic-filters__item {
  margin-right: 8px;
}

[dir="rtl"] .topic-filters__item {
  margin-left: 8px;
}

@media (max-width: 767px) {
  [dir] .topic-filters__item {
    margin-bottom: 8px;
  }
}

[dir] .topic-controls {
  margin-bottom: calc(16px * 1.5 * 2);
}

@media (min-width: 768px) {
  .topic-controls {
    display: flex;
    justify-content: space-between;
  }
}

@media (min-width: 768px) {
  .topic-controls__item {
    display: flex;
    align-items: center;
  }
}

[dir="ltr"] .topic-followers {
  margin-right: 16px;
}

[dir="rtl"] .topic-followers {
  margin-left: 16px;
}

.topic-controls__item--subscribe {
  display: flex;
  align-items: center;
}

[dir] .post-title + .dropdown {
  margin-bottom: calc(16px * 1.5 / 2);
}

.post__actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -ms-grid-row-align: center;
  align-self: center;
}

.post__actions button {
  font-size: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

[dir] .post__actions button {
  cursor: pointer;
  background-color: transparent;
  border: none;
}

[dir] .community-featured-posts {
  margin-top: 0 !important;
  box-shadow: none !important;
}

[dir] .community-featured-posts .promoted-articles {
  margin: 0 !important;
}

[dir] .post-list {
  clear: both;
}

@media (min-width: 768px) {
  [dir] .post-list-page {
    margin-bottom: calc(16px * 1.5 * 2);
  }
}

[dir] .post-list-item {
  border-bottom: 1px solid #eceeef;
}

[dir] .post-list-item:last-child {
  padding: 0;
  border: none;
}

@media (min-width: 768px) {
  .post-list-item {
    display: table;
    width: 100%;
  }

  [dir] .post-list-item {
    padding-bottom: calc(16px * 1.5);
    margin-top: calc(16px * 1.5);
  }
}

@media (max-width: 767px) {
  [dir] .post-list-item {
    padding-bottom: 15px;
    margin-top: 15px;
  }
}

.post-list-item__title {
  font-size: calc(16px * 1.20);
}

[dir] .post-list-item__title {
  margin-bottom: 0;
}

.post-list-item__title .fa-star {
  position: relative;
  top: -4px;
  font-size: 50%;
}

@media (min-width: 768px) {
  .post-list-item__col {
    display: table-cell;
    vertical-align: top;
  }
}

@media (min-width: 768px) {
  .post-list-item__col--main {
    width: 60%;
  }
}

@media (min-width: 768px) {
  .post-list-item__col--side {
    width: 40%;
  }

  [dir="ltr"] .post-list-item__col--side {
    text-align: right;
  }

  [dir="rtl"] .post-list-item__col--side {
    text-align: left;
  }
}

.post-info {
  font-size: 14px;
  color: #979797;
}

@media (min-width: 768px) {
  .post-info {
    min-width: 90px;
  }

  [dir] .post-info {
    padding: calc(15px / 2) 15px;
    text-align: center;
    background-color: #f9f9f9;
    border-radius: 0;
  }

  [dir="ltr"] .post-info {
    float: right;
  }

  [dir="rtl"] .post-info {
    float: left;
  }
}

@media (min-width: 768px) {
  .post-info__count {
    display: block;
    font-weight: 600;
    color: #373C50;
  }
}

[dir="ltr"] .post-info + .post-info {
  margin-right: 15px;
}

[dir="rtl"] .post-info + .post-info {
  margin-left: 15px;
}

@media (max-width: 767px) {
  .post-info + .post-info:before {
    font-size: 10px;
    content: "\2022";
  }

  [dir="ltr"] .post-info + .post-info:before {
    margin-right: calc(15px / 2);
  }

  [dir="rtl"] .post-info + .post-info:before {
    margin-left: calc(15px / 2);
  }
}

.post__actions .dropdown-toggle {
  font-size: 0;
}

.post__actions .dropdown-toggle:after {
  font-size: 16px;
  content: "\f013";
}

[dir="ltr"] .post__actions .dropdown-toggle:after {
  margin-left: 0;
}

[dir="rtl"] .post__actions .dropdown-toggle:after {
  margin-right: 0;
}

.post-status {
  display: inline-block;
  font-size: 12px;
  color: #fff;
}

[dir] .post-status {
  padding: 1px calc(15px / 2);
  border-radius: 0;
}

[dir] .post-status--completed,
[dir] .post-status--answered,
[dir] .post-status-answered,
[dir] .post-status-completed {
  background-color: #088c9e;
}

[dir] .post-status--planned,
[dir] .post-status-planned {
  background-color: #0c9;
}

[dir] .post-status--not-planned,
[dir] .post-status-not-planned {
  background-color: #0c9;
}

[dir] .post-status--pinned,
[dir] .post-status-pinned {
  background-color: #0c9;
}

[dir] .post-status--featured,
[dir] .post-status-featured {
  background-color: #0c9;
}
/* ==========================================================================
   TABLE SYSTEM — 26 Mar 2026
   Replaced broken rules below. Original preserved in comments for reference.

   /* REMOVED 26 Mar 2026
   table {
     width: 100%;
     max-width: 100%;
     margin-bottom: 22px;
     overflow-x: auto;
     font-size: 14px;
   }
   table > thead > tr > th, table > thead > tr > td, table > tbody > tr >
   th, table > tbody > tr > td, table > tfooter > tr > th, table > tfooter > tr > td {
     padding: 8px 8px 8px 8px;
     line-height 1.5;
     vertical-align: middle;
     border: 1px solid #ddd;
   }
   table > thead > tr < th, table > thead > tr > td {
     vertical-align: middle;
     text-align: center;
     font-weight: bold;
     background-color: #0E76BC;
     color: #fff;
   }
   table > tbody > tr:nth-of-type(even) { background-color: #F8F9FC; }
   table > tbody > tr:nth-of-type(odd)  { background-color: #F8F9FC; }
   table > tfoot > tr { background-color: #fff; }
   td, th { padding: 0; }
   END REMOVED */

  /* Variants:
   - table-ruled   : horizontal lines only (Stripe-style)
   - table-matrix  : center-aligned data cols, left-aligned col 1
   Scroll wrapper : <div class="table-scroll"><table>...</table></div>
   ========================================================================== */

td,
th {
  padding: 0;
}

/* --- Scroll wrapper: overflow scoped here, never on table element directly --- */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Default: applies to ALL <table> elements, no class needed --- */
table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 24px;
  font-size: 14px;
  border-collapse: collapse;
  border-spacing: 0;
}

table th,
table td {
  padding: 10px 14px;
  line-height: 1.6;
  vertical-align: top;
  text-align: left;
  border: 1px solid #dce4f0;
}

/* Header row — covers both thead-based and Zendesk wysiwyg tbody-only tables
figure.wysiwyg-table table:not(.mcp-table) thead tr th,
figure.wysiwyg-table table:not(.mcp-table) thead tr td,
table:not(.mcp-table) thead tr th,
table:not(.mcp-table) thead tr td,
table:not(.mcp-table):not(:has(thead)) tbody tr:first-child th,
table:not(.mcp-table):not(:has(thead)) tbody tr:first-child td {
  background-color: #eef3fc !important;
  color: #002c97 !important;
  font-weight: 600 !important;
  border: 1px solid #dce4f0 !important;
  text-align: left !important;
  vertical-align: middle !important;
}*/

/* Header row — Cleaned up version */
figure.wysiwyg-table table thead tr th,
figure.wysiwyg-table table thead tr td,
table:not(.mcp-table) thead tr th,
table:not(.mcp-table) thead tr td {
  background-color: #eef3fc !important;
  color: #002c97 !important;
  font-weight: 600 !important;
  border: 1px solid #dce4f0 !important;
  text-align: left !important;
  vertical-align: middle !important;
}

table:not(.mcp-table) tbody tr:nth-child(odd) td,
table:not(.mcp-table) tbody tr:nth-child(odd) th {
  background-color: #f5f5f5;
}

table:not(.mcp-table) tbody tr:nth-child(even) td,
table:not(.mcp-table) tbody tr:nth-child(even) th {
  background-color: #ffffff;
}

/* Tables with thead: first data row should be white, not gray */
table:not(.mcp-table):has(thead) tbody tr:nth-child(odd) td,
table:not(.mcp-table):has(thead) tbody tr:nth-child(odd) th {
  background-color: #ffffff;
}

table:not(.mcp-table):has(thead) tbody tr:nth-child(even) td,
table:not(.mcp-table):has(thead) tbody tr:nth-child(even) th {
  background-color: #f5f5f5;
}

/*table tbody tr:hover td,
table tbody tr:hover th {
  background-color: #eef3fc;
}*/

table tfoot tr td,
table tfoot tr th {
  background-color: #f0f4f8;
  font-weight: 600;
  border-top: 2px solid #c5d4e8;
}

/* --- Variant: .table-ruled — horizontal lines only --- */
table.table-ruled th,
table.table-ruled td {
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid #e2e8f0;
}

table.table-ruled thead tr th,
table.table-ruled thead tr td,
table.table-ruled tbody tr:first-child th,
table.table-ruled tbody tr:first-child td {
  background-color: transparent;
  color: #64748b;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 2px solid #cbd5e1;
}

table.table-ruled tbody tr:nth-child(odd) td,
table.table-ruled tbody tr:nth-child(odd) th {
  background-color: #f5f5f5;
}

table.table-ruled tbody tr:nth-child(even) td,
table.table-ruled tbody tr:nth-child(even) th {
  background-color: #ffffff;
}

/* --- Variant: .table-matrix — col 1 left, all other cols center --- */
table.table-matrix th,
table.table-matrix td {
  text-align: center;
  vertical-align: middle;
}

table.table-matrix th:first-child,
table.table-matrix td:first-child {
  text-align: left;
  font-weight: 500;
}

table.table-matrix thead tr th,
table.table-matrix thead tr td,
table.table-matrix tbody tr:first-child th,
table.table-matrix tbody tr:first-child td {
  background-color: #eef3fc;
  color: #1a2b4a;
  font-weight: 600;
  border-bottom: 2px solid #c5d4e8;
  vertical-align: middle;
}

.table--color-header th {
    color: #fff;
    background-color: rgba(0, 44, 151, 1);
  }

.table--striped th,
  .table--striped td,
  .table--striped thead th {
    border-color: rgba(248, 249, 252, 1);
  }

.table--striped tbody tr:nth-child(odd) {
    color: #373C50;
    background-color: #f7f7f9;
  }

.table--hover tbody tr:hover {
    color: #373C50;
    background-color: #f7f7f9;
  }

.table--bordered {
  border: 1px solid #c4c4c4;
}

.table--bordered td {
    border-left: 1px solid #c4c4c4;
  }

.table--bordered th {
    border-left: 1px solid #c4c4c4;
  }

.table-responsive {
  min-height: 0.01%;
  overflow-x: auto;
}

@media screen and (max-width: 767px) {

    .table-responsive {
        width: 100%;
        margin-bottom: calc(16px * 1.5 * 0.75);
        overflow-y: hidden;
        border: 1px solid #ddd;
        -ms-overflow-style: -ms-autohiding-scrollbar
    }

    .table-responsive > .table {
      margin-bottom: 0;
    }
  
    .table-responsive > .table > thead > tr > th,
    .table-responsive > .table > thead > tr > td,
    .table-responsive > .table > tbody > tr > th,
    .table-responsive > .table > tbody > tr > td,
    .table-responsive > .table > tfoot > tr > th,
    .table-responsive > .table > tfoot > tr > td {
      white-space: nowrap;
    }

  }

/* Responsive table - generic solution 10-Oct-2025 */

/* Desktop: First column doesn't wrap (only for simple tables) */
@media (min-width: 1025px) {
  table:not(:has(colgroup)) tbody td:first-child {
    white-space: nowrap;
  }
}

/* Tablet and Mobile: Natural wrapping for simple tables */
@media (max-width: 1024px) {
  table:not(:has(colgroup)) th,
  table:not(:has(colgroup)) td {
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
  }
  
  table:not(:has(colgroup)) td:first-child,
  table:not(:has(colgroup)) th:first-child {
    min-width: 120px;
  }
}

/* Prevent mid-word breaking for ALL tables */
table th,
table td {
  word-break: normal; /* Changed from keep-all */
  overflow-wrap: break-word; /* Allow breaking long words if absolutely necessary */
  hyphens: none;
}

/* REMOVED 26 Mar 2026 — display:block on table element caused double scrollbars
@media (max-width: 767px) {
  table:has(colgroup) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
END REMOVED */

/* REMOVED 26 Mar 2026 — display:block on table element caused layout skew globally
@media (max-width: 767px) {
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
END REMOVED */

/* Mobile table scroll — 26 Mar 2026
   Overflow scoped to wrapper elements only, never to table element directly. */
@media (max-width: 767px) {
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
  }

  figure.wysiwyg-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    margin: 0 0 20px;
  }

  figure.wysiwyg-table:has(table colgroup) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* SUPERSEDED 26 Mar 2026 — full replacement rule added at PRE CODE BLOCKS section
figure.wysiwyg-table {
  height: auto !important;
}
END SUPERSEDED */

/*user-profile-customization*/

.profile-header {
  padding: 30px 0;
  background-color: darken($background_color, 3%);
}

.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-flow: row wrap;
/*   justify-content: center; */
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}

.profile-header .basic-info .name {
  margin: 0;
  line-height: 25px;
}

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

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

.profile-stats .stat-label {
  color: #61698c;
  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 $brand_color;
  border-radius: 4px;
  color: $brand_color;
  padding: 5px 20px;
  font-size: 12px;
  text-align: center;
}

.profile-private-badge .profile-private-icon {
  margin-left: 5px;
  line-height: 15px;
}

@media (min-width: 768px) {
  .profile-private-badge {
    flex-basis: auto;
  }
}

.profile-nav {
  background-color: darken($background_color, 5%);
  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: #61698c;
  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: #61698c;
  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: darken($background_color, 3%);
}

@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: $background_color;
  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;
}

.profile-stat-list-flex {
  display: flex;
  flex-wrap: wrap;
}

.zd-split-button button {
  background-color: rgba(0, 44, 151, 1);
  border: 1px solid $brand_color;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  line-height: 2.34;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  transition: background-color .12s ease-in-out, border-color .12s ease-in-out, color .15s ease-in-out;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  -webkit-touch-callout: none;
}

.article-custom-header {
  display: flex;
  flex-direction: column;
  padding-left: 0px;
  padding-right: 0px;
  margin-bottom: 0px;
}

.article-header-custom-container {
  display: flex;
  flex-direction: row;
  padding-bottom: 10px;
}

.article-custom-search-container {
  flex-grow: 1;
}
.article-custom-search {
  position:relative;
}

.article-custom-search .article-custom-search-icon {
  height: 20px;
  position: absolute;
  margin: 0;
  width: 20px;
  top: 50%;
  fill: rgba(0, 44, 151, 1);
  padding-left: 10px;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.article-custom-search input[type="submit"] {
  display:none;
}

/* .article-custom-search input[type="search"]::placeholder {
  padding: 10px;
} */

@media (max-width: 1024px) {
  .article-header-custom-container {
    flex-direction: column;
  }
}

.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.layout__main {
  flex: 1 1 auto;
}

.sidenav-layout .layout__content {
  width: 100%;
  /* max-width: 1200px; */
  margin: 0 auto;
}

.sidenav-layout .layout__sidenav {
  margin-bottom: 25px;
}


@media (min-width: 992px) {
  .sidenav-layout .layout__main {
    display: flex;
   

  }

  .sidenav-layout .layout__sidenav {
    flex: 0 0 350px;
    margin-bottom: 0;
  }

  .sidenav-layout .layout__content {
    flex: 0 1 1200px;
    /* width: auto; */
    /* max-width: 1200px; */
    margin: 0;
    
  }

  .sidenav-layout  .article-container__article {
    width: 100%;
  }

  .sidenav-layout .layout__sidenav .sidenav__categories-list,
  .sidenav-layout .layout__sidenav ul {
    margin-top: 0;
  }
  
  .sidenav__articles-list {
    font-size:15px !important;
  }

}

.section__section-description {
  font-weight: 400!important;
  font-size: 14px;
  line-height: 22px!important;
  display: block;
}

.section__section-description:empty {
  display: none!important;
}

.sidenav__custom-links {
  display: block;
  padding: 0 0 0 16px!important;
  font-weight: 400!important;
}

.sidenav__custom-links a {
  display: block;
}

.sidenav__section {
  position: relative;
}

.section__section-description {
  display: none;
}

/* Fix for sidenav section name colliding with the chevron icon */
.sidenav__section-name {
    padding-right: 2px !important; 
}

.sidenav__section-name:hover + .section__section-description {
  display: block;
}

@media (min-width: 992px) {
  [dir] .sidenav {
    overflow: visible;
  }
  .section__section-description {
    position: absolute;
    left: 0;
    top: 41px;
    z-index: 10;
    width: 250px;
    padding: 15px!important;
    background: #fff;
    border-radius: 0;
    cursor: default;
    box-shadow: 0 1px 3px rgba(55 60 80 / 5%);
  }
  .section__section-description:before {
    position: absolute;
    top: -19px;
    left: 11px;
    display: block;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid #fff;
    border-right: 10px solid transparent;
    content: '';
    border-left: 10px solid transparent;
  }
}

.article__wrapper {
  display: flex;
}


@media (min-width: 991px) {
  .article-container__toc{

    background-color: #fff;
    padding: 15px;
    margin-left: 60px;
    margin-right: 30px;
  }

  .article-container__toc.article-container__column {
    width: auto !important;
  }
}
@media (max-width: 1200px) {
  .article-container__toc{
    margin-left: 30px;
    margin-right: 0;
  }
}

@media (max-width: 991px) {
  .article-container__toc{
    width: 0;
    padding: 0 !important;
    margin: 0;
   
  }
}

.hljs {
  white-space: break-spaces;
}

/* Nested list spacing
   Reduces vertical spacing for nested lists and keeps nested list items compact
   for better readability. */
[dir] ul ul,
[dir] ul ol,
[dir] ol ul,
[dir] ol ol {
  margin: 6px 0 !important;
}

[dir] ul ul li,
[dir] ul ol li,
[dir] ol ul li,
[dir] ol ol li {
  margin-bottom: 6px;
}

/* Standard Image Styling for Articles - Updated Jan 2025 and margin bottom updated September 2025 */
[dir] img {
  border: 0.5px solid #ccc !important; /* Light gray border */
  border-radius: 5px !important; /* Rounded corners */
  margin-bottom: 20px; /* bottom spacing */
}

/* Remove border for images under .logo .footer__logo div - Updated on May 2025 */
.logo img,
.footer__logo img {
  border: none !important;
}


/* ================================
   Lightbox Image Modal | Stable Final – 2025-04-01 (Updated for inline close)
   ================================ */

/*.lightbox-img {
  cursor: zoom-in;
  transition: 0.2s ease-in-out;
}*/

/* Modal backdrop 
.lightbox-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 40px 20px;
  box-sizing: border-box;
  justify-content: center;
  align-items: flex-start;
  animation: fadeIn 0.3s ease-in-out;
  overflow: auto;
}*/

/* Show modal 
.lightbox-modal.active {
  display: flex;
}*/

/* Content wrapper 
.lightbox-content {
  position: relative;
  margin: 60px auto 20px auto;
  background: #fff;
  padding: 0;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}*/

/* Scrollable inner wrapper 
.lightbox-scroll {
  overflow: auto;
  border-radius: 0 0 12px 12px;
  padding: 12px;
}*/

/* Image styling 
.lightbox-scroll img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border: none;
  margin: 0 auto;
}*/

/* Close button (inside content) 
.lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  text-align: center;
  line-height: 28px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  z-index: 1;
}*/

/*.lightbox-close:hover {
  background: #eee;
}*/

/* Animation 
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}*/

/* ──────────────────────────────────────────────
   Lightbox + Flowchart actions (2025-08-16, rev)
   ────────────────────────────────────────────── */

:root {
  /* Brand tokens (tweak to match theme) */
  --brand-primary: #1f4ad2;
  --brand-primary-600: #2740b3;
  --brand-primary-light: #5a7ea3;

  /* UI tokens */
  --surface-1: #ffffff;
  --surface-2: #f6f7f9;
  --border-1: #e8eaef;
  --text-muted: #6b7280;

  /* Effects */
  --ring: 0 0 0 3px rgba(31, 74, 210, .25);

  /* Lightbox close accent (uses brand light by default) */
  --brand-primary-light-shade: var(--brand-primary-light);
}

/* ===== Lightbox ===== */

.lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  background: rgba(0, 0, 0, .8);
}
.lightbox-modal.active { display: block; }

.lightbox-content {
  position: absolute;
  inset: 40px 24px 24px;            /* top | right/left | bottom */
  display: grid;
  place-items: center;
}

.lightbox-scroll {
  position: relative;
  max-width: 96vw;
  max-height: 86vh;
  overflow: auto;
  background: #111;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
}
.lightbox-scroll img {
  display: block;
  width: 100%;
  height: auto;
}

/* Close button */
.lightbox-close {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 28px;
  line-height: 1;
  user-select: none;
  cursor: pointer;

  color: var(--brand-primary-light-shade);
  background-color: rgba(255, 255, 255, .9);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  transition: background-color .2s ease, color .2s ease, transform .08s ease;
}
.lightbox-close:hover,
.lightbox-close:focus {
  background-color: rgba(90, 126, 163, .85);
  color: #fff;
  text-decoration: none;
}
.lightbox-close:active { transform: scale(.96); }

body.lb-lock { overflow: hidden; }

/* ===== Flowchart thumbnail ===== */

.flowchart-wrap { text-align: center; margin: 0; }

.flowchart-thumb {
  display: inline-block;
  border-radius: 8px;
  border: 1px solid #eee;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  background: var(--surface-1);
  cursor: zoom-in;
}

/* ===== Action row (Open / Download) ===== */

.flowchart-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
  font-size: .95rem;
}

.flowchart-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 9999px;            /* pill */
  text-decoration: none;

  color: var(--brand-primary);
  background: rgba(0, 102, 204, 0.08); /* light tint of brand */
  border: 1px solid var(--border-1);

  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.flowchart-link:hover {
  background: rgba(0, 102, 204, 0.15);
  color: var(--brand-primary-600);
  border-color: #e6ebff;
}
.flowchart-link:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.flowchart-icon {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}
.flowchart-link:hover .flowchart-icon {
  color: var(--brand-primary-light);
}

/* ===== Preferences & dark mode niceties ===== */

@media (prefers-reduced-motion: reduce) {
  .lightbox-close,
  .flowchart-link { transition: none; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-1: #0f1115;
    --surface-2: #1a1d24;
    --border-1: #2a2f39;
    --text-muted: #9aa1ab;
  }
  .flowchart-thumb { border-color: #222; box-shadow: none; }
}







/* ================================
   FAQ Accordion Styles | Final – 2025-04-01
   ================================ */
.faq-accordion {
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
}

.faq-item {
  border-bottom: 1px solid #ddd;
  padding: 16px 0;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.faq-question:hover {
  color: #0072ce;
}

.faq-toggle-icon {
  font-size: 18px;
  transition: transform 0.3s ease;
}

/* Answer visibility toggle */
.faq-answer {
  display: none;
  margin-top: 10px;
  font-size: 15px;
  color: #444;
  line-height: 1.5;
}

.faq-answer.active {
  display: block;
}


/* Force autocomplete dropdown to appear below and scrollable - May 2025
zd-autocomplete {
  max-height: 300px !important;
  overflow-y: auto !important;
  z-index: 9999 !important;
}*/


/* font config tool */
/*.font-json[style*="display: block"] {
    display: block !important;
}*/

/* Example card + compact timeline */
.example-card {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  margin: 8px 0 16px;
  font-size: 0.95rem;
}
.example-header {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  background: #f7f9fc;
  border: 1px solid #eef1f5;
  border-radius: 6px;
  margin-bottom: 10px;
}
.example-header > strong { font-weight: 600; }

.example-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
  border-left: 2px solid #e5e7eb; /* subtle vertical timeline */
}
.example-timeline > li {
  position: relative;
  margin: 14px 0 0 0;
  padding-left: 10px;
}
.example-timeline > li::before {
  content: "";
  position: absolute;
  left: -8px; top: 8px;
  width: 10px; height: 10px;
  background: #1f4ad2;            /* brand primary */
  border-radius: 50%;
  box-shadow: 0 0 0 3px #eef2ff;   /* halo for legibility */
}
.example-timeline h4 {
  margin: 0 0 6px 0;
  font-size: 0.98rem;
  font-weight: 600;
}
.example-timeline ul {
  margin: 0 0 2px 0;
  padding-left: 16px;
}
.example-timeline li li { margin: 4px 0; }



/* =========================================================
   Unified Recipe Stylesheet V2
   Final Complete Version — 24 Oct 2025
   ========================================================= */

/* --- GLOBAL CONTAINERS & THEME --- */
.recipes-wrapper-x,
#recipes-app {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 20px;
  font-family: "Segoe UI", "Roboto", sans-serif;
  --accent-color: #2790FF;
}


#recipes-app h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 24px;
}

/* --- CONTROLS (Search + Filters) --- */
#recipes-app .recipes-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}


#recipes-app .recipes-controls label {
  flex-direction: column;       /* stack label above dropdown */
  align-items: flex-start;      /* flush left */
  gap: 2px;                     /* tighter spacing */
  font-size: 0.8rem;            /* slightly smaller label text */
  font-weight: 600;
  color: #555;                  /* softer label tone */
}


.controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}

.search-row input {
  width: 100%;
}

.filter-row {
  justify-content: flex-start;
  flex-wrap: wrap;
}


.filter-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #444;
  white-space: nowrap;
}

.filter-divider {
  color: #ccc;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 4px;
}

@media (max-width: 768px) {
  .filter-row {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-divider {
    display: none;
  }
}


/* Unified styles for search and all selects */
#recipes-search,
#recipes-page-size,
#recipes-lifecycle-filter,
#recipes-vertical-filter {
  padding: 10px 14px;
  font-size: 0.95rem;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  background-color: #fff;
  height: 44px;
  transition: border-color 0.2s ease;
}

/* Custom arrow for selects */
#recipes-page-size,
#recipes-lifecycle-filter,
#recipes-vertical-filter {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'%3E</polyline>%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 40px;
  cursor: pointer;
  min-width: 140px;
}

#recipes-search {
  flex: 1;
  min-width: 200px;
}

#recipes-search:focus,
#recipes-lifecycle-filter:focus,
#recipes-vertical-filter:focus,
#recipes-page-size:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(39, 144, 255, 0.12);
}

/* --- CARD GRID & LAYOUT --- */
#recipes-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.recipe-card-v2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-left: 4px solid var(--accent-color);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  cursor: pointer;
  min-height: 160px;
}

.recipe-card-v2:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-left-color: #1a73e8;
}

.recipe-card-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--accent-color);
  margin-bottom: 12px;
  line-height: 1.4;
}

.recipe-card-v2:hover .recipe-card-title {
  color: #1a73e8;
}

.recipe-card-desc {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: 12px;
}

/* --- TAGS (Card + Modal) --- */
.recipe-card-tags,
.modal-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

.modal-tags {
  border-top: none;
  margin-top: 12px;
  margin-bottom: 20px;
  padding-top: 0;
}

.tag {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.8rem;
  border-radius: 14px;
  text-transform: capitalize;
}

/*========= changed to theme style on 19-Nov-2025 ======== */
/*.tag-vertical {
  background-color: #e3f2fd;
  color: #1565c0;
  border: 1px solid #bbdefb;
}

.tag-lifecycle {
  background-color: #fff3e0;
  color: #e65100;
  border: 1px solid #ffe0b2;
}
*/

.tag-vertical {
  background-color: #e7f0ff;  /* tinted #2160D4 */
  color: #2160d4;
  border: 1px solid #c9d9ff; /* soft blue border */
}

.tag-lifecycle {
  background-color: #f3e8ff; /* tinted #8933FF */
  color: #8933ff;
  border: 1px solid #e4ccff; /* soft purple border */
}



/* =========================================================
   MODAL STYLES
   ========================================================= */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.55); /* dim without blackout */
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 20px;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.modal-overlay.hidden {
  display: none;
  opacity: 0;
}

.modal-content {
  background: #fff;            /* ✅ solid white background */
  color: #111;                /* ✅ strong contrast */
  border-radius: 16px;
  max-width: 720px;
  width: 100%;
  max-height: 85vh;
  overflow: hidden;
  position: relative;
  z-index: 10000;             /* ✅ ensures it sits above blur */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

.modal-header-area {
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 6px 32px 12px 32px;
  border-bottom: none;
}

.modal-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0px 20px 0px;
}

#modal-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
  padding: 0;
  line-height: 1.2;
  flex-grow: 1;
  white-space: normal;
  overflow-wrap: break-word;
}

.modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  border-bottom: 2px solid #d0d0d0;
  padding-bottom: 24px;
  margin-top: 12px;
  margin-bottom: 6px;
}

/* Modal close button */
.modal-close-row {
  display: flex;
  justify-content: flex-end;
  padding: 8px;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #333;
  transition: color 0.2s ease;
}

.modal-close-btn:hover {
  color: #000;
}

.modal-close-btn {
  position: static;
  width: 40px;
  height: 40px;
  border: none;
  background: #fff;
  cursor: pointer;
  color: #666;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: all 0.2s ease;
  z-index: 10001;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  margin-left: 20px;
  flex-shrink: 0;
}

.modal-close-btn:hover {
  background: #f5f5f5;
  color: #333;
}

.modal-close-btn:active {
  background: #e0e0e0;
}

#modal-content-area {
  padding: 32px;
  overflow-y: auto;
  flex: 1;
  color: #111; /* ✅ ensures readable body text */
}

/* Scrollbar styling */
#modal-content-area::-webkit-scrollbar {
  width: 6px;
}

#modal-content-area::-webkit-scrollbar-track {
  background: transparent;
}

#modal-content-area::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

#modal-content-area::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Modal sections */
.modal-section {
  margin-bottom: 32px;
}

.modal-section:last-child {
  margin-bottom: 0;
}

.modal-section h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 12px 0;
}

.modal-section p {
  font-size: 1rem;
  line-height: 1.7;
  color: #444;
  margin: 0 0 16px 0;
}

.modal-section p:last-child {
  margin-bottom: 0;
}

/* Lists */
.modal-section ul,
.modal-section ol {
  margin: 0 0 16px 0;
  padding-left: 24px;
}

.modal-section ul {
  list-style: disc;
}

.modal-section ol {
  list-style: decimal;
}

.modal-section ul li,
.modal-section ol li {
  font-size: 1rem;
  line-height: 1.7;
  color: #444;
  margin-bottom: 12px;
  padding-left: 8px;
}

.modal-section ul li:last-child,
.modal-section ol li:last-child {
  margin-bottom: 0;
}

/* Code blocks */
.modal-section pre {
  background: #f6f8fa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
  overflow-x: auto;
}

.modal-section pre code {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #333;
  white-space: pre-wrap;
  word-break: break-word;
  display: block;
}

/* --- PAGINATION --- */
#recipes-app .pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
  padding: 24px 0;
  flex-wrap: nowrap; /* Changed from wrap to nowrap */
}

#recipes-app .pg-status {
  flex-shrink: 0;
  white-space: nowrap;
  margin: 0 12px;
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

#recipes-app .pg-btn {
  padding: 10px 16px;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  min-width: 90px;
  flex-shrink: 0; /* Prevent button shrinking */
}

#recipes-app .pg-btn:not(:disabled):hover {
  background: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
}

#recipes-app .pg-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* =========================================================
   RESPONSIVENESS
   ========================================================= */

/* --- RESPONSIVE CONTROLS (960px) --- */
@media (max-width: 960px) {
  #recipes-app .recipes-controls {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  #recipes-search {
    flex: 1 1 100%;
    min-width: 0;
  }
  #recipes-lifecycle-filter,
  #recipes-vertical-filter,
  #recipes-page-size {
    flex: 1 1 calc(33% - 8px);
    min-width: 120px;
  }
  .controls-row {
    flex-direction: column;
    align-items: stretch;
  }
  .search-row::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #ddd;
    margin: 10px 0;
  }
}

/* --- LARGE TABLETS / iPAD PRO (821px-1200px) --- */
@media (min-width: 821px) and (max-width: 1200px) {
  #recipes-list {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
  }
  
  /* Pagination adjustments */
 #recipes-app .pager {
    gap: 8px;
    padding: 20px 0;
  }
  
  #recipes-app .pg-btn {
    padding: 8px 12px;
    min-width: 75px;
    font-size: 13px;
  }
  
  #recipes-app .pg-status {
    margin: 0 8px;
    font-size: 13px;
  }
  
  /* Modal adjustments */
  .modal-content {
    max-width: 680px;
    width: 85%;
  }
  
  .modal-header-area {
    padding: 24px 28px 18px 28px;
  }
  
  #modal-title {
    font-size: 1.5rem;
  }
  
  #modal-content-area {
    padding: 28px;
  }
}

/* --- TABLETS (600-820px) --- */
@media (min-width: 600px) and (max-width: 820px) {
  #recipes-list {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
  }
  .modal-overlay {
    padding: 40px 20px;
  }
  .modal-content {
    max-width: 600px;
    width: 90%;
    border-radius: 12px;
    animation: none !important;
    transform: none !important;
  }
  .modal-header-area {
    padding: 6px 60px 18px 24px;
    border-bottom: none;
  }
  #modal-title {
    font-size: 22px;
  }
  .modal-tags {
    padding: 0 0 12px 0;
    margin-bottom: 12px;
  }
  #modal-content-area {
    padding: 24px;
  }
  .modal-close-btn {
    top: 18px;
    right: 18px;
  }
}

/* --- MOBILE GENERAL (≤768px) --- */
@media (max-width: 768px) {
  .recipes-wrapper-x,
  #recipes-app {
    padding: 20px 10px;
  }
  #recipes-app h1 {
    font-size: 1.5rem;
  }
  #recipes-app .recipes-controls {
    gap: 10px;
  }
  #recipes-search {
    order: -1;
    width: 100%;
    height: 40px;
  }
  #recipes-lifecycle-filter,
  #recipes-vertical-filter,
  #recipes-page-size {
    height: 40px;
    font-size: 0.9rem;
  }
  #recipes-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .recipe-card-title {
    font-size: 1.15rem;
  }
  .recipe-card-desc {
    font-size: 0.95rem;
  }
  
  /* Pagination mobile adjustments */
  #recipes-app .pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 20px 0;
  }
  
  #recipes-app .pg-status {
    grid-column: 1 / -1; /* Span full width */
    text-align: center;
    font-size: 13px;
    margin-bottom: 12px;
    order: -1;
  }
  
  /* Hide First/Last on mobile, show only Prev/Next */
  #recipes-app .pg-btn:first-of-type,
  #recipes-app .pg-btn:last-of-type {
    display: none;
  }
  
  #recipes-app .pg-btn {
    padding: 12px 16px;
    font-size: 14px;
    min-height: 48px;
    font-weight: 500;
  }

}

/* --- MOBILE PHONES (≤600px) --- */
@media (max-width: 600px) {
    .modal-overlay {
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .modal-content {
        max-width: 90%;
        max-height: 75vh;
        border-radius: 16px;
        margin: auto;
    }
    .modal-header-area {
        position: relative;
        background: #fff;
        /* 💥 FIXED: Simple, clean padding. Removed the conflicting 72px !important. */
        padding: 6px 24px 16px 24px; 
        box-sizing: border-box;
    }
    #modal-title {
        font-size: 18px;
        line-height: 1.3;
        /* 💥 FIXED: Removed all conflicting mobile margins/padding */
        margin: 0; 
        padding: 0;
        text-align: left;
    }
    .modal-close-btn {
        width: 36px;
        height: 36px;
        z-index: 100;
        /* 💥 FIXED: Rely on Flexbox positioning. Only use margin for spacing. */
        margin-left: 12px; 
        margin-top: 0;
        position: static; /* Ensure any external absolute override is ignored */
        top: auto;
        right: auto;
    }
    .modal-tags {
        border-bottom: 2px solid #d0d0d0;
        padding: 0 0 16px 0;
        margin: 0 0 16px 0;
        text-align: left;
        /* Ensure tags take up full width below the title/button line */
        flex: 1 1 100%; 
    }
    #modal-content-area {
        padding: 20px 24px;
    }
}

/* --- TINY PHONES (≤380px) --- */
@media (max-width: 380px) {
  #recipes-app .pg-status {
    font-size: 12px;
  }
  .recipe-card-v2 {
    min-height: 140px;
    padding: 18px;
  }
  #modal-title {
    font-size: 17px;
    padding: 0;
  }
  .modal-close-btn {
    width: 34px;
    height: 34px;
    font-size: 20px;
    top: auto;
    right: auto;
  }
  #recipes-app .pg-btn {
    padding: 10px 12px;
    font-size: 13px;
    min-height: 44px;
  }
  
  #recipes-app .pg-status {
    font-size: 12px;
  }
}

/* =========================================================
   Fallback / Empty State Styling
   ========================================================= */
.recipes-empty {
  max-width: 600px;
  margin: 60px auto;
  padding: 32px 24px;
  text-align: center;
  background: #f0f6ff;
  border: 1px solid #d6e4ff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.recipes-empty h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a3a7b;
  margin-bottom: 12px;
}

.recipes-empty p {
  font-size: 1rem;
  color: #444;
  line-height: 1.6;
}

/* Mobile tweak */
@media (max-width: 600px) {
  .recipes-empty {
    margin: 40px 16px;
    padding: 24px 16px;
  }
  .recipes-empty h3 {
    font-size: 1.25rem;
  }
  .recipes-empty p {
    font-size: 0.95rem;
  }
}

/* ✅ Reset All Button styling */
.clear-filters-btn {
  background: none;
  border: none;
  color: var(--accent-color);
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9rem;
  margin-left: 0px;         /* pushes button to end on desktop if set to auto */
  padding: 8px 0;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.clear-filters-btn:hover {
  color: #1a73e8;            /* hover accent */
}

/* 📱 Responsive tweak for mobile — stack below */
@media (max-width: 768px) {
  .clear-filters-btn {
    margin-left: 0;
    align-self: flex-start;
  }
}

/* =========================================================
   Vertical Navigation
   ========================================================= */

/* Vertical Navigation - Refined Version */
.navigation-section-x {
    max-width: 1200px;
    margin: 32px auto;
    padding-bottom: px;
    border-bottom: 1px solid #e1e4e8;
}

.vertical-nav-wrapper {
    margin: 20px 0 0 0;
    padding: 0 24px;
}

/* =========================================================
   Vertical Nav Container — Callout Style (Info, Flat)
   ========================================================= */
.vertical-nav-container {
  padding: 32px;
  background-color: #F2F9FF;   /* same as callout--info */
  border: 1px solid #5bc0de;   /* same border for visual harmony */
  border-radius: 32px;
  max-width: 960px;
  margin: 0 auto 40px auto;
  transition: border-color 0.25s ease;
}

.vertical-nav-container:hover {
  border-color: #46b8da;       /* subtle accent on hover */
}


.vertical-nav-x {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.vertical-nav-x a {
    padding: 10px 24px;
    background: #fff;
    color: #1a73e8;
    border: 1px solid #e0e7ef;
    border-radius: 24px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: all 0.25s ease;
}

.vertical-nav-x a:hover {
    background: #1a73e8;
    color: #fff;
    border-color: #1a73e8;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
}

.vertical-nav-x a:active {
    transform: scale(0.98);
}

.vertical-nav-x a.active {
    background: #1a73e8;
    color: #fff;
    border-color: #1557b0;
}

/* Hide mobile dropdown by default */
.vertical-nav-select {
    display: none !important;
}

/* =========================================================
    Mobile — Vertical Navigation (Pseudo-Element Arrow Fix)
    ========================================================= */
@media (max-width: 768px) {

    /* --- New Wrapper for Pseudo-Element Positioning --- */
    .vertical-nav-select-wrap {
        position: relative; /* Anchor for the arrow ::after */
        margin-top: 8px;
        margin-bottom: 16px;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Container: flat + tight on mobile */
    .vertical-nav-container {
        background: transparent;
        border: none;
        padding: 0;
        border-radius: 0;
        margin-bottom: 16px;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Wrapper spacing */
    .vertical-nav-wrapper {
        margin-top: 16px;
        padding: 0 16px;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Hide pill buttons on mobile */
    .vertical-nav-x {
        display: none !important;
    }

    /* Show dropdown on mobile - NO CUSTOM BACKGROUND IMAGE HERE */
    .vertical-nav-select {
        display: block !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        
        /* Reduced right padding, now only 16px + space for the pseudo-arrow inside the element */
        padding: 14px 16px 14px 16px; 
        
        font-size: 1rem;
        font-weight: 500;
        color: #333;
        background: #fff;
        border: 1.5px solid #1a73e8; /* Blueshift blue */
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
        cursor: pointer;
        
        /* 💡 Crucial: Remove ALL custom background image/positioning */
        background-image: none !important;
        background-repeat: initial;
        background-position: initial;

        -webkit-appearance: none;
        appearance: none;
        
        margin: 0; /* Managed by .vertical-nav-select-wrap */
        
        -webkit-tap-highlight-color: transparent;
        outline: none;
        transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }
    
    /* --- PSEUDO-ELEMENT ARROW --- */
    .vertical-nav-select-wrap::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 30px; /* Position the arrow slightly left of the wrapper edge */
        display: block;
        width: 0;
        height: 0;
        
        /* Simple CSS Triangle */
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid #1a73e8; /* Blueshift Blue Arrow */
        
        /* Center vertically */
        transform: translateY(-50%); 
        
        /* Ensures the arrow is above the select box */
        pointer-events: none; 
        z-index: 2;
    }

    /* Brand-blue focus/hover, no layout shift */
    .vertical-nav-select:hover,
    .vertical-nav-select:focus {
        border-color: #1a73e8;
        box-shadow: 0 0 0 2px rgba(26,115,232,0.15);
    }

    /* Keep the section snug inside the viewport */
    .navigation-section-x {
        padding-left: 16px;
        padding-right: 16px;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }
}

/* =========================================================
    Vertical Layout & Card Grid Fix - for showcase page
    ========================================================= */


/* 1. LAYOUT FIX: Grid applies to both containers. */
#recipes-list,
.recipe-cards-x { 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

/* 2. CARD STRUCTURE FIX (Forcing the 220px height) */
.recipe-card-v2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-left: 4px solid var(--accent-color, #2790FF); 
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
    cursor: pointer;
    
    /* 💥 DEFINITIVE HEIGHT FIX: Locking the height to prevent collapse. */
    min-height: 220px; 
}

.recipe-card-v2:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    border-left-color: var(--accent-color, #1a73e8); 
}

/* 3. TITLE STYLES (Clean) */
.recipe-card-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--accent-color, #2790FF); 
    margin-bottom: 16px; 
    line-height: 1.5; 
}

/* 4. DESCRIPTION STYLES (Removing structural collapse risks) */
.recipe-card-desc {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    
    /* Structural Fixes */
    flex-grow: 0; 
    margin-bottom: 12px; 
}

/* 5. TAGS MARGIN (Crucial for tags layout and spacing) */
.recipe-card-tags,
.modal-tags {
    /* CRITICAL: Ensure tags are laid out correctly and have space between them */
    display: flex; 
    flex-wrap: wrap;
    align-items: center;
    gap: 8px; /* <-- Ensures spacing between tags */
    
    margin-top: 12px; 
    padding-top: 12px;
    border-top: 1px solid #eee;
}

/* =========================================================
    Vertical Section CTA Row (Footer)
    ========================================================= */

.section-cta-row-x {
    /* Layout: Distributes items to the far left and far right */
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* Spacing: Adds space before and after the row content */
    padding-top: 32px; 
    padding-bottom: 32px; /* Increased bottom padding for space BEFORE the divider */

    /* 💥 DIVIDER CHANGE: REMOVED border-top and ADDED border-bottom */
    border-top: none; /* Removed the previous top divider */
    border-bottom: 1px solid #e0e7ef; /* Added the divider AFTER the row */
    
    /* Margin after the divider for space before the next content block */
    margin-bottom: 40px; 
}

/* ---------------------------------------------------------
    Styling for the "Back to Top" Link (Left)
    --------------------------------------------------------- */

.cta-back-top {
    /* Style: Simple, functional text link */
    font-size: 0.9rem;
    font-weight: 500;
    color: #666; /* Muted text color for a secondary action */
    text-decoration: none;
    transition: color 0.2s ease;
}

.cta-back-top:hover {
    color: #1a73e8; /* Blueshift blue on hover */
    text-decoration: underline;
}

/* ---------------------------------------------------------
    Styling for the "View More" CTA (Right)
    --------------------------------------------------------- */

.cta-view-all {
    display: inline-block;
    padding: 8px 16px;
    
    /* Color Theme: Prominent Blueshift look */
    background-color: #f0f6ff; /* Very light blue background */
    color: #1a73e8; /* Strong Blueshift blue text */
    border: 1px solid #d0e7ff; 
    border-radius: 20px; /* Pill shape */
    
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.25s ease;
}

.cta-view-all:hover {
    /* UX Polish: Slight lift and deeper color on hover */
    background-color: #e6f0ff;
    color: #1557b0;
    border-color: #1a73e8;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(26, 115, 232, 0.15);
}

/* Mobile Adjustment: Ensure buttons don't stack awkwardly on small screens */
@media (max-width: 600px) {
    .section-cta-row-x {
        /* Stack vertically and center for easier tapping */
        flex-direction: column;
        gap: 12px; 
        padding-top: 24px;
        padding-bottom: 24px; /* Consistent mobile padding */
        margin-bottom: 30px;
    }
    
    .cta-back-top {
        /* Ensure top link centers on mobile */
        width: 100%;
        text-align: center;
    }
    
    .cta-view-all {
        /* Make "View more" span full width for better tap target */
        width: 100%;
        text-align: center;
        padding: 12px 0;
    }
}


/* ==========================================================================
   PRE CODE BLOCKS - GLOBAL STYLES (Consolidated)
   ========================================================================== */


/* --- 1. GLOBAL LAYOUT & SCROLL FIXES (Preserved) --- */
.article-container__column, .article__body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}
.article__body pre {
  overflow-x: auto !important;
}

/* Fix: wysiwyg-table width and display — 26 Mar 2026
   display:block on figure and table was causing right-side gap
   and preventing table from filling available width. */
figure.wysiwyg-table {
  height: auto !important;
  width: 100% !important;
  display: block !important;
  overflow-x: auto !important;
}

figure.wysiwyg-table table,
figure.wysiwyg-table .wysiwyg-table-resized {
  width: 100% !important;
  min-width: 100% !important;
  display: table !important;
}

/* --- 2. LIB STYLES (Preserved) --- */
.lib-pattern { margin: 40px 0; border-bottom: 1px solid #eee; padding-bottom: 24px; }
.lib-pattern h3 { margin-bottom: 8px; color: #003366; }
.lib-pattern p { margin: 4px 0; line-height: 1.5; }

/* RESET LIB-CODE-BLOCK (Prevents double borders) */
/* 1. KEEP THE RESET (Good for fixing double borders) */
.lib-code-block {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 12px 0;
  box-shadow: none !important;
  position: relative;
  max-width: 100%;
}

/* 2. REMOVE 'display: block' FROM STRONG (Fixes broken text) */
.lib-code-block strong {
  /* display: block;  <-- REMOVED THIS */
  font-weight: 700;
  color: #333;
}

.lib-code-block pre { margin: 0; }

.lib-output-box {
  background: #e7f3ff;
  border-left: 4px solid #0066cc;
  padding: 12px 16px;
  margin: 12px 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-x: auto;
  max-width: 100%;
}

/* 3. REMOVE 'display: block' HERE TOO */
.lib-output-box strong {
  /* display: block; <-- REMOVED THIS */
  color: #003366;
  font-weight: 700;
}

/* ==========================================================================
   BACK TO TOC BUTTON (Mini Pill)
   ========================================================================== */

/* 1. Container */
.lib-backtop {
  margin-top: 32px !important; 
  margin-bottom: 0 !important;
  text-align: right; 
}

/* 2. The Button Styling */
.lib-backtop a {
  display: inline-flex;
  align-items: center;
  gap: 6px; 
  
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;        
  text-transform: uppercase; 
  letter-spacing: 0.5px;
  text-decoration: none;
  
  /* DEFAULT STATE: Clean & Calm */
  color: #64748b;          /* Slate Gray */
  background: #ffffff;     /* Pure White */
  border: 1px solid #cbd5e1; /* Visible Slate Border */
  
  border-radius: 20px;   
  
  /* THE MAGIC: Smooth 0.2s fade for colors only */
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  
  /* No Shadow (Flat) */
  box-shadow: none !important; 
}

/* 3. Hover State (The "Middle Ground") */
.lib-backtop a:hover {
  /* Interaction is purely through Color, not Movement */
  color: #002c97;            /* Text turns Navy */
  background-color: #F0F9FF; /* Background turns Soft Blue */
  border-color: #2790FF;     /* Border turns Bright Blue */
  
  /* NO HOP, NO SHADOW - Just a smooth color shift */
  transform: none !important; 
  box-shadow: none !important;
}

/* 4. Active State (Click) */
.lib-backtop a:active {
  background-color: #e0f2fe;
  border-color: #002c97;
  transition-duration: 0s; /* Instant feedback on click */
}

/* ==========================================================================
   NAVIGATION PILLS (Quick Jump Menu) - V4 (FINAL BRANDED CONTRAST)
   Pill uses Brand Blue for the border and hover state to maximize prominence 
   without overwhelming the page content.
   ========================================================================== */

/* 1. Container */
.lib-nav-block {
  display: flex;
  flex-wrap: wrap; 
  gap: 12px;     
  padding: 0;
  margin: 24px 0 40px 0; 
  list-style: none !important;
}

/* 2. Reset List Items */
.lib-nav-block li {
  margin: 0 !important;
  padding: 0 !important;
}

/* 3. The Pill Design (More Prominent with Brand Border) */
.lib-nav-block a {
  display: inline-flex;
  align-items: center;
  
  /* SIZE UP: Easier to read and click */
  padding: 10px 20px; 
  font-size: 14px; 
  
  /* --- CONTRAST BOOST --- */
  background-color: #FFFFFF;    /* Keep background white/light for subordination */
  border: 1px solid #2790FF;    /* <--- BRAND BLUE BORDER (High prominence) */
  color: #1E293B;               /* Darker Slate Text (High Contrast) */
  /* ---------------------- */
  
  border-radius: 50px; 
  font-weight: 500; 
  text-decoration: none; 
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08); /* Defined lift */
}

/* 4. Hover State (Solid Brand Blue) */
.lib-nav-block a:hover {
  background-color: #2790FF;    /* <--- SOLID BRAND BLUE on hover */
  border-color: #2790FF;        /* Border matches */
  color: #FFFFFF;               /* <--- WHITE TEXT on hover */
  
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* Clearer lift */
}

/* 5. Click State */
.lib-nav-block a:active {
  transform: translateY(0);
  background-color: #2790FF;
  box-shadow: none;
}

/* --- 3. MASTER CODE STYLING --- */
/* Updated 19-Apr-2026: move reserved space from right to top so the copy button does not overlap horizontally scrolling code */
pre:not(.lp-prompt__text), .wysiwyg-code-block, pre[class*="language-"] {
  /* Layout: Grid */
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;

  /* Visuals: Blueshift Theme */
  background-color: #F7FAFF !important;
  border: 1px solid #E3F1FF !important;
  border-left: 4px solid #2790FF !important;
  border-radius: 6px !important;
  box-shadow: none !important;

  /* SPACING: Standardized */
  margin-top: 12px !important;
  margin-bottom: 24px !important;
  
  /* Updated 19-Apr-2026:
     Reserve space ABOVE the code for the copy button.
     This prevents the button from overlapping horizontally scrolling code. */
  padding: 48px 16px 16px 16px !important;
  
  /* Typography - UPDATED FOR SIZE */
  font-family: 'Roboto Mono', SFMono-Regular, Consolas, Menlo, monospace !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  font-weight: 400 !important;
  font-variant-ligatures: none;
}

/* Inner Code Content */
/* Updated 19-Apr-2026: keep code as the scrolling area inside the fixed outer container */
pre > code, pre code[class*="language-"] {
  width: 100%;
  display: block;
  overflow-x: auto !important;
  
  white-space: pre;
  word-wrap: normal;
  color: #0F172A !important;
  
  /* Ensure inner code matches parent size */
  font-family: inherit !important;
  font-size: inherit !important; 
  
  /* FIX: Kill default Prism padding to stop the huge gap */
  margin: 0 !important;
  padding: 0 !important; 
  
  /* Keep small space for scrollbar */
  padding-bottom: 6px !important; 
  
  background: transparent !important;
  border: none !important;
}

/* --- 4. CUSTOM SCROLLBARS (Mac Style) --- */
pre > code::-webkit-scrollbar { height: 8px; background: transparent; }
pre > code::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; }
pre > code::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }

/* --- 5. SYNTAX HIGHLIGHTING --- */
.token.keyword, .token.tag, .token.selector, .token.atrule, .token.important { color: #002c97 !important; font-weight: 700 !important; }
.token.string, .token.attr-value, .token.number, .token.boolean { color: #2790FF !important; }
.token.function, .token.class-name, .token.variable, .token.property { color: #002c97 !important; }
.token.comment { color: #94a3b8 !important; font-style: italic !important; }
.token.punctuation { color: #64748b !important; }

/* --- 6. PRO "COPY" ICON (Interactive Feedback) --- */
pre .copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  z-index: 2;
  
  /* Hide text */
  font-size: 0 !important; 
  color: transparent !important;
  
  /* DEFAULT ICON: Clipboard (Gray) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
  background-color: transparent;
  
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}

/* Hover State: Blue Icon + Blue Background */
pre .copy-btn:hover {
  background-color: #F0F9FF; /* Very light blue */
  border-color: #BAE6FD;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230284c7' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z' /%3E%3C/svg%3E");
}

/* --- THE SUCCESS STATE (Green Checkmark) --- */
/* The JS adds this class when clicked */
pre .copy-btn.copied {
  background-color: #ECFDF5 !important; /* Light Green Bg */
  border-color: #6EE7B7 !important;     /* Green Border */
  
  /* ICON: Checkmark (Green) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23059669' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7' /%3E%3C/svg%3E") !important;
}

/* Layout Protection: Reserves space so text doesn't hit the button */
/*pre:has(> button.copy-btn) {
  padding-right: 48px !important;
}*/

/* Fix "Zendesk Badge" conflict */
code .token.tag {
  text-transform: none !important;
  letter-spacing: 0 !important;
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  font-weight: 700 !important;
  border-radius: 0 !important;
}

/* ==========================================================================
   INLINE CODE STYLING (Fixes "Tiny Text" in Paragraphs)
   CRITICAL FIX: Adjusted vertical alignment to lift the pill up by 1px.
   ========================================================================== */

/* Target code tags that are NOT inside a code block */
:not(pre) > code {
  /* 1. Sizing: Keep optimized size and minimal padding */
  font-size: 90% !important; 
  line-height: inherit !important;
  
  /* 2. Visuals */
  background-color: #eff6ff !important;
  border: 1px solid #dbeafe !important;
  border-radius: 4px !important;
  
  /* 3. Text Color */
  color: #0f172a !important; 
  
  /* 4. Spacing */
  padding: 1px 5px !important; 
  margin: 0 2px !important;
  
  /* 5. Font & Alignment: CRITICAL FIX */
  font-family: 'Roboto Mono', SFMono-Regular, Consolas, monospace !important;
  font-weight: 500 !important;
  
  /* LIFT FIX: Shift the pill up 1 pixel to align the visual center */
  vertical-align: -1px; 
}

/* Ensure links inside code tags inherit the color */
:not(pre) > code a {
  color: inherit !important;
  text-decoration: underline;
}

/* ==========================================================================
   7. PRISMJS FONT SIZE INHERITANCE FIX (CRITICAL)
   Fixes the visual size difference between Liquid and HTML tokens 
   inside the same code block (prevents <a href> from looking tiny).
   ========================================================================== */

pre[class*="language-"] .token {
  font-size: inherit !important; /* Forces all highlighted bits to match the 14px parent */
}


/* Hide Launchpad beta articles from all UI lists */
a[href*="/hc/en-us/articles/48516252195731"],
a[href*="/hc/en-us/articles/48611342553491"],
a[href*="/hc/en-us/articles/48611938548627"] {
  display: none !important;
}


/* ==========================================================================
   DELIVERABILITY GLOSSARY (bs-gl-)
   Feb 2026 · v4
   Only styles interactive widgets + minimal layout fixes.
   All content typography inherits from Zendesk theme.
   ========================================================================== */

/* ─── Bulletproof hide (Zendesk theme can't override all of these) ─── */
#bsGlList { max-width: 100%; position: relative; padding-bottom: 48px; }

.bs-gl-hidden {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  visibility: hidden !important;
}

/* ─── Count pill ─── */
.bs-gl-count {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #002c97;
  background: #EBF2FF;
  padding: 4px 14px;
  border-radius: 16px;
  margin-bottom: 16px;
}

/* ─── Sticky controls ─── */
.bs-gl-controls {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  padding: 16px 0;
  transition: box-shadow 0.2s;
  max-width: 100%;
  overflow: visible;
}

.bs-gl-controls.bs-gl-scrolled {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Search */
.bs-gl-search-wrap { position: relative; margin-bottom: 12px; max-width: 100%; }

.bs-gl-search {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 42px 12px 16px;
  border: 1px solid #d1d9e6;
  border-radius: 8px;
  background: #f7f8fa;
  font: inherit;
  color: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.bs-gl-search:focus {
  border-color: #2790FF;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(39, 144, 255, 0.15);
}

.bs-gl-search-clear {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: none;
  background: #dde3ec;
  color: #64748b;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.bs-gl-search-clear:hover { background: #c4cdd8; }
.bs-gl-search-clear.bs-gl-show { display: flex; }


/* Alpha nav — grid auto-fill, scales to any count */
.bs-gl-alpha-row {
  display: block;
}

.bs-gl-alpha {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 3px;
}

.bs-gl-alpha a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  font-size: 14px;
  font-weight: 700;
  color: #475569;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}

.bs-gl-alpha a:hover { background: #EBF2FF; color: #002c97; }
.bs-gl-alpha a.bs-gl-on { background: #002c97; color: #fff; }
.bs-gl-alpha a.bs-gl-off { color: #d1d9e6; pointer-events: none; }

/* Filter count — shown between search and alpha during active search */
.bs-gl-filter-info {
  display: none;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  padding: 2px 0 6px;
}

.bs-gl-filter-info.bs-gl-show { display: block; }
.bs-gl-filter-info b { color: #002c97; }

/* ─── Letter headers ─── */
.bs-gl-letter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 32px 0 4px;
  scroll-margin-top: 140px;
  max-width: 100%;
}

.bs-gl-letter span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  background: #002c97;
  border-radius: 8px;
}

.bs-gl-letter::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #d1d9e6;
}

/* ─── Term entries ─── */
.bs-gl-entry {
  padding: 16px 0 20px;
}

/* Tighten paragraph spacing within entries */
.bs-gl-entry p {
  margin: 0 0 4px;
}

/* Separator between visible entries — managed by JS */
.bs-gl-sep {
  border-top: 1px solid #e2e8f0;
}

/* Abbreviation badge */
.bs-gl-badge {
  font-family: 'Roboto Mono', SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  color: #002c97;
  background: #EBF2FF;
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: 1px;
}

/* Permalink */
.bs-gl-hash {
  color: transparent;
  text-decoration: none;
  margin-left: 4px;
  transition: color 0.15s;
}

.bs-gl-entry:hover .bs-gl-hash { color: #cbd5e1; }
.bs-gl-hash:hover { color: #002c97 !important; }

/* Search highlight */
.bs-gl-entry mark {
  background: #fef08a;
  padding: 0 2px;
  border-radius: 2px;
}

/* Example line */
.bs-gl-term-ex {
  font-style: italic;
  color: #6b7a90;
  border-left: 2px solid #e2e8f0;
  padding-left: 10px;
  margin-top: 6px !important;
}

/* Learn more link */
.bs-gl-term-link {
  color: #002c97;
  font-weight: 500;
  font-size: 13px;
}

.bs-gl-term-link:hover { text-decoration: underline; }

/* Deep link flash */
.bs-gl-highlight { animation: bsGlFlash 1.5s ease; }

@keyframes bsGlFlash {
  0%   { background: #EBF2FF; }
  100% { background: transparent; }
}

/* ─── Empty state ─── */
.bs-gl-empty {
  text-align: center;
  padding: 40px 0;
  color: #94a3b8;
  display: none;
}

.bs-gl-empty a { color: #2790FF; font-weight: 600; }

/* ─── Toast ─── */
.bs-gl-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 8px;
  opacity: 0;
  transition: all 0.2s;
  z-index: 201;
  pointer-events: none;
}

.bs-gl-toast.bs-gl-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─── Back to top ─── */
.bs-gl-top-btn {
  position: fixed;
  bottom: 24px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: #EBF2FF;
  color: #002c97;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 44, 151, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.2s;
  pointer-events: none;
}

.bs-gl-top-btn.bs-gl-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.bs-gl-top-btn:hover {
  box-shadow: 0 2px 8px rgba(0, 44, 151, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.bs-gl-top-btn svg { display: block; }

/* ─── Mobile ─── */
@media (max-width: 600px) {
  .bs-gl-alpha { grid-template-columns: repeat(auto-fill, minmax(26px, 1fr)); }
  .bs-gl-alpha a { height: 28px; font-size: 12px; }
  .bs-gl-top-btn { width: 36px; height: 36px; }
}


/* ==========================================================================
   FAQs and troubleshooting — append to bottom of style.css
   All accordion styles scoped to #bs-faq-page
   ========================================================================== */

/* Jump-to pills */
.bs-faq-jumpto {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid #e0e7f0;
}

.bs-faq-jumpto a {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid #a8c0f0;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  color: #002c97;
  background: #EBF2FF;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.bs-faq-jumpto a:hover {
  background: #dce8ff;
  border-color: #002c97;
  text-decoration: none;
}

/* Group label */
[dir] #bs-faq-page h3.bs-faq-group-label {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #002c97;
  margin: 36px 0 12px;
}

/* Section headings */
#bs-faq-page h2 {
  margin-top: 48px;
  margin-bottom: 16px;
}

/* Accordion — scoped */
#bs-faq-page .faq-item {
  border: 1px solid #d1d9e6;
  border-radius: 8px;
  margin-bottom: 6px;
  overflow: hidden;
  background: #fff;
}

#bs-faq-page .faq-item:hover {
  border-color: #a8c0f0;
  box-shadow: 0 1px 4px rgba(0,44,151,0.06);
}

#bs-faq-page .faq-question {
  padding: 18px 20px;
  font-size: 15.5px;
  font-weight: 500;
  color: #1a2b4a;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 0;
  line-height: 1.5;
}

#bs-faq-page .faq-toggle-icon {
  color: #002c97;
  font-size: 24px;
  font-weight: 300;
  flex-shrink: 0;
  line-height: 1;
  width: 24px;
  text-align: center;
}

#bs-faq-page .faq-answer {
  display: none;
  padding: 16px 20px 20px;
  border-top: 1px solid #e8edf3;
  font-size: 15px;
  line-height: 1.8;
  color: #3d4f61;
}

#bs-faq-page .faq-answer.active { display: block; }
#bs-faq-page .faq-answer p:first-child { margin-top: 0; }
#bs-faq-page .faq-answer p:last-child { margin-bottom: 0; }
#bs-faq-page .faq-answer ul { margin: 10px 0 0 20px; }
#bs-faq-page .faq-answer li { margin-bottom: 8px; font-size: 15px; }

/* Callout */
.bs-faq-callout {
  margin-top: 14px;
  padding: 12px 16px;
  background: #EBF2FF;
  border-left: 3px solid #002c97;
  border-radius: 0 4px 4px 0;
  font-size: 14px;
  color: #002c97;
  line-height: 1.6;
}

/* Cards */
.bs-faq-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 12px;
  margin-bottom: 8px;
}

.bs-faq-card {
  display: block;
  padding: 20px 22px;
  border: 1px solid #d1d9e6;
  border-left: 3px solid #002c97;
  border-radius: 8px;
  text-decoration: none;
  background: #fff;
  transition: background 0.15s, box-shadow 0.15s;
}

.bs-faq-card:hover {
  background: #f5f8ff;
  box-shadow: 0 2px 10px rgba(0,44,151,0.09);
  text-decoration: none;
}

.bs-faq-card strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #002c97;
  margin-bottom: 7px;
}

.bs-faq-card span {
  font-size: 13px;
  color: #6b7a90;
  line-height: 1.6;
}

/* =========================================================
   MCP Tools Explorer — Styles
   Created: 07 Mar 2026
   Last Updated: 07 Mar 2026
   
   Changelog:
   07 Mar 2026 — v1. Initial working version.
   07 Mar 2026 — v3.1 FIXED: Strengthened header and 
                 consistent table borders (bottom/sides).
   ========================================================= */

/* ---------- Intro section ---------- */
.mcp-intro {
  background: #ffffff;
  border: 1px solid #e6edf5;
  border-radius: 12px;
  padding: 20px 24px 18px;
  margin: 0 0 1.5rem;
}

.mcp-intro-text,
.mcp-intro-link {
  margin: 0;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.65;
}

.mcp-intro-link {
  margin-top: 0.75rem;
}

.mcp-intro-meta {
  margin-top: 0.95rem;
}

.mcp-intro-count {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #2160d4;
  background: #e7f0ff;
  border: 1px solid #c9d9ff;
  border-radius: 999px;
}

/* ---------- Toolbar ---------- */
.mcp-toolbar {
  background: #ffffff;
  border: 1px solid #e6edf5;
  border-radius: 10px;
  padding: 16px 20px;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mcp-search-wrap {
  position: relative;
}

.mcp-toolbar input[type="text"] {
  width: 100%;
  padding: 10px 44px 10px 14px;
  font-size: 0.94rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  outline: none;
  color: #1e293b;
  background: #ffffff;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.mcp-toolbar input[type="text"]:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.mcp-toolbar input[type="text"]::placeholder {
  color: #94a3b8;
}

.mcp-search-clear {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #94a3b8;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.mcp-search-clear:hover {
  background: #f1f5f9;
  color: #475569;
}

.mcp-search-clear.is-visible {
  display: inline-flex;
}

.mcp-toolbar .mcp-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.mcp-filter-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mcp-filter-group label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mcp-toolbar select {
  padding: 7px 10px;
  font-size: 0.88rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  min-width: 160px;
  transition: border-color 0.15s;
}

.mcp-toolbar select:focus {
  border-color: #3b82f6;
  outline: none;
}

.mcp-toolbar .mcp-page-size-select {
  min-width: 70px;
}

.mcp-clear-btn {
  padding: 7px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #3b82f6;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s;
}

.mcp-clear-btn:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

/* ---------- Status bar ---------- */
.mcp-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.84rem;
  color: #475569;
  margin: 0 0 0.5rem;
  padding: 0 2px;
}

/* ---------- Table ---------- */
.mcp-table-wrap {
  overflow: hidden;
  overflow-x: auto;
  border-radius: 10px;
  background: #ffffff;
  /* FIXED: Outer border acts as the visual frame for the grid */
  border: 1px solid #e7edf5; 
}

.mcp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
  margin: 0;
}

.mcp-table th,
.mcp-table td {
  /* FIXED: Standardized to 1px for crisp browser rendering */
  border: none !important;
}

.mcp-table th {
  /* STRENGTHENED: Distinct bold header background */
  background: linear-gradient(to bottom, #fdfefe, #f1f5f9);
  padding: 12px 14px;
  text-align: left;
  font-weight: 700;
  font-size: 0.77rem;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* STRENGTHENED: 2px border for clear structural separation */
  border-bottom: 2px solid #e2e8f0 !important;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.mcp-table th:hover {
  background: linear-gradient(to bottom, #f8fbff, #eef5fb);
}

.mcp-table th .sort-icon {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.68rem;
  color: #94a3b8;
  transition: color 0.15s;
}

.mcp-table th .sort-icon.active {
  color: #2563eb;
}

.mcp-table td {
  padding: 13px 14px;
  vertical-align: top;
  color: #1e293b;
  line-height: 1.6;
  background: #ffffff;
  border-bottom: 1px solid #f3f6fa !important;
}

/* FIXED: Prevent clipping/double-borders at the bottom rounded edge */
.mcp-table tbody tr:last-child td {
  border-bottom: none !important;
}

.mcp-table tbody tr:nth-child(even) td {
  background: #eef2f7;
}

/*.mcp-table tbody tr:hover td {
  background: #f6f9fc;
}*/

.mcp-table td:first-child {
  white-space: nowrap;
  width: 280px;
}

.mcp-table td:first-child code {
  display: inline-block;
  background: #f8fafc;
  border: 1px solid #dbe4f0;
  border-radius: 7px;
  padding: 5px 11px;
  font-size: 0.83rem !important;
  font-family: "SF Mono", "Fira Code", Menlo, Consolas, monospace;
  color: #1f2937;
  letter-spacing: -0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.mcp-table td:nth-child(2) {
  color: #334155;
}

.mcp-table td:nth-child(3) {
  white-space: nowrap;
  color: #475569;
  font-size: 0.88rem;
}

.mcp-table td:last-child {
  text-align: center;
  white-space: nowrap;
  width: 80px;
}

/* Vertical separators standardized to 1px */
.mcp-table th + th,
.mcp-table td + td {
  border-left: 1px solid #f5f7fb !important;
}

/* ---------- Badges ---------- */
.mcp-badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 0.74rem;
  font-weight: 600;
  border-radius: 5px;
  letter-spacing: 0.02em;
}

.mcp-badge-read {
  background-color: #e7f0ff;
  color: #2160d4;
  border: 1px solid #c9d9ff;
}

.mcp-badge-write {
  background-color: #f3e8ff;
  color: #8933ff;
  border: 1px solid #e4ccff;
}

/* ---------- Search highlight ---------- */
.mcp-highlight {
  background: #fef08a;
  color: #1e293b;
  border-radius: 2px;
  padding: 0 1px;
}

/* ---------- Pagination ---------- */
.mcp-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin: 1.25rem 0 0.5rem;
  flex-wrap: wrap;
}

.mcp-pg-btn {
  padding: 6px 12px;
  font-size: 0.84rem;
  color: #475569;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.mcp-pg-btn:hover:not(:disabled):not(.active) {
  background: #f1f5f9;
  border-color: #3b82f6;
  color: #3b82f6;
}

.mcp-pg-btn:disabled {
  color: #cbd5e1;
  cursor: default;
  background: #ffffff;
}

.mcp-pg-btn.active {
  background: #3b82f6;
  color: #ffffff;
  border-color: #3b82f6;
  font-weight: 600;
}

.mcp-pg-info {
  font-size: 0.82rem;
  color: #64748b;
  margin: 0 10px;
}

/* ---------- Empty / loading ---------- */
.mcp-loading {
  text-align: center;
  padding: 3rem 1rem;
  color: #94a3b8;
  font-size: 0.92rem;
}

.mcp-empty {
  text-align: center;
  padding: 2.5rem 1rem;
}

.mcp-empty h3 {
  color: #475569;
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 600;
}

.mcp-empty p {
  margin: 0;
  font-size: 0.9rem;
  color: #94a3b8;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .mcp-intro {
    padding: 16px 18px 14px;
  }
  .mcp-toolbar {
    padding: 14px 16px;
  }
  .mcp-toolbar .mcp-filter-row {
    flex-direction: column;
    align-items: stretch;
  }
  .mcp-filter-group {
    width: 100%;
  }
  .mcp-toolbar select {
    width: 100%;
    min-width: unset;
  }
  .mcp-table {
    font-size: 0.84rem;
  }
  .mcp-table th,
  .mcp-table td {
    padding: 9px 10px;
  }
  .mcp-table td:first-child {
    width: auto;
  }
}

.mcp-page-footer {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid #e5edf5;
}

.mcp-page-footer p {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
}

/* MCP Server Main Page - Styles - 9-March-2026 */
.mcp-article {
      --bs-text: #1f2937;
      --bs-text-muted: #4b5563;
      --bs-heading: #111827;
      --bs-border: #dbe4f0;
      --bs-border-soft: #edf2f7;
      --bs-border-strong: #c5d4e6;
      --bs-surface: #ffffff;
      --bs-surface-subtle: #f8fbff;
      --bs-blue-50: #eef6ff;
      --bs-blue-100: #dcecff;
      --bs-blue-600: #2563eb;
      --bs-blue-700: #1d4ed8;
      --bs-amber-50: #fff8e8;
      --bs-amber-100: #fde7b0;
      --bs-radius: 8px;
      --bs-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
      color: var(--bs-text);
    }

    .mcp-article a {
      color: var(--bs-blue-700);
      text-decoration: none;
    }

    .mcp-article a:hover {
      text-decoration: underline;
    }

    .mcp-article code {
      background: #f3f6fa;
      border: 1px solid var(--bs-border);
      border-radius: 6px;
      padding: 0.08rem 0.38rem;
      font-size: 0.92em;
      color: var(--bs-heading);
      white-space: nowrap;
    }

    .mcp-article .lede {
      color: var(--bs-text-muted);
    }

    .mcp-article .callout {
      border: 1px solid var(--bs-border);
      border-left-width: 4px;
      border-radius: var(--bs-radius);
      padding: 12px 14px;
      margin: 0.9rem 0 1.5rem;
      box-shadow: var(--bs-shadow);
      background: var(--bs-surface);
    }

    .mcp-article .callout--beta {
      background: var(--bs-blue-50);
      border-color: var(--bs-blue-100);
      border-left-color: var(--bs-blue-600);
    }

    .mcp-article .callout--privacy {
      background: var(--bs-amber-50);
      border-color: var(--bs-amber-100);
      border-left-color: #d97706;
    }

    .mcp-article .callout--note {
      background: var(--bs-surface-subtle);
      border-color: var(--bs-border-strong);
      border-left-color: var(--bs-blue-600);
    }

    .mcp-article .callout > :first-child {
      margin-top: 0;
    }

    .mcp-article .callout > :last-child {
      margin-bottom: 0;
    }

    .mcp-article .prompt-group-title {
      margin: 0.9rem 0 0.35rem;
      color: var(--bs-heading);
      font-weight: 600;
    }

    .mcp-article .prompt-box {
      background: var(--bs-surface-subtle);
      border: 1px solid var(--bs-border);
      border-radius: var(--bs-radius);
      padding: 12px 16px;
      margin: 0.65rem 0 1.5rem;
    }

    .mcp-article .prompt-box ul {
      list-style: none;
      padding-left: 0;
      margin: 0;
    }

    .mcp-article .prompt-box li {
      margin: 0.35rem 0;
      color: var(--bs-text-muted);
      font-style: italic;
    }

    .mcp-article .prompt-box li::before {
      content: "\2192\0020";
      color: var(--bs-blue-600);
      font-style: normal;
      font-weight: 600;
    }

    .mcp-article .faq-item {
      margin: 0.85rem 0;
      padding: 0 0 0.85rem;
      border-bottom: 1px solid var(--bs-border-soft);
    }

    .mcp-article .faq-item:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .mcp-article .faq-item strong {
      display: block;
      margin-bottom: 0.15rem;
      line-height: 1.35;
    }

    .mcp-article .faq-item p {
      margin: 0;
    }

    .mcp-article .tool-table-wrap {
      overflow-x: auto;
      margin: 1rem 0 1.25rem;
    }

    .mcp-article .tool-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.95rem;
    }

    .mcp-article .tool-table th,
    .mcp-article .tool-table td {
      padding: 10px 12px;
      vertical-align: top;
      border: 1px solid var(--bs-border);
    }

    .mcp-article .tool-table th {
      color: var(--bs-heading);
      background: #f8fafc;
      text-align: left;
    }

    .mcp-article .tool-table td:first-child {
      white-space: nowrap;
    }

    .mcp-article .back-link {
      margin: 0 0 1rem;
    }

    @media (max-width: 767px) {
      .mcp-article .tool-table {
        font-size: 0.92rem;
      }

      .mcp-article .tool-table th,
      .mcp-article .tool-table td {
        padding: 9px 10px;
      }
    }

/* Added - 18 March 2026 - simple collapsible details sections */
.report-fields-toggle {
  margin-bottom: 16px;
}

.report-fields-details .report-fields-body {
  padding-top: 8px;
}

.report-fields-details .report-fields-body ul {
  margin-top: 0;
}

.report-fields-details summary {
  cursor: pointer;
}

/* Added 19 March 2026 - Fix: Reposition instant search dropdown below search bar (device agnostic) */
zd-autocomplete[role="listbox"] {
  overflow-y: auto;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Universal doc navigation — 2026-03-30 */
.doc-nav {
  margin-top: 40px;
  padding: 20px 16px 0;
  box-sizing: border-box;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.doc-nav.is-next-only {
  justify-content: flex-end;
}
.doc-nav.is-prev-only {
  justify-content: flex-start;
}
.doc-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
  border-radius: 6px;
  color: #1a73e8;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
/* --- Prev link --- */
.doc-nav-link.prev {
  padding: 12px 14px 12px 0;
  border-right: 2px solid #dbe7ff;
}
.doc-nav-link.prev::before {
  content: "←";
  color: #1a73e8;
  order: 1;
  white-space: nowrap;
}
.doc-nav-link.prev::after {
  content: "Previous";
  color: #6b7280;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  order: 2;
  white-space: nowrap;
}
.doc-nav-link.prev .doc-nav-title {
  order: 3;
}
/* --- Next link --- */
.doc-nav-link.next {
  padding: 12px 0 12px 14px;
  border-left: 2px solid #dbe7ff;
}
.doc-nav-link.next::before {
  content: "Next";
  color: #6b7280;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.doc-nav-link.next::after {
  content: "→";
  color: #1a73e8;
}
/* --- Title --- */
.doc-nav-title {
  text-decoration: none;
  min-width: 0;
  overflow-wrap: break-word;
}
.doc-nav-link:hover .doc-nav-title,
.doc-nav-link:focus .doc-nav-title {
  text-decoration: underline;
}
.doc-nav-link:focus-visible {
  outline: 2px solid #c7dcff;
  outline-offset: 4px;
}
/* --- Mobile --- */
@media (max-width: 767px) {
  .doc-nav {
    padding: 20px 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .doc-nav-link {
    font-size: 14px;
  }
  .doc-nav-link.prev,
  .doc-nav-link.next {
    padding: 12px 0 12px 14px;
    border-right: 0;
    border-left: 2px solid #dbe7ff;
  }
}

/* ==========================================================================
   PROMPT COPY BLOCKS — 30 Mar 2026
   Card-style prompt pattern for use cases page.
   Icon rendered via inline SVG background-image. No Font Awesome dependency.
   ========================================================================== */
/* --- Prompt group spacing --- */
.lp-prompt-list {
  margin: 10px 0 0;
}
/* --- Section breathing room --- */
.lp-prompt-list + h2,
.lp-prompt-list + p + h2 {
  margin-top: 32px;
}
.callout + .lp-prompt-list {
  margin-top: 16px;
}
/* --- Individual prompt unit --- */
.lp-prompt {
  margin: 0 0 20px;
}
.lp-prompt:last-child {
  margin-bottom: 20px;
}
/* --- Bold value lead-in --- */
.lp-prompt__label {
  margin: 0 0 8px !important;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 700;
  color: #1f2937;
}
/* --- Copyable prompt container --- */
.lp-prompt__box {
  position: relative;
  padding: 8px 40px 8px 12px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  background: transparent;
  transition: border-color 0.15s ease;
}
.lp-prompt__box:hover {
  border-color: #2790ff;
}
/* --- Prompt text --- */
.lp-prompt__text {
  margin: 0 !important;
  font-size: 14px;
  line-height: 1.55;
  color: #374151;
}
/* --- Copy button wrapper --- */
.lp-prompt__box p:has(.lp-prompt__copy) {
  margin: 0;
}
/* --- Copy button --- */
.lp-prompt__copy {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 26px;
  height: 26px;
  font-size: 0 !important;
  color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  background-color: transparent;
  border: none;
  border-radius: 6px;
  opacity: 0.4;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}
.lp-prompt__copy:hover,
.lp-prompt__copy:focus-visible {
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232790ff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z' /%3E%3C/svg%3E");
  outline: none;
}
.lp-prompt__copy.is-copied {
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2310b981' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7' /%3E%3C/svg%3E");
}
/* --- Mobile --- */
@media (max-width: 767px) {
  .lp-prompt {
    margin-bottom: 18px;
  }
  .lp-prompt__box {
    padding: 8px 36px 8px 10px;
  }
}

/* ==========================================================================
   PROMPT BEST PRACTICES — 2×2 tip grid + full-width card — 31 Mar 2026
   Placed after lede, before first H2. No heading above.
   ========================================================================== */
/* --- Grid layout --- */
.lp-tips-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 0 0 14px;
}
/* --- Individual tip card --- */
.lp-tip-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 20px 20px 18px;
  position: relative;
  overflow: hidden;
}
.lp-tip-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #2790ff;
  opacity: 0.5;
}
/* --- Full-width card below grid --- */
.lp-tip-card--full {
  margin: 0 0 16px;
}
/* --- Card title --- */
.lp-tip-card__title {
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 8px;
  line-height: 1.4;
}
/* --- Card body --- */
.lp-tip-card__body {
  font-size: 14px;
  line-height: 1.6;
  color: #4b5563;
  margin: 0 0 10px;
}
.lp-tip-card__body a {
  color: #1a73e8;
  text-decoration: none;
}
.lp-tip-card__body a:hover {
  text-decoration: underline;
}
/* --- Do / Avoid examples --- */
.lp-tip-card__example {
  font-size: 13.5px;
  line-height: 1.55;
  color: #6b7280;
  margin: 0;
}
.lp-do,
.lp-avoid {
  display: block;
  font-style: normal;
  font-size: 13.5px;
  font-weight: 600;
  margin-top: 3px;
}
.lp-do {
  color: #059669;
}
.lp-do::before {
  content: "✓ ";
}
.lp-avoid {
  color: #dc2626;
}
.lp-avoid::before {
  content: "✗ ";
}
/* --- Footer reminder --- */
.lp-tips-footer {
  font-size: 14.5px;
  line-height: 1.55;
  color: #6b7280;
  margin: 0 0 36px;
  padding: 0 2px;
}
.lp-tips-footer strong {
  color: #374151;
}
/* --- Mobile --- */
@media (max-width: 767px) {
  .lp-tips-grid {
    grid-template-columns: 1fr;
  }
  .lp-tip-card {
    padding: 16px 16px 14px;
  }
}

/* =========================================================
   Feed Recipe List (Callout UX Enhancements)
   ========================================================= */

.feed-recipe-groups {
  margin-top: 12px;
}

.feed-recipe-group + .feed-recipe-group {
  margin-top: 18px;
}

.feed-recipe-group strong {
  display: block;
  margin-bottom: 6px;
}

.feed-recipe-desc {
  margin: 0 0 10px;
  color: #555;
  line-height: 1.5;
}

.feed-recipe-list {
  margin-top: 4px;
}

.feed-recipe-items {
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  column-gap: 28px;
  row-gap: 8px;
  margin: 0;
  padding-left: 18px;
}

.feed-recipe-items li {
  margin: 0;
  padding: 0;
}

.feed-recipe-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: #1a73e8;
  cursor: pointer;
  text-align: left;
  line-height: 1.5;
  font: inherit;
}

.feed-recipe-link:hover {
  text-decoration: underline;
}

.feed-recipe-link:focus {
  outline: none;
  text-decoration: underline;
}

.feed-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.feed-pager-btn {
  background: none;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font: inherit;
}

.feed-pager-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.feed-pager-status {
  font-size: 0.95rem;
  color: #666;
  min-width: 42px;
  text-align: center;
}

@media (max-width: 767px) {
  .feed-recipe-items {
    display: block;
  }

  .feed-recipe-items li {
    margin-bottom: 8px;
  }

  .feed-pager {
    justify-content: flex-start;
  }
}

.feed-recipe-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: #1a73e8;
  cursor: pointer;
  text-align: left;
  line-height: 1.45;
  font: inherit;
  width: 100%;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Back to top (global) -- updated 15-April-2026 ── */
.bsft-top-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: #EBF2FF;
  color: #002c97;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,44,151,0.08), 0 1px 2px rgba(0,0,0,0.06);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.2s;
  pointer-events: none;
}
.bsft-top-btn.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.bsft-top-btn:hover {
  box-shadow: 0 2px 8px rgba(0,44,151,0.15), 0 1px 3px rgba(0,0,0,0.08);
}
.bsft-top-btn svg {
  display: block;
}
@media (max-width: 600px) {
  .bsft-top-btn {
    width: 36px;
    height: 36px;
    bottom: 16px;
    right: 16px;
  }
}

/* ── Prompt text formatting — 15-April-2026 ── */
pre.lp-prompt__text {
  all: unset;
  display: block;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  color: #374151;
  margin: 0 !important;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Launchpad release notes — styles | updated 30-June-2026 */
.lede { font-size: 1.05rem; line-height: 1.55; color: #2a2f3a; margin: 4px 0 18px; }

/* TOC — override Zendesk default callout fill */
.callout.callout--toc {
  background: #fbfcfe !important;
  border: 1px solid #e6eaf0 !important;
  border-left: 3px solid #2b6cb0 !important;
  border-radius: 8px;
  padding: 14px 18px;
  margin: 18px 0 28px;
}
.callout--toc .callout__title {
  margin: 0 0 10px; font-size: 1rem; font-weight: 600; color: #2b6cb0;
}
.callout--toc ul { margin: 0; padding-left: 18px; }
.callout--toc li { margin: 5px 0; font-size: 0.9rem; }
.callout--toc a { color: #2b6cb0; text-decoration: none; }
.callout--toc a:hover { text-decoration: underline; }

/* Launchpad release notes — prev/next nav | 30-June-2026 */
.release-notes-bottom-nav {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
  margin-bottom: 64px;   /* clears the floating go-to-top button */
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
}
.release-notes-bottom-nav__left,
.release-notes-bottom-nav__right {
  width: 50%;
}
.release-notes-bottom-nav__right { text-align: right; }

.release-notes-bottom-nav a {
  font-weight: 600;
  text-decoration: none;
  color: #2b6cb0;
}
.release-notes-bottom-nav a:hover { text-decoration: underline; }

.release-notes-bottom-nav span {
  display: inline-block;
  margin-top: 6px;
  font-weight: 400;
  color: #5b6472;
}

/* --------------------- Table margin inside lists --------------- updated 06-July-2026 */
li .wysiwyg-table,
li .wysiwyg-table-resized {
  margin-bottom: 10px;
}

/* ============================================================
   Cross-sell article styles (Blueshift for BlueConic customers)
   Add to Zendesk theme CSS. All selectors prefixed .bsx- so
   nothing leaks into other articles. Headings (h2/h3/h4) use
   native theme styling — only layout, color, and spacing here.
   ============================================================ */

/* ---- Hero ---- */
.bsx-hero {
  padding: 24px 30px;
  margin: 0 0 28px;
  background: linear-gradient(135deg, #EEF3FC 0%, #F7FAFD 100%);
  border-radius: 10px;
  border: 1px solid #DCE6F5;
}

.bsx-subtitle {
  font-size: 1.28em;
  font-weight: 700;
  color: #1F2933;
  margin: 0 0 10px;
  line-height: 1.3;
}

.bsx-lede {
  font-size: 1.06em;
  line-height: 1.55;
  color: #41536B;
  margin: 0;
}

/* ---- Why Blueshift card grid ---- */
.bsx-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 18px 0 28px;
}

.bsx-card {
  background: #FFFFFF;
  border: 1px solid #E5E9EF;
  border-radius: 8px;
  padding: 18px 20px 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.bsx-card-wide {
  grid-column: 1 / -1;
}

.bsx-card-icon {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75em;
  font-weight: 700;
  color: #A9B7C9;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.bsx-why-head {
  font-size: 1.02em;
  margin: 0 0 6px;
}

.bsx-card p {
  margin: 0;
  font-size: 0.95em;
}

/* ---- Trigger-type tokens ----
   One color per mechanism, used consistently:
   orange = real-time, teal = segment-based. */
.bsx-tok {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
  vertical-align: middle;
}

.bsx-tok-api { color: #C2410C; background: #FDF3EE; }
.bsx-tok-seg { color: #0E7490; background: #EDF7F9; }

/* ---- Use-case grid (2 columns, compact cards) ---- */
.bsx-usecase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 18px 0 28px;
  align-items: stretch;
}

.bsx-pattern {
  background: #FFFFFF;
  border: 1px solid #E5E9EF;
  border-left: 3px solid #DDE4ED;
  border-radius: 0 8px 8px 0;
  padding: 16px 18px 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  margin: 0;
}

.bsx-pattern.bsx-api { border-left-color: #C2410C; }
.bsx-pattern.bsx-seg { border-left-color: #0E7490; }

.bsx-pattern h3 {
  margin: 0 0 4px;
  font-size: 1em;
}

.bsx-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 10px;
}

.bsx-fit {
  font-size: 0.83em;
  color: #6B7C93;
}

.bsx-pattern p {
  font-size: 0.92em;
  margin: 0 0 10px;
}

.bsx-pattern p:last-of-type {
  margin-bottom: 0;
}

.bsx-timing {
  font-size: 0.86em;
  color: #0E7490;
  background: #EDF7F9;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 10px 0 0 !important;
}

.bsx-timing strong { color: #0E7490; }

/* ============================================================
   Cross-sell article styles (Blueshift for BlueConic customers)
   Add to Zendesk theme CSS. All selectors prefixed .bsx- so
   nothing leaks into other articles.

   Principle: body text sizing is left to the theme everywhere
   possible. This file only controls layout (grids, spacing),
   color, and icon presentation — not font sizes for paragraph
   copy, so regular text matches the rest of the help center.
   ============================================================ */

/* ---- Hero ---- */
.bsx-hero {
  padding: 24px 30px;
  margin: 0 0 28px;
  background: linear-gradient(135deg, #EEF3FC 0%, #F7FAFD 100%);
  border-radius: 10px;
  border: 1px solid #DCE6F5;
}

.bsx-hero-icon {
  color: #1B5FCC;
  font-size: 0.85em;
}

.bsx-subtitle {
  font-weight: 700;
  font-size: 1.25em;
  color: #1F2933;
  margin: 0 0 10px;
}

/* Lede uses the theme's native .lede class — only the bottom
   margin is reset so it sits flush inside the hero panel. */
.bsx-hero .lede {
  margin-bottom: 0;
}

/* ---- Why Blueshift card grid ---- */
.bsx-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0 28px;
}

.bsx-card {
  background: #FFFFFF;
  border: 1px solid #E5E9EF;
  border-radius: 10px;
  padding: 22px 24px 20px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.bsx-card-wide {
  grid-column: 1 / -1;
}

/* The editor wraps the icon span in its own <p> — collapse that
   paragraph's default margin down to the icon's own spacing. */
.bsx-card > p:first-child {
  margin: 0;
}

.bsx-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #EDF2F9;
  color: #1B5FCC;
  font-size: 15px;
  margin-bottom: 4px;
}

.bsx-why-head {
  margin: 0 0 6px;
}

.bsx-card p {
  margin: 0;
}

/* ---- Trigger-type tokens ----
   One color per mechanism, used consistently:
   orange = real-time, teal = segment-based. These stay small —
   they're badges, not body copy. */
.bsx-tok {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 3px;
  white-space: nowrap;
  vertical-align: middle;
}

.bsx-tok-api { color: #C2410C; background: #FDF3EE; }
.bsx-tok-seg { color: #0E7490; background: #EDF7F9; }

/* ---- Native callouts (Prefer outcomes / Single sign-on / Ready to connect) ----
   Icons only — the box itself is Blueshift's native
   .callout.callout--info theme component. */
.bsx-article .callout--info em.fas,
.bsx-article .callout--info em.fab {
  color: #1B5FCC;
}

/* ---- Tables ----
   The editor wraps every table in <figure class="wysiwyg-table">
   on save — a class the theme uses on every table across the
   help center, not just this article. Scoping every rule under
   .bsx-article keeps this from touching tables anywhere else.

   All top/bottom spacing lives on the figure, not the table.
   Tables don't margin-collapse with the element above them the
   way a normal block does, so margin on the table itself stacks
   on top of the preceding paragraph or heading's own margin
   instead of merging with it — that's what was causing the
   oversized gap. Zeroing the table's margin and controlling
   spacing from the figure fixes it whether a paragraph or a
   heading comes before it. */
.bsx-article figure.wysiwyg-table {
  margin: 2px 0 14px;
}

.bsx-article .bsx-flow,
.bsx-article .bsx-mech,
.bsx-article .bsx-split {
  margin: 0;
}

.bsx-mech td:first-child {
  white-space: nowrap;
  width: 1%;
}

/* ---- Use-case grid ---- */
.bsx-usecase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin: 20px 0 28px;
  align-items: stretch;
}

.bsx-pattern {
  background: #FFFFFF;
  border: 1px solid #E5E9EF;
  border-left: 4px solid #DDE4ED;
  border-radius: 0 10px 10px 0;
  padding: 24px 28px 22px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  margin: 0;
}

.bsx-pattern.bsx-api { border-left-color: #C2410C; }
.bsx-pattern.bsx-seg { border-left-color: #0E7490; }

.bsx-pattern h4 {
  margin: 0 0 8px;
}

/* Two columns halves the measure, so lines break more often.
   Looser leading keeps the shorter lines from stacking into a
   wall — the main readability lever here, and it leaves font
   size to the theme. */
.bsx-pattern p:not(.bsx-meta) {
  line-height: 1.65;
  margin: 0 0 14px;
}

.bsx-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.bsx-fit {
  font-size: 0.85em;
  color: #6B7C93;
}

.bsx-pattern p:last-child {
  margin-bottom: 0;
}

.bsx-timing {
  color: #0E7490;
  background: #EDF7F9;
  line-height: 1.65;
  padding: 12px 16px;
  border-radius: 6px;
  margin: 14px 0 0 !important;
}

.bsx-timing strong { color: #0E7490; }

/* ---- Ownership split — BlueConic keeps / Blueshift adds ---- */
.bsx-split th {
  font-size: 0.8em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5A6B80;
  padding-bottom: 10px;
}

.bsx-split th:first-child { color: #1B5FCC; }
.bsx-split th:last-child  { color: #0E7490; }

.bsx-split td {
  width: 50%;
  padding: 12px 20px 12px 0;
}

/* ---- Numbered setup actions — given a visible "body" ---- */
.bsx-actions {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  counter-reset: bsxstep;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.bsx-actions li {
  position: relative;
  background: #F7FAFD;
  border: 1px solid #E5E9EF;
  border-radius: 10px;
  padding: 18px 20px 18px 54px;
  margin: 0;
  counter-increment: bsxstep;
}

.bsx-actions li::before {
  content: counter(bsxstep);
  position: absolute;
  left: 16px;
  top: 18px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1B5FCC;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Getting-started checklist — 2 columns ---- */
.bsx-checklist {
  columns: 2;
  column-gap: 28px;
  margin: 14px 0 0;
  padding-left: 20px;
}

.bsx-checklist li {
  break-inside: avoid;
  margin-bottom: 8px;
}

/* ---- Channel support — two-column, built to expand ----
   Add rows to either <ul> as more channels are confirmed; the
   layout doesn't need to change. */
.bsx-channels-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 18px 0 8px;
}

.bsx-channels-col {
  background: #FFFFFF;
  border: 1px solid #E5E9EF;
  border-radius: 10px;
  padding: 18px 22px 20px;
}

.bsx-channels-col h4 {
  margin: 0 0 10px;
  font-size: 0.85em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1B5FCC;
}

.bsx-channels-col-planned h4 {
  color: #6B7C93;
}

.bsx-channels-col ul {
  margin: 0;
  padding-left: 18px;
}

.bsx-channels-col li {
  margin-bottom: 4px;
}

.bsx-muted {
  color: #6B7C93;
  margin: 0;
}

/* ---- Small screens ---- */
@media (max-width: 700px) {
  .bsx-hero { padding: 18px; }
  .bsx-grid { grid-template-columns: 1fr; }
  .bsx-usecase-grid { grid-template-columns: 1fr; }
  .bsx-actions { grid-template-columns: 1fr; }
  .bsx-checklist { columns: 1; }
  .bsx-channels-grid { grid-template-columns: 1fr; }

  .bsx-mech td:first-child {
    white-space: normal;
    width: auto;
  }

  /* Header stays visible as a one-time legend at the top. */
  .bsx-split th {
    display: block;
    width: auto;
    padding: 0 0 6px;
    border-bottom: 0;
  }

  /* Each comparison pair becomes its own card, so it's visually
     clear which BlueConic line and Blueshift line go together —
     without that, stacking td/th individually just produces a
     flat list of six lines with no grouping cue. */
  .bsx-split tbody tr {
    display: block;
    border: 1px solid #E5E9EF;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
  }

  .bsx-split tbody tr:last-child {
    margin-bottom: 0;
  }

  .bsx-split td {
    display: block;
    width: auto;
    padding: 6px 0;
    border-bottom: 0;
  }

  /* Color-code each line to match its header (blue = BlueConic,
     teal = Blueshift), with a light divider between the pair,
     so the pairing reads even though the labels don't repeat
     on every card. */
  .bsx-split td:first-child {
    color: #1B5FCC;
    border-bottom: 1px dashed #E5E9EF;
    padding-bottom: 10px;
    margin-bottom: 4px;
  }

  .bsx-split td:last-child {
    color: #0E7490;
  }
}