:root {
  /* NextCentury color palette. Use these names for theme colors; the
     dark-mode values further down build on them. */
  --nc-achromatic-000: #FFFFFF;
  --nc-achromatic-100: #F5F5F5;
  --nc-achromatic-300: #EEEAE9;
  --nc-achromatic-500: #BFBCB8;
  --nc-achromatic-700: #6B625E;
  --nc-achromatic-900: #4A4644;
  --nc-achromatic-1100: #000000;
  --nc-blue-100: #E0EFF9;
  --nc-blue-300: #72B5DF;
  --nc-blue-500: #0477BE;
  --nc-blue-700: #035486;
  --nc-blue-900: #02304D;
  --nc-cyan-100: #E2F6FA;
  --nc-cyan-300: #79D5E7;
  --nc-cyan-500: #0BADCF;
  --nc-cyan-700: #077A91;
  --nc-cyan-900: #044653;
  --nc-green-100: #E9F6E8;
  --nc-green-300: #98D196;
  --nc-green-500: #4AA346;
  --nc-green-700: #347231;
  --nc-green-900: #255223;
  --nc-red-100: #FCECEE;
  --nc-red-300: #EE939C;
  --nc-red-500: #E3515F;
  --nc-red-700: #9F3943;
  --nc-red-900: #5B2126;
  --nc-violet-100: #F5F0FD;
  --nc-violet-300: #D8C4F6;
  --nc-violet-500: #A172E9;
  --nc-violet-700: #7150A2;
  --nc-violet-900: #513974;
  --nc-yellow-100: #FEFBED;
  --nc-yellow-300: #FCEEB8;
  --nc-yellow-500: #F7D652;
  --nc-yellow-700: #AD9639;
  --nc-yellow-900: #4A4018;
  --nc-next-blue: var(--nc-blue-500);
}

/* Next Century Defined Styles */

.nc-primary {
  color: #054E82;
}

html[data-theme="dark"] .nc-primary {
  color: var(--nc-accent);
}

.nc-secondary {
  color: var(--nc-cyan-500);
}

img.feature-shadow {
  filter: drop-shadow(9px 9px 9px rgba(0,0,0,0.3));
}

img.borders {
  border-radius:10px;
  border:solid 5px;
  border-color:var(--nc-achromatic-300);
  max-width: 100%;
}

/* File icons in older article tables (<img class="pdf|csv|xls">): drawn as
   theme-colored shapes so they suit light and dark mode (PDF red, others blue) */
img.csv,
img.pdf,
img.xls {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'/%3E");
  display: inline-block;
  width: 3.2rem;
  height: 3.2rem;
  vertical-align: middle;
  background-color: var(--nc-icon-color);
  -webkit-mask: var(--nc-file-pdf) center / contain no-repeat;
  mask: var(--nc-file-pdf) center / contain no-repeat;
}

img.pdf {
  background-color: var(--nc-pdf-color);
}

img.csv {
  -webkit-mask-image: var(--nc-file-csv);
  mask-image: var(--nc-file-csv);
}

img.xls {
  -webkit-mask-image: var(--nc-file-xls);
  mask-image: var(--nc-file-xls);
}

.center {
  text-align: center;
}

.center-pdf {
  text-align: center;
  justify-content: center;
}

.related-articles-title {
  text-transform: capitalize;
}

.help-center-name, .topbar__text {
  font-size: 16px !important;
}

.section-row__icon-wrapper {
  justify-content: center;
}

.accordion__item-title {
  font-size: 18pt !important;
  padding: 5px 10px 5px 45px !important;
}

.accordion__item-content {
  font-size: 14pt !important;
}

table {
  min-width: 80%;
  width: auto !important;
}

table.compact {
  min-width: 300px;
  width: 300px;
  margin-left:auto;
  margin-right:auto;
}

table td {
  width: auto !important;
}

table.led-table thead tr th:first-child,
table.led-table tbody tr td:first-child {
  width: 127px;
}

table.led-table thead tr th:nth-child(2),
table.led-table tbody tr td:nth-child(2) {
  width: 300px;
}

table.led-table, table.led-table th, table.led-table td {
  border: 1px dashed black;
}

table.led-table th, table.led-table td {
  padding: 5px;
}

.request-form .suggestion-list {
  display:none;
}

.request-form .suggestion-list label {
  display:none;
}

.request-form .suggestion-list li {
  display:none;
}

.request-form .suggestion-list li a:visited {
  display:none;
}

div.tab table.col-2 {
  width: 100%;
}

div.tab table.col-2 td {
  width: 50% !important;
  vertical-align: baseline;
}

div.tab ul, div.accordion ul {
  margin-left: 26px;
}

.accordion.inner {
  border: 0;
  margin-bottom: 0px;
}

.accordion.inner .accordion__item-title {
  font-size: 14pt !important;
}

/* "More details" toggles inside articles (.accordion.inner): one bordered
   panel, set off from the image above it. Back-to-back toggles join into
   one panel with a line between them. */
.article__body .accordion.inner {
  margin: 2.4rem 0;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #d5dde5;
  border-radius: 8px;
}

.article__body .accordion.inner + .accordion.inner {
  margin-top: -2.4rem;
  border-top-color: #e3e8ee;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.article__body .accordion.inner:has(+ .accordion.inner) {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.article__body .accordion.inner .accordion__item-title,
.article__body .accordion.inner .accordion__item-title--active {
  padding: 1.3rem 5.6rem 1.3rem 1.6rem !important;
  font-size: 1.7rem !important;
  font-weight: 600;
  line-height: 1.4;
  color: #035486;
  background-color: transparent;
  border: 0;
}

.article__body .accordion.inner .accordion__item-title:hover {
  background-color: #eef4f9;
}

/* The FAQ plus icon on the right, turning into an x when open */
.article__body .accordion.inner .accordion__item-title:before {
  display: none;
}

.article__body .accordion.inner .accordion__item-title:after {
  position: absolute;
  top: 50%;
  right: 1.2rem;
  width: 3.2rem;
  height: 3.2rem;
  margin-top: -1.6rem;
  content: "";
  color: #035486;
  background:
    linear-gradient(currentColor, currentColor) center / 1.4rem 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 1.4rem no-repeat,
    #eef4f9;
  border-radius: 50%;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.article__body .accordion.inner .accordion__item-title:hover:after {
  background-color: #fff;
}

.article__body .accordion.inner .accordion__item-title--active:after,
.article__body .accordion.inner .accordion__item-title--active:hover:after {
  color: var(--nc-achromatic-000);
  background-color: #035486;
  transform: rotate(45deg);
}

.article__body .accordion.inner .accordion__item-content {
  padding: 0;
  font-size: 1.7rem !important;
  background-color: transparent;
  border: 0;
}

/* Smooth open/close, as in the FAQs (script.js adds .faq-panel and
   .faq-answer). The padding sits on the inner .faq-answer so a closed
   panel has no height at all. */
.article__body .accordion.inner .accordion__item .accordion__item-content.faq-panel {
  display: grid !important;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.28s ease, visibility 0s linear 0.28s;
}

.article__body .accordion.inner .accordion__item.is-open .accordion__item-content.faq-panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.28s ease, visibility 0s linear 0s;
}

.article__body .accordion.inner .faq-panel--instant {
  transition: none !important;
}

.article__body .accordion.inner .faq-answer {
  min-height: 0;
  overflow: hidden;
  padding: 0 1.6rem;
}

.article__body .accordion.inner .faq-answer > :first-child {
  margin-top: 0.4rem;
}

.article__body .accordion.inner .faq-answer > :last-child {
  margin-bottom: 1.6rem;
}

.article__body .accordion.inner .accordion__item-content p,
.article__body .accordion.inner .accordion__item-content li {
  font-size: 1.7rem;
}

.article__body .accordion.inner .accordion__item-content a {
  color: #035486;
}

/* Next Century Defined Styles */

/* Standardization additions */

.column-container {
  display: flex;
	align-items: top;
}

.column-container img {
  display: block;
	margin: 0 auto;
}

.column {
  flex: 1;
  position: relative;
  float: left;
}

.column2 {
  margin: 10px 0 10px 0;
  position: relative;
  float: left;
  width: 80%;
}

.column3 {
  margin: 10px 0 10px 0;
  position: relative;
  float: left;
  width: 20%;
}

.column3 h2 {
  display: flex;
  justify-content: center;
}

.column4 {
  margin: 10px 0 10px 0;
  position: relative;
  float: left;
  width: 40%;
}

.column5 {
  margin: 10px 0 10px 0;
  position: relative;
  float: left;
  width: 60%;
}

.column.NCBlue {
	background-color: #2e4759;
	color: #d7ecfb;
}

img.article-img {
  padding: 50px 0 50px 0;
  max-width: 75%;
}

img.phone-img {
  max-width: 30%;
}

p {
  margin: 10px 0 10px 0;
  font-size: 18px;
  font-weight: Normal;
  padding-left: 10px;
} /* Paragraph */

ul {
  margin: 10px 0 10px 0;
  font-size: 18px;
  font-weight: Normal;
  padding-left: 10px;
} /* Bulleted List */

ol {
  margin: 10px 0 10px 0;
  font-size: 18px;
  font-weight: Normal;
  padding-left: 10px;
} /* Numbered List */

h1 {
  margin: 10px 0 10px 0;
  font-size: 48px;
  font-weight: Normal;
} /* Article Title */

h2 {
  margin: 10px 0 10px 0;
  font-size: 24px;
  font-weight: Normal;
} /* Article Header */

h3 {
  margin: 10px 0 10px 0;
  font-size: 18px;
  font-weight: Bold;
} /* Article Subheading */

h4 {
  margin: 10px 0 10px 0;
  font-size: 24px;
  font-weight: Bold;
} /* Paragraph Header */

h5 {
  margin: 10px 0 10px 0;
  font-size: 18px;
  font-weight: Normal;
} /* Paragraph Subheading */

h6 {
  margin: 10px 0 10px 0;
  font-size: 12px;
  font-weight: Thin;
} /* Footnotes */

.h1 {
  margin: 10px 0 10px 0;
  font-size: 48px;
  font-weight: Normal;
} /* Article Title */

.h2 {
  margin: 10px 0 10px 0;
  font-size: 24px;
  font-weight: Normal;
} /* Article Header */

.h3 {
  margin: 10px 0 10px 0;
  font-size: 18px;
  font-weight: Bold;
} /* Article Subheading */

.h4 {
  margin: 10px 0 10px 0;
  font-size: 24px;
  font-weight: Bold;
} /* Paragraph Header */

.h5 {
  margin: 10px 0 10px 0;
  font-size: 18px;
  font-weight: Normal;
} /* Paragraph Subheading */

.h6 {
  margin: 10px 0 10px 0;
  font-size: 12px;
  font-weight: Thin;
} /* Footnotes */


/* Related and Recent Articles section (7330) */
.recent-articles h3 {
  font-size:24px;
  margin-bottom: calc(18px * 1.6 / 2);
}

.related-articles h3 {
		font-size:24px;
    margin-bottom: calc(18px * 1.6 / 2);
  }

.recent-articles ul > li {
  font-size:18px;
  margin-bottom: calc(18px * 1.6 / 2);
}

.related-articles ul > li {
	font-size:18px;
	margin-bottom: calc(18px * 1.6 / 2);
}

.recent-articles ul > li a, .related-articles ul > li a {
	padding-bottom: 1px;
}
/* */


/* Standardization additions */

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

a {
  background-color: transparent;
}

a:active,
a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

mark {
  color: var(--nc-achromatic-1100);
  background: #ff0;
}

small {
  font-size: 80%;
}

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

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

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

pre {
  overflow: auto;
}

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

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

input {
  line-height: normal;
}

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

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

input[type="search"] {
  box-sizing: content-box;
  -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  padding: 0.35em 0.625em 0.75em;
  margin: 0 2px;
  border: 1px solid #c0c0c0;
}

legend {
  padding: 0;
  border: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

td,
th {
  padding: 0;
}

button {
  padding: 0;
  background: transparent;
  border: 0;
}

buttonborder {
  padding: 0;
  background: transparent;
  border: 3;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

iframe {
  border: 0;
}

[tabindex="-1"]:focus {
  outline: none !important;
}

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

html,
body {
  height: 100%;
}

html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: #6B625E;
  background-color: #fff;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: #0477BE;
  text-decoration: none;
}

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

a.disabled {
    color: #787b7c;
    cursor: default;
  }

figure {
  margin: 0;
}

hr {
  display: block;
  height: 1px;
  padding: 0;
  margin: 15px 0;
  border: 0;
  border-top: 1px solid #c4c4c4;
}

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

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

b,
strong {
  font-weight: 600;
}

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

dl {
  margin-top: 0;
  margin-bottom: calc(18px * 1.6);
}

dt {
  margin-bottom: calc(18px * 1.6 / 2);
  line-height: 1.6;
}

dd {
  margin-bottom: calc(18px * 1.6 / 2);
  line-height: 1.6;
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

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

.dl-horizontal:after {
    clear: both;
  }

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

@media (min-width: 768px) {

.dl-horizontal dt {
      float: left;
      width: 30%;
      padding-right: 15px;
      clear: both
  }
    }

@media (min-width: 768px) {

.dl-horizontal dd {
      float: right;
      width: 70%
  }
    }

abbr[title] {
  cursor: help;
  border-bottom: 1px dotted #787b7c;
}

abbr[data-original-title] {
  cursor: help;
  border-bottom: 1px dotted #787b7c;
}

blockquote {
  padding: calc(18px * 1.6 / 2)
    calc(18px * 1.6);
  margin: 0 0 calc(18px * 1.6);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  background-color: var(--nc-achromatic-100);
  border-left: 5px solid #c4c4c4;
}

blockquote.is-colored {
    border-left: 5px solid #035486;
  }

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

/* Inline code (a key name like Shift, a setting value) sits in the line;
   only code blocks (pre > code) get the roomy padding */
code {
  padding: 0.1em 0.4em;
  font-size: 0.9em;
  border-radius: 4px;
  /* A light backing and thin border so code stands out from the text
     (dark-mode colors are in the Dark mode block) */
  color: var(--nc-achromatic-900);
  background-color: #F1EEED;
  border: 1px solid #DEDAD8;
}

pre code,
pre code.hljs {
  display: block;
  padding: 20px;
  border-radius: 5px;
  background-color: #F1EEED;
}

address {
  margin-bottom: calc(18px * 1.6);
  font-style: normal;
  line-height: 1.6;
}

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

.clearfix:after {
    clear: both;
  }

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

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

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

@media (min-width: 768px) {

.vertical-offset {
    margin-bottom: calc(18px * 1.6)
}
  }

main {
  max-width: 100%;
  margin-bottom: calc(18px * 1.6);
}

.new-request h1 {
    font-size: 36px;
    font-weight: 700;
    color: #6d7278;
  }

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: calc(18px * 1.6);
  font-size: calc(18px * 1.5);
  line-height: inherit;
  color: #444444;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 700;
  color: #6d7278;
}

input[type="search"] {
  box-sizing: border-box;
}

input[type="radio"],
input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  line-height: normal;
}

input[type="file"] {
  display: block;
}

input[type="range"] {
  display: block;
  width: 100%;
}

select[multiple],
select[size] {
  height: auto;
}

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

output {
  display: block;
  padding-top: calc(8px + 1px);
  font-size: 18px;
  line-height: 1.6;
  color: #6d7278;
}

select {
  display: block;
  width: 100%;
  height: auto;
  padding: 8px 16px;
  font-size: 18px;
  line-height: 1.6;
  color: #6d7278;
  background-color: var(--nc-achromatic-000);
  background-image: none;
  background-clip: padding-box;
  border: 1px solid #8d9298;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

textarea {
  display: block;
  width: 100%;
  height: auto;
  padding: 8px 16px;
  font-size: 18px;
  line-height: 1.6;
  color: #6d7278;
  background-color: var(--nc-achromatic-000);
  background-image: none;
  background-clip: padding-box;
  border: 1px solid #8d9298;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

input[type="text"] {
  display: block;
  width: 100%;
  height: auto;
  padding: 8px 16px;
  font-size: 18px;
  line-height: 1.6;
  color: #6d7278;
  background-color: var(--nc-achromatic-000);
  background-image: none;
  background-clip: padding-box;
  border: 1px solid #8d9298;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

input[type="password"] {
  display: block;
  width: 100%;
  height: auto;
  padding: 8px 16px;
  font-size: 18px;
  line-height: 1.6;
  color: #6d7278;
  background-color: var(--nc-achromatic-000);
  background-image: none;
  background-clip: padding-box;
  border: 1px solid #8d9298;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

input[type="datetime"] {
  display: block;
  width: 100%;
  height: auto;
  padding: 8px 16px;
  font-size: 18px;
  line-height: 1.6;
  color: #6d7278;
  background-color: var(--nc-achromatic-000);
  background-image: none;
  background-clip: padding-box;
  border: 1px solid #8d9298;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

input[type="datetime-local"] {
  display: block;
  width: 100%;
  height: auto;
  padding: 8px 16px;
  font-size: 18px;
  line-height: 1.6;
  color: #6d7278;
  background-color: var(--nc-achromatic-000);
  background-image: none;
  background-clip: padding-box;
  border: 1px solid #8d9298;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

input[type="date"] {
  display: block;
  width: 100%;
  height: auto;
  padding: 8px 16px;
  font-size: 18px;
  line-height: 1.6;
  color: #6d7278;
  background-color: var(--nc-achromatic-000);
  background-image: none;
  background-clip: padding-box;
  border: 1px solid #8d9298;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

input[type="month"] {
  display: block;
  width: 100%;
  height: auto;
  padding: 8px 16px;
  font-size: 18px;
  line-height: 1.6;
  color: #6d7278;
  background-color: var(--nc-achromatic-000);
  background-image: none;
  background-clip: padding-box;
  border: 1px solid #8d9298;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

input[type="time"] {
  display: block;
  width: 100%;
  height: auto;
  padding: 8px 16px;
  font-size: 18px;
  line-height: 1.6;
  color: #6d7278;
  background-color: var(--nc-achromatic-000);
  background-image: none;
  background-clip: padding-box;
  border: 1px solid #8d9298;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

input[type="week"] {
  display: block;
  width: 100%;
  height: auto;
  padding: 8px 16px;
  font-size: 18px;
  line-height: 1.6;
  color: #6d7278;
  background-color: var(--nc-achromatic-000);
  background-image: none;
  background-clip: padding-box;
  border: 1px solid #8d9298;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

input[type="number"] {
  display: block;
  width: 100%;
  height: auto;
  padding: 8px 16px;
  font-size: 18px;
  line-height: 1.6;
  color: #6d7278;
  background-color: var(--nc-achromatic-000);
  background-image: none;
  background-clip: padding-box;
  border: 1px solid #8d9298;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

input[type="email"] {
  display: block;
  width: 100%;
  height: auto;
  padding: 8px 16px;
  font-size: 18px;
  line-height: 1.6;
  color: #6d7278;
  background-color: var(--nc-achromatic-000);
  background-image: none;
  background-clip: padding-box;
  border: 1px solid #8d9298;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

input[type="url"] {
  display: block;
  width: 100%;
  height: auto;
  padding: 8px 16px;
  font-size: 18px;
  line-height: 1.6;
  color: #6d7278;
  background-color: var(--nc-achromatic-000);
  background-image: none;
  background-clip: padding-box;
  border: 1px solid #8d9298;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

input[type="search"] {
  display: block;
  width: 100%;
  height: auto;
  padding: 8px 16px;
  font-size: 18px;
  line-height: 1.6;
  color: #6d7278;
  background-color: var(--nc-achromatic-000);
  background-image: none;
  background-clip: padding-box;
  border: 1px solid #8d9298;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

input[type="tel"] {
  display: block;
  width: 100%;
  height: auto;
  padding: 8px 16px;
  font-size: 18px;
  line-height: 1.6;
  color: #6d7278;
  background-color: var(--nc-achromatic-000);
  background-image: none;
  background-clip: padding-box;
  border: 1px solid #8d9298;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

input[type="color"] {
  display: block;
  width: 100%;
  height: auto;
  padding: 8px 16px;
  font-size: 18px;
  line-height: 1.6;
  color: #6d7278;
  background-color: var(--nc-achromatic-000);
  background-image: none;
  background-clip: padding-box;
  border: 1px solid #8d9298;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.nesty-input {
  display: block;
  width: 100%;
  height: auto;
  padding: 8px 16px;
  font-size: 18px;
  line-height: 1.6;
  color: #6d7278;
  background-color: var(--nc-achromatic-000);
  background-image: none;
  background-clip: padding-box;
  border: 1px solid #8d9298;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

select:focus, textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .nesty-input:focus {
    border-color: #0badcf;
    outline: 0;
  }

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 {
    color: $input-color-placeholder;
    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 {
    color: $input-color-placeholder;
  }

select::-webkit-input-placeholder, textarea::-webkit-input-placeholder, input[type="text"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder, input[type="datetime"]::-webkit-input-placeholder, input[type="datetime-local"]::-webkit-input-placeholder, input[type="date"]::-webkit-input-placeholder, input[type="month"]::-webkit-input-placeholder, input[type="time"]::-webkit-input-placeholder, input[type="week"]::-webkit-input-placeholder, input[type="number"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder, input[type="url"]::-webkit-input-placeholder, input[type="search"]::-webkit-input-placeholder, input[type="tel"]::-webkit-input-placeholder, input[type="color"]::-webkit-input-placeholder, .nesty-input::-webkit-input-placeholder {
    color: $input-color-placeholder;
  }

select {
  height: calc(
    18px * 1.6 + (8px * 2) + 2px
  );
}

textarea {
  height: calc(
    (18px * 1.6 + (8px * 2) + 2px) * 3
  );
  resize: vertical;
}

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

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="date"] {
    line-height: calc(
      18px * 1.6 + (8px * 2) + 2px
    );
  }
  input[type="time"] {
    line-height: calc(
      18px * 1.6 + (8px * 2) + 2px
    );
  }
  input[type="datetime-local"] {
    line-height: calc(
      18px * 1.6 + (8px * 2) + 2px
    );
  }
  input[type="month"] {
    line-height: calc(
      18px * 1.6 + (8px * 2) + 2px
    );
  }
}

.form-field {
  margin-bottom: calc(18px * 1.6);
}

.form-field p {
    display: block;
    margin-top: 10px;
    margin-bottom: 15px;
    font-size: 90%;
    color: var(--nc-achromatic-700);
  }

.form-field.required > label:after {
    margin-left: 2px;
    color: var(--nc-cyan-700);
    content: "*";
  }

.form-field.boolean {
  position: relative;
  padding-left: 20px;
}

.form-field.boolean input[type="checkbox"] {
    position: absolute;
    left: 0;
  }

.form-field.boolean label {
    min-height: calc(18px * 1.6);
    margin-bottom: 0;
    cursor: pointer;
  }

input[type="radio"][disabled],
  input[type="radio"].disabled,
  fieldset[disabled] input[type="radio"],
  input[type="checkbox"][disabled],
  input[type="checkbox"].disabled,
  fieldset[disabled] input[type="checkbox"] {
    cursor: not-allowed;
  }

.request-form footer {
    text-align: center;
  }

/* Submit a request page: no divider under the breadcrumbs. The breadcrumbs,
   hours tile, contact links and "Contact Us" are evenly spaced, about 24px
   apart (tile margin below, .contacts margin below). */
.request-top {
  margin-bottom: 0;
}

.request-top .breadcrumbs {
  margin-bottom: 0.6rem;
}

@media (max-width: 767px) {
  .request-top .breadcrumbs {
    margin-bottom: 1.2rem;
  }
}

/* Support hours tile, centered between the breadcrumbs and the phone,
   email and demo links. script.js fills in the visitor's time and any
   closures. */
.support-hours-row {
  margin: 0 0 2.4rem;
  padding: 0 15px;
  text-align: center;
}

.support-hours {
  display: inline-flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.4rem;
  border-radius: 8px;
  background: #f2f6f9;
  color: #2a3440;
  font-size: 1.4rem;
  line-height: 1.45;
  text-align: left;
}

.support-hours .support-hours__text {
  margin: 0;
  font-size: 1.8rem;
  line-height: 2.6rem;
}

/* exactly one line tall, so the clock sits centered on the first line */
.support-hours .support-hours__icon {
  width: 2rem;
  height: 2.6rem;
}

.support-hours__text > span {
  display: block;
}

.support-hours__text > span[hidden] {
  display: none;
}

.support-hours__main {
  font-weight: 700;
}

.support-hours__note {
  color: #6b625e;
}

html[data-theme="dark"] .support-hours {
  background: var(--nc-surface);
  color: var(--nc-text);
}

html[data-theme="dark"] .support-hours__main {
  color: var(--nc-heading);
}

html[data-theme="dark"] .support-hours__note {
  color: var(--nc-muted);
}

.contacts {
  margin-bottom: 1.6rem;
}

.contacts a {
    font-size: 24px;
    color: #0477BE;
  }

.contacts a img,
    .contacts a svg {
      width: 20px;
      margin-right: 10px;
    }

.contacts a:hover,
.contacts a:focus {
  color: #035486;
}

html[data-theme="dark"] .contacts a {
  color: var(--nc-accent);
}

html[data-theme="dark"] .contacts a:hover,
html[data-theme="dark"] .contacts a:focus {
  color: #9fdaf4;
}

@media (max-width: 767px) {
  .contacts .column a {
    font-size: 20px;
  }
}

/* phones and tablets: the three rows sit in a centered box, left-aligned in
   it, so the icons and the start of each line are in one column */
@media (max-width: 991px) {
  .row.contacts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    width: max-content;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  .row.contacts::before,
  .row.contacts::after {
    display: none;
  }

  .contacts .column {
    float: none;
    width: auto;
    padding: 0;
    text-align: left;
  }

  .contacts .column a {
    display: inline-flex;
    align-items: center;
  }
}

@media (min-width: 992px) {
  .contacts .column:nth-child(2) {
      text-align: center;
    }

  .contacts .column:last-child {
      text-align: right;
    }
}

.btn,
[role="button"],
input[type="submit"],
#user #user-password #password-submit,
.community-recent-activity .recent-activity-controls a {
  display: inline-block;
  height: auto;
  padding: 8px;
  margin-bottom: 0;
  font-size: calc(18px - 2px);
  font-weight: bold;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  touch-action: manipulation;
}

.btn:focus, .btn:active:focus, [role="button"]:focus, [role="button"]:active:focus, input[type="submit"]:focus, input[type="submit"]:active:focus, #user #user-password #password-submit:focus, #user #user-password #password-submit:active:focus, .community-recent-activity .recent-activity-controls a:focus, .community-recent-activity .recent-activity-controls a:active:focus {
      outline: thin dotted;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }

.btn:hover,
  .btn:focus,
  [role="button"]:hover,
  [role="button"]:focus,
  input[type="submit"]:hover,
  input[type="submit"]:focus,
  #user #user-password #password-submit:hover,
  #user #user-password #password-submit:focus,
  .community-recent-activity .recent-activity-controls a:hover,
  .community-recent-activity .recent-activity-controls a:focus {
    color: #035486;
    text-decoration: none;
  }

.btn:active, [role="button"]:active, input[type="submit"]:active, #user #user-password #password-submit:active, .community-recent-activity .recent-activity-controls a:active {
    outline: 0;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  }

.btn-default,
.btn--default,
[role="button"]:not(.with-image):not(.menu-button):not(.login):not(.article-vote-up):not(.article-vote-down),
.topic-controls__item--subscribe .dropdown-toggle,
.topic-controls__item--subscribe .topic-unsubscribe,
.post-follow .post-subscribe,
.post-follow .post-unsubscribe,
.community-recent-activity .recent-activity-controls a,
.profile-header__options [data-action="edit-profile"],
.article-subscribe,
.article-unsubscribe {
  color: #0477BE;
  background-color: transparent;
  border-color: #0477BE;
}

.btn-default:hover,
  .btn-default:focus,
  .btn-default:active,
  .btn--default:hover,
  .btn--default:focus,
  .btn--default:active,
  [role="button"]:not(.with-image):not(.menu-button):not(.login):not(.article-vote-up):not(.article-vote-down):hover,
  [role="button"]:not(.with-image):not(.menu-button):not(.login):not(.article-vote-up):not(.article-vote-down):focus,
  [role="button"]:not(.with-image):not(.menu-button):not(.login):not(.article-vote-up):not(.article-vote-down):active,
  .topic-controls__item--subscribe .dropdown-toggle:hover,
  .topic-controls__item--subscribe .dropdown-toggle:focus,
  .topic-controls__item--subscribe .dropdown-toggle:active,
  .topic-controls__item--subscribe .topic-unsubscribe:hover,
  .topic-controls__item--subscribe .topic-unsubscribe:focus,
  .topic-controls__item--subscribe .topic-unsubscribe:active,
  .post-follow .post-subscribe:hover,
  .post-follow .post-subscribe:focus,
  .post-follow .post-subscribe:active,
  .post-follow .post-unsubscribe:hover,
  .post-follow .post-unsubscribe:focus,
  .post-follow .post-unsubscribe:active,
  .community-recent-activity .recent-activity-controls a:hover,
  .community-recent-activity .recent-activity-controls a:focus,
  .community-recent-activity .recent-activity-controls a:active,
  .profile-header__options [data-action="edit-profile"]:hover,
  .profile-header__options [data-action="edit-profile"]:focus,
  .profile-header__options [data-action="edit-profile"]:active,
  .article-subscribe:hover,
  .article-subscribe:focus,
  .article-subscribe:active,
  .article-unsubscribe:hover,
  .article-unsubscribe:focus,
  .article-unsubscribe:active {
    color: #035182;
    background-color: transparent;
    border-color: #035182;
  }

.btn-default:active, .btn--default:active, [role="button"]:not(.with-image):not(.menu-button):not(.login):not(.article-vote-up):not(.article-vote-down):active, .topic-controls__item--subscribe .dropdown-toggle:active, .topic-controls__item--subscribe .topic-unsubscribe:active, .post-follow .post-subscribe:active, .post-follow .post-unsubscribe:active, .community-recent-activity .recent-activity-controls a:active, .profile-header__options [data-action="edit-profile"]:active, .article-subscribe:active, .article-unsubscribe:active {
    background-image: none;
  }

.btn--topbar,
.login {
  font-size: 18px;
  font-weight: 400;
  color: #fff !important;
  background-color: transparent;
  border-color: #fff;
}

.btn--topbar:hover,
  .btn--topbar:focus,
  .btn--topbar:active,
  .login:hover,
  .login:focus,
  .login:active {
    color: rgba(255,255,255,0.81) !important;
    background-color: transparent;
    border-color: rgba(255,255,255,0.81) !important;
  }

.btn--topbar:active, .login:active {
    background-image: none;
  }

.btn-primary,
.btn--primary,
input[type="submit"],
.search-box--with-button input[type="submit"] {
  color: var(--nc-achromatic-000);
  background-color: #0477BE;
  border-color: #0477BE;
}

.btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:active,
  .btn--primary:hover,
  .btn--primary:focus,
  .btn--primary:active,
  input[type="submit"]:hover,
  input[type="submit"]:focus,
  input[type="submit"]:active,
  .search-box--with-button input[type="submit"]:hover,
  .search-box--with-button input[type="submit"]:focus,
  .search-box--with-button input[type="submit"]:active {
    color: var(--nc-achromatic-000);
    background-color: #035486;
    border-color: #035486;
  }

.btn-primary:active, .btn--primary:active, input[type="submit"]:active, .search-box--with-button input[type="submit"]:active {
    background-image: none;
  }

.btn-primary,
.btn--primary,
input[type="submit"] {
  min-width: 162px;
  padding: 10px 30px;
  font-size: 18px;
  font-weight: 400;
}

.btn-info,
.btn--info {
  color: var(--nc-achromatic-000);
  background-color: #0BADCF;
  border-color: #0a99b7;
}

.btn-info:hover,
  .btn-info:focus,
  .btn-info:active,
  .btn--info:hover,
  .btn--info:focus,
  .btn--info:active {
    color: #e0e0e0;
    background-color: #08859f;
    border-color: #07687d;
  }

.btn-info:active, .btn--info:active {
    background-image: none;
  }

.btn-warning,
.btn--warning {
  color: var(--nc-achromatic-000);
  background-color: #F7D652;
  border-color: #f6d03a;
}

.btn-warning:hover,
  .btn-warning:focus,
  .btn-warning:active,
  .btn--warning:hover,
  .btn--warning:focus,
  .btn--warning:active {
    color: #e0e0e0;
    background-color: #f5ca21;
    border-color: #e8bb0b;
  }

.btn-warning:active, .btn--warning:active {
    background-image: none;
  }

.btn-danger,
.btn--danger,
.satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_bad"] {
  color: var(--nc-achromatic-000);
  background-color: #E3515F;
  border-color: #df3b4b;
}

.btn-danger:hover,
  .btn-danger:focus,
  .btn-danger:active,
  .btn--danger:hover,
  .btn--danger:focus,
  .btn--danger:active,
  .satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_bad"]:hover,
  .satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_bad"]:focus,
  .satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_bad"]:active {
    color: #e0e0e0;
    background-color: #dc2537;
    border-color: #bf1f2e;
  }

.btn-danger:active, .btn--danger:active, .satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_bad"]:active {
    background-image: none;
  }

.btn-success,
.btn--success,
#user #user-password #password-submit,
.satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_good"] {
  color: var(--nc-achromatic-000);
  background-color: #347231;
  border-color: #2c6029;
}

.btn-success:hover,
  .btn-success:focus,
  .btn-success:active,
  .btn--success:hover,
  .btn--success:focus,
  .btn--success:active,
  #user #user-password #password-submit:hover,
  #user #user-password #password-submit:focus,
  #user #user-password #password-submit:active,
  .satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_good"]:hover,
  .satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_good"]:focus,
  .satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_good"]:active {
    color: #e0e0e0;
    background-color: #244e22;
    border-color: #183517;
  }

.btn-success:active, .btn--success:active, #user #user-password #password-submit:active, .satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_good"]:active {
    background-image: none;
  }

.btn--gray,
  .btn--gray:hover,
  .btn--gray:focus,
  .btn--gray:active {
    color: #6d7278;
    border-color: #6d7278;
  }

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

.logo img {
  display: block;
  max-height: 60px;
  margin-top: 5px;
  margin-right: 10px
}

@media (min-width: 768px) {
  .logo img {
    max-height: 60px;
    margin-top: 5px
    margin-right: 10px
  }
}

@media (min-width: 992px) {
  .logo img {
    max-height: 50;
    margin-top: 5px
    margin-right: 10px
  }
}

.ltds-display-none {
  display: none !important;
}

.ltds-display-inline {
  display: inline !important;
}

.ltds-display-inline-block {
  display: inline-block !important;
}

.ltds-display-block {
  display: block !important;
}

.ltds-display-table {
  display: table !important;
}

.ltds-display-table-row {
  display: table-row !important;
}

.ltds-display-table-cell {
  display: table-cell !important;
}

.ltds-display-flex {
  display: -webkit-box !important;
  display: flex !important;
}

.ltds-display-inline-flex {
  display: -webkit-inline-box !important;
  display: inline-flex !important;
}

@media (min-width: 768px) {
  .ltds-display-sm-none {
    display: none !important;
  }

  .ltds-display-sm-inline {
    display: inline !important;
  }

  .ltds-display-sm-inline-block {
    display: inline-block !important;
  }

  .ltds-display-sm-block {
    display: block !important;
  }

  .ltds-display-sm-table {
    display: table !important;
  }

  .ltds-display-sm-table-row {
    display: table-row !important;
  }

  .ltds-display-sm-table-cell {
    display: table-cell !important;
  }

  .ltds-display-sm-flex {
    display: -webkit-box !important;
    display: flex !important;
  }

  .ltds-display-sm-inline-flex {
    display: -webkit-inline-box !important;
    display: inline-flex !important;
  }
}

@media (min-width: 992px) {
  .ltds-display-md-none {
    display: none !important;
  }

  .ltds-display-md-inline {
    display: inline !important;
  }

  .ltds-display-md-inline-block {
    display: inline-block !important;
  }

  .ltds-display-md-block {
    display: block !important;
  }

  .ltds-display-md-table {
    display: table !important;
  }

  .ltds-display-md-table-row {
    display: table-row !important;
  }

  .ltds-display-md-table-cell {
    display: table-cell !important;
  }

  .ltds-display-md-flex {
    display: -webkit-box !important;
    display: flex !important;
  }

  .ltds-display-md-inline-flex {
    display: -webkit-inline-box !important;
    display: inline-flex !important;
  }
}

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

  .ltds-display-lg-inline {
    display: inline !important;
  }

  .ltds-display-lg-inline-block {
    display: inline-block !important;
  }

  .ltds-display-lg-block {
    display: block !important;
  }

  .ltds-display-lg-table {
    display: table !important;
  }

  .ltds-display-lg-table-row {
    display: table-row !important;
  }

  .ltds-display-lg-table-cell {
    display: table-cell !important;
  }

  .ltds-display-lg-flex {
    display: -webkit-box !important;
    display: flex !important;
  }

  .ltds-display-lg-inline-flex {
    display: -webkit-inline-box !important;
    display: inline-flex !important;
  }
}

@media print {
  .ltds-display-print-none {
    display: none !important;
  }

  .ltds-display-print-inline {
    display: inline !important;
  }

  .ltds-display-print-inline-block {
    display: inline-block !important;
  }

  .ltds-display-print-block {
    display: block !important;
  }

  .ltds-display-print-table {
    display: table !important;
  }

  .ltds-display-print-table-row {
    display: table-row !important;
  }

  .ltds-display-print-table-cell {
    display: table-cell !important;
  }

  .ltds-display-print-flex {
    display: -webkit-box !important;
    display: flex !important;
  }

  .ltds-display-print-inline-flex {
    display: -webkit-inline-box !important;
    display: inline-flex !important;
  }
}

.ltds-flex-row {
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
          flex-direction: row !important;
}

.ltds-flex-column {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
          flex-direction: column !important;
}

.ltds-flex-row-reverse {
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: reverse !important;
          flex-direction: row-reverse !important;
}

.ltds-flex-column-reverse {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: reverse !important;
          flex-direction: column-reverse !important;
}

.ltds-flex-wrap {
  flex-wrap: wrap !important;
}

.ltds-flex-nowrap {
  flex-wrap: nowrap !important;
}

.ltds-flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.ltds-flex-fill {
  -webkit-box-flex: 1 !important;
          flex: 1 1 auto !important;
}

.ltds-flex-grow-0 {
  -webkit-box-flex: 0 !important;
          flex-grow: 0 !important;
}

.ltds-flex-grow-1 {
  -webkit-box-flex: 1 !important;
          flex-grow: 1 !important;
}

.ltds-flex-shrink-0 {
  flex-shrink: 0 !important;
}

.ltds-flex-shrink-1 {
  flex-shrink: 1 !important;
}

.ltds-justify-content-start {
  -webkit-box-pack: start !important;
          justify-content: flex-start !important;
}

.ltds-justify-content-end {
  -webkit-box-pack: end !important;
          justify-content: flex-end !important;
}

.ltds-justify-content-center {
  -webkit-box-pack: center !important;
          justify-content: center !important;
}

.ltds-justify-content-between {
  -webkit-box-pack: justify !important;
          justify-content: space-between !important;
}

.ltds-justify-content-around {
  justify-content: space-around !important;
}

.ltds-align-items-start {
  -webkit-box-align: start !important;
          align-items: flex-start !important;
}

.ltds-align-items-end {
  -webkit-box-align: end !important;
          align-items: flex-end !important;
}

.ltds-align-items-center {
  -webkit-box-align: center !important;
          align-items: center !important;
}

.ltds-align-items-baseline {
  -webkit-box-align: baseline !important;
          align-items: baseline !important;
}

.ltds-align-items-stretch {
  -webkit-box-align: stretch !important;
          align-items: stretch !important;
}

.ltds-align-content-start {
  align-content: flex-start !important;
}

.ltds-align-content-end {
  align-content: flex-end !important;
}

.ltds-align-content-center {
  align-content: center !important;
}

.ltds-align-content-between {
  align-content: space-between !important;
}

.ltds-align-content-around {
  align-content: space-around !important;
}

.ltds-align-content-stretch {
  align-content: stretch !important;
}

.ltds-align-self-auto {
  -ms-grid-row-align: auto !important;
      align-self: auto !important;
}

.ltds-align-self-start {
  align-self: flex-start !important;
}

.ltds-align-self-end {
  align-self: flex-end !important;
}

.ltds-align-self-center {
  -ms-grid-row-align: center !important;
      align-self: center !important;
}

.ltds-align-self-baseline {
  align-self: baseline !important;
}

.ltds-align-self-stretch {
  -ms-grid-row-align: stretch !important;
      align-self: stretch !important;
}

.ltds-justify-content-between {
  -webkit-box-pack: justify !important;
          justify-content: space-between !important;
}

@media (min-width: 768px) {
  .ltds-flex-sm-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
            flex-direction: row !important;
  }

  .ltds-flex-sm-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
            flex-direction: column !important;
  }

  .ltds-flex-sm-row-reverse {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
            flex-direction: row-reverse !important;
  }

  .ltds-flex-sm-column-reverse {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
            flex-direction: column-reverse !important;
  }

  .ltds-flex-sm-wrap {
    flex-wrap: wrap !important;
  }

  .ltds-flex-sm-nowrap {
    flex-wrap: nowrap !important;
  }

  .ltds-flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .ltds-flex-sm-fill {
    -webkit-box-flex: 1 !important;
            flex: 1 1 auto !important;
  }

  .ltds-flex-sm-grow-0 {
    -webkit-box-flex: 0 !important;
            flex-grow: 0 !important;
  }

  .ltds-flex-sm-grow-1 {
    -webkit-box-flex: 1 !important;
            flex-grow: 1 !important;
  }

  .ltds-flex-sm-shrink-0 {
    flex-shrink: 0 !important;
  }

  .ltds-flex-sm-shrink-1 {
    flex-shrink: 1 !important;
  }

  .ltds-justify-content-sm-start {
    -webkit-box-pack: start !important;
            justify-content: flex-start !important;
  }

  .ltds-justify-content-sm-end {
    -webkit-box-pack: end !important;
            justify-content: flex-end !important;
  }

  .ltds-justify-content-sm-center {
    -webkit-box-pack: center !important;
            justify-content: center !important;
  }

  .ltds-justify-content-sm-between {
    -webkit-box-pack: justify !important;
            justify-content: space-between !important;
  }

  .ltds-justify-content-sm-around {
    justify-content: space-around !important;
  }

  .ltds-align-items-sm-start {
    -webkit-box-align: start !important;
            align-items: flex-start !important;
  }

  .ltds-align-items-sm-end {
    -webkit-box-align: end !important;
            align-items: flex-end !important;
  }

  .ltds-align-items-sm-center {
    -webkit-box-align: center !important;
            align-items: center !important;
  }

  .ltds-align-items-sm-baseline {
    -webkit-box-align: baseline !important;
            align-items: baseline !important;
  }

  .ltds-align-items-sm-stretch {
    -webkit-box-align: stretch !important;
            align-items: stretch !important;
  }

  .ltds-align-content-sm-start {
    align-content: flex-start !important;
  }

  .ltds-align-content-sm-end {
    align-content: flex-end !important;
  }

  .ltds-align-content-sm-center {
    align-content: center !important;
  }

  .ltds-align-content-sm-between {
    align-content: space-between !important;
  }

  .ltds-align-content-sm-around {
    align-content: space-around !important;
  }

  .ltds-align-content-sm-stretch {
    align-content: stretch !important;
  }

  .ltds-align-self-sm-auto {
    -ms-grid-row-align: auto !important;
        align-self: auto !important;
  }

  .ltds-align-self-sm-start {
    align-self: flex-start !important;
  }

  .ltds-align-self-sm-end {
    align-self: flex-end !important;
  }

  .ltds-align-self-sm-center {
    -ms-grid-row-align: center !important;
        align-self: center !important;
  }

  .ltds-align-self-sm-baseline {
    align-self: baseline !important;
  }

  .ltds-align-self-sm-stretch {
    -ms-grid-row-align: stretch !important;
        align-self: stretch !important;
  }
}

@media (min-width: 992px) {
  .ltds-flex-md-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
            flex-direction: row !important;
  }

  .ltds-flex-md-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
            flex-direction: column !important;
  }

  .ltds-flex-md-row-reverse {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
            flex-direction: row-reverse !important;
  }

  .ltds-flex-md-column-reverse {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
            flex-direction: column-reverse !important;
  }

  .ltds-flex-md-wrap {
    flex-wrap: wrap !important;
  }

  .ltds-flex-md-nowrap {
    flex-wrap: nowrap !important;
  }

  .ltds-flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .ltds-flex-md-fill {
    -webkit-box-flex: 1 !important;
            flex: 1 1 auto !important;
  }

  .ltds-flex-md-grow-0 {
    -webkit-box-flex: 0 !important;
            flex-grow: 0 !important;
  }

  .ltds-flex-md-grow-1 {
    -webkit-box-flex: 1 !important;
            flex-grow: 1 !important;
  }

  .ltds-flex-md-shrink-0 {
    flex-shrink: 0 !important;
  }

  .ltds-flex-md-shrink-1 {
    flex-shrink: 1 !important;
  }

  .ltds-justify-content-md-start {
    -webkit-box-pack: start !important;
            justify-content: flex-start !important;
  }

  .ltds-justify-content-md-end {
    -webkit-box-pack: end !important;
            justify-content: flex-end !important;
  }

  .ltds-justify-content-md-center {
    -webkit-box-pack: center !important;
            justify-content: center !important;
  }

  .ltds-justify-content-md-between {
    -webkit-box-pack: justify !important;
            justify-content: space-between !important;
  }

  .ltds-justify-content-md-around {
    justify-content: space-around !important;
  }

  .ltds-align-items-md-start {
    -webkit-box-align: start !important;
            align-items: flex-start !important;
  }

  .ltds-align-items-md-end {
    -webkit-box-align: end !important;
            align-items: flex-end !important;
  }

  .ltds-align-items-md-center {
    -webkit-box-align: center !important;
            align-items: center !important;
  }

  .ltds-align-items-md-baseline {
    -webkit-box-align: baseline !important;
            align-items: baseline !important;
  }

  .ltds-align-items-md-stretch {
    -webkit-box-align: stretch !important;
            align-items: stretch !important;
  }

  .ltds-align-content-md-start {
    align-content: flex-start !important;
  }

  .ltds-align-content-md-end {
    align-content: flex-end !important;
  }

  .ltds-align-content-md-center {
    align-content: center !important;
  }

  .ltds-align-content-md-between {
    align-content: space-between !important;
  }

  .ltds-align-content-md-around {
    align-content: space-around !important;
  }

  .ltds-align-content-md-stretch {
    align-content: stretch !important;
  }

  .ltds-align-self-md-auto {
    -ms-grid-row-align: auto !important;
        align-self: auto !important;
  }

  .ltds-align-self-md-start {
    align-self: flex-start !important;
  }

  .ltds-align-self-md-end {
    align-self: flex-end !important;
  }

  .ltds-align-self-md-center {
    -ms-grid-row-align: center !important;
        align-self: center !important;
  }

  .ltds-align-self-md-baseline {
    align-self: baseline !important;
  }

  .ltds-align-self-md-stretch {
    -ms-grid-row-align: stretch !important;
        align-self: stretch !important;
  }
}

@media (min-width: 992px) {
  .ltds-flex-lg-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
            flex-direction: row !important;
  }

  .ltds-flex-lg-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
            flex-direction: column !important;
  }

  .ltds-flex-lg-row-reverse {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
            flex-direction: row-reverse !important;
  }

  .ltds-flex-lg-column-reverse {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
            flex-direction: column-reverse !important;
  }

  .ltds-flex-lg-wrap {
    flex-wrap: wrap !important;
  }

  .ltds-flex-lg-nowrap {
    flex-wrap: nowrap !important;
  }

  .ltds-flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .ltds-flex-lg-fill {
    -webkit-box-flex: 1 !important;
            flex: 1 1 auto !important;
  }

  .ltds-flex-lg-grow-0 {
    -webkit-box-flex: 0 !important;
            flex-grow: 0 !important;
  }

  .ltds-flex-lg-grow-1 {
    -webkit-box-flex: 1 !important;
            flex-grow: 1 !important;
  }

  .ltds-flex-lg-shrink-0 {
    flex-shrink: 0 !important;
  }

  .ltds-flex-lg-shrink-1 {
    flex-shrink: 1 !important;
  }

  .ltds-justify-content-lg-start {
    -webkit-box-pack: start !important;
            justify-content: flex-start !important;
  }

  .ltds-justify-content-lg-end {
    -webkit-box-pack: end !important;
            justify-content: flex-end !important;
  }

  .ltds-justify-content-lg-center {
    -webkit-box-pack: center !important;
            justify-content: center !important;
  }

  .ltds-justify-content-lg-between {
    -webkit-box-pack: justify !important;
            justify-content: space-between !important;
  }

  .ltds-justify-content-lg-around {
    justify-content: space-around !important;
  }

  .ltds-align-items-lg-start {
    -webkit-box-align: start !important;
            align-items: flex-start !important;
  }

  .ltds-align-items-lg-end {
    -webkit-box-align: end !important;
            align-items: flex-end !important;
  }

  .ltds-align-items-lg-center {
    -webkit-box-align: center !important;
            align-items: center !important;
  }

  .ltds-align-items-lg-baseline {
    -webkit-box-align: baseline !important;
            align-items: baseline !important;
  }

  .ltds-align-items-lg-stretch {
    -webkit-box-align: stretch !important;
            align-items: stretch !important;
  }

  .ltds-align-content-lg-start {
    align-content: flex-start !important;
  }

  .ltds-align-content-lg-end {
    align-content: flex-end !important;
  }

  .ltds-align-content-lg-center {
    align-content: center !important;
  }

  .ltds-align-content-lg-between {
    align-content: space-between !important;
  }

  .ltds-align-content-lg-around {
    align-content: space-around !important;
  }

  .ltds-align-content-lg-stretch {
    align-content: stretch !important;
  }

  .ltds-align-self-lg-auto {
    -ms-grid-row-align: auto !important;
        align-self: auto !important;
  }

  .ltds-align-self-lg-start {
    align-self: flex-start !important;
  }

  .ltds-align-self-lg-end {
    align-self: flex-end !important;
  }

  .ltds-align-self-lg-center {
    -ms-grid-row-align: center !important;
        align-self: center !important;
  }

  .ltds-align-self-lg-baseline {
    align-self: baseline !important;
  }

  .ltds-align-self-lg-stretch {
    -ms-grid-row-align: stretch !important;
        align-self: stretch !important;
  }
}

.ltds-flex-row {
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
          flex-direction: row !important;
}

.ltds-flex-column {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
          flex-direction: column !important;
}

.ltds-flex-row-reverse {
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: reverse !important;
          flex-direction: row-reverse !important;
}

.ltds-flex-column-reverse {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: reverse !important;
          flex-direction: column-reverse !important;
}

.ltds-flex-wrap {
  flex-wrap: wrap !important;
}

.ltds-flex-nowrap {
  flex-wrap: nowrap !important;
}

.ltds-flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.ltds-flex-fill {
  -webkit-box-flex: 1 !important;
          flex: 1 1 auto !important;
}

.ltds-flex-grow-0 {
  -webkit-box-flex: 0 !important;
          flex-grow: 0 !important;
}

.ltds-flex-grow-1 {
  -webkit-box-flex: 1 !important;
          flex-grow: 1 !important;
}

.ltds-flex-shrink-0 {
  flex-shrink: 0 !important;
}

.ltds-flex-shrink-1 {
  flex-shrink: 1 !important;
}

@media (min-width: 768px) {
  .ltds-flex-sm-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
            flex-direction: row !important;
  }

  .ltds-flex-sm-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
            flex-direction: column !important;
  }

  .ltds-flex-sm-row-reverse {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
            flex-direction: row-reverse !important;
  }

  .ltds-flex-sm-column-reverse {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
            flex-direction: column-reverse !important;
  }

  .ltds-flex-sm-wrap {
    flex-wrap: wrap !important;
  }

  .ltds-flex-sm-nowrap {
    flex-wrap: nowrap !important;
  }

  .ltds-flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .ltds-flex-sm-fill {
    -webkit-box-flex: 1 !important;
            flex: 1 1 auto !important;
  }

  .ltds-flex-sm-grow-0 {
    -webkit-box-flex: 0 !important;
            flex-grow: 0 !important;
  }

  .ltds-flex-sm-grow-1 {
    -webkit-box-flex: 1 !important;
            flex-grow: 1 !important;
  }

  .ltds-flex-sm-shrink-0 {
    flex-shrink: 0 !important;
  }

  .ltds-flex-sm-shrink-1 {
    flex-shrink: 1 !important;
  }
}

@media (min-width: 992px) {
  .ltds-flex-md-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
            flex-direction: row !important;
  }

  .ltds-flex-md-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
            flex-direction: column !important;
  }

  .ltds-flex-md-row-reverse {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
            flex-direction: row-reverse !important;
  }

  .ltds-flex-md-column-reverse {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
            flex-direction: column-reverse !important;
  }

  .ltds-flex-md-wrap {
    flex-wrap: wrap !important;
  }

  .ltds-flex-md-nowrap {
    flex-wrap: nowrap !important;
  }

  .ltds-flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .ltds-flex-md-fill {
    -webkit-box-flex: 1 !important;
            flex: 1 1 auto !important;
  }

  .ltds-flex-md-grow-0 {
    -webkit-box-flex: 0 !important;
            flex-grow: 0 !important;
  }

  .ltds-flex-md-grow-1 {
    -webkit-box-flex: 1 !important;
            flex-grow: 1 !important;
  }

  .ltds-flex-md-shrink-0 {
    flex-shrink: 0 !important;
  }

  .ltds-flex-md-shrink-1 {
    flex-shrink: 1 !important;
  }
}

@media (min-width: 1200px) {
  .ltds-flex-lg-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
            flex-direction: row !important;
  }

  .ltds-flex-lg-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
            flex-direction: column !important;
  }

  .ltds-flex-lg-row-reverse {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
            flex-direction: row-reverse !important;
  }

  .ltds-flex-lg-column-reverse {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
            flex-direction: column-reverse !important;
  }

  .ltds-flex-lg-wrap {
    flex-wrap: wrap !important;
  }

  .ltds-flex-lg-nowrap {
    flex-wrap: nowrap !important;
  }

  .ltds-flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .ltds-flex-lg-fill {
    -webkit-box-flex: 1 !important;
            flex: 1 1 auto !important;
  }

  .ltds-flex-lg-grow-0 {
    -webkit-box-flex: 0 !important;
            flex-grow: 0 !important;
  }

  .ltds-flex-lg-grow-1 {
    -webkit-box-flex: 1 !important;
            flex-grow: 1 !important;
  }

  .ltds-flex-lg-shrink-0 {
    flex-shrink: 0 !important;
  }

  .ltds-flex-lg-shrink-1 {
    flex-shrink: 1 !important;
  }
}

.ltds-w-25 {
  width: 25% !important;
}

.ltds-w-50 {
  width: 50% !important;
}

.ltds-w-75 {
  width: 75% !important;
}

.ltds-w-100 {
  width: 100% !important;
}

.ltds-w-auto {
  width: auto !important;
}

.row {
  margin-right: -16px;
  margin-left: -16px;
}

.row--flex {
  display: -webkit-box;
  display: flex;
  justify-items: space-between;
}

/* Investigate need 2738-3579*/

.column {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-right: 16px;
  padding-left: 16px;
}

.column--flex {
  float: none;
}

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

.column--xs-pull-0 {
  right: auto;
}

.column--xs-pull-1 {
  right: 8.33333%;
}

.column--xs-pull-2 {
  right: 16.66667%;
}

.column--xs-pull-3 {
  right: 25%;
}

.column--xs-pull-4 {
  right: 33.33333%;
}

.column--xs-pull-5 {
  right: 41.66667%;
}

.column--xs-pull-6 {
  right: 50%;
}

.column--xs-pull-7 {
  right: 58.33333%;
}

.column--xs-pull-8 {
  right: 66.66667%;
}

.column--xs-pull-9 {
  right: 75%;
}

.column--xs-pull-10 {
  right: 83.33333%;
}

.column--xs-pull-11 {
  right: 91.66667%;
}

.column--xs-pull-12 {
  right: 100%;
}

.column--xs-push-0 {
  left: auto;
}

.column--xs-push-1 {
  left: 8.33333%;
}

.column--xs-push-2 {
  left: 16.66667%;
}

.column--xs-push-3 {
  left: 25%;
}

.column--xs-push-4 {
  left: 33.33333%;
}

.column--xs-push-5 {
  left: 41.66667%;
}

.column--xs-push-6 {
  left: 50%;
}

.column--xs-push-7 {
  left: 58.33333%;
}

.column--xs-push-8 {
  left: 66.66667%;
}

.column--xs-push-9 {
  left: 75%;
}

.column--xs-push-10 {
  left: 83.33333%;
}

.column--xs-push-11 {
  left: 91.66667%;
}

.column--xs-push-12 {
  left: 100%;
}

.column--xs-offset-0 {
  margin-left: 0%;
}

.column--xs-offset-1 {
  margin-left: 8.33333%;
}

.column--xs-offset-2 {
  margin-left: 16.66667%;
}

.column--xs-offset-3 {
  margin-left: 25%;
}

.column--xs-offset-4 {
  margin-left: 33.33333%;
}

.column--xs-offset-5 {
  margin-left: 41.66667%;
}

.column--xs-offset-6 {
  margin-left: 50%;
}

.column--xs-offset-7 {
  margin-left: 58.33333%;
}

.column--xs-offset-8 {
  margin-left: 66.66667%;
}

.column--xs-offset-9 {
  margin-left: 75%;
}

.column--xs-offset-10 {
  margin-left: 83.33333%;
}

.column--xs-offset-11 {
  margin-left: 91.66667%;
}

.column--xs-offset-12 {
  margin-left: 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%;
  }

  .column--sm-pull-0 {
    right: auto;
  }

  .column--sm-pull-1 {
    right: 8.33333%;
  }

  .column--sm-pull-2 {
    right: 16.66667%;
  }

  .column--sm-pull-3 {
    right: 25%;
  }

  .column--sm-pull-4 {
    right: 33.33333%;
  }

  .column--sm-pull-5 {
    right: 41.66667%;
  }

  .column--sm-pull-6 {
    right: 50%;
  }

  .column--sm-pull-7 {
    right: 58.33333%;
  }

  .column--sm-pull-8 {
    right: 66.66667%;
  }

  .column--sm-pull-9 {
    right: 75%;
  }

  .column--sm-pull-10 {
    right: 83.33333%;
  }

  .column--sm-pull-11 {
    right: 91.66667%;
  }

  .column--sm-pull-12 {
    right: 100%;
  }

  .column--sm-push-0 {
    left: auto;
  }

  .column--sm-push-1 {
    left: 8.33333%;
  }

  .column--sm-push-2 {
    left: 16.66667%;
  }

  .column--sm-push-3 {
    left: 25%;
  }

  .column--sm-push-4 {
    left: 33.33333%;
  }

  .column--sm-push-5 {
    left: 41.66667%;
  }

  .column--sm-push-6 {
    left: 50%;
  }

  .column--sm-push-7 {
    left: 58.33333%;
  }

  .column--sm-push-8 {
    left: 66.66667%;
  }

  .column--sm-push-9 {
    left: 75%;
  }

  .column--sm-push-10 {
    left: 83.33333%;
  }

  .column--sm-push-11 {
    left: 91.66667%;
  }

  .column--sm-push-12 {
    left: 100%;
  }

  .column--sm-offset-0 {
    margin-left: 0%;
  }

  .column--sm-offset-1 {
    margin-left: 8.33333%;
  }

  .column--sm-offset-2 {
    margin-left: 16.66667%;
  }

  .column--sm-offset-3 {
    margin-left: 25%;
  }

  .column--sm-offset-4 {
    margin-left: 33.33333%;
  }

  .column--sm-offset-5 {
    margin-left: 41.66667%;
  }

  .column--sm-offset-6 {
    margin-left: 50%;
  }

  .column--sm-offset-7 {
    margin-left: 58.33333%;
  }

  .column--sm-offset-8 {
    margin-left: 66.66667%;
  }

  .column--sm-offset-9 {
    margin-left: 75%;
  }

  .column--sm-offset-10 {
    margin-left: 83.33333%;
  }

  .column--sm-offset-11 {
    margin-left: 91.66667%;
  }

  .column--sm-offset-12 {
    margin-left: 100%;
  }
}

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

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

  .column--md-1_5 {
    width: 20%;
  }

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

  .column--md-pull-0 {
    right: auto;
  }

  .column--md-pull-1 {
    right: 8.33333%;
  }

  .column--md-pull-2 {
    right: 16.66667%;
  }

  .column--md-pull-3 {
    right: 25%;
  }

  .column--md-pull-4 {
    right: 33.33333%;
  }

  .column--md-pull-5 {
    right: 41.66667%;
  }

  .column--md-pull-6 {
    right: 50%;
  }

  .column--md-pull-7 {
    right: 58.33333%;
  }

  .column--md-pull-8 {
    right: 66.66667%;
  }

  .column--md-pull-9 {
    right: 75%;
  }

  .column--md-pull-10 {
    right: 83.33333%;
  }

  .column--md-pull-11 {
    right: 91.66667%;
  }

  .column--md-pull-12 {
    right: 100%;
  }

  .column--md-push-0 {
    left: auto;
  }

  .column--md-push-1 {
    left: 8.33333%;
  }

  .column--md-push-2 {
    left: 16.66667%;
  }

  .column--md-push-3 {
    left: 25%;
  }

  .column--md-push-4 {
    left: 33.33333%;
  }

  .column--md-push-5 {
    left: 41.66667%;
  }

  .column--md-push-6 {
    left: 50%;
  }

  .column--md-push-7 {
    left: 58.33333%;
  }

  .column--md-push-8 {
    left: 66.66667%;
  }

  .column--md-push-9 {
    left: 75%;
  }

  .column--md-push-10 {
    left: 83.33333%;
  }

  .column--md-push-11 {
    left: 91.66667%;
  }

  .column--md-push-12 {
    left: 100%;
  }

  .column--md-offset-0 {
    margin-left: 0%;
  }

  .column--md-offset-1 {
    margin-left: 8.33333%;
  }

  .column--md-offset-2 {
    margin-left: 16.66667%;
  }

  .column--md-offset-3 {
    margin-left: 25%;
  }

  .column--md-offset-4 {
    margin-left: 33.33333%;
  }

  .column--md-offset-5 {
    margin-left: 41.66667%;
  }

  .column--md-offset-6 {
    margin-left: 50%;
  }

  .column--md-offset-7 {
    margin-left: 58.33333%;
  }

  .column--md-offset-8 {
    margin-left: 66.66667%;
  }

  .column--md-offset-9 {
    margin-left: 75%;
  }

  .column--md-offset-10 {
    margin-left: 83.33333%;
  }

  .column--md-offset-11 {
    margin-left: 91.66667%;
  }

  .column--md-offset-12 {
    margin-left: 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%;
  }

  .column--lg-pull-0 {
    right: auto;
  }

  .column--lg-pull-1 {
    right: 8.33333%;
  }

  .column--lg-pull-2 {
    right: 16.66667%;
  }

  .column--lg-pull-3 {
    right: 25%;
  }

  .column--lg-pull-4 {
    right: 33.33333%;
  }

  .column--lg-pull-5 {
    right: 41.66667%;
  }

  .column--lg-pull-6 {
    right: 50%;
  }

  .column--lg-pull-7 {
    right: 58.33333%;
  }

  .column--lg-pull-8 {
    right: 66.66667%;
  }

  .column--lg-pull-9 {
    right: 75%;
  }

  .column--lg-pull-10 {
    right: 83.33333%;
  }

  .column--lg-pull-11 {
    right: 91.66667%;
  }

  .column--lg-pull-12 {
    right: 100%;
  }

  .column--lg-push-0 {
    left: auto;
  }

  .column--lg-push-1 {
    left: 8.33333%;
  }

  .column--lg-push-2 {
    left: 16.66667%;
  }

  .column--lg-push-3 {
    left: 25%;
  }

  .column--lg-push-4 {
    left: 33.33333%;
  }

  .column--lg-push-5 {
    left: 41.66667%;
  }

  .column--lg-push-6 {
    left: 50%;
  }

  .column--lg-push-7 {
    left: 58.33333%;
  }

  .column--lg-push-8 {
    left: 66.66667%;
  }

  .column--lg-push-9 {
    left: 75%;
  }

  .column--lg-push-10 {
    left: 83.33333%;
  }

  .column--lg-push-11 {
    left: 91.66667%;
  }

  .column--lg-push-12 {
    left: 100%;
  }

  .column--lg-offset-0 {
    margin-left: 0%;
  }

  .column--lg-offset-1 {
    margin-left: 8.33333%;
  }

  .column--lg-offset-2 {
    margin-left: 16.66667%;
  }

  .column--lg-offset-3 {
    margin-left: 25%;
  }

  .column--lg-offset-4 {
    margin-left: 33.33333%;
  }

  .column--lg-offset-5 {
    margin-left: 41.66667%;
  }

  .column--lg-offset-6 {
    margin-left: 50%;
  }

  .column--lg-offset-7 {
    margin-left: 58.33333%;
  }

  .column--lg-offset-8 {
    margin-left: 66.66667%;
  }

  .column--lg-offset-9 {
    margin-left: 75%;
  }

  .column--lg-offset-10 {
    margin-left: 83.33333%;
  }

  .column--lg-offset-11 {
    margin-left: 91.66667%;
  }

  .column--lg-offset-12 {
    margin-left: 100%;
  }
}

/* Investigate need 2738-3579*/

.topbar {
  position: relative;
  z-index: 10;
  margin-bottom: calc(18px * 1.6);
  /*border-bottom: 1px solid rgba(255, 255, 255, 0.2);*/
  font-size: 20px;
  color: rgba(255,255,255,0.81);
  background-color: $topbar_bg;
}

@media (min-width: 843px) {

.topbar {
    font-size: 15px
}
  }

@media (min-width: 992px) {

.topbar {
    font-size: 20px
}
  }

.topbar__inner {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.topbar__text {
  color: rgba(255,255,255,0.81);
}

.topbar__col {
  position: relative;
  padding: 10px 0 20px;
}

@media (min-width: 843px) {

.topbar__col {
    padding: 20px 0
}
  }

@media (min-width: 992px) {

.topbar__col {
    padding: 20px 0 32px
}

    .topbar__col .topbar__controls {
      margin-top: 12px;
    }
  }

@media (max-width: 767px) {

.topbar__controls > * {
    display: block;
    margin-bottom: calc(18px * 1.6 / 2)
}
  }

@media (min-width: 843px) {

.topbar__controls > * {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle
}
  }

/*.topbar__controls > *:not(.login) {
  padding-right: 0;
}*/

.topbar__menu.is-opened {
    display: block;
  }

@media (min-width: 992px) {

.topbar__menu {
    margin-top: 5px
}
  }

@media (max-width: 767px) {

.topbar__menu {
    display: none;
    padding-top: 0
}
  }

/*
.topbar a:not([role="button"]) {
  color: rgba(255, 255, 255, 1);
  transition: all 0.3s ease;
}*/

@media (max-width: 842px) {

.topbar__head {
    display: table;
    width: 100%
}
  }

@media (max-width: 842px) {

.topbar__button {
    display: table-cell;
    text-align: right;
    vertical-align: middle
}
  }

@media (min-width: 843px) {
  /* .topbar a:not([role="button"]):not([role="menuitem"]):hover,
  .topbar .btn.with-image.dropdown-toggle:hover {
    color: rgba(255,255,255,0.81);
  }*/

  .topbar__inner {
    display: table;
  }

  .topbar__col {
    display: table-cell;
    vertical-align: middle;
  }

  .topbar__controls {
    float: right;
  }

  .topbar__menu {
    display: table-cell !important;
  }
}

.topbar-link {
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
}

.topbar .language-selector .dropdown-toggle {
    font-weight: bold;
  }

@media (max-width: 842px) {
    .topbar .language-selector .dropdown-menu {
      position: static;
      margin: 0;
      background: transparent;
      border-radius: 0;
      box-shadow: none;
    }

    .topbar .language-selector .dropdown-menu [role="menuitem"] {
      padding-right: 0;
      padding-left: 0;
    }
  }

@media (max-width: 842px) {
  .topbar__controls > *:not(.menu-button) {
    display: none;
  }
  
  .topbar__menu.is-opened .topbar__controls > * {
    display: block;
  }
}

.topbar .logo a {
  display: block;
}



.header {
  position: relative;
  margin-bottom: 0;
  font-size: 14px;
  color: rgba(255,255,255,0.81);
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#054e82+2,0badcf+100 */
  background: #054e82; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(
    linear,
    left top, right top,
    from(#035486),
    to(#0badcf)
  );
  background: linear-gradient(
    to right,
    #035486 0%,
    #0badcf 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=' #035486', endColorstr='#0badcf',GradientType=1 ); /* IE6-9 */

  background-position: 50% 50%;
  background-size: cover;
}

@media (min-width: 768px) {

.header {
    margin-bottom: 0
}
  }

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

.header a {
    color: rgba(255, 255, 255, 1);
  }

.header a:hover {
      color: #f2f2f2;
    }

.header a[role="button"] {
    color: #fff;
  }

.header a[role="button"]:hover {
      color: #f2f2f2;
    }

.dropdown-menu {
  padding: 0;
  overflow: hidden;
  font-size: calc(18px - 2px);
  border: 0;
  border-radius: 2px;
  box-shadow: 0 2px 13px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.dropdown-menu [role="menuitem"] {
  padding: 8px 16px;
}

.dropdown-menu [role="menuitem"][aria-selected="true"]:after {
    display: inline-block;
    margin-left: 10px;
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    content: "\f00c";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

.dropdown-menu [role="separator"] {
  padding: 0;
  margin: 0;
  font-size: 18px;
  color: #6B625E;
  border-color: #c4c4c4;
}

@media (min-width: 768px) {

.topbar .dropdown-menu [role="menuitem"] {
    color: #6B625E
}
  }

.topbar .dropdown-toggle:after {
  color: inherit;
}

@media (max-width: 767px) {

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

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

#user .dropdown-toggle {
  padding: 0;
  color: inherit;
  border: 0;
}

@media (max-width: 767px) {

#user .dropdown-toggle:after {
      display: none
  }
    }

#user #user-dropdown {
  background: var(--nc-achromatic-000);
}

@media (max-width: 767px) {

#user #user-dropdown {
    position: static;
    display: block !important;
    background: transparent;
    box-shadow: none
}

    #user #user-dropdown:before,
    #user #user-dropdown:after {
      display: none;
    }
  }

@media (max-width: 767px) {
  #user #user-dropdown [role="menuitem"] {
    padding-right: 0;
    padding-left: 0;
    color: rgba(255,255,255,0.81);
  }

  #user #user-dropdown [role="menuitem"]:hover {
    color: rgba(255, 255, 255, 1);
    background-color: transparent;
  }
}

@media (max-width: 991px) {
    #user-menu [role="separator"] {
      display: none;
    }
  }

#user-name {
  font-size: calc(18px - 2px);
  font-weight: bold;
}

#user #user-password #password-form {
  padding: 0 16px 16px;
}

#user #user-password #password-form,
#user #user-password #password-form label,
#user #user-password #password-form ul {
  font-size: 18px;
}

#user #user-password #password-form ul li {
  margin-bottom: 0;
}

#user #user-password #password-submit {
  float: none !important;
  margin: 0 !important;
}

#user #user-profile {
  padding: 0 0 16px;
}

#user #user-profile dt {
    padding: 4px 0 0 16px;
    font-size: 18px;
    text-align: left;
    opacity: 1;
  }

#user #user-profile label {
    margin-bottom: 0;
    font-weight: 400;
  }

#user #user-profile dd {
    padding: 2px;
    margin-left: 105px;
  }

#user #profile-photo-wrapper {
  width: 20px;
  height: 20px;
  border-radius: 2px;
}

#user #profile-photo img {
  max-height: 20px;
}

#user-password [role="separator"], #user-profile [role="separator"] {
    padding: 8px 16px;
    margin-bottom: 16px;
  }

@media (max-width: 767px) {

#user-password {
    min-width: 1px !important;
    background-color: var(--nc-achromatic-000);
    border: 1px solid #c4c4c4;
    border-radius: 4px
}

#user-profile {
    min-width: 1px !important;
    background-color: var(--nc-achromatic-000);
    border: 1px solid #c4c4c4;
    border-radius: 4px
}
  }

@-webkit-keyframes bounce {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -25px, 0);
            transform: translate3d(0, -25px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes bounce {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -25px, 0);
            transform: translate3d(0, -25px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@media (min-width: 768px) {
    #user-dropdown,
    #user-dropdown[aria-expanded="false"] {
      opacity: 0;
    }

    #user-dropdown[aria-expanded="true"] {
      display: inline;
      opacity: 1;
      -webkit-animation: bounce 0.3s ease-out;
              animation: bounce 0.3s ease-out;
    }
  }

#user .dropdown-toggle {
  color: var(--nc-achromatic-000);
}

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

.search-box {
  position: relative;
  background-color: transparent;
  border: none;
  border-radius: none;
}

.search-box--without-button {
  padding-right: 16px;
  padding-bottom: 10%;
  padding-left: 16px;
  text-align: center;
}

@media (min-width: 768px) {

.search-box--without-button {
    padding-top: 2%
}
  }

.search-box--without-button .search {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
  }

.search-box--without-button .search:before {
      position: absolute;
      top: 50%;
      left: 20px;
      padding-right: 16px;
      margin-top: calc(20px / -2);
      font-family: "Font Awesome 5 Free";
      font-size: 20px;
      font-style: normal;
      font-weight: 900;
      line-height: 1;
      color: #6d7278;
      content: "\f002";
      /* border-right: 1px solid var(--hr-border);*/
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

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

.search-box--without-button #query {
    padding-right: 55px;
    padding-left: calc(55px + 16px);
    font-size: 18px;
    font-weight: 400;
    color: #333;
    border: none;
    border-radius: 4px;
    box-shadow: none;
    -webkit-transition: all 0.6s ease;
    transition: all 0.6s ease;
  }

.search-box--without-button #query::-moz-placeholder {
      color: #a5a1a1;
      opacity: 1;
    }

.search-box--without-button #query:-ms-input-placeholder {
      color: #a5a1a1;
    }

.search-box--without-button #query::-webkit-input-placeholder {
      color: #a5a1a1;
    }

@media (min-width: 768px) {

.search-box--without-button #query {
      height: 60px
  }
    }

.search-box--without-button #query:focus {
      box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4);
    }

.search-box-small {
  margin-top: 5px;
}

@media (max-width: 767px) {

.search-box-small {
    margin-bottom: calc(18px * 1.6 * 1.5)
}

    .search-box-small .search {
      margin-left: 30px;
    }
  }

.search-box-small .search {
    position: relative;
  }

.search-box-small .search:before {
      position: absolute;
      top: 50%;
      left: -30px;
      padding-right: 16px;
      margin-top: calc(20px / -2);
      font-family: "Font Awesome 5 Free";
      font-size: 20px;
      font-style: normal;
      font-weight: 900;
      line-height: 1;
      color: #6d7278;
      content: "\f002";
      border-right: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

.search-box-small #query {
    border: solid 1px #6B625E;
  }

.search-box-small #query::-moz-placeholder {
      color: #6B625E;
      opacity: 1;
    }

.search-box-small #query:-ms-input-placeholder {
      color: #6B625E;
    }

.search-box-small #query::-webkit-input-placeholder {
      color: #6B625E;
    }

.category h2 > a {
      color: inherit;
    }

@media (max-width: 767px) {

.category {
    padding-bottom: calc(18px * 1.6 / 2)
}
  }

.category + .category {
  padding-top: calc(18px * 1.6 * 2);
  border-top: 1px dotted #c4c4c4;
}

.section h3 > a {
  color: inherit;
}

.section:nth-of-type(1n) {
    clear: none;
  }

.section:nth-of-type(2n + 1) {
    clear: both;
  }

@media (min-width: 768px) {

#category-list {
    margin-bottom: calc(18px * 1.6)
}
  }

.category-item {
  position: relative;
  display: table;
  height: 76px;
  margin-bottom: calc(18px * 1.6);
}

@media (min-width: 768px) {

.category-item {
    height: 150px
}
  }

.category-item__link {
  display: table-cell;
  padding: 0 10px;
  color: #0477BE;
  text-align: center;
  vertical-align: middle;
  border: 2px solid #0477BE;
  border-radius: 4px;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.category-item__link:active,
  .category-item__link:focus,
  .category-item__link:hover {
    color: var(--nc-achromatic-000);
    text-decoration: none;
    background-color: #0477BE;
  }

.category-item__link h4 {
    margin-bottom: 0;
  }

.category-item__title {
  margin-bottom: 0;
  font-size: calc(18px * 1.1);
}

.section {
  margin-bottom: calc(18px * 1.6 * 2);
}

.section .article-list {
    font-size: 28px;
    font-weight: 400;
    line-height: 37px;
  }

@media (min-width: 768px) {

.section-header {
    display: table;
    width: 100%
}
  }

@media (min-width: 768px) {

.section-header__col {
    display: table-cell;
    vertical-align: top
}
  }

@media (min-width: 768px) {
  .section-header__col--main {
    width: 100%;
    padding-right: 16px;
  }
}

@media (max-width: 767px) {
  .section-header__col--button {
    margin-bottom: calc(18px * 1.6);
  }
}

@media (min-width: 768px) {
  .section-header__col--button {
    padding: 32px 0 0;
  }
}

.section-row {
  margin-bottom: 64px;
}

.section-row__icon {
  width: 154px;
  height: 154px;
}

.section-row:nth-child(even) {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  flex-direction: row-reverse;
}

/* .section-row__icon-wrapper {
  -webkit-box-pack: end;
  justify-content: flex-end;
}

.section-row:nth-child(even) .section-row__icon-wrapper {
  -webkit-box-pack: start;
  justify-content: flex-start;
} */

.article-promoted span {
  font-size: 28px;
  line-height: 37px;
  color: #F7D652;
  vertical-align: top;
}

.promoted-true:before {
  margin-right: 8px;
  margin-bottom: 3px;
  font-family: "Font Awesome 5 Free";
  font-size: 21px;
  font-style: normal;
  font-weight: 900;
  line-height: 21px;
  line-height: 1;
  color: #F7D652;
  content: "\f005";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.article-list {
  margin-bottom: calc(18px * 1.6 / 2);
}

.article-list li {
    margin-bottom: calc(18px * 1.6 / 2);
  }

.footer {
  padding: calc(18px * 1.6) 0;
  font-size: calc(18px - 2px);
  line-height: 1.1;
  color: #6B625E;
  background-color: rgba(255, 255, 255, 1);
}

.footer a {
    color: #0477BE;
  }

.footer a:hover {
      color: #0367a5;
    }

.footer .footer-social-link {
    display: inline-block;
    width: 24px;
    height: 24px;
    font-size: 24px !important;
    line-height: 24px !important;
    color: #6B625E;
    vertical-align: middle;
  }

.footer .footer-social-link + .footer .footer-social-link {
      margin: 0 0 0 10px;
    }

.footer__inner {
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 768px) {

.footer__inner {
    display: table
}
  }

.footer__col {
  position: relative;
}

@media (min-width: 768px) {

.footer__col {
    display: table-cell;
    vertical-align: top
}
  }

@media (min-width: 768px) {

.footer__col--social-links {
    text-align: right
}
  }

.copyright a {
  color: #0477BE;
}

.footer .container-inner {
  padding-top: calc(18px * 1.6);
  border-top: 1px solid #eaeaea;
}

/* clip sideways overflow without making .layout its own scroll box (hidden
   did: content that reached past it gave the page a second scroll bar) */
.layout {
  overflow-x: hidden;
  overflow-x: clip;
}

.breadcrumbs {
  padding: 8px 0;
  margin-bottom: calc(18px * 1.6);
  font-size: 18px;
  font-weight: 400;
  line-height: 40px;
  list-style: none;
  background-color: transparent;
}

.breadcrumbs > li {
    display: inline;
  }

.breadcrumbs > li + li:before {
      padding: 0 0.5rem;
      color: #ccc;
      content: "› ";
    }

.breadcrumbs.breadcrumbs-article > li:before {
      padding: 0 0.5rem;
      color: #ccc;
      content: "› ";
    }

.article-page .breadcrumbs-container {
    padding-top: 8px;
    padding-bottom: 0;
  }

.article-page .breadcrumbs {
    display: inline;
    margin-bottom: 0;
  }

.breadcrumbs-hr {
  margin: 0px 60px 40px;
}

/* Article pages: less space above and below the divider */
.article-page .breadcrumbs-hr {
  margin: 16px 0 32px;
}

@media (max-width: 767px) {
  .article-page .breadcrumbs-hr {
    margin: 12px 0 24px;
  }
}

.hide-category .breadcrumbs > li:nth-child(2) {
    display: none;
  }

.hide-section .breadcrumbs > li:nth-child(3) {
    display: none;
  }

.search-results {
  padding-top: 25px;
}

@media (max-width: 767px) {
  .search-results-column {
    margin-bottom: calc(18px * 1.6)
  }
}

@media (min-width: 768px) {
  .search-results-column {
    float: left;
/*     width: 50%; */
    padding-right: 16px
  }
}

.search-result {
  margin: 0 0 calc(18px * 1.6) 0;
}

.search-result-meta {
  margin: 0 0 calc(18px * 1.6 / 4) 0;
  font-size: calc(18px - 2px);
  color: #817d7d;
}

.search-result-meta a {
    color: #817d7d;
  }

.search-result-link {
  margin-bottom: 0 0 calc(18px * 1.6 / 4) 0;
  font-size: 28px;
}

.search-result-description em {
    padding: 0 3px;
    font-style: normal;
    font-weight: bold;
    background-color: #fff3ca;
    border-radius: 3px;
  }

.search-result-votes {
  color: #347231;
}

.search-result-votes:before {
  margin-right: 2px;
}

.note {
  position: relative;
  padding: 0 16px;
  margin-top: calc(18px * 1.6);
  margin-bottom: calc(18px * 1.6);
  color: var(--nc-achromatic-700);
  border-left: 4px solid transparent;
}

.note p:last-child {
    margin-bottom: 0;
  }

.note-title {
  margin-top: 0;
  margin-bottom: 1rem;
}

.note-default {
  border-color: #787b7c;
}

.note--default {
  border-color: #787b7c;
}

.note-default .note-title {
    color: #787b7c;
  }

.note--default .note-title {
    color: #787b7c;
  }

.note-info,
.note--info {
  border-color: #0BADCF;
}

.note-info .note-title, .note--info .note-title {
    color: #0BADCF;
  }

.note-warning,
.note--warning {
  border-color: #F7D652;
}

.note-warning .note-title, .note--warning .note-title {
    color: #F7D652;
  }

.note-success,
.note--success {
  border-color: #347231;
}

.note-success .note-title, .note--success .note-title {
    color: #347231;
  }

.note-danger,
.note--danger {
  border-color: #E3515F;
}

.note-danger .note-title, .note--danger .note-title {
    color: #E3515F;
  }

.pagination ul {
    display: inline-block;
    padding-left: 0;
    margin: 0 0 calc(18px * 1.6) 0;
  }

.pagination ul > li {
      display: inline-block;
      margin-right: 6px;
    }

.pagination ul > li > a {
        position: relative;
        display: block;
        padding: 8px
          calc(16px);
        line-height: 1.6;
        color: #0477BE;
        text-decoration: none;
        background-color: var(--nc-achromatic-000);
        border-radius: 4px;
      }

.pagination ul > li > span {
        position: relative;
        display: block;
        padding: 8px
          calc(16px);
        line-height: 1.6;
        color: #0477BE;
        text-decoration: none;
        background-color: var(--nc-achromatic-000);
        border-radius: 4px;
      }

.pagination ul > li > a:hover {
        color: #024873;
        background-color: #c4c4c4;
        border-color: #ddd;
      }

.pagination ul > li > a:focus {
        color: #024873;
        background-color: #c4c4c4;
        border-color: #ddd;
      }

.pagination ul > li > span:hover {
        color: #024873;
        background-color: #c4c4c4;
        border-color: #ddd;
      }

.pagination ul > li > span:focus {
        color: #024873;
        background-color: #c4c4c4;
        border-color: #ddd;
      }

.pagination ul > .pagination-current > span,
      .pagination ul > .pagination-current > span:hover,
      .pagination ul > .pagination-current > span:focus {
        z-index: 2;
        color: var(--nc-achromatic-000);
        cursor: default;
        background-color: #035486;
        border-color: #035486;
      }

.container {
  padding-right: 15px;
  padding-left: 15px;
}

.container-inner {
  max-width: 1170px;
  margin-right: auto;
  margin-left: auto;
}

.basics-container {
  max-width: 770px;
  margin-right: auto;
  margin-left: auto;
}

.menu-button {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-color: transparent;
  border-radius: calc(2rem / 15);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

@media (min-width: 843px) {

.menu-button {
    display: none
}
  }

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

.menu-button:active {
    outline: 0;
    box-shadow: none;
    -webkit-transition: 0;
    transition: 0;
  }

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

.menu-button__lines {
  position: relative;
  display: inline-block;
  width: 2rem;
  height: 0.13333rem;
  background: var(--nc-achromatic-000);
  border-radius: 0.13333rem;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.menu-button__lines:before,
  .menu-button__lines:after {
    position: absolute;
    left: 0;
    display: inline-block;
    width: 2rem;
    height: 0.13333rem;
    content: "";
    background: var(--nc-achromatic-000);
    border-radius: 0.13333rem;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -webkit-transform-origin: calc(2rem / 14) center;
            transform-origin: calc(2rem / 14) center;
  }

.menu-button__lines:before {
    top: calc(2rem / 4);
  }

.menu-button__lines:after {
    top: calc(2rem / -4);
  }

.menu-button.is-pressed {
  -webkit-transform: scale3d(0.8, 0.8, 0.8);
          transform: scale3d(0.8, 0.8, 0.8);
}

.menu-button.is-pressed .menu-button__lines {
    background: transparent;
  }

.menu-button.is-pressed .menu-button__lines:before,
    .menu-button.is-pressed .menu-button__lines:after {
      top: 0;
      width: 2rem;
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
    }

.menu-button.is-pressed .menu-button__lines:before {
      -webkit-transform: rotate3d(0, 0, 1, 45deg);
              transform: rotate3d(0, 0, 1, 45deg);
    }

.menu-button.is-pressed .menu-button__lines:after {
      -webkit-transform: rotate3d(0, 0, 1, -45deg);
              transform: rotate3d(0, 0, 1, -45deg);
    }

.help-center-name {
  display: inline-block;
  padding: 5px 0px 10px 20px;
  margin: 15px 0 0 calc(16px / 2);
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.81);
  vertical-align: top;
  border-left: 1px solid rgba(255,255,255,0.81);
}

@media (min-width: 768px) {

.help-center-name {
    margin: 15px 0 0 calc(16px / 2)
}
  }

@media (min-width: 992px) {

.help-center-name {
    margin: 15px 0 0 calc(16px / 2)
}
  }

.help-btn {
  display: inline-block;
  padding: 5px 0px 5px 20px;
  margin: 15px 0 0 calc(16px / 2);
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.81);
  vertical-align: middle;
  
}

@media (min-width: 768px) {

.help-btn {
    margin: 0px 0 0 calc(16px / 2)
}
  }

@media (min-width: 992px) {

.help-btn {
    margin: 15px 0 0 calc(16px / 2)
}
  }

.intro-title {
  position: relative;

  margin-bottom: calc(18px * 1.6);
  font-size: 36px;
  font-weight: 400;
  color: rgba(255,255,255,0.81);
}

@media (min-width: 768px) {

.intro-title {
    margin-bottom: calc(18px * 1.6 * 2);
    font-size: 60px
}
  }

.meta {
  font-size: calc(18px - 2px);
  color: #817d7d;
}

.meta__item {
  display: inline-block;
  margin-right: calc(16px / 2);
}

.meta__item + .meta__item:before {
    margin-right: calc(16px / 2);
    font-size: 10px;
    content: "\2022";
  }

.meta--profile {
  margin-bottom: 0;
}

.meta--profile .meta__item {
    margin-bottom: 0;
  }

.avatar {
  position: relative;
}

.avatar--agent:before {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-block;
    margin-right: -4px;
    margin-bottom: -4px;
    font-family: "Font Awesome 5 Free";

    font-size: calc(18px * 0.85);
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    color: #035486;
    content: "\f19d";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

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

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

#user .user-avatar {
  width: 32px;
  height: 32px;
}

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

.comment-avatar-agent:after,
.question-avatar-agent:after,
.answer-avatar-agent:after {
  position: absolute;
}

.comment-avatar-agent:after {
  top: 0;
  left: calc(32px - (18px / 2));
}

.question-avatar-agent:after,
.answer-avatar-agent:after {
  left: calc(32px - (18px / 2));
}

.user-avatar,
.article-avatar img,
.comment-avatar img,
.question-avatar img,
.answer-avatar img {
  border-radius: 100%;
}

.user-avatar,
.article-avatar img,
.comment-avatar img,
.question-avatar img,
.answer-avatar img {
  width: 32px;
  height: 32px;
}

.comment-avatar-agent:after,
.question-avatar-agent:after,
.answer-avatar-agent:after {
  color: #035486;
}

.comments__callout {
  font-size: calc(18px * 0.85);
  color: #817d7d;
}

.comments__callout:empty {
    display: none;
  }

.comments__list {
  padding-left: 0;
  list-style: none;
}

.comment-list-header {
  padding-bottom: calc(18px * 1.6 / 2);
  margin-bottom: calc(18px * 1.6);
  border-bottom: 1px solid #c4c4c4;
}

.comment-list-heading {
  margin-bottom: 0;
  font-size: calc(18px * 1.1);
  font-weight: bold;
}

.comment-sorter {
  padding-bottom: calc(18px * 1.6);
  margin-bottom: calc(18px * 1.6 * 1.25);
  border-bottom: 1px dotted #c4c4c4;
}

@media (min-width: 768px) {

.comment-sorter {
    display: table;
    width: 100%
}
  }

@media (min-width: 768px) {

.comment-sorter__col {
    display: table-cell;
    vertical-align: middle
}
  }

@media (max-width: 767px) {

.comment-sorter__col--main {
    margin-bottom: calc(18px * 1.6 / 2)
}
  }

@media (min-width: 768px) {

.comment-sorter__col--main {
    padding-right: 16px
}
  }

@media (min-width: 768px) {

.comment-sorter__col--filters {
    text-align: right
}
  }

.comment-sorter__item.is-active {
    font-weight: bold;
  }

.comment-sorter__item + .comment-sorter__item:before {
    margin: 0 calc(16px / 2);
    font-size: 10px;
    content: "\2022";
  }

.comment {
  padding-bottom: calc(18px * 1.6 * 1.25);
  margin-bottom: calc(18px * 1.6 * 1.25);
  border-bottom: 1px dotted #c4c4c4;
}

.comment__inner {
  position: relative;
  padding-right: calc(40px + 16px);
}

.comments__content {
  position: relative;
  padding-right: 16px;
}

.comment__header {
  position: relative;
  margin-bottom: calc(18px * 1.6);
}

.comment__voting-and-actions {
  position: absolute;
  top: calc(18px * 1.6 / 4);
  right: 0;
  width: 40px;
  text-align: center;
}

.comment__voting-and-actions .dropdown-toggle:after {
    display: inline-block;
    margin-left: 0;
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    content: "\f013";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

.comment__official-heading {
  position: absolute;
  top: 0;
  right: calc(16px * 3);
  width: auto;
  padding: 1px calc(16px / 2);
  font-size: calc(18px * 0.85);
  color: var(--nc-achromatic-000);
  background-color: #035486;
  border-radius: 0 0 4px 4px;
}

.comment--official .comment__inner {
    position: relative;
    padding: calc(18px * 1.6)
      calc(16px * 2);
    background-color: #8cd1fc;
    border: 1px solid #035486;
    border-radius: 4px;
  }

.comment__body ul {
    margin-left: 16px;
  }

.comment__body ol {
    margin-left: 16px;
  }

.comment__body ul {
    list-style-type: disc;
  }

.comment__body ol {
    list-style-type: decimal;
  }

.comment-form {
  position: relative;
  margin-bottom: calc(18px * 1.6);
}

@media (min-width: 768px) {

.comment-form {
    padding-left: calc(32px + 16px)
}
  }

.comment-form__avatar {
  position: absolute;
  top: 0;
  left: 0;
}

@media (max-width: 767px) {

.comment-form__avatar {
    display: none
}
  }

.comment-form__body {
  margin-bottom: calc(18px * 1.6);
}

.comment-form__attachments {
  margin-bottom: calc(18px * 1.6);
}

.comment-form__mark-as-solved {
  position: relative;
}

.comment-form__comment-ccs ul {
    margin-bottom: 0;
  }

.promoted-articles__list {
  display: -webkit-box;
  display: flex;
  padding-left: 0;
  list-style: none;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-flow: row wrap;
}

.promoted-articles__title {
  margin-bottom: calc(18px * 1.6);
  font-size: 36px;
}

.promoted-articles-item__title {
  display: block;
  margin-bottom: calc(18px * 1.6 / 4);
  font-size: calc(18px * 1.1);
}

.promoted-articles-item__desc {
  margin-top: 0;
}

.error-page {
  padding: 0;
  margin-bottom: calc(18px * 1.6 * 2);
}

.error-page h2 {
    font-size: 28px;
  }

.satisfaction-box {
  padding: calc(8px * 2) 16px;
  margin: 0 0 calc(18px * 1.6) 0;
  background-color: #eee;
  border: 1px solid #c4c4c4;
  border-radius: 4px;
}

.satisfaction-box h4 {
    font-weight: bold;
  }

.satisfaction-box h4:last-child {
      margin-bottom: 0;
    }

.satisfaction-box input[type="radio"] ~ label {
  padding: 8px;
  margin-right: 0;
  margin-bottom: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: normal;
  letter-spacing: 0;
  border: inherit;
  border-radius: ;
}

.satisfaction-box
  input[type="radio"][checked="checked"][value="good"]
  + label:not([class="disabled"]) {
  background: #347231 !important;
}

.satisfaction-box
  input[type="radio"][checked="checked"][value="bad"]
  + label:not([class="disabled"]) {
  background: #E3515F !important;
}

.satisfaction-box
  input[type="radio"][checked="checked"]
  + label:not([class="disabled"]) {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.satisfaction-box label.disabled {
  display: inline-block;
  padding: 0 !important;
  margin-bottom: calc(18px * 1.6) !important;
  text-shadow: none;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.satisfaction-box label.disabled[for="satisfaction_rating_score_good"] {
  color: #347231 !important;
}

.satisfaction-box label.disabled[for="satisfaction_rating_score_bad"] {
  color: #E3515F !important;
}

.satisfaction-comment {
  margin-top: calc(18px * 1.6);
}

.satisfaction-box .satisfaction-submit {
  padding: 8px;
  margin-left: calc(18px * 1.6 / 2) !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: 0;
  background: #347231;
  border-color: #2c6029;
  border-radius: 4px;
}

.community {
  padding: 8px 16px;
  margin-bottom: calc(18px * 1.6);
  border: 1px dotted #c4c4c4;
  border-radius: 4px;
}

.my-activity-item {
  padding: 8px 16px;
  margin-bottom: calc(18px * 1.6);
  border: 1px dotted #c4c4c4;
  border-radius: 4px;
}

@media (min-width: 768px) {

.my-activity-item__title {
    max-width: 70%
}
  }

.my-activity-item__meta {
  font-size: calc(18px - 2px);
  color: #817d7d;
}

.my-activity-item--request {
  position: relative;
}

.my-activity-item--request .request-status {
    display: inline-block;
  }

@media (max-width: 767px) {

.my-activity-item--request .request-status {
      margin-bottom: calc(18px * 1.6 / 2)
  }
    }

@media (min-width: 768px) {

.my-activity-item--request .request-status {
      position: absolute;
      top: 16px;
      right: 16px
  }
    }

.my-activities-header {
  margin-bottom: calc(18px * 1.6);
}

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

.my-activities-menu__items {
  margin-top: 0;
  margin-bottom: 0;
}

.my-activities-menu__item {
  float: left;
  margin-bottom: 0;
  color: var(--nc-achromatic-700);
}

.my-activities-menu__item a {
    display: block;
  }

.my-activities-menu--main {
  margin-bottom: calc(18px * 1.6);
  overflow: hidden;
  background-color: #f7f7f7;
  border-radius: 4px;
}

.my-activities-menu--main .my-activities-menu__item.is-active {
      color: var(--nc-achromatic-000);
      background-color: #035486;
    }

.my-activities-menu--main .my-activities-menu__item.is-active {
      padding: 16px 16px;
    }

.my-activities-menu--main .my-activities-menu__item a {
      padding: 16px 16px;
    }

@media (min-width: 768px) {
    .my-activities-menu--main .my-activities-menu__item + .my-activities-menu__item {
      border-left: 1px solid #fff;
    }
  }

.my-activities-menu--sub {
  margin-bottom: calc(18px * 1.6);
}

.my-activities-menu--sub .my-activities-menu__item + .my-activities-menu__item {
    padding-left: 16px;
  }

@media (max-width: 991px) {

#quick-search {
    margin-bottom: calc(18px * 1.6 / 2)
}
  }

@media (min-width: 992px) {

#quick-search {
    float: left;
    max-width: 300px
}
  }

@media (max-width: 991px) {

.request-filter {
    margin-bottom: calc(18px * 1.6 / 2)
}
  }

.my-activities-header {
  margin-bottom: calc(18px * 1.6);
}

.my-activities-items {
  margin-bottom: calc(18px * 1.6 * 2);
}

@media (min-width: 768px) {

.my-activities-items {
    display: table;
    width: 100%
}
  }

.my-activities-items__head {
  display: none;
  color: #817d7d;
}

@media (min-width: 768px) {

.my-activities-items__head {
    display: table-header-group;
    font-size: calc(18px * 0.85);
    font-weight: bold;
    text-transform: uppercase
}
  }

@media (min-width: 768px) {

.my-activities-items__body {
    display: table-row-group
}
  }

@media (min-width: 768px) {

.my-activities-items__row {
    display: table-row
}
  }

@media (min-width: 768px) {

.my-activities-items__col {
    display: table-cell;
    padding-top: calc(18px * 1.6 / 2);
    padding-bottom: calc(18px * 1.6 / 2);
    border-bottom: 1px dotted #c4c4c4
}

    .my-activities-items__col + .my-activities-items__col {
      padding-left: 16px;
    }
  }

@media (max-width: 767px) {

.my-activities-items__request-id {
    display: inline
}
  }

@media (min-width: 768px) {

.my-activities-items__request-id {
    display: none
}
  }

.request-table-toolbar {
  padding-top: calc(8px * 2);
  padding-bottom: 8px;
  margin-bottom: calc(18px * 1.6);
  background-color: #f9f9f9;
  border-radius: 4px;
}

@media (min-width: 768px) {

.request-table-toolbar {
    padding-top: 8px;
    padding-bottom: calc(8px * 2)
}
  }

.request-table-toolbar label {
    font-size: calc(18px * 0.85);
    text-transform: uppercase;
  }

@media (min-width: 768px) {

.request-table-filters {
    display: table;
    width: 100%
}
  }

.request-table-filters__item {
  padding-right: 16px;
  padding-left: 16px;
}

@media (max-width: 767px) {

.request-table-filters__item {
    margin-bottom: calc(18px * 1.6 / 2)
}
  }

@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%;
}

.request-table-organization__col--button {
  padding-left: calc(16px / 2);
}

.requests-sort-symbol {
  display: inline-block;
  font-size: 0;
  vertical-align: middle;
}

.requests-sort-symbol:after {
    display: inline-block;
    margin-bottom: 2px;
    margin-left: 5px;
    font-family: "Font Awesome 5 Free";
    font-size: 12px;
    font-weight: 900;
    color: #817d7d;
    content: "\f0d7";
  }

.requests-link {
  white-space: nowrap;
}

.requests-link[href*="asc"] .requests-sort-symbol:after {
  content: "\f0d8";
}

.share {
  white-space: nowrap;
}

.share li {
  position: relative;

  display: inline-block;
  vertical-align: top;
}

.share a {
  display: block;
  width: 36px;
  height: 36px;
  overflow: hidden;
  line-height: 36px;
  color: #817d7d;
  border: 1px solid #817d7d;
  border-radius: 4px;
  touch-action: manipulation;
}

.share a:before {
    position: relative;

    display: inline-block;
    width: 100%;
    text-align: center;
  }

.share-facebook:hover {
  color: #3d5b95;
}

.share-twitter:hover {
  color: #24aadd;
}

.share-linkedin:hover {
  color: #0976b4;
}

.share-googleplus:hover {
  color: #d23e30;
}

.request {
  position: relative;
}

.request-sidebar dt:first-child {
    margin-bottom: calc(18px * 1.6 / 2);
  }

.request-sidebar dd {
    margin-bottom: calc(18px * 1.6 / 2);
  }

.request-id {
  display: block;
  margin-bottom: calc(18px * 1.6 / 2);
}

.request-description {
  margin-bottom: calc(18px * 1.6);
}

.request-details {
  padding: calc(18px * 1.6 / 2) 15px;
  background-color: #fcfcfc;
}

.request-status {
  padding: calc(8px / 4)
    calc(16px / 4);
  font-size: calc(18px - 2px);
  color: var(--nc-achromatic-000);
  border-radius: 4px;
}

.request-status--solved,
.request-status--closed {
  background-color: #347231;
}

.request-status--new,
.request-status--open {
  background-color: #E3515F;
}

.request-status--answered {
  background-color: #F7D652;
}

table {
  background-color: transparent;
}

caption {
  padding-top: 12px;
  padding-bottom: 12px;
  color: #787b7c;
  text-align: left;
}

th {
  text-align: left;
}

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: calc(18px * 1.6);
}

.table th,
  .table td {
    padding: 12px;
    vertical-align: top;
  }

.table td {
    border-top: 1px solid #c6c7c7;
  }

.table thead th {
    vertical-align: bottom;
  }

.table tbody + tbody {
    border-top: 1px solid #c6c7c7;
  }

.table .table {
    background-color: var(--nc-achromatic-000);
  }

.table--color-header th {
    color: var(--nc-achromatic-000);
    background-color: #035486;
  }

.table--striped th,
  .table--striped td,
  .table--striped thead th {
    border-color: var(--nc-achromatic-000);
  }

.table--striped tbody tr:nth-child(odd) {
    color: inherit;
    background-color: #c4c4c4;
  }

.table--hover tbody tr:hover {
    color: inherit;
    background-color: #c4c4c4;
  }

.table--bordered {
  border: 1px solid #c6c7c7;
}

.table--bordered td {
    border-left: 1px solid #c6c7c7;
  }

.table--bordered th {
    border-left: 1px solid #c6c7c7;
  }

.table-responsive {
  min-height: 0.01%;
  overflow-x: auto;
}

@media screen and (max-width: 767px) {

.table-responsive {
    width: 100%;
    margin-bottom: calc(18px * 1.6 * 0.75);
    overflow-y: hidden;
    border: 1px solid #c6c7c7;
    -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;
          }
  }

.embed,
.embed-responsive {
  position: relative;
  z-index: 1;
  display: block;
  height: 0;
  padding: 0;
  padding-bottom: 56.25%;
  margin-bottom: 30px;
  overflow: hidden;
}

.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;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

.embed:focus, .embed-responsive:focus {
    outline: none !important;
  }

.embed-responsive--16by9 {
  padding-bottom: 56.25%;
}

.embed-responsive--4by3 {
  padding-bottom: 75%;
}

.visibility-internal-icon:before {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  content: "\f023";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.search-result-votes:before {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  content: "\f164";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.recent-activity-item-comment span:before {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  content: "\f075";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.article-vote-up:before {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  content: "\f164";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.article-vote-down:before {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  content: "\f165";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.vote-controls a {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.vote-up:before {
  content: "\f106";
}

.vote-down:before {
  content: "\f107";
}

.share a:before {
  font-family: "Font Awesome 5 Brands";
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.share-facebook:before {
  content: "\f09a";
}

.share-twitter:before {
  content: "\f099";
}

.share-linkedin:before {
  content: "\f0e1";
}

.share-googleplus:before {
  content: "\f0d5";
}

.dropdown-toggle:after {
  margin-left: 5px;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  content: "\f107";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.article {
  position: relative;
}

.article-header {
  margin-bottom: calc(18px * 1.6);
}

.article-meta {
  display: table;
  width: 100%;
  margin-bottom: calc(18px * 1.6);
}

.article-meta__col {
  display: table-cell;
  vertical-align: top;
}

.article-meta__col--main {
  width: 100%;
  padding-right: 16px;
}

.article__body {
  margin-bottom: calc(18px * 1.6);
}

/* Headings in an article's text get more space above them than a paragraph,
   so each section starts clearly. Only headings placed directly in the text:
   product pages, cards and FAQs keep their own spacing, and so does any
   heading with its own class rule (those rules are more specific). */
.article__body > h2:where(:not(:first-child)) {
  margin-top: 3.6rem;
}

.article__body > :is(h3, h4):where(:not(:first-child)) {
  margin-top: 2.4rem;
}

/* A subheading right under its heading stays close to it */
.article__body > :is(h2, h3) + :is(h3, h4) {
  margin-top: 1.2rem;
}

.article__body ul {
    margin-left: 16px;
  }

.article__body ol {
    margin-left: 16px;
  }

.article__body ul ul {
      margin-top: calc(18px * 1.6 / 2);
    }

.article__body ul ol {
      margin-top: calc(18px * 1.6 / 2);
    }

.article__body ol ul {
      margin-top: calc(18px * 1.6 / 2);
    }

.article__body ol ol {
      margin-top: calc(18px * 1.6 / 2);
    }

.article__body ul li {
/*       margin-bottom: calc(18px * 1.6 / 2); */
    }

.article__body ol li {
      margin-bottom: calc(18px * 1.6 / 2);
    }

.article__body ul {
    list-style-type: disc;
  }

.article__body ol {
    list-style-type: decimal;
  }

.article__body .wysiwyg-font-size-x-large {
    font-size: 32px;
  }

.article__body .wysiwyg-font-size-large {
    font-size: 28px;
  }

.article__body .wysiwyg-font-size-medium {
    font-size: 18px;
  }

.article__body .wysiwyg-font-size-small {
    font-size: calc(18px * 0.85);
  }

/* Toggle titles keep the theme's size: a font size pasted straight into a
   title (RE201's FAQ questions came out at 28px) is ignored. script.js moves
   the title's contents into a button. Spans inside an icon-table title (in a
   td) keep their own sizes. */
.article__body .accordion__item-title > [class*="wysiwyg-font-size"],
.article__body .accordion__item-title > .accordion__toggle > [class*="wysiwyg-font-size"] {
    font-size: inherit;
  }

.article__body .list-bullet,
  .article__body .list-colored {
    list-style-type: none;
  }

.article-footer {
  padding-top: calc(18px * 1.6 / 2);
  border-top: 1px dotted #c4c4c4;
}

.article-share {
  padding: calc(18px * 1.6) 0 0;
  border-top: 1px solid #c4c4c4;
}

.article-vote {
  display: table;
  margin-bottom: calc(18px * 1.6);
}

.article-vote > * {
  display: table-cell;
  vertical-align: middle;
}

.article-vote > * + * {
  padding-left: 16px;
}

.article-vote-up:hover,
  .article-vote-up.article-voted {
    color: #347231 !important;
  }

.article-vote-down:hover,
  .article-vote-down.article-voted {
    color: #E3515F !important;
  }

.article-vote-controls {
  white-space: nowrap;
}

.article-vote-controls a {
    color: #817d7d;
  }

.article-vote-count {
  color: #817d7d;
}

.article-footer {
  margin-bottom: calc(18px * 1.6);
}

.article__attachments {
  margin-bottom: calc(18px * 1.6);
}

.article-more-questions {
  margin-bottom: calc(18px * 1.6);
  clear: both;
}

.article-more-questions a {
    white-space: nowrap;
  }

.article-vote-question {
  font-size: calc(18px - 2px);
  font-weight: 500;
  color: #817d7d;
}

.article-sidebar h3 {
  margin-top: 32px;
  font-size: 28px;
}

.visible-xs {
  display: none !important;
}

.visible-sm {
  display: none !important;
}

.visible-md {
  display: none !important;
}

.visible-lg {
  display: none !important;
}

@media (max-width: 767px) {
  .visible-xs {
    display: block !important;
  }
}

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

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

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

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

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

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

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

.custom-blocks__title {
  margin-top: 50px;
  margin-bottom: 50px;
  font-weight: 400;
  color: #817d7d;
  text-align: center;
}

.custom-blocks {
  display: -webkit-box;
  display: flex;
  margin-bottom: 0px;
  flex-wrap: wrap;
  -webkit-box-pack: center;
          justify-content: center;
}

.custom-block {
  min-height: 190px;
  margin-bottom: calc(18px * 1.6);
}

.custom-block a {
    display: block;
  }

.custom-block.is-active .custom-block__title {
      color: #0477BE;
    }

@media (max-width: 767px) {

.custom-block {
    min-height: 190px
}
  }

.custom-block__icon {
  display: -webkit-box;
  display: flex;
  min-height: 140px;
  text-align: center;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
}

.custom-block__image {
  min-height: 53px;
  max-height: 58px;
  margin-bottom: calc(18px * 1.6);
}

@media (min-width: 480px) {

.custom-block__image {
    min-height: 83px;
    max-height: 90px
}
  }

@media (min-width: 768px) {

.custom-block__image {
    min-height: 63px;
    max-height: 68px
}
  }

@media (min-width: 992px) {

.custom-block__image {
    min-height: 73px;
    max-height: 79px
}
  }

@media (min-width: 1200px) {

.custom-block__image {
    min-height: 83px;
    max-height: 90px
}
  }

.custom-block__link {
  display: block;
}

.custom-block__link img,
  .custom-block__link svg,
  .custom-block__link img svg {
    color: #0477BE;
    fill: #0477BE;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }

.custom-block__link:hover img,
    .custom-block__link:hover svg,
    .custom-block__link:hover img svg {
      color: #035486;
      fill: #035486;
    }

.custom-block__title {
  font-size: 18px;
  font-weight: 400;
  color: #0477BE;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

@media (min-width: 768px) {

.custom-block__title {
    margin-bottom: calc(18px * 1.6)
}
  }

.custom-block__disabled {
  position: absolute;
  top: 10px;
  left: 50%;
  display: inline-block;
  padding: 4px 8px;
  font-size: 14px;
  color: var(--nc-achromatic-000);
  text-transform: uppercase;
  white-space: nowrap;
  background-color: #817d7d;
  border-radius: 4px;
  -webkit-transform: rotate(-15deg) translateX(-50%);
          transform: rotate(-15deg) translateX(-50%);
}

/*
.sections-tabs.tabs {
  .tab li {
    padding: 10px 0px;
    float: none;
    display: block;
  }

  .tabs-content {
    border-top: 1px solid var(--hr-border);
  }

  .tabs-link {
    border: none !important;
    border-radius: 0;
  }

  .tab {
    border: none !important;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .custom-block__title {
    font-size: 14px;

    @media (--screen-xs) {
      font-size: 14px;
    }

    @media (--screen-sm) {
      font-size: 18px;
    }
  }
} */

.section-article a {
    font-size: 21px;
    color: #0477BE !important;
  }

.section-article a:hover {
      color: #035486 !important;
    }

@media (max-width: 767px) {
    .topbar .language-selector .dropdown-menu {
      position: static;
      margin: 0;
      background: transparent;
      border-radius: 0;
      box-shadow: none;
    }

    .topbar .language-selector .dropdown-menu [role="menuitem"] {
      padding-right: 0;
      padding-left: 0;
    }
  }

.community-recent-activity {
  padding: calc(18px * 1.6) 16px;
  margin-bottom: calc(18px * 1.6 * 2);
  border: 1px dotted #c4c4c4;
  border-radius: 4px;
}

.community-recent-activity h4 {
    font-weight: bold;
  }

.community-recent-activity .recent-activity-header {
    display: none;
  }

.community-recent-activity .recent-activity-list {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
  }

@media (min-width: 768px) {

.community-recent-activity .recent-activity-list {
      margin-right: 5px;
      margin-left: 5px
  }
    }

@media (min-width: 768px) {

.community-recent-activity .recent-activity-item {
      display: inline-block;
      width: 50%;
      padding-right: 15px;
      padding-left: 15px;
      
      vertical-align: top
  }
    }

.community-recent-activity .recent-activity-item-meta {
    font-size: calc(18px * 0.85);
    color: #817d7d;
  }

.community-recent-activity .recent-activity-item-comment span:before {
    display: inline-block;
    margin-right: calc(16px / 4);
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    content: "\f075";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

.community-recent-activity .recent-activity-item-parent {
    font-weight: bold;
    color: #6B625E;
  }

.page-header {
  position: relative;
  margin: 0 0 calc(18px * 1.6);
}

.page-header--with-border {
  border-bottom: 1px dotted #c4c4c4;
}

.page-description {
  margin: 0 0 calc(18px * 1.6) 0;
  color: var(--nc-achromatic-700);
}

.page-description:empty {
  display: none;
}

.profile-header {
  padding: calc(18px * 1.6) 15px;
  margin-bottom: calc(18px * 1.6);
  color: #6B625E;
  text-align: center;
  background-color: var(--nc-achromatic-300);
  border-radius: 4px;
}

.profile-header__avatar {
  display: inline-block;
}

.profile-header__name {
  margin-bottom: calc(18px * 1.6 / 2);
  font-size: 32px;
}

.profile-header__name a {
    color: #6B625E;
  }

@media (min-width: 768px) {

.profile-header__name {
    font-size: 36px;
    font-weight: 300
}
  }

.profile-header__private-badge {
  display: inline-block;
  margin-bottom: calc(18px * 1.6);
  background-color: #035486;
}

.profile-header__description {
  word-break: break-all;
  word-break: break-word;
}

.profile-stats {
  display: none;
  padding-left: 0;
  margin-bottom: calc(18px * 1.6 / 2);
  font-size: calc(18px * 0.85);
  color: #817d7d;
  list-style: none;
}

.profile-stats__stat {
  margin-right: 16px;
  margin-bottom: calc(18px * 1.6 / 4);
}

@media (max-width: 767px) {

.profile-stats__stat {
    display: block
}

    .profile-stats__stat:before {
      display: none;
    }
  }

.profile-stats__label {
  margin-right: calc(16px / 2);
}

.profile-stats__value {
  color: #6B625E;
}

.profile-nav {
  margin-bottom: calc(18px * 1.6);
  overflow: hidden;
  font-size: calc(18px * 0.85);
  font-weight: 600;
  background-color: #eff0f2;
  border-radius: 4px;
}

.profile-nav__items {
  padding-left: 0;
  margin: 0;
  list-style: none;
}

.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: #6B625E;
  }

.profile-nav__item.is-active {
    color: var(--nc-achromatic-000);
    background-color: #035486;
  }

.profile-nav__item.is-active {
    padding: calc(18px * 1.6 / 1.5)
      16px;
    line-height: 1;
  }

.profile-nav__item a {
    padding: calc(18px * 1.6 / 1.5)
      16px;
    line-height: 1;
  }

.profile-nav__item:after {
    right: 16px !important;
  }

.profile-section {
  width: 100%;
}

.profile-section__header {
  margin-bottom: calc(18px * 1.6);
}

.profile-section__title {
  margin-bottom: calc(18px * 1.6 / 2);
  font-size: 32px;
}

.profile-section__description {
  font-size: calc(18px * 0.85);
  color: #817d7d;
}

@media (min-width: 768px) {

.profile-section__description {
    padding-bottom: 0
}
  }

.profile-section-sorter {
  font-size: calc(18px * 0.85);
}

.profile-section-sorter .dropdown {
    display: inline-block;
  }

@media (min-width: 768px) {

.profile-section-sorter {
    display: table;
    width: 100%
}
  }

@media (min-width: 768px) {

.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) {

.profile-section-sorter__col--main {
    margin-bottom: calc(18px * 1.6 / 2)
}
  }

@media (min-width: 768px) {

.profile-section-sorter__col--main {
    padding-right: 16px
}
  }

@media (min-width: 768px) {

.profile-section-sorter__col--btn {
    text-align: right
}
  }

.profile-contribution {
  position: relative;
  padding: calc(18px * 1.6 / 2) 15px;

  word-wrap: break-word;
  background-color: #eff0f2;

  border-radius: 4px;
}

.profile-contribution__header {
  margin-bottom: calc(18px * 1.6 / 4);
}

.profile-contribution__status {
  margin-bottom: calc(18px * 1.6 / 4);
}

.profile-contribution__title {
  margin-top: 0;
  margin-bottom: calc(18px * 1.6 / 4);
  font-size: 18px;
  font-weight: 600;
}

.profile-contribution__body {
  margin-bottom: calc(18px * 1.6 / 2);
}

.profile-contribution--list .profile-contribution__title:before {
    display: inline-block;
    margin-right: 2px;
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

.profile-contribution__breadcrumbs {
  padding: 0;
  margin-bottom: calc(18px * 1.6 / 2);
  font-size: (calc(18px * 0.85));
}

.profile__no-activity {
  color: #817d7d;
  text-align: center;
}

.profile__private-activity {
  color: #817d7d;
  text-align: center;
}

.profile-activity-list {
  padding-left: 0;
  list-style: none;
}

.profile-activity {
  position: relative;
  margin-bottom: calc(18px * 1.6 * 1.5);
}

.profile-activity__header {
  margin-bottom: calc(18px * 1.6 / 2);

  font-size: calc(18px * 0.85);
  font-weight: 600;
}

.profile-activity__header:before {
    display: inline-block;
    margin-right: 2px;
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

.profile-activity__avatar {
  width: 30px;
  height: 30px;
  margin-right: calc(16px / 2);
}

.profile-activity-list--articles .profile-contribution__title:before {
  margin-right: calc(18px * 1.6) / 6;
  content: "\f15c";
}

.profile-activity[class$="-article"] .profile-activity__header:before {
  margin-right: calc(18px * 1.6) / 6;
  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;
}

.status-label {
  padding: 2px calc(16px / 2);
  font-size: 12px;
  color: var(--nc-achromatic-000);
  border-radius: 4px;
}

.status-label--pending {
  background-color: #F7D652;
}

.status-label--with-ticket {
  background-color: #035486;
}

.status-label--with-ticket:hover,
  .status-label--with-ticket:focus,
  .status-label--with-ticket:active {
    color: var(--nc-achromatic-000);
  }

.status-label--solved,
.status-label--closed {
  background-color: #347231;
}

.status-label--new,
.status-label--open {
  background-color: #E3515F;
}

.status-label--answered {
  background-color: #F7D652;
}

.status-label--official {
  background-color: #035486;
}

.status-label--completed,
.status-label--answered {
  background-color: #347231;
}

.status-label--planned {
  background-color: #035486;
}

.status-label--not-planned {
  color: #6B625E;
  background-color: #c4c4c4;
}

.entry-info {
  display: -webkit-box;
  display: flex;
  overflow: hidden;
  font-size: calc(18px * 0.85);
}

.entry-info__avatar {
  padding-right: 16px;
}

.entry-info__content {
  display: table-cell;
  vertical-align: top;
  -webkit-box-flex: 1;
          flex: 1;
}

.entry-info__follow {
  float: right;
}

.attachment-list {
  padding-left: 0;
  margin: 0;
  font-size: calc(18px * 0.85);
  list-style: none;
}

.attachment-list__item {
  position: relative;
  padding-left: calc(16px * 1.5);
  margin-bottom: calc(18px * 1.6 / 2);
}

.attachment-list__item:last-child {
    margin-bottom: 0;
  }

.attachment-list__icon {
  position: absolute;
  top: 4px;
  left: 0;
}

.callout {
  padding: calc(18px * 1.6) 20px 0;
  margin-bottom: calc(18px * 1.6);
  background-color: #c4c4c4;
  border-left-style: solid;
  border-left-width: 5px;
}

.callout p {
    padding-bottom: calc(18px * 1.6);
    margin-bottom: 0;
  }

.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: #6B625E;
  background-color: #b6dfb4;
  border-color: #347231;
}

.callout--success .callout__title {
    color: #347231;
  }

.callout--info {
  color: #6B625E;
  background-color: #85e4f9;
  border-color: #0BADCF;
}

.callout--info .callout__title {
    color: #0BADCF;
  }

.callout--warning {
  color: #6B625E;
  background-color: #fdf5d6;
  border-color: #F7D652;
}

.callout--warning .callout__title {
    color: #F7D652;
  }

.callout--danger {
  color: #6B625E;
  background-color: #fcebec;
  border-color: #E3515F;
}

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

.callout--primary {
  color: #6B625E;
  background-color: #7dcbfc;
  border-color: #035486;
}

.callout--primary .callout__title {
    color: #035486;
  }

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

.image-with-border {
  padding: 10px;
  border: 1px solid #c6c7c7;
  border-radius: 4px;
}

.image-with-shadow {
  box-shadow: 0 5px 15px 2px #6d7278;
}

.image-with-lightbox {
  cursor: pointer;
}

.image-overlay {
  position: relative;
}

.image-overlay:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    background-color: rgba(255, 255, 255, 0.3);
  }

.image-with-video-icon {
  position: relative;
  display: block;
}

.image-with-video-icon img {
    width: 100%;
  }

.image-with-video-icon:before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 0;
    height: 0;
    font-size: 0;
    content: "";
    border-color: transparent transparent transparent var(--nc-achromatic-000);
    border-style: solid;
    border-width: 30px 0 30px 60px;
    -webkit-transition: -webkit-transform 0.6s ease;
    transition: -webkit-transform 0.6s ease;
    transition: transform 0.6s ease;
    transition: transform 0.6s ease, -webkit-transform 0.6s ease;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }

.image-with-video-icon:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    content: "";
    background-color: rgba(0, 0, 0, 0.3);
  }

.image-with-video-icon:active:before, .image-with-video-icon:hover:before {
      -webkit-transform: translate(-50%, -50%) scale(1.1);
              transform: translate(-50%, -50%) scale(1.1);
    }

.list-colored,
.list-bullet {
  padding-left: 0;
  margin-left: 0 !important;
  list-style-type: none;
  counter-reset: list;
}

.list-colored li {
    position: relative;
    padding-left: calc(30px + 16px);
    margin-bottom: calc(18px * 1.6 / 2) !important;
    counter-increment: list;
  }

.list-colored li:before {
      position: absolute;
      top: -3px;
      left: 0;
      z-index: 1;
      width: 30px;
      height: 30px;
      font-size: calc(18px * 0.85);
      line-height: 30px;
      color: var(--nc-achromatic-000);
      text-align: center;
      content: counter(list);
      background-color: #035486;
      border-radius: 50%;
    }

.list-colored ol {
    margin-bottom: 14px;
    list-style-type: none;
    counter-reset: list;
  }

.list-bullet li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
  }

.list-bullet li:before {
      position: absolute;
      top: -2px;
      left: 0;
      width: auto;
      height: auto;
      font-family: "Font Awesome 5 Free";
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      color: #035486;
      vertical-align: bottom;
      content: "\f058";
      background-color: transparent;
    }

.list-bullet ul {
    margin-bottom: 14px;
    list-style: none;
  }

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-primary {
  background-color: #28aafa;
}

.text-info {
  background-color: #0BADCF;
}

.text-warning {
  background-color: #F7D652;
}

.text-danger {
  background-color: #E3515F;
}

.text-success {
  background-color: #347231;
}

.accordion {
  padding-top: 0;
  margin-bottom: calc(18px * 1.6);
  border: 1px solid #ddd;
  border-radius: 4px;
}

.accordion__item-title {
  position: relative;
  padding: 15px 20px 15px 52px;
  font-size: 28px;
  cursor: pointer;
}

.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;
  padding: 20px;
  border-bottom: 1px solid #ddd;
}

.accordion__item-content p:last-child {
    margin-bottom: 0;
  }

.accordion__item:last-child .accordion__item-title {
  border-bottom: none;
}

.accordion__item .accordion__item-content {
  display: none;
}
.accordion__item.is-open .accordion__item-content {
  display: block;
}

.accordion--default .accordion__item-title:before {
    top: 50%;
    left: 22px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-bottom: 2px solid #035486;
    border-left: 2px solid #035486;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }

.accordion--default .accordion__item-title--active {
    background-color: #f0f0f0;
  }

.accordion--default .accordion__item-title--active:before {
      -webkit-transition: -webkit-transform 0.3s;
      transition: -webkit-transform 0.3s;
      transition: transform 0.3s;
      transition: transform 0.3s, -webkit-transform 0.3s;
      -webkit-transform: rotate(135deg);
              transform: rotate(135deg);
    }

.accordion--colored .accordion__item-title {
    -webkit-transition: background-color 0.3s;
    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 {
      left: 20px;
      width: 10px;
      height: 2px;
      margin-top: -1px;
      background-color: #787b7c;
    }

.accordion--colored .accordion__item-title:after {
      position: absolute;
      left: 24px;
      width: 2px;
      height: 10px;
      margin-top: -5px;
      content: "";
      background-color: #787b7c;
    }

.accordion--colored .accordion__item-title--active {
      color: var(--nc-achromatic-000);
      background-color: #035486;
      -webkit-transition: background-color 0.3s;
      transition: background-color 0.3s;
    }

.accordion--colored .accordion__item-title--active:before {
        background-color: var(--nc-achromatic-000);
      }

.accordion--colored .accordion__item-title--active:after {
        display: none;
      }

.tabs {
  margin-bottom: calc(16px * 1.5);
}
.tab {
  display: block;
  padding: 30px;
  margin-top: -1px;
  border: 1px solid #ddd;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}
.tab p:last-child {
/*     margin-bottom: 0; */
  }
@media (min-width: 768px) {
.tab {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px
}
  }
.tab:nth-child(2) {
  border-top-left-radius: 0;
}
.tabs-link {
  display: block;
  padding: 8px 30px;
  margin: 0;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom-width: 0;
}
.tabs-link:hover {
    color: #276FD0;
  }
@media (max-width: 767px) {
.tabs-link {
    border-top-color: #ddd;
    border-right-color: #ddd;
    border-left-color: #ddd
}

    .tabs-link:first-child {
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
  }
@media (min-width: 768px) {
.tabs-link {
    display: inline-block
}
  }
.tabs-link.is-active {
  color: #276FD0;
  cursor: pointer;
  border-color: #ddd;
}
.tabs-link.is-active:hover {
    color: #276FD0;
    cursor: default;
  }
@media (min-width: 768px) {
.tabs-link.is-active {
    border-bottom: 1px solid var(--nc-achromatic-000);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px
}
  }

.tabs-menu{
  white-space: nowrap;
  overflow-x: scroll;
}

.tabs-menu::-webkit-scrollbar {
  display: none;
}

.tabs--colored-1 .tab {
    background-color: var(--nc-achromatic-100) !important;
  }
.tabs--colored-1 .tabs-link.is-active {
    background-color: var(--nc-achromatic-100);
    border-bottom-color: var(--nc-achromatic-100);
  }
.tabs--colored-2 .tabs-link:hover {
      color: #276FD0;
    }
.tabs--colored-2 .tabs-link.is-active {
    color: var(--nc-achromatic-000);
    background-color: #276FD0;
    border-color: #276FD0;
  }
.tabs--colored-2 .tabs-link.is-active:hover {
      color: var(--nc-achromatic-000);
    }
.tabs--colored-2 .tab {
    background-color: var(--nc-achromatic-100) !important;
  }


.scroll-to-top {
  position: fixed;
  right: 30px;
  bottom: -50px;
  z-index: 3;
  width: 50px;
  height: 50px;
  font-size: 32px !important;
  line-height: 45px !important;
  color: #035486;
  text-align: center;
  border: 1px solid #0477BE;
  border-radius: 4px;
  -webkit-transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.scroll-to-top:focus,
  .scroll-to-top:active {
    outline: 0;
  }

.scroll-to-top.is-active {
    bottom: 30px;
  }

.scroll-to-top:hover {
    color: #024873;
    border-color: #024873;
  }

@media (max-width: 767px) {

.scroll-to-top {
    display: none
}
  }

.scroll-to-top--fixed {
  position: fixed;

  right: 48px;
  bottom: calc(-4 * 48px);
}

.scroll-to-top--fixed.is-active {
    bottom: 48px;
  }

/* Custom at top*/

/* Original

.recent-articles h3 {
    margin-bottom: calc(18px * 1.6 / 2);
  }

.related-articles h3 {
    margin-bottom: calc(18px * 1.6 / 2);
  }

@media (min-width: 768px) {

.recent-articles h3 {
      margin-top: calc(18px * 1.6 / 2)
  }

.related-articles h3 {
      margin-top: calc(18px * 1.6 / 2)
  }
    }

.recent-articles ul, .related-articles ul {
    padding-left: 0;
    list-style: none;
  }

.recent-articles ul > li {
      margin-bottom: calc(18px * 1.6 / 2);
    }

.related-articles ul > li {
      margin-bottom: calc(18px * 1.6 / 2);
    }

.recent-articles ul > li a, .related-articles ul > li a {
        padding-bottom: 1px;
      }

.recent-articles h3 {
  font-size: 28px;
}

*/

/* Custom */

.section-articles {
  margin-bottom: calc(18px * 1.6);
}

.section-articles__title {
  margin-bottom: calc(18px * 1.6 / 2);
  font-size: 28px;
}

.section-articles__list {
  padding-left: 0;
  list-style: none;
}

.section-articles__item {
  margin-bottom: calc(18px * 1.6 / 2);
}

.carousel {
  padding-bottom: 48px;
  margin-bottom: 64px;
  border-bottom: 1px solid #c4c4c4;
  padding-left: 32px;
  padding-right: 32px;
}

.carousel-item {
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.carousel-item__link {
  outline: 0;
}

.carousel-item__link.is-active .carousel-item__image {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}

.carousel-item__link:not(.is-active) {
  color: #6d7278;
}

.carousel-item__link.is-active .carousel-item__image {
  opacity: 1;
}

.selected-slide .carousel-item__image {
  opacity: 1;
  transform: scale(1.5);
}

.carousel-item__image-wrap {
  width: 160px;
  height: 160px;
  margin-right: auto;
  margin-left: auto;
}

.carousel-item__image {
  width: 100px;
  height: auto;
  opacity: 0.6;
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
}

.carousel-item__name {
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.carousel-item__link.is-active .carousel-item__name {
  border-color: #035486;
}

.carousel .slick-prev:before,
.carousel .slick-next:before {
    font-family: "Font Awesome 5 Free";
  font-size: 36px;
  font-weight: 900;
  color: #817D7D;
}

.carousel .slick-prev:before {
  content: "\f104";
}

.carousel .slick-next:before {
  content: "\f105";
}

.carousel .slick-next,
.carousel .slick-prev {
  position: absolute;
  top: 50%;
  z-index: 100;
  padding-right: 10px;
  padding-left: 10px;
  font-size: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.carousel .slick-next {
  right: 0;
}

.carousel .slick-prev {
  left: 0;
}

.community-nav__item {
  float: left;
}

.community-nav__item + .community-nav__item {
    margin-left: 16px;
  }

.community-nav__item.is-active {
    font-weight: bold;
  }

.community-nav__item--button {
  float: right;
}

.vote {
  width: 100%;
  max-width: 40px;
}

.vote [aria-selected="true"] {
    z-index: 2;
  }

.vote-sum {
  display: block;
  padding-top: calc(18px * 1.6 / 4);
  padding-bottom: calc(18px * 1.6 / 4);
  font-weight: bold;
  text-align: center;
}

.vote-control {
  position: relative;

  z-index: 1;
  display: block !important;
  padding: calc(18px * 1.6 / 6) 0 !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: #6B625E;
  border-color: #c4c4c4;
}

.vote-control:hover,
  .vote-control:active {
    z-index: 2;
  }

.vote-control:hover {
    color: var(--nc-achromatic-000) !important;
    background-color: #1f5b84 !important;
  }

.vote-control[aria-selected="true"] {
    color: var(--nc-achromatic-000) !important;
    background-color: #2b7db5 !important;
  }

.vote-control[aria-selected="true"]:hover {
      color: #1f5b84 !important;
      background-color: transparent !important;
    }

.topic-list-item:nth-child(2n + 1) {
    clear: left;
  }

.topic-list-item__box {
  padding: calc(18px * 1.6) 16px;
  margin-bottom: calc(18px * 1.6);
  border: 1px dotted #c4c4c4;
  border-radius: 4px;
}

.topic-list-item__title {
  margin-top: 0;
  margin-bottom: calc(18px * 1.6 / 2);
}

.topic {
  display: table;
  width: 100%;
  padding-bottom: calc(18px * 1.6 / 2);
  margin-bottom: calc(18px * 1.6);
  border-bottom: 1px dotted #c4c4c4;
}

.topic__col {
  display: table-cell;
  vertical-align: top;
}

.topic__col--new-post {
  text-align: right;
}

.topic__title {
  width: 100%;
  margin-bottom: calc(18px * 1.6 / 2);
  font-size: 36px;
}

.topic-filters__item {
  float: left;
  margin-right: calc(16px / 2);
}

@media (max-width: 767px) {

.topic-filters__item {
    margin-bottom: calc(18px * 1.6 / 2)
}
  }

.topic-controls {
  margin-bottom: calc(18px * 1.6 * 2);
}

.topic-controls__item {
  float: left;
}

.topic-followers {
  margin-right: calc(16px / 2);
}

@media (min-width: 768px) {

.topic-controls__item--subscribe {
    float: right;
    white-space: nowrap
}
  }

.topic-controls__item--subscribe .dropdown {
    display: inline-block;
    vertical-align: middle;
  }

@media (min-width: 768px) {

.post-page {
    margin-bottom: calc(18px * 1.6 * 2)
}
  }

.post {
  position: relative;
  margin-bottom: calc(18px * 1.6);
}

.post__title {
  padding-right: calc(16px * 1.5);
  font-size: 32px;
}

@media (min-width: 768px) {

.post__title {
    font-size: 36px
}
  }

@media (min-width: 992px) {

.post__title {
    font-size: calc(18px * 2.5)
}
  }

.post-meta {
  display: table;
  width: 100%;
  margin-bottom: calc(18px * 1.6);
}

.post-meta__col {
  display: table-cell;
  vertical-align: top;
}

.post-meta__col--main {
  width: 100%;
  padding-right: 16px;
}

.post__text {
  word-wrap: break-word;
}

.post__body {
  padding-right: calc(5px + 16px);
  padding-left: calc(5px + 16px);
}

.post__body ul {
    margin-left: 16px;
  }

.post__body ol {
    margin-left: 16px;
  }

.post__body ul {
    list-style-type: disc;
  }

.post__body ol {
    list-style-type: decimal;
  }

.post__voting-and-actions {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  text-align: center;
}

.post__voting-and-actions .dropdown-toggle {
    font-size: 0;
  }

.post__voting-and-actions .dropdown-toggle:after {
    margin-left: 0;
    font-size: 18px;
    content: "\f013";
  }

.post-callout {
  padding: calc(18px * 1.6 / 2) 15px;
  background-color: #fcfcfc;
}

.post-callout__title {
  margin-top: 0;
  font-size: calc(18px * 1.1);
  font-weight: bold;
}

.post-share ul {
    margin-left: 0;
  }

.post-list-item {
  padding-bottom: calc(18px * 1.6);
  margin-bottom: calc(18px * 1.6);
  border-bottom: 1px dotted #c4c4c4;
}

@media (min-width: 768px) {

.post-list-item {
    display: table;
    width: 100%
}
  }

.post-list-item__title {
  margin-top: 0;
  margin-bottom: calc(18px * 1.6 / 2);
  font-size: 32px;
}

.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%;
    text-align: right
}
  }

.post-info {
  font-size: calc(18px - 2px);
  color: #817d7d;
}

@media (min-width: 768px) {

.post-info {
    float: right;
    min-width: 90px;
    padding: 8px 16px;
    text-align: center;
    background-color: #f9f9f9;
    border-radius: 4px
}
  }

@media (min-width: 768px) {

.post-info__count {
    display: block;
    font-weight: bold;
    color: #6B625E
}
  }

.post-info + .post-info {
  margin-right: 16px;
}

@media (max-width: 767px) {
    .post-info + .post-info:before {
      margin-right: calc(16px / 2);
      font-size: 10px;
      content: "\2022";
    }
  }

.post-status {
  display: inline-block;
  padding: 1px calc(16px / 2);
  font-size: 12px;
  color: var(--nc-achromatic-000);
  border-radius: 4px;
}

.post-status--completed,
.post-status--answered {
  background-color: #347231;
}

.post-status--planned {
  background-color: #035486;
}

.post-status--not-planned {
  color: #6B625E;
  background-color: #c4c4c4;
}

.new-post-title {
  font-size: 32px;
}

@media (min-width: 768px) {

.new-post-title {
    font-size: 36px
}
  }

@media (min-width: 992px) {

.new-post-title {
    font-size: calc(18px * 2.5)
}
  }

.new-post-form {
  margin-bottom: calc(18px * 1.6);
}

    .highlight {
    animation: highlightFlash 2.5s ease forwards;
  }

  @keyframes highlightFlash {
    0%   { background-color: var(--nc-blue-100); }
    100% { background-color: #EDF4F8; }
  }

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

.recent-activity-item-parent.small-text {
  font-size: 0.85em;
  color: #666;
  font-weight: normal;
  margin: 0 0 0.25em 0;
}

.recent-activity-item-meta {
  font-size: 0.85em;
  color: #999;
}

.post-callout {
 display: none;
}

.post-callout__title {
  display: none;
}

.recent-activity-list {
  display: flex;
  flex-direction: row;
}

.recent-activity-item {
  display: flex !important;
  flex-direction: column !important;
}

.recent-activity-item h3 {
  order: 1 !important;
  font-size: 16px;
  font-weight: 400 !important;
  margin: 0;
}

.recent-activity-item h3 a {
  font-weight: 400 !important;
}

.recent-activity-item .recent-activity-item-link {
  order: 0 !important;
  font-size: 22px !important;
  font-weight: bold;
  margin-bottom: 4px;
  display: block;
}

.recent-activity-item .recent-activity-item-meta {
  order: 2 !important;
}

.recent-activity-item {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 5px;
  margin: 5px 10px 10px 10px;
}

.recent-activity-item {
  position: relative;
  cursor: pointer;
}

.recent-activity-item .recent-activity-item-link {
  order: 0 !important;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 3px;
  display: block;
}

.recent-activity-item .recent-activity-item-link::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.post-list-item__meta {
  display: flex;
  align-items: center;
}

.post-list-item__meta .meta__item {
  display: inline-flex;
  align-items: center;
}

.post-list-item__meta .meta__item::before {
  vertical-align: middle;
}

.post-list-item__meta .meta__item + .meta__item::before {
  margin-left: 2px;
  margin-right: 10px;
}

.community-nav {
  text-align: center;
}

.community-nav__items {
  display: inline-flex;
  gap: 12px;
  justify-content: center;
}

.community-nav__item {
  background-color: var(--nc-achromatic-100);
  border: 1px solid #ddd;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.community-nav__item a {
  text-decoration: none;
  color: inherit;
  display: block;
  padding: 10px 20px;
}

.community-nav__item:hover {
  background-color: #e0e0e0;
}

.community-nav__item.is-active {
  background-color: var(--nc-blue-500);
  color: white;
  border-color: var(--nc-blue-500);
  padding: 10px 20px;
}

.topic-list.row {
  display: flex !important;
  flex-wrap: wrap;
  row-gap: 0px;
  column-gap: 25px;
  margin: 0 !important;
  padding: 0 !important;
}

.topic-list.row::before,
.topic-list.row::after {
  display: none !important;
}

.topic-list-item.column {
  flex: 0 0 calc((100% - 25px) / 2) !important;
  max-width: calc((100% - 30px) / 2) !important;
  width: calc((100% - 25px) / 2) !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
}

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

.community-recent-activity {
  display: none;
}

.community-recent-activity.has-activities {
  display: block;
}

/* Remove indentation from community post content */
.post .post__text.markdown blockquote {
  margin-left: 0;
  padding-left: 20px;
  border-left: 4px solid #ddd;
}

.post .post__text.markdown p {
  margin-left: 0;
  padding-left: 0;
}

.post .post__text.markdown {
  padding-left: 0;
  margin-left: 0;
}

.post .post__text.markdown h2 {
  margin-top: 24px;
}

.post .post__text.markdown h3 {
  margin-top: 20px;
}

.post .post__text.markdown h4 {
  margin-top: 16px;
}

.post .post__text.markdown blockquote {
  font-style: normal;
}

.post .post__text.markdown img {
  max-width: 90%; /* Set to your preferred max width */
  max-height: 500px;
  width: auto;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin: 20px auto; /* 20px top/bottom, auto left/right for centering */
  object-fit: contain;
}




/* Only the first image in the post content */
.post__text.markdown p:first-of-type img:first-of-type {
  max-height: 500px !important;
  max-width: min(600px, 100%) !important;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Recent activity container */
.recent-activity-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Each recent activity item */
.recent-activity-item {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 210px; /* Base width of 300px, can grow and shrink */
  min-width: 0; /* Allow shrinking below content size */
  max-width: 100%;
  box-sizing: border-box;
}

/* When items would be less than 300px wide, stack them */
@media (max-width: 800px) {
  .recent-activity-item {
    flex: 100%; /* Full width */
    
  }
}

/* Ensure title wraps and doesn't expand the box */
.recent-activity-item .recent-activity-item-link {
  order: 0 !important;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
  flex-grow: 0; /* Don't let title expand the box */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.recent-activity-item h3 {
  order: 1 !important;
  font-size: 14px;
  font-weight: 300 !important;
  margin: 0 0 5px 0;
  flex-shrink: 0;
}

.recent-activity-item .recent-activity-item-meta {
  order: 2 !important;
  flex-shrink: 0;
}

/* Prevent overflow */
.community-recent-activity {
  max-width: 100%;
  overflow: hidden;
}

.recent-activity-item * {
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.recent-activity-item-link {
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.contacts a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.contacts a img {
  display: block;
  width: 20px;
  height: 20px;
}

/* =============================================
   CATEGORY CARD GRID
============================================= */

.category-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 24px;
  padding: 20px 0;
  margin-bottom: 48px;
  box-sizing: border-box;
  width: 100%;
}

/* =============================================
   BASE CARD
============================================= */

.category-card {
  position: relative;
  background: var(--nc-achromatic-000);
  border: 2px solid #ddd;
  border-radius: 8px;
  padding: 28px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #035486;
}

/* Desktop flex ordering */
.category-card .category-card__link         { order: 1; }
.category-card .category-card__title        { order: 2; }
.category-card .category-card__description  { order: 3; }
.category-card .category-card__article-list { order: 4; }
.category-card .category-card__labels       { order: 0; }

/* Article cards (no article list) */
.category-card:not(:has(.category-card__article-list)) {
  padding: 0;
  cursor: pointer;
}
.category-card:not(:has(.category-card__article-list)) .category-card__link {
  padding: 28px;
  box-sizing: border-box;
  border-radius: 8px;
  flex: 1;
}

/* Section cards (with article list) — link/icon area not clickable */
.category-card:has(.category-card__article-list) .category-card__link {
  pointer-events: none;
  cursor: default;
}

/* =============================================
   LINK
============================================= */

.category-card__link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  text-align: center;
  min-width: 0;
}
.category-card__link:hover { text-decoration: none; }

div.category-card__link { cursor: default; }
a.category-card__link   { cursor: pointer; }

.category-card[data-type="section"] { cursor: pointer; }
.category-card[data-type="section"] .category-card__icon-wrap { cursor: pointer; }
.category-card[data-type="article"] { cursor: pointer; }
.category-card[data-type="article"] .category-card__icon-wrap,
.category-card[data-type="article"] .category-card__icon { cursor: pointer; }

/* =============================================
   ICON WRAP + ICON
============================================= */

.category-card__icon-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 280px;
  padding: 58px 0 42px 0;
  box-sizing: border-box;
  flex: none;
  margin-bottom: 0;
  overflow: hidden;
  clip-path: inset(0);
}

.category-card__icon {
  display: block;
  min-width: 120px;
  min-height: 120px;
  max-width: 100%;
  max-height: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
  transform: scale(0.9091);
  transform-origin: center center;
  transition: transform 0.3s ease;
}
.category-card:hover .category-card__icon { transform: scale(1); }

/* =============================================
   TITLE + DESCRIPTION
============================================= */

.category-card__title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #0477BE;
  transition: color 0.3s ease;
}
.category-card:hover .category-card__title { color: #035486; }

.category-card__description {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
  line-height: 1.5;
}

.category-card__article-count {
  font-size: 12px;
  color: #999;
  font-weight: 500;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid #eee;
}

/* =============================================
   CURRENT VERSION + LARGE
============================================= */

.category-card--current-version,
.category-card--large {
  container-type: inline-size;
  container-name: large-card;
  background: linear-gradient(to right, #054e82 0%, #0878a3 100%);
  color: var(--nc-achromatic-000);
  border: none;
}

.category-card--large { grid-column: 1 / -1; }

.category-card--current-version:not(:has(.category-card__article-list)),
.category-card--large:not(:has(.category-card__article-list)) { padding: 0; }

.category-card--current-version:not(:has(.category-card__article-list)) .category-card__link,
.category-card--large:not(:has(.category-card__article-list)) .category-card__link {
  padding: 28px;
  border-radius: 8px;
  flex: 1;
}

.category-card--current-version:hover,
.category-card--large:hover {
  box-shadow: 0 6px 16px rgba(5, 78, 130, 0.22);
  transform: translateY(-6px);
}

.category-card--current-version .category-card__title,
.category-card--current-version .category-card__description,
.category-card--current-version .category-card__article-count,
.category-card--large .category-card__title,
.category-card--large .category-card__description,
.category-card--large .category-card__article-count { color: var(--nc-achromatic-000); }

.category-card--current-version:hover .category-card__title,
.category-card--large:hover .category-card__title { color: rgba(255, 255, 255, 0.85); }

/* Two large cards side by side */
.category-cards-container:has(.category-card--large ~ .category-card--large) {
  grid-template-columns: repeat(2, 1fr);
}
.category-cards-container:has(.category-card--large ~ .category-card--large) .category-card--large {
  grid-column: span 1;
}

/* Three or more large cards */
.category-cards-container:has(.category-card--large ~ .category-card--large ~ .category-card--large) {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.category-cards-container:has(.category-card--large ~ .category-card--large ~ .category-card--large) .category-card--large {
  grid-column: span 1;
}

/* =============================================
   PREVIOUS VERSION
============================================= */

.category-card--previous-version {
  border: 1px solid #e0e0e0;
  background: #fafafa;
}
.category-card--previous-version:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-color: #035486;
}
.category-card--previous-version .category-card__title       { color: #0477BE; }
.category-card--previous-version .category-card__description { color: #666; }
.category-card--previous-version .category-card__article-count { color: #999; }

/* =============================================
   OTHER MODIFIERS
============================================= */

.category-card--featured {
  grid-column: span 2;
  background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
  border: 3px solid #035486;
  box-shadow: 0 2px 8px rgba(5, 78, 130, 0.15);
}
.category-card--highlighted  { background: var(--nc-yellow-100); border-color: #FFD700; }
.category-card--priority-high   { border-color: #E3515F;  border-width: 3px; }
.category-card--priority-medium { border-color: #F7D652; border-width: 2px; }

.category-card--pinned::before {
  content: "\f08d";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 10px;
  left: 10px;
  color: #035486;
  font-size: 16px;
}

/* =============================================
   OUTDOOR / INDOOR LABELS
============================================= */

.category-card--outdoor::after {
  content: "Outdoor Product";
  position: absolute;
  top: 12px;
  left: 12px;
  background: #166534;
  color: var(--nc-achromatic-000);
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 12px;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.category-card--indoor::after {
  content: "Indoor Product";
  position: absolute;
  top: 12px;
  left: 12px;
  background: #7c3aed;
  color: var(--nc-achromatic-000);
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 12px;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@container large-card (max-width: 360px) {
  .category-card--outdoor::after,
  .category-card--indoor::after { top: 44px; left: auto; right: 12px; }
}

/* Desktop: hide marker elements, use ::after pseudo-element instead */
.category-card__marker--outdoor,
.category-card__marker--indoor { display: none; }

/* =============================================
   BADGES (top-right corner)
============================================= */

.category-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 12px;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.category-card__badge--current-version  { background: #035486; color: var(--nc-achromatic-000); }
.category-card__badge--previous-version { background: #e5e7eb; color: #374151; }
.category-card__badge--essential        { background: #035486; color: var(--nc-achromatic-000); }
.category-card__badge--advanced         { background: #6C757D; color: var(--nc-achromatic-000); }
.category-card__badge--premium          { background: linear-gradient(135deg, #6d28d9 0%, #4338ca 100%); color: var(--nc-achromatic-000); }
.category-card__badge--beta             { background: #F7D652; color: #713f12; }
.category-card__badge--coming-soon      { background: #bfdbfe; color: #1e3a5f; }

/* =============================================
   MARKERS (top-left corner)
============================================= */

.category-card__marker {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 4px;
  z-index: 2;
  letter-spacing: 0.5px;
}

.category-card__marker--second { top: 44px; }

.category-card--outdoor .category-card__marker,
.category-card--indoor  .category-card__marker { top: 44px; }

.category-card__marker--new      { background: #347231; color: #14532d; animation: pulse 2s infinite; }
.category-card__marker--popular  { background: #fee2e2;        color: #991b1b; }
.category-card__marker--updated  { background: #0BADCF;    color: #0c4a6e; }
.category-card__marker--trending { background: linear-gradient(135deg, #fee2e2 0%, #fef3c7 100%); color: #92400e; }
.category-card__marker--ultrasonic           { background: #dbeafe; color: #1e3a5f; }
.category-card__marker--multi-jet            { background: #fed7aa; color: #7c2d12; }
.category-card__marker--built-in-transceiver { background: #ede9fe; color: #4c1d95; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}

/* =============================================
   LABELS CONTAINER
============================================= */

.category-card__labels {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
  overflow: visible;
}
.category-card__labels .category-card__badge,
.category-card__labels .category-card__marker { pointer-events: auto; }

/* =============================================
   ARTICLE LIST
============================================= */

.category-card__article-list {
  list-style: none;
  padding: 28px 0 0;
  margin: 0;
  border-top: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.category-card__article-list li {
  list-style: none;
  padding: 0;
  width: 100%;
}
.category-card__article-list a {
  display: inline-block;
  color: #3b82f6;
  border: 1.5px solid #3b82f6;
  border-radius: 20px;
  padding: 5px 17px;
  font-size: 17px;
  white-space: normal;
  word-break: break-word;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
  max-width: 100%;
  box-sizing: border-box;
}
.category-card__article-list a:hover {
  background: rgba(59, 130, 246, 0.08);
  text-decoration: none;
}

/* Current-version / large: horizontal row, left-aligned */
.category-card--current-version .category-card__article-list,
.category-card--large .category-card__article-list {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 33px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.category-card--current-version .category-card__article-list li,
.category-card--large .category-card__article-list li {
  flex: 0 0 auto;
  width: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
}
.category-card--current-version .category-card__article-list a,
.category-card--large .category-card__article-list a {
  color: var(--nc-achromatic-000);
  border-color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  word-break: normal;
}
.category-card--current-version .category-card__article-list a:hover,
.category-card--large .category-card__article-list a:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--nc-achromatic-000);
  text-decoration: none;
}

@container large-card (max-width: 560px) {
  .category-card__article-list {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  .category-card__article-list li {
    flex: none !important;
    width: auto !important;
    justify-content: flex-start !important;
  }
}

/* =============================================
   COMING SOON
============================================= */

.category-card--coming-soon {
  background: linear-gradient(135deg, #bfdbfe 0%, #dbeafe 50%, #e0f2fe 100%);
  border: 2px dashed #60a5fa;
  color: #1e3a5f;
}
.category-card--coming-soon:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.18);
  border-color: #3b82f6;
}
.category-card--coming-soon .category-card__title       { color: #1e3a5f; }
.category-card--coming-soon .category-card__description { color: #3b5a8a; }
.category-card--coming-soon .category-card__article-list { border-top-color: #bfdbfe; }
.category-card--coming-soon .category-card__article-list a { color: #2563eb; border-color: #93c5fd; }

.category-card--coming-soon .category-card__marker--ultrasonic { border: 1.5px solid #1e3a5f; }

/* =============================================
   NEW
============================================= */

.category-card--new {
  box-shadow: 0 0 0 3px #16a34a, 0 6px 20px rgba(22, 163, 74, 0.2);
  animation: nc-new-pulse 2.5s ease-in-out infinite;
}
.category-card--new:hover {
  box-shadow: 0 0 0 3px #16a34a, 0 8px 28px rgba(22, 163, 74, 0.35);
}
.category-card--current-version.category-card--new {
  box-shadow: 0 0 0 3px #4ade80, 0 6px 24px rgba(22, 163, 74, 0.3), 0 6px 16px rgba(5, 78, 130, 0.22);
}
.category-card--current-version.category-card--new:hover {
  box-shadow: 0 0 0 3px #4ade80, 0 10px 32px rgba(22, 163, 74, 0.45), 0 8px 24px rgba(5, 78, 130, 0.3);
}
@keyframes nc-new-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #16a34a, 0 6px 20px rgba(22, 163, 74, 0.2); }
  50%       { box-shadow: 0 0 0 4px #22c55e, 0 8px 28px rgba(34, 197, 94, 0.35); }
}

/* =============================================
   SKELETON SHIMMER
============================================= */

@keyframes nc-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.category-card--skeleton { pointer-events: none; }
.category-card--skeleton .category-card__skeleton-title,
.category-card--skeleton .category-card__skeleton-desc {
  border-radius: 4px;
  background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
  background-size: 800px 100%;
  animation: nc-shimmer 1.4s infinite linear;
}
.category-card--skeleton .category-card__skeleton-title { height: 18px; width: 65%; margin-bottom: 10px; }
.category-card--skeleton .category-card__skeleton-desc  { height: 13px; width: 90%;  margin-bottom: 6px;  }
.category-card--skeleton .category-card__skeleton-desc--short { width: 60%; }

/* =============================================
   COMPACT CONTAINER (desktop only)
============================================= */

@media (min-width: 992px) {
  .category-cards-container--compact {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
  .category-cards-container--compact .category-card       { padding: 20px; }
  .category-cards-container--compact .category-card__icon { max-width: 60px; max-height: 60px; }
}

/* =============================================
   MOBILE
============================================= */

@media (max-width: 767px) {

  .category-cards-container {
    grid-template-columns: 1fr;
    gap: 12px;
    container-type: inline-size;
    container-name: cards-container;
  }
  .category-card--featured { grid-column: span 1; }

  .category-cards-container:has(.category-card--large ~ .category-card--large) {
    grid-template-columns: 1fr;
  }
  .category-cards-container:has(.category-card--large ~ .category-card--large) .category-card--large {
    grid-column: 1 / -1;
  }

  /* ── Section cards (WITH article buttons) ── */

  .category-card:has(.category-card__article-list li) {
    display: grid;
    grid-template-columns: 160px 1fr auto; /* wider column for larger icons */
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "title    title    tags"
      "icon     articles articles";
    height: auto;
    min-height: unset;
    padding: 12px 12px 18px;
  }

  .category-card:has(.category-card__article-list li) .category-card__title {
    grid-area: title;
    order: unset;
    text-align: left;
    font-size: 16px;
    margin-bottom: 0;
    padding-bottom: 14px;
    padding-right: 8px;
    border-bottom: 1px solid #e2e8f0;
    align-self: end;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .category-card:has(.category-card__article-list li) .category-card__labels {
    grid-area: tags;
    position: static !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    align-items: center;
    align-self: end;
    gap: 4px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e2e8f0;
    pointer-events: auto;
    overflow: visible;
  }

  .category-card:has(.category-card__article-list li) .category-card__labels .category-card__badge,
  .category-card:has(.category-card__article-list li) .category-card__labels .category-card__marker {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    display: inline-flex !important;
    align-items: center;
    font-size: 9px;
    padding: 3px 8px;
    white-space: nowrap;
  }

  .category-card:has(.category-card__article-list li) .category-card__link {
    grid-area: icon;
    order: unset;
    flex: unset;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #e2e8f0;
    padding-right: 10px;
    padding-top: 10px;
  }

  .category-card:has(.category-card__article-list li) .category-card__icon-wrap {
    flex: unset !important;
    height: auto !important;
    min-height: 140px !important;
    max-height: 200px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    clip-path: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
  }

  .category-card:has(.category-card__article-list li) .category-card__icon {
    width: auto !important;
    height: auto !important;
    max-width: 90% !important;
    max-height: 160px !important; /* 64px × 2.5 */
    min-width: unset !important;
    min-height: unset !important;
    transform: none !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  .category-card:has(.category-card__article-list li) .category-card__article-list {
    grid-area: articles;
    order: unset;
    padding: 10px 0 0 12px !important;
    border-top: none !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  .category-card:has(.category-card__article-list li) .category-card__article-list li {
    flex: none !important;
    width: auto !important;
  }
  .category-card:has(.category-card__article-list li) .category-card__article-list a {
    font-size: 14px !important;
    padding: 4px 12px !important;
  }

  /* Outdoor/indoor ::after hidden on mobile; shown via marker instead */
  .category-card--outdoor:has(.category-card__article-list li)::after,
  .category-card--indoor:has(.category-card__article-list li)::after {
    display: none !important;
  }
  .category-card:has(.category-card__article-list li) .category-card__labels .category-card__marker--outdoor {
    display: inline-flex !important;
    background: #166534 !important;
    color: var(--nc-achromatic-000) !important;
  }
  .category-card:has(.category-card__article-list li) .category-card__labels .category-card__marker--indoor {
    display: inline-flex !important;
    background: #7c3aed !important;
    color: var(--nc-achromatic-000) !important;
  }

  /* Current-version: white dividers */
  .category-card--current-version:has(.category-card__article-list li) .category-card__title {
    border-bottom-color: rgba(255, 255, 255, 0.25);
    color: var(--nc-achromatic-000);
  }
  .category-card--current-version:has(.category-card__article-list li) .category-card__labels {
    border-bottom-color: rgba(255, 255, 255, 0.25);
  }
  .category-card--current-version:has(.category-card__article-list li) .category-card__link {
    border-right-color: rgba(255, 255, 255, 0.25);
  }

  /* Coming-soon: blue dividers */
  .category-card--coming-soon:has(.category-card__article-list li) .category-card__title {
    border-bottom-color: #93c5fd;
  }
  .category-card--coming-soon:has(.category-card__article-list li) .category-card__labels {
    border-bottom-color: #93c5fd;
  }
  .category-card--coming-soon:has(.category-card__article-list li) .category-card__link {
    border-right-color: #93c5fd;
  }

  /* ── Category cards (WITHOUT article buttons) ── */
  .category-card:not(:has(.category-card__article-list li)) .category-card__icon-wrap {
    height: 196px;
    padding: 46px 0 34px 0;
  }

  /* =============================================
     OVERFLOW PREVENTION via @container query
  ============================================= */

  @container cards-container (max-width: 500px) {

    .category-card:has(.category-card__article-list li) {
      grid-template-columns: 160px 1fr; /* match updated icon column width */
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "title    title"
        "icon     articles"
        "labels   labels";
    }

    .category-card:has(.category-card__article-list li) .category-card__title {
      padding-right: 0;
      border-bottom: 1px solid #e2e8f0;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      align-self: auto;
    }

    .category-card:has(.category-card__article-list li) .category-card__labels {
      grid-area: labels !important;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      align-items: center !important;
      align-self: auto !important;
      border-bottom: none !important;
      border-top: 1px solid #e2e8f0;
      padding-bottom: 0 !important;
      padding-top: 8px;
      margin-top: 6px;
      gap: 6px !important;
    }

    .category-card--current-version:has(.category-card__article-list li) .category-card__title {
      border-bottom-color: rgba(255, 255, 255, 0.25);
    }
    .category-card--current-version:has(.category-card__article-list li) .category-card__labels {
      border-top-color: rgba(255, 255, 255, 0.25);
      border-bottom: none !important;
    }

    .category-card--coming-soon:has(.category-card__article-list li) .category-card__title {
      border-bottom-color: #93c5fd;
    }
    .category-card--coming-soon:has(.category-card__article-list li) .category-card__labels {
      border-top-color: #93c5fd;
      border-bottom: none !important;
    }

  } /* end @container cards-container (max-width: 500px) */

  /* JS-applied class still supported if needed */
  .labels-at-bottom .category-card:has(.category-card__article-list li) {
    grid-template-columns: 160px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "title    title"
      "icon     articles"
      "labels   labels";
  }
  .labels-at-bottom .category-card:has(.category-card__article-list li) .category-card__title {
    padding-right: 0;
    border-bottom: 1px solid #e2e8f0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    align-self: auto;
  }
  .labels-at-bottom .category-card:has(.category-card__article-list li) .category-card__labels {
    grid-area: labels !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-self: auto !important;
    border-bottom: none !important;
    border-top: 1px solid #e2e8f0;
    padding-bottom: 0 !important;
    padding-top: 8px;
    margin-top: 6px;
    gap: 6px !important;
  }
  .labels-at-bottom .category-card--current-version:has(.category-card__article-list li) .category-card__title {
    border-bottom-color: rgba(255, 255, 255, 0.25);
  }
  .labels-at-bottom .category-card--current-version:has(.category-card__article-list li) .category-card__labels {
    border-top-color: rgba(255, 255, 255, 0.25);
    border-bottom: none !important;
  }
  .labels-at-bottom .category-card--coming-soon:has(.category-card__article-list li) .category-card__title {
    border-bottom-color: #93c5fd;
  }
  .labels-at-bottom .category-card--coming-soon:has(.category-card__article-list li) .category-card__labels {
    border-top-color: #93c5fd;
    border-bottom: none !important;
  }

} /* end @media (max-width: 767px) */

.article__header {
  margin-bottom: 3.5rem;
}

.article__title {
  margin: 0 0 1.5rem;
  line-height: 1.2;
}

/* phones and small tablets: a title that fits in two or three lines */
@media (max-width: 767px) {
  .article__title {
    font-size: 3rem;
    overflow-wrap: anywhere;
  }
}

.article__dates {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1.5rem;
  row-gap: 0.35rem;
  padding: 0.75rem 1.25rem;
  background: var(--nc-achromatic-100);
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  font-size: 1.60rem;
  color: #6b6b6b;
  line-height: 1.4;
}

.article__dates .article__date-label {
  font-weight: 600;
  margin-right: 0.25rem;
  color: #4a4a4a;
}

.article__dates .article__date-sep {
  color: #c8c8c8;
}

/* Published / Last updated beside the title, in the top right corner, when
   the whole title and the tile (on one line) fit side by side (script.js
   adds the class); otherwise the tile stays below the title */
.article__header--beside {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3.2rem;
}

.article__header--beside .article__title {
  margin-bottom: 0;
}

.article__header--beside .article__dates {
  flex: none;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.article__disclaimer {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e5e5;
  color: #6b6b6b;
}

.article__disclaimer p,
.article__disclaimer strong {
  font-size: 1.6rem;
  margin: 0;
  line-height: 1.4;
}

.article__disclaimer p {
  margin: 0;
}

.related-articles[hidden] {
  display: none;
}

.related-articles {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e5e5e5;
}

.related-articles__heading {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: #333;
}

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

.related-articles li {
  margin: 0.25rem 0;
}

.related-articles a {
  display: inline-block;
  padding: 0.35rem 0;
  text-decoration: none;
  color: #1a73e8;
}

.related-articles a:hover {
  text-decoration: underline;
}

.related-articles__section {
  display: inline-block;
  margin-right: 0.4rem;
  font-weight: 600;
  color: #6b6b6b;
}

.article__date-sep {
  color: #c8c8c8;
  font-weight: 400;
}

@media (max-width: 475px) {
  .article__date-sep {
    display: none;
  }
}

/* =========================================================
   Product page layout (Redesign preview)
   Applies only when script.js finds product sections
   (h2.product-section) in an article.
   ========================================================= */

/* ---- Button rows (shared) ---- */
.product-nav__list,
.product-header__list {
  position: relative;
  display: flex;
  gap: 0.8rem;
  margin: 0;
  padding: 0.2rem;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.product-nav__list::-webkit-scrollbar,
.product-header__list::-webkit-scrollbar {
  display: none;
}

.product-nav__list li,
.product-header__list li {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

/* ---- Scrollable button rows ----
   When the buttons don't all fit, the hidden end fades out and an
   arrow button appears there; clicking it scrolls the row. */
.product-row {
  position: relative;
}

.product-row.is-clipped-right .product-nav__list,
.product-row.is-clipped-right .product-header__list {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 100px), transparent calc(100% - 38px));
  mask-image: linear-gradient(to right, #000 calc(100% - 100px), transparent calc(100% - 38px));
}

.product-row.is-clipped-left .product-nav__list,
.product-row.is-clipped-left .product-header__list {
  -webkit-mask-image: linear-gradient(to right, transparent 38px, #000 100px);
  mask-image: linear-gradient(to right, transparent 38px, #000 100px);
}

.product-row.is-clipped-left.is-clipped-right .product-nav__list,
.product-row.is-clipped-left.is-clipped-right .product-header__list {
  -webkit-mask-image: linear-gradient(to right, transparent 38px, #000 100px, #000 calc(100% - 100px), transparent calc(100% - 38px));
  mask-image: linear-gradient(to right, transparent 38px, #000 100px, #000 calc(100% - 100px), transparent calc(100% - 38px));
}

.product-row__arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--nc-achromatic-000);
  cursor: pointer;
  background-color: #035486;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(5, 78, 130, 0.35);
  transform: translateY(-50%);
}

.product-row__arrow:hover {
  background-color: #023b5e;
}

.product-row__arrow--prev {
  left: 0;
}

.product-row__arrow--prev svg {
  transform: rotate(180deg);
}

.product-row__arrow--next {
  right: 0;
}

.product-row.is-clipped-left .product-row__arrow--prev,
.product-row.is-clipped-right .product-row__arrow--next {
  display: flex;
}

.product-nav__link,
.product-header__link {
  display: inline-block;
  font-weight: 600;
  line-height: 1.2;
  color: #035486;
  white-space: nowrap;
  text-decoration: none;
  background-color: var(--nc-achromatic-000);
  border: 1px solid #c9d6e2;
  border-radius: 4px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.product-nav__link:hover,
.product-nav__link:focus,
.product-header__link:hover,
.product-header__link:focus {
  color: #035486;
  text-decoration: none;
  background-color: #eef4f9;
  border-color: #035486;
}

.product-nav__link:focus-visible,
.product-header__link:focus-visible,
.product-header__title:focus-visible {
  outline: 3px solid #035486;
  outline-offset: 2px;
}

.product-nav__link.is-current,
.product-nav__link.is-current:hover,
.product-header__link.is-current,
.product-header__link.is-current:hover {
  color: var(--nc-achromatic-000);
  background-color: #035486;
  border-color: #035486;
}

/* ---- Full-size row under the title ---- */
.product-nav {
  margin: 2.4rem 0 1.6rem;
}

.product-nav__link {
  padding: 1rem 1.8rem;
  font-size: 1.5rem;
}

/* ---- Compact header that appears after scrolling ---- */
.product-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  background-color: #fff;
  border-bottom: 1px solid #e3e8ee;
  box-shadow: 0 10px 18px -16px rgba(5, 78, 130, 0.6);
  visibility: hidden;
  transform: translateY(-100%);
  transition: transform 0.22s ease, visibility 0s linear 0.22s;
}

.product-header.is-visible {
  visibility: visible;
  transform: translateY(0);
  transition: transform 0.22s ease;
}

.product-header__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  width: var(--ph-width, calc(100% - 30px));
  margin-left: var(--ph-left, 15px);
  padding: 0.9rem 0 1rem;
}

/* Title on its own line; long titles wrap rather than being cut off */
.product-header__title {
  align-self: flex-start;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.25;
  color: #035486;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.product-header__title:hover,
.product-header__title:focus {
  color: #035486;
  text-decoration: underline;
}

.product-header__nav {
  flex: 1 1 auto;
  min-width: 0;
}

.product-header__link {
  padding: 0.7rem 1.4rem;
  font-size: 1.4rem;
}

/* How far down the page the reader is */
.product-header__progress {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
}

.product-header__progress span {
  display: block;
  height: 100%;
  background-color: #0badcf;
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---- Sections ----
   Each section is a .product-block: a full-width divider with a short
   brand-blue bar marks where a new section starts, then a large heading. */
.product-block {
  position: relative;
  margin-top: 7.2rem;
  padding-top: 4rem;
  border-top: 1px solid #d5e0ea;
}

.product-block::before {
  position: absolute;
  top: -2px;
  left: 0;
  width: 6.4rem;
  height: 4px;
  content: "";
  background-color: #035486;
  border-radius: 2px;
}

.product-block:first-child,
.nc-availability + .product-block {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.product-block:first-child::before,
.nc-availability + .product-block::before {
  display: none;
}

/* the In development / Coming soon notice at the top of a product page:
   a little less space around it, and no divider between it and the
   Overview that follows (it's still the first section) */
.article__body > .nc-availability:first-child {
  margin-top: 0;
  margin-bottom: 3.2rem;
}

.article__body h2.product-section {
  margin: 0 0 2.8rem;
  padding: 0;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: #035486;
  border: 0;
  /* Land jumps so the divider above the heading is visible too */
  scroll-margin-top: calc(var(--product-nav-h, 64px) + 5.6rem);
}

.article__body h2.product-section:focus,
.article__title:focus {
  outline: none;
}

.article__body h3.product-subsection,
.article__body .faq-group > h2.product-subsection {
  margin: 4rem 0 1.6rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: #2a3440;
}

/* No space above a subsection only right under its section's title (or under
   the Overview, which has its own). Elsewhere, after a photo, an intro or a
   set of tabs, it keeps its 4rem so the page doesn't feel crowded. */
.article__body .product-block > h2.product-section + h3.product-subsection,
.article__body .product-overview + h3.product-subsection,
.article__body .spec-group > h3.product-subsection,
.article__body .faq-group:first-of-type > h3.product-subsection,
.article__body .faq-group:first-of-type > h2.product-subsection,
.article__body .doc-group:first-of-type > h3.product-subsection {
  margin-top: 0;
}

/* ---- Links on gray backgrounds ----
   Links use Blue-500 (4.8:1 on white). On the light gray panels Blue-500
   drops to about 4.4:1, so plain links there use Blue-700 (7.4:1).
   :where() keeps this at the same weight as the plain link rule, so links
   that have their own color keep it. */
:where(blockquote, .home-page .home-section, .product-keydocs, .doc-library__controls,
  .equipment__controls, .equipment__filters, .nc-guide, .nc-search__opt--answer,
  .nc-search__meta, .lib-empty, .article__dates, .callout, .note, .tabs--colored-1 .tab,
  .tabs--colored-2 .tab, .community-nav__item, .profile-header, .profile-nav,
  .profile-contribution, .satisfaction-box, .accordion__item-title--active) a {
  color: var(--nc-blue-700);
}

/* ---- Text alignment ----
   The theme indents every paragraph by 10px; in articles that puts text
   out of line with headings, so line everything up. :where() keeps these
   easy to override for styled lists and paragraphs. */
.article__body :where(p) {
  padding-left: 0;
}

.article__body :where(ul, ol) {
  padding-left: 2.4rem;
}

/* ---- Key documents strip (added by script.js above the first section) ---- */
.product-keydocs {
  margin: 4rem 0 0;
  padding: 1.6rem 2rem 2rem;
  background-color: var(--nc-achromatic-100);
  border-radius: 8px;
}

.article__body .product-keydocs__title {
  margin: 0 0 1.2rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  color: #2a3440;
}

.product-keydocs__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 1.2rem;
}

/* ---- Overview: product image beside the summary ---- */
.product-overview {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 4rem;
  align-items: center;
}

/* More of the Overview below the photo and intro (3rd Party Equipment Upgrade,
   Leak Monitoring): about as much space under the photo as above it */
.product-overview:has(+ .product-subsection) {
  margin-bottom: 2.8rem;
}

.product-overview__media p {
  margin: 0;
  text-align: center;
}

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

.product-overview__main > :first-child {
  margin-top: 0;
}

/* ---- Document links ----
   Flat markup: <a class="doc-card doc-card--pdf|--web">
     <span class="doc-card__title">…</span><span class="doc-card__action">View</span></a>
   The page icon (::before) and PDF/Web badge (::after) are drawn here.
   To use a real preview later, add <img class="doc-card__preview"> as the
   link's first child. */
.article__body a.doc-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 1.2rem;
  color: #2a3440;
  text-decoration: none;
  background-color: var(--nc-achromatic-000);
  border: 1px solid #d5e0ea;
  border-radius: 6px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.article__body a.doc-card:hover,
.article__body a.doc-card:focus {
  text-decoration: none;
  border-color: #035486;
  box-shadow: 0 2px 10px rgba(5, 78, 130, 0.14);
}

.article__body a.doc-card:focus-visible {
  outline: 3px solid #035486;
  outline-offset: 2px;
}

/* Page icon */
.article__body a.doc-card::before {
  flex: 0 0 auto;
  width: 3.6rem;
  height: 3.6rem;
  content: "";
  background-color: var(--nc-pdf-color);
  -webkit-mask: var(--nc-file-pdf) center / contain no-repeat;
  mask: var(--nc-file-pdf) center / contain no-repeat;
}

/* Documents with a type icon (set by script.js as --nc-doc-icon): the type's
   own icon in the icon color; plain PDFs keep the red PDF icon */
.article__body a.doc-card.doc-card--typed::before,
.article__body .doc-cards a.doc-card.doc-card--typed::after {
  background-color: var(--nc-icon-color);
  -webkit-mask-image: var(--nc-doc-icon);
  mask-image: var(--nc-doc-icon);
}

/* Web documents: the web-link icon, in the icon color */
.article__body a.doc-card--web::before {
  background-color: var(--nc-icon-color);
  -webkit-mask-image: var(--nc-file-web);
  mask-image: var(--nc-file-web);
}

.article__body a.doc-card::after {
  content: none;
}

.doc-card__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}

.doc-card__action {
  flex: 0 0 auto;
  font-size: 1.4rem;
  font-weight: 600;
  color: #035486;
}

.doc-card__preview {
  display: none;
}

.doc-rows {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-width: 64rem;
}

/* A document row placed in an article's text (a form in a how-to article):
   a little more room above and below than a paragraph gets */
.article__body > .doc-rows {
  margin: 2rem 0;
}

.doc-group + .doc-group {
  margin-top: 4rem;
}

/* Larger guide cards with a preview area */
.doc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: 1.6rem;
}

.article__body .doc-cards a.doc-card {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.article__body .doc-cards a.doc-card::before {
  width: auto;
  height: 14rem;
  background: #eef3f7;
  -webkit-mask: none;
  mask: none;
  border: 0;
  border-bottom: 1px solid #e3e8ee;
  border-radius: 0;
}

.article__body .doc-cards a.doc-card::after {
  position: absolute;
  top: 3.5rem;
  left: 50%;
  width: 7rem;
  height: 7rem;
  margin-left: -3.5rem;
  content: "";
  background-color: var(--nc-pdf-color);
  -webkit-mask: var(--nc-file-pdf) center / contain no-repeat;
  mask: var(--nc-file-pdf) center / contain no-repeat;
}

.article__body .doc-cards a.doc-card--web::after {
  background-color: var(--nc-icon-color);
  -webkit-mask-image: var(--nc-file-web);
  mask-image: var(--nc-file-web);
}

.article__body .doc-cards .doc-card__title {
  padding: 1.4rem 1.6rem 0.4rem;
}

.article__body .doc-cards .doc-card__action {
  padding: 0.4rem 1.6rem 1.4rem;
}

.article__body .doc-cards a.doc-card:has(.doc-card__preview)::before,
.article__body .doc-cards a.doc-card:has(.doc-card__preview)::after {
  display: none;
}

.article__body .doc-cards .doc-card__preview {
  display: block;
  width: 100%;
  height: 14rem;
  object-fit: cover;
  object-position: top;
  border-bottom: 1px solid #e3e8ee;
}

/* ---- Specifications ----
   Groups flow down two balanced columns, so a short group doesn't
   leave a gap beside a tall one. */
/* Specifications: each group is its own card. script.js splits the groups
   into two columns in page order, filling the left column first, so the left
   column is always the longer one (CSS columns alone can make the right longer). */
.spec-grid {
  column-count: 2;
  column-gap: 3.2rem;
}

.spec-grid.spec-grid--cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4rem 3.2rem;
  align-items: start;
  column-count: auto;
}

.spec-col {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  min-width: 0;
}

.spec-group {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 2.4rem;
  padding: 0 2rem 0.6rem;
  break-inside: avoid;
  background: var(--nc-achromatic-000);
  border: 1px solid #d5e0ea;
  border-radius: 10px;
}

.spec-grid--cols .spec-group {
  margin-bottom: 0;
}

/* the cards after the two columns keep the same space between them */
.spec-grid.spec-grid--cols {
  margin-bottom: 2.4rem;
}

/* a table that had no card (script.js gives it one): it may be wider than
   the page on phones, so it scrolls inside its card */
.spec-group.spec-group--table {
  display: block;
  overflow-x: auto;
}

.article__body .spec-group--table > h3.product-subsection.product-subsection {
  margin-top: 0;
}

.article__body .spec-group--table table.spec-table.spec-table--list {
  width: 100% !important;
}

/* a cell with several lines (script.js): one line each, a little apart */
.article__body .spec-table td.spec-lines .spec-line {
  display: block;
}

.article__body .spec-table td.spec-lines .spec-line + .spec-line {
  margin-top: 0.6rem;
}

.article__body .spec-table td.spec-lines strong {
  font-weight: 700;
  color: #2a3440;
}

html[data-theme="dark"] .article__body .spec-table td.spec-lines strong {
  color: var(--nc-text);
}

.article__body .spec-group > h3.product-subsection {
  margin: 0;
  padding: 1.4rem 0 1rem;
  font-size: 1.8rem;
  border-bottom: 2px solid var(--nc-blue-500);
}

.article__body .spec-group .spec-table tr:first-child th,
.article__body .spec-group .spec-table tr:first-child td {
  border-top: 0;
}

.article__body .spec-group .spec-table tr:last-child th,
.article__body .spec-group .spec-table tr:last-child td {
  border-bottom: 0;
}

/* The article editor wraps tables in <figure class="wysiwyg-table">;
   make that wrapper full width with no extra margins. */
.article__body .spec-group figure,
.article__body .spec-group .wysiwyg-table {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.article__body table.spec-table {
  width: 100% !important;
  min-width: 0;
  margin: 0;
  font-size: 1.5rem;
  border: 0;
  border-collapse: collapse;
}

.article__body .spec-table th,
.article__body .spec-table td {
  padding: 1.1rem 0;
  text-align: left;
  vertical-align: top;
  background: none;
  border: 0;
  border-bottom: 1px solid #e3e8ee;
}

.article__body .spec-table tr:first-child th,
.article__body .spec-table tr:first-child td {
  border-top: 1px solid #e3e8ee;
}

.article__body .spec-table th {
  width: 40%;
  padding-right: 1.6rem;
  font-weight: 600;
  color: #2a3440;
}

.article__body .spec-table td {
  color: #6B625E;
}

/* Comparison tables (one column per model, e.g. NextValve Models): room above,
   a fixed label column and equal columns for each model, only as wide as needed */
.article__body .product-block--specifications > .spec-grid ~ h3.product-subsection.product-subsection {
  margin-top: 4rem;
}

.article__body table.spec-table.spec-table--list {
  width: auto !important;
  min-width: min(100%, 60rem);
  max-width: 100%;
  table-layout: fixed;
}

.article__body table.spec-table--list th[scope="row"],
.article__body table.spec-table--list thead th:first-child {
  width: 18rem;
}

.article__body table.spec-table--list thead th:not(:first-child),
.article__body table.spec-table--list td {
  width: 14rem;
  padding-right: 1.6rem;
}

@media (max-width: 767px) {
  .article__body table.spec-table.spec-table--list {
    min-width: 0;
    width: 100% !important;
    table-layout: auto;
  }

  .article__body table.spec-table--list th[scope="row"],
  .article__body table.spec-table--list thead th:first-child {
    width: 40%;
  }
}

/* ---- Theme icons inside article text: <span class="nc-inline-icon"
   data-nc-icon="icon-heart" style="--nc-icon-size: 20px"></span>. These
   replace small icon images, so they follow the theme colors in both modes.
   data-nc-tone keeps an icon's meaning color (utility types: hot water red,
   gas green...) in a shade that meets 3:1 contrast in light and dark mode. */
.article__body .nc-inline-icon {
  display: inline-block;
  width: var(--nc-icon-size, 1.25em);
  height: var(--nc-icon-size, 1.25em);
  margin: 0 0.15em;
  vertical-align: -0.22em;
  line-height: 0;
}

.article__body .nc-inline-icon .nc-icon {
  width: 100%;
  height: 100%;
}

/* centered on the text line; icon headings (Health and security alerts) */
.article__body .nc-inline-icon {
  vertical-align: middle;
  position: relative;
  top: -0.08em;
}

.article__body h1 .nc-inline-icon,
.article__body h2 .nc-inline-icon,
.article__body h3 .nc-inline-icon,
.article__body h4 .nc-inline-icon,
.article__body .accordion__item-title .nc-inline-icon {
  top: -0.04em;
  margin-right: 0.35em;
}

/* an icon alone in a table cell (Manual Read App utility types, report lists):
   centered in the cell both ways (script.js marks these cells) */
.article__body .nc-icon-cell {
  text-align: center;
  vertical-align: middle;
}

.article__body .nc-icon-cell .nc-inline-icon {
  display: block;
  top: 0;
  margin: 0 auto;
}

/* Spec tables with an icon column (icon | name | description), as in Run,
   schedule, and download reports. Narrow phones drop the icons and stack the
   name above the description like other spec tables. */
.article__body table.spec-table--icons td:first-child {
  width: 48px;
  padding-right: 12px;
}

.article__body table.spec-table--icons th {
  width: 34%;
}

.article__body table.spec-table--icons th,
.article__body table.spec-table--icons td {
  vertical-align: middle;
}

/* Services table in Subscriptions and Payments: icon | name | description, price
   and a What's included toggle; full width, roomy rows, names next to their text */
.article__body table.spec-table--services {
  margin-top: 2.4rem;
}

.article__body table.spec-table--services th {
  width: 18%;
}

.article__body table.spec-table--services th,
.article__body table.spec-table--services td {
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
  vertical-align: top;
}

.article__body table.spec-table--services td:first-child {
  padding-top: 2.1rem;
}

.article__body table.spec-table--services .accordion {
  margin: 1.6rem 0 0;
}

/* groups that become cards on narrow phones (below): plain on wider screens */
.article__body .nc-box-phone + .nc-box-phone {
  margin-top: 3.2rem;
}

/* Headings and steps that links jump to land a little below the top of the
   screen, not flush against it (product pages set their own margin) */
html:not(.is-product-page) .article__body :is(h2, h3, h4, .step)[id] {
  scroll-margin-top: 2.4rem;
}

/* A card around one section of an article, to set it apart from its
   neighbours (each alert in View and resolve alerts):
   <div class="nc-section-card"><h2 id="...">...</h2>...</div> */
.article__body .nc-section-card {
  margin: 2.4rem 0;
  padding: 0.4rem 2.4rem 1.6rem;
  background: var(--nc-achromatic-000);
  border: 1px solid #d5e0ea;
  border-radius: 10px;
}

.article__body .nc-section-card > h2:first-child {
  margin-top: 2rem;
}

html[data-theme="dark"] .article__body .nc-section-card {
  background: var(--nc-surface);
  border-color: var(--nc-border);
}

@media (max-width: 599px) {
  .article__body .nc-section-card {
    padding: 0.4rem 1.6rem 1.2rem;
  }
}

/* Article opened at a section: hidden for a moment until it's scrolled into
   place (document_head.hbs adds the class, script.js removes it) */
html.nc-arriving body {
  visibility: hidden;
}

/* On this page: links to the article's sections, under the intro.
   <div class="nc-toc" role="navigation" aria-label="On this page">
   <p class="nc-toc__title">On this page</p><ul><li><a href="#id">...</a></li></ul>
   </div>. Two columns on wide screens, one on phones. */
.article__body .nc-toc {
  max-width: 860px;
  margin: 2.4rem 0 3.2rem;
  padding: 1.6rem 2rem 1.2rem;
  background: #f8fafc;
  border: 1px solid #d5e0ea;
  border-left: 4px solid #035486;
  border-radius: 6px;
}

.article__body .nc-toc__title {
  margin: 0 0 0.6rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4f5f6e;
}

.article__body .nc-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 3.2rem;
}

.article__body .nc-toc li {
  margin: 0;
  padding: 0.4rem 0;
  break-inside: avoid;
}

.article__body .nc-toc li::before {
  content: none;
}

.article__body .nc-toc a {
  display: inline-flex;
  gap: 0.8rem;
  text-decoration: none;
}

/* down arrow (icon-arrow-down, in the link color): the link goes further
   down this page */
.article__body .nc-toc a::before {
  flex: none;
  width: 1.8rem;
  height: 1.8rem;
  margin-top: 0.45rem;
  content: "";
  background-color: currentColor;
  -webkit-mask: var(--nc-arrow-down) center / contain no-repeat;
  mask: var(--nc-arrow-down) center / contain no-repeat;
}

.article__body .nc-toc a:hover,
.article__body .nc-toc a:focus-visible {
  text-decoration: underline;
}

html[data-theme="dark"] .article__body .nc-toc {
  background: var(--nc-surface);
  border-color: var(--nc-border);
  border-left-color: var(--nc-accent);
}

html[data-theme="dark"] .article__body .nc-toc__title {
  color: var(--nc-muted);
}

@media (max-width: 599px) {
  .article__body .nc-toc ul {
    columns: 1;
  }
}

/* hidden on narrow phones, where spec tables stack (the report list
   headings in Run, schedule, and download reports) */
@media (max-width: 479px) {
  .article__body .nc-hide-phone,
  .article__body table.spec-table--icons td:first-child {
    display: none !important;
  }

  /* a card around a group (each report category), like the feature cards */
  .article__body .nc-box-phone,
  .article__body .nc-box-phone + .nc-box-phone {
    margin: 1.6rem 0;
    padding: 1.6rem 1.6rem 0.4rem;
    background: var(--nc-achromatic-000);
    border: 1px solid #d5e0ea;
    border-radius: 10px;
  }

  .article__body .nc-box-phone > :first-child,
  .article__body .nc-box-phone > .nc-hide-phone:first-child + * {
    margin-top: 0;
  }

  .article__body .nc-box-phone tr:last-child th,
  .article__body .nc-box-phone tr:last-child td {
    border-bottom: 0;
  }

  html[data-theme="dark"] .article__body .nc-box-phone {
    background: var(--nc-surface);
    border-color: var(--nc-border);
  }
}

/* Layout tables inside accordion titles (icon | name | description, as in Health
   and security alerts and the report lists): cells centered on one line; on
   phones the icon and name share a row and the description goes underneath */
.article__body .accordion__item-title table td {
  vertical-align: middle;
}

@media (max-width: 767px) {
  .article__body .accordion__item-title figure.wysiwyg-table,
  .article__body .accordion__item-title table,
  .article__body .accordion__item-title tbody {
    display: block;
    width: 100% !important;
    margin: 0;
  }

  .article__body .accordion__item-title tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 1.2rem;
    row-gap: 0.4rem;
  }

  .article__body .accordion__item-title td {
    display: block;
    width: auto !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .article__body .accordion__item-title td:nth-child(n+3) {
    grid-column: 1 / -1;
  }

  .article__body .accordion__item-title td .wysiwyg-font-size-large {
    font-size: 2rem;
  }

  .article__body .accordion__item-title td,
  .article__body .accordion__item-title td span {
    line-height: 1.4;
  }

  .article__body .accordion__item-title td .wysiwyg-font-size-small {
    font-size: 1.5rem;
  }

  .article__body .accordion__item-title .nc-inline-icon {
    width: 32px !important;
    height: 32px !important;
  }
}

/* screenshots written inside an instruction line go below it */
.article__body img.nc-img-own-line {
  display: block;
  margin: 1.2rem 0;
}

.article__body .wysiwyg-text-align-center img.nc-img-own-line,
.article__body p[style*="center"] img.nc-img-own-line {
  margin-right: auto;
  margin-left: auto;
}

:root {
  --nc-tone-water: var(--nc-blue-500);
  --nc-tone-cold: var(--nc-blue-500);
  --nc-tone-hot: var(--nc-red-500);
  --nc-tone-thermal: var(--nc-red-500);
  --nc-tone-gas: var(--nc-green-700);
  --nc-tone-runtime: var(--nc-violet-700);
  --nc-tone-electric: #8a7524;   /* Yellow-700 darkened to reach 3:1 on white (Yellow-700 is 2.9:1) */
  --nc-tone-muted: var(--nc-achromatic-700);
}

html[data-theme="dark"] {
  --nc-tone-water: var(--nc-blue-300);
  --nc-tone-cold: var(--nc-blue-300);
  --nc-tone-hot: var(--nc-red-300);
  --nc-tone-thermal: var(--nc-red-300);
  --nc-tone-gas: var(--nc-green-300);
  --nc-tone-runtime: var(--nc-violet-300);
  --nc-tone-electric: var(--nc-yellow-500);
  --nc-tone-muted: var(--nc-achromatic-500);
}

[data-nc-tone="water"] .nc-icon { background-color: var(--nc-tone-water); }
[data-nc-tone="cold"] .nc-icon { background-color: var(--nc-tone-cold); }
[data-nc-tone="hot"] .nc-icon { background-color: var(--nc-tone-hot); }
[data-nc-tone="thermal"] .nc-icon { background-color: var(--nc-tone-thermal); }
[data-nc-tone="gas"] .nc-icon { background-color: var(--nc-tone-gas); }
[data-nc-tone="runtime"] .nc-icon { background-color: var(--nc-tone-runtime); }
[data-nc-tone="electric"] .nc-icon { background-color: var(--nc-tone-electric); }
[data-nc-tone="muted"] .nc-icon { background-color: var(--nc-tone-muted); }

/* ---- Dimensions (product Specifications): the dimension drawing next to its
   numbers, or above them for a wide model table (.nc-dims--stacked) ---- */
.article__body .nc-dims {
  margin: 4rem 0 0;
}

.nc-dims__body {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 2.4rem;
  align-items: center;
}

.nc-dims--stacked .nc-dims__body {
  grid-template-columns: minmax(0, 1fr);
}

.article__body .nc-dims__figure {
  margin: 0;
  padding: 1.6rem;
  background: var(--nc-achromatic-000);
  border: 1px solid #d5e0ea;
  border-radius: 10px;
}

.article__body .nc-dims__figure img {
  display: block;
  width: 100%;
  max-width: 80rem;
  height: auto;
  margin: 0 auto;
}

.nc-dims--stacked .nc-dims__figure img {
  max-width: 64rem;
}

/* the model table: header row and label column stand out */
.article__body .nc-dims table.spec-table--list thead th {
  font-size: 1.6rem;
  font-weight: 700;
  color: #2a3440;
  background: var(--nc-achromatic-100);
}

.article__body .nc-dims table.spec-table--list tbody th {
  font-weight: 700;
  color: #2a3440;
  background: var(--nc-achromatic-100);
}

/* a model table too wide for the screen scrolls inside .nc-table-scroll,
   with its label column pinned */
.article__body .nc-table-scroll table.spec-table--list tbody th,
.article__body .nc-table-scroll table.spec-table--list thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}

.article__body .nc-table-scroll table.spec-table--list td,
.article__body .nc-table-scroll table.spec-table--list thead th:not(:first-child) {
  white-space: nowrap;
}

.article__body .nc-table-scroll:focus-visible {
  outline: 2px solid var(--nc-icon-color);
  outline-offset: 2px;
}

.article__body .nc-dims table.spec-table--list th,
.article__body .nc-dims table.spec-table--list td {
  padding: 1.1rem 1.4rem;
}

@media (max-width: 767px) {
  .nc-dims__body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* the drawing has dark labels on white, so it keeps a white panel in dark mode */
html[data-theme="dark"] .article__body .nc-dims__figure {
  border-color: var(--nc-border);
}

html[data-theme="dark"] .article__body .nc-dims table.spec-table--list thead th,
html[data-theme="dark"] .article__body .nc-dims table.spec-table--list tbody th {
  color: var(--nc-heading);
  background: var(--nc-surface-2);
}

/* ---- Role lists: each role is a collapsible card (<details class="nc-role">),
   closed by default; sub-roles (.nc-role--sub) show inside when it opens ---- */
.nc-roles {
  display: grid;
  gap: 1rem;
  margin: 2.4rem 0;
}

details.nc-role {
  background: var(--nc-achromatic-000);
  border: 1px solid #d5e0ea;
  border-radius: 10px;
}

.nc-role__summary {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.2rem 1.6rem;
  cursor: pointer;
  list-style: none;
  border-radius: 10px;
}

.nc-role__summary::-webkit-details-marker {
  display: none;
}

/* plus that turns into an x when the card is open (same as the FAQ) */
.nc-role__summary::after {
  content: "";
  flex: 0 0 auto;
  width: 2.8rem;
  height: 2.8rem;
  margin-left: auto;
  background:
    linear-gradient(var(--nc-blue-700), var(--nc-blue-700)) center / 1.4rem 2px no-repeat,
    linear-gradient(var(--nc-blue-700), var(--nc-blue-700)) center / 2px 1.4rem no-repeat,
    var(--nc-blue-100);
  border-radius: 50%;
  transition: transform 0.2s ease;
}

details.nc-role[open] > .nc-role__summary::after {
  transform: rotate(45deg);
}

.nc-role__summary:hover .nc-role__name {
  color: var(--nc-blue-700);
}

.nc-role__summary:focus-visible {
  outline: 3px solid var(--nc-blue-500);
  outline-offset: 2px;
}

.nc-role__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  background: var(--nc-blue-100);
  border-radius: 50%;
}

.nc-role__icon .nc-icon {
  width: 2.6rem;
  height: 2.6rem;
}

.article__body .nc-role__name {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
  color: #2a3440;
}

.nc-role__content {
  padding: 0 1.6rem 1.6rem calc(1.6rem + 4.4rem + 1.4rem);
}

.article__body .nc-role__content p {
  margin: 0 0 0.8rem;
}

.nc-role__subs {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.2rem;
}

.nc-role--sub {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  gap: 1.2rem;
  padding: 1.2rem 1.4rem;
  background: var(--nc-achromatic-100);
  border-radius: 8px;
}

.nc-role--sub .nc-role__icon {
  width: 3.6rem;
  height: 3.6rem;
  background: var(--nc-achromatic-000);
}

.nc-role--sub .nc-role__icon .nc-icon {
  width: 2.2rem;
  height: 2.2rem;
}

.article__body .nc-role--sub .nc-role__name {
  margin: 0.5rem 0 0.4rem;
  font-size: 1.6rem;
}

@media (max-width: 599px) {
  .nc-role__summary {
    gap: 1rem;
    padding: 1rem 1.2rem;
  }

  .nc-role__icon {
    width: 3.6rem;
    height: 3.6rem;
  }

  .nc-role__content {
    padding: 0 1.2rem 1.2rem;
  }
}

html[data-theme="dark"] details.nc-role {
  background: var(--nc-surface);
  border-color: var(--nc-border);
}

html[data-theme="dark"] .article__body .nc-role__body a {
  color: #4fb3eb;
}

/* A wide diagram (the cellular billing timeline): room above and below */
.article__body .nc-diagram {
  margin: 3.2rem 0;
}

/* A short reference table (utility types, reasons) sized to its content
   instead of the full article width, with room above it */
.article__body table.spec-table.spec-table--compact {
  width: auto !important;
  max-width: 100%;
  margin: 2.4rem 0;
}

.article__body table.spec-table--compact th,
.article__body table.spec-table--compact td {
  padding-right: 3.2rem;
}

/* An article that ends with an FAQ list already has a line under its last
   question: drop the line above "Keep exploring" so the two don't double up */
.article:has(> .article__body > .product-block--faq:last-child) ~ .nc-related {
  border-top: 0;
}

html[data-theme="dark"] .nc-role__icon {
  background: var(--nc-bg);
}

html[data-theme="dark"] .article__body .nc-role__name {
  color: var(--nc-heading);
}

html[data-theme="dark"] .nc-role__summary:hover .nc-role__name {
  color: var(--nc-accent);
}

html[data-theme="dark"] .nc-role__summary::after {
  background:
    linear-gradient(var(--nc-blue-300), var(--nc-blue-300)) center / 1.4rem 2px no-repeat,
    linear-gradient(var(--nc-blue-300), var(--nc-blue-300)) center / 2px 1.4rem no-repeat,
    var(--nc-bg);
}

html[data-theme="dark"] .nc-role--sub {
  background: var(--nc-surface-2);
}

/* ---- Feature cards (NCSS Mobile App): icon, title and a short description,
   2 x 2 on wide screens, stacked on narrow ones. Same look as the role cards ---- */
.nc-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  margin: 2.4rem 0;
}

.nc-feature {
  padding: 2rem;
  background: var(--nc-achromatic-000);
  border: 1px solid #d5e0ea;
  border-radius: 10px;
}

.nc-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  margin-bottom: 1.2rem;
  background: var(--nc-blue-100);
  border-radius: 50%;
}

.nc-feature__icon .nc-icon {
  width: 2.4rem;
  height: 2.4rem;
}

.article__body .nc-feature__title {
  margin: 0 0 0.6rem;
  font-size: 1.8rem;
  font-weight: 700;
  color: #2a3440;
}

.article__body .nc-feature p {
  margin: 0;
}

@media (max-width: 699px) {
  .nc-features {
    grid-template-columns: minmax(0, 1fr);
  }

  .nc-feature {
    padding: 1.6rem;
  }
}

html[data-theme="dark"] .nc-feature {
  background: var(--nc-surface);
  border-color: var(--nc-border);
}

html[data-theme="dark"] .nc-feature__icon {
  background: var(--nc-bg);
}

html[data-theme="dark"] .article__body .nc-feature__title {
  color: var(--nc-heading);
}

.article__body h2.nc-perm__heading {
  margin: 4rem 0 1.2rem;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.3;
}

/* ---- Permission tables (table.nc-perm__table inside .nc-perm) ----
   The box scrolls both ways inside itself, so the header row stays at the
   top and the permission column (with the group names) stays at the left,
   at every screen width. A "Show" menu narrows it to one role on phones. */
.nc-perm {
  position: relative;      /* keeps the screen-reader-only text inside the box */
  max-width: 100%;
  max-height: min(75vh, 72rem);
  margin: 1.2rem 0 2.4rem;
  overflow: auto;
  border: 1px solid #d5e0ea;
  border-radius: 10px;
}

.nc-perm:focus-visible {
  outline: 3px solid var(--nc-blue-500);
  outline-offset: 2px;
}

.article__body table.nc-perm__table {
  width: 100% !important;
  min-width: 64rem;
  margin: 0;
  font-size: 1.6rem;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.article__body .nc-perm__table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  color: inherit;
}

/* Links inside a role card sit on its tinted panel: brand blue in light mode,
   a lighter blue in dark mode, so they pass 4.5:1 in both */
.article__body .nc-role__body a {
  color: #035486;
}

.article__body .nc-perm__table th,
.article__body .nc-perm__table td {
  padding: 1rem 1.2rem;
  text-align: center;
  vertical-align: middle;
  background: var(--nc-achromatic-000);
  border: 0;
  border-bottom: 1px solid #e3e8ee;
}

.article__body .nc-perm__table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  vertical-align: bottom;
  color: #2a3440;
  background: var(--nc-achromatic-100);
  box-shadow: 0 1px 0 #d5e0ea;
}

.article__body .nc-perm__table th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 19rem;
  text-align: left;
  font-weight: 600;
  box-shadow: 1px 0 0 #e3e8ee;
}

.article__body .nc-perm__table thead th:first-child {
  z-index: 3;
  box-shadow: 1px 1px 0 #d5e0ea;
}

.article__body .nc-perm__table tr.nc-perm__group > * {
  padding-top: 1.4rem;
  background: var(--nc-blue-100);
}

.article__body .nc-perm__table tr.nc-perm__group th {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nc-blue-700);
}

.article__body .nc-perm__table tbody tr:last-child > * {
  border-bottom: 0;
}

.nc-perm__yes .nc-icon,
.nc-perm__no .nc-icon {
  width: 2.2rem;
  height: 2.2rem;
  vertical-align: middle;
}

/* icon-check in the icon color; icon-minus in muted gray (Achromatic-700
   on white 6.2:1, Achromatic-500 on dark 9:1) */
.nc-perm__no .nc-icon {
  background-color: var(--nc-achromatic-700);
}

.nc-perm__table--one {
  min-width: 0 !important;
}

.nc-perm__filter {
  display: none;
  align-items: center;
  gap: 0.8rem;
  margin: 1.2rem 0 0;
  font-weight: 600;
}

.nc-perm__filter select {
  min-height: 4rem;
  padding: 0 1rem;
  font: inherit;
  border: 1px solid #8a9aa9;
  border-radius: 6px;
}

@media (max-width: 767px) {
  .nc-perm__filter {
    display: flex;
  }
}

html[data-theme="dark"] .nc-perm {
  border-color: var(--nc-border);
}

html[data-theme="dark"] .article__body .nc-perm__table th,
html[data-theme="dark"] .article__body .nc-perm__table td {
  color: var(--nc-text);
  background: var(--nc-surface);
  border-bottom-color: var(--nc-border);
}

html[data-theme="dark"] .article__body .nc-perm__table thead th {
  color: var(--nc-heading);
  background: var(--nc-surface-2);
  box-shadow: 0 1px 0 var(--nc-border);
}

html[data-theme="dark"] .article__body .nc-perm__table th:first-child {
  box-shadow: 1px 0 0 var(--nc-border);
}

html[data-theme="dark"] .article__body .nc-perm__table tr.nc-perm__group > * {
  background: var(--nc-bg);
}

html[data-theme="dark"] .article__body .nc-perm__table tr.nc-perm__group th {
  color: var(--nc-blue-300);
}

html[data-theme="dark"] .nc-perm__no .nc-icon {
  background-color: var(--nc-achromatic-500);
}

html[data-theme="dark"] .nc-perm__filter select {
  color: var(--nc-text);
  background: var(--nc-surface);
  border-color: #6b8094;
}

/* ---- Installation steps: always visible, numbered, connected ---- */
.steps {
  counter-reset: product-step;
  margin: 0 0 1.6rem;
}

.step {
  position: relative;
  padding-left: 5.6rem;
  counter-increment: product-step;
}

.step + .step {
  margin-top: 4rem;
}

/* Number */
.step::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--nc-achromatic-000);
  content: counter(product-step);
  background-color: #035486;
  border-radius: 50%;
}

/* Line to the next step: starts right at the bottom of the number and stops
   0.8rem short of the next one (the gap between steps minus 0.8rem) */
	.step::after {
  position: absolute;
  top: 3.6rem;
  bottom: -3.2rem;
  left: 1.7rem;
  width: 2px;
  content: "";
  background-color: #c9d6e2;
}

.step:last-child::after {
  display: none;
}

.step__card {
  padding: 0.3rem 0 0;
}

.article__body .step__title {
  margin: 0 0 1.2rem;
  padding: 0;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  color: #2a3440;
}

.article__body .step__instruction {
  margin: 2.4rem 0 1rem;
  font-weight: 600;
  color: #2a3440;
}

/* Steps written as one instruction each (NextCity guides): regular weight,
   the number lines up with the first line of text */
.article__body .step--plain .step__instruction {
  margin: 0.5rem 0 1rem;
  font-weight: 400;
  color: inherit;
}

.step--plain + .step--plain {
  margin-top: 2.4rem;
}

.step--plain::after {
  bottom: -1.6rem;
}

html[data-theme="dark"] .article__body .step--plain .step__instruction {
  color: var(--nc-text);
}

.article__body .step__body > :first-child {
  margin-top: 0;
}

/* Images line up with the step text and stop at a comfortable size */
.article__body .step__body p.wysiwyg-text-align-center,
.article__body .step__body figure {
  text-align: left;
}

.article__body .step__body figure.wysiwyg-image {
  width: auto !important;
  margin: 0;
}

.article__body .step__body img {
  display: block;
  width: auto;
  max-width: min(100%, 56rem);
  height: auto;
  margin: 0;
  padding: 0;   /* the theme pads .article-img images by 50px top and bottom */
}

.article__body .step__body p:has(> img) {
  margin: 1.2rem 0 0;
}

/* What's in the box and other section-level images */
.article__body .product-block--installation > p img,
.article__body .product-block--installation > figure img {
  max-width: min(100%, 64rem);
  height: auto;
}

.step__body .note {
  margin-bottom: 0;
}

/* ---- Tabs (Web Portal / Mobile App) as a simple switch ---- */
.product-block .tabs-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0 0 2.4rem;
  white-space: normal;
}

/* phones: tab buttons stack in one column, full width, instead of wrapping
   into a mix of rows */
@media (max-width: 599px) {
  .product-block .tabs-menu {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.6rem;
  }

  .article__body .product-block .tabs-link {
    display: block;
    width: 100%;
    text-align: left;
  }

  .article__body .product-block .tabs-link + .tabs-link {
    margin-top: 0.6rem;
  }
}

.article__body .product-block .tabs-link {
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
  padding: 0.9rem 1.8rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: #035486;
  cursor: pointer;
  background-color: var(--nc-achromatic-000);
  border: 1px solid #c9d6e2;
  border-radius: 4px;
}

.article__body .product-block .tabs-link:hover {
  color: #035486;
  background-color: #eef4f9;
  border-color: #035486;
}

.article__body .product-block .tabs-link.is-active,
.article__body .product-block .tabs-link.is-active:hover {
  color: var(--nc-achromatic-000);
  background-color: #035486;
  border-color: #035486;
}

.product-block .tab {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

/* ---- Toggle buttons inside accordion titles (added by script.js) ---- */
.accordion__toggle {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 2px;
  -webkit-appearance: none;
  appearance: none;
}

.accordion__toggle:focus {
  outline: none;
}

.accordion__toggle:focus-visible {
  outline: 3px solid #035486;
  outline-offset: 4px;
}

/* Tab buttons (added by script.js inside each tab label) */
.tabs-toggle {
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
}

.tabs-toggle:focus {
  outline: none;
}

.tabs-toggle:focus-visible {
  outline: 3px solid #035486;
  outline-offset: 6px;
}

.tab:focus {
  outline: none;
}

.tab:focus-visible {
  outline: 3px solid #035486;
  outline-offset: 4px;
}

/* ---- FAQ ----
   Topic headings are larger and bolder; questions are regular weight,
   so the two levels read differently. */
.faq-group + .faq-group {
  margin-top: 6.4rem;
}

.article__body .faq-group > h3.product-subsection,
.article__body .faq-group > h2.product-subsection {
  margin-bottom: 1.2rem;
  font-size: 2.2rem;
}

.product-block--faq .accordion {
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #e3e8ee;
  border-radius: 0;
}

.product-block--faq h3 + .accordion {
  border-top: 1px solid #e3e8ee;
}

.product-block--faq .accordion__item-title,
.product-block--faq .accordion--default .accordion__item-title--active {
  display: block;
  padding: 1.6rem 5.6rem 1.6rem 0 !important;
  font-size: 1.7rem !important;
  font-weight: 400;
  line-height: 1.45;
  color: #33414e;
  white-space: normal;
  background: none;
  border: 0 !important;
}

.product-block--faq .accordion__item-title:hover,
.product-block--faq .accordion--default .accordion__item-title.accordion__item-title--active {
  color: #035486;
}

.product-block--faq .accordion--default .accordion__item-title.accordion__item-title--active {
  font-weight: 600;
}



/* Replace the old left chevron with a plus that turns into an x */
.product-block--faq .accordion--default .accordion__item-title:before {
  display: none;
}

.product-block--faq .accordion__item-title:after {
  position: absolute;
  top: 50%;
  right: 0.4rem;
  width: 3.2rem;
  height: 3.2rem;
  margin-top: -1.6rem;
  content: "";
  color: #035486;
  background:
    linear-gradient(currentColor, currentColor) center / 1.4rem 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 1.4rem no-repeat,
    #eef4f9;
  border-radius: 50%;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.product-block--faq .accordion__item-title--active:after {
  color: var(--nc-achromatic-000);
  background-color: #035486;
  transform: rotate(45deg);
}

.product-block--faq .accordion__item-content {
  padding: 0 !important;
  font-size: 1.6rem !important;
  border: 0;
}

/* Smooth open/close (script.js adds .faq-panel and .faq-answer).
   The panel animates between zero and its natural height. */
.product-block--faq .accordion__item .accordion__item-content.faq-panel {
  display: grid !important;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.28s ease, visibility 0s linear 0.28s;
}

.product-block--faq .accordion__item.is-open .accordion__item-content.faq-panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.28s ease, visibility 0s linear 0s;
}

.product-block--faq .faq-panel--instant {
  transition: none !important;
}

/* The answer: indented, with a small hooked arrow pointing at it
   from the question, and slightly softer text than the question */
.product-block--faq .faq-answer {
  position: relative;
  min-height: 0;
  overflow: hidden;
  padding: 0 5.6rem 0 3.6rem;
  color: #6B625E;
}

.product-block--faq .faq-answer > :first-child {
  margin-top: 0;
}

.product-block--faq .faq-answer > :last-child {
  margin-bottom: 2.4rem;
}

.product-block--faq .faq-answer::before {
  position: absolute;
  top: 0;
  left: 0.8rem;
  width: 1.6rem;
  height: 1.3rem;
  content: "";
  border-bottom: 2px solid #9fb6c9;
  border-left: 2px solid #9fb6c9;
  border-bottom-left-radius: 6px;
}

.product-block--faq .faq-answer::after {
  position: absolute;
  top: 0.85rem;
  left: 2.2rem;
  width: 0;
  height: 0;
  content: "";
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid #9fb6c9;
}

/* The theme sets every paragraph to 18px; keep answers the same size
   as the rest of the FAQ */
.product-block--faq .accordion__item-content p,
.product-block--faq .accordion__item-content li {
  font-size: 1.6rem;
}

/* ---- Tablet ---- */
@media (max-width: 991px) {
  .product-header__title {
    font-size: 1.8rem;
  }

  .product-overview {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3.2rem;
  }
}

/* ---- Phone ---- */
@media (max-width: 767px) {
  .product-nav__link {
    padding: 0.9rem 1.4rem;
    font-size: 1.4rem;
  }

  .product-header__inner {
    gap: 0.5rem;
    padding: 0.7rem 0 0.8rem;
  }

  .product-header__title {
    font-size: 1.6rem;
  }

  .product-row__arrow {
    width: 32px;
    height: 32px;
  }

  .product-header__link {
    padding: 0.6rem 1.2rem;
    font-size: 1.35rem;
  }

  .article__body h2.product-section {
    font-size: 2.6rem;
  }

  .product-block {
    margin-top: 5.6rem;
    padding-top: 3.2rem;
  }

  .product-keydocs {
    margin-right: -15px;
    margin-left: -15px;
    padding: 1.6rem 15px;
    border-radius: 0;
  }

  .product-keydocs__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem;
  }

  .product-overview {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
  }

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

  .spec-grid {
    column-count: 1;
  }

  .spec-grid.spec-grid--cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .spec-group {
    margin-bottom: 2rem;
    padding: 0 1.4rem 0.4rem;
  }

  /* Two-column lists (e.g. What's in the box) stack on phones */
  .product-block .column-container {
    flex-direction: column;
  }

  .product-block .column-container > .column {
    float: none;
    width: auto;
  }

  .step {
    padding-left: 4.4rem;
  }

  .step::before {
    top: 0.1rem;
    width: 3rem;
    height: 3rem;
    font-size: 1.4rem;
  }

  .step::after {
    top: 3.1rem;
    left: 1.4rem;
  }

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

  .article__body .step__title {
    font-size: 1.8rem;
  }

  .faq-group + .faq-group {
    margin-top: 4.8rem;
  }

  .article__body .faq-group > h3.product-subsection {
    font-size: 2rem;
  }

  .product-block--faq .accordion__item-title,
  .product-block--faq .accordion--default .accordion__item-title--active {
    padding-right: 4.8rem !important;
    font-size: 1.6rem !important;
  }

  .product-block--faq .faq-answer {
    padding-right: 0;
    padding-left: 3.6rem;
  }
}

/* Narrow phones: spec labels sit above their values (not in model tables,
   which keep their columns and scroll sideways) */
@media (max-width: 479px) {
  .article__body .spec-table:not(.spec-table--list) th,
  .article__body .spec-table:not(.spec-table--list) td {
    display: block;
    width: auto;
  }

  .article__body .spec-table:not(.spec-table--list) th {
    padding-bottom: 0.2rem;
    border-bottom: 0;
  }

  .article__body .spec-table:not(.spec-table--list) td {
    padding-top: 0;
  }

  .article__body .spec-table:not(.spec-table--list) tr:first-child td {
    border-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-header,
  .product-header.is-visible,
  .product-nav__link,
  .product-header__link,
  .article__body a.doc-card,
  .product-block--faq .accordion__item-title:after {
    transition: none;
  }

  .product-block--faq .accordion__item .accordion__item-content.faq-panel,
  .article__body .accordion.inner .accordion__item-title:after,
  .article__body .accordion.inner .accordion__item .accordion__item-content.faq-panel {
    transition: none;
  }
}

@media print {
  .product-header,
  .product-nav {
    display: none;
  }
}


/* ---- Breadcrumbs (Support Center > Category > Product) ----
   On article pages the visible trail is rebuilt by script.js; keep the
   space but hide the placeholder until then so it doesn't flash. */
.article-page .breadcrumbs-container .breadcrumbs:not(.nc-breadcrumbs-ready) {
  visibility: hidden;
}

.breadcrumbs [aria-current="page"] {
  color: #6B625E;
}

@media (max-width: 767px) {
  .breadcrumbs {
    font-size: 16px;
    line-height: 24px;
  }
}

/* Long names wrap onto a second line. When they do, script.js adds
   .is-wrapped, which uses smaller text so two lines take about 1.5x the
   height of a single line. */
.breadcrumbs.nc-breadcrumbs-ready {
  display: block;
  padding-left: 0;
}

.breadcrumbs.nc-breadcrumbs-ready > li > a,
.breadcrumbs.nc-breadcrumbs-ready > li > span {
  overflow-wrap: anywhere;
}

.breadcrumbs.nc-breadcrumbs-ready.is-wrapped {
  font-size: 15px;
  line-height: 30px;
}

@media (max-width: 767px) {
  .breadcrumbs.nc-breadcrumbs-ready.is-wrapped {
    font-size: 14px;
    line-height: 19px;
  }

  .breadcrumbs.nc-breadcrumbs-ready.is-wrapped-more {
    font-size: 13px;
    line-height: 16px;
  }
}


/* =========================================================
   Accessibility fixes (sitewide)
   ========================================================= */

/* Keep the pinned product header from covering whatever has
   keyboard focus or was jumped to */
html.is-product-page {
  scroll-padding-top: calc(var(--product-nav-h, 64px) + 16px);
}

/* Text colors that were below the 4.5:1 contrast minimum on white */
.search-result-meta,
.search-result-meta a,
.article-vote-controls a,
.article-vote-count,
.article-vote-question,
.community-recent-activity .recent-activity-item-meta,
.profile-section__description,
.recent-activity-item-meta,
.category-card__article-count,
.category-card--previous-version .category-card__article-count {
  color: #6b6b6b;
}

.search-box--without-button #query::placeholder,
input::placeholder,
textarea::placeholder {
  color: #6d7278;
  opacity: 1;
}

/* Links inside running text must be recognizable without color */
.article__body p a,
.article__body li a,
.article__body td a,
.copyright a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* A row of buttons in an article's text (Cellular Subscription: Use Credit Card /
   Connect to Bank Account). Wrap the buttons in <div class="nc-actions">, no inline
   styles. The row gets more room above and below than a paragraph so the buttons
   don't crowd the text; on phones each button takes the full width. */
.article__body .nc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 1.6rem;
  margin: 2.4rem 0 2.8rem;
}

.article__body .nc-actions .btn,
.article__body .nc-actions .btn:hover,
.article__body .nc-actions .btn:focus {
  margin: 0;
  font-weight: bold;
  color: var(--nc-achromatic-000);
  text-decoration: none;
}

@media (max-width: 599px) {
  .article__body .nc-actions .btn {
    flex: 1 1 100%;
  }
}

/* ---- Appearance control (footer): Auto / Light / Dark ---- */
.appearance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.8rem 1.2rem;
  padding: 1.6rem 0 2.4rem;
  font-size: 1.4rem;
}

.appearance__label {
  font-weight: 600;
  color: #4a4a4a;
}

.appearance__options {
  display: inline-flex;
  padding: 0.3rem;
  background-color: #eef2f5;
  border-radius: 999px;
}

.appearance__option {
  min-width: 6.4rem;
  min-height: 3.2rem;
  margin: 0;
  padding: 0.4rem 1.4rem;
  font: inherit;
  font-size: 1.4rem;
  font-weight: 600;
  color: #4a4a4a;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 999px;
  -webkit-appearance: none;
  appearance: none;
}

.appearance__option:hover {
  color: #035486;
}

.appearance__option[aria-checked="true"] {
  color: var(--nc-achromatic-000);
  background-color: #035486;
}

.appearance__option:focus {
  outline: none;
}

.appearance__option:focus-visible {
  outline: 3px solid #035486;
  outline-offset: 2px;
}

.appearance__note {
  flex-basis: 100%;
  min-height: 1.8rem;
  font-size: 1.3rem;
  color: #6b6b6b;
  text-align: center;
}

@media print {
  .appearance {
    display: none;
  }
}

html[data-theme="dark"] .appearance__label,
html[data-theme="dark"] .appearance__option {
  color: var(--nc-text);
}

html[data-theme="dark"] .appearance__note {
  color: var(--nc-muted);
}

html[data-theme="dark"] .appearance__options {
  background-color: var(--nc-surface-2);
  --nc-accent: var(--nc-accent-raised);
}

html[data-theme="dark"] .appearance__option:hover {
  color: var(--nc-accent);
}

html[data-theme="dark"] .appearance__option[aria-checked="true"] {
  color: var(--nc-accent-fill-ink);
  background-color: var(--nc-accent-fill);
}

html[data-theme="dark"] .appearance__option:focus-visible {
  outline-color: var(--nc-accent);
}

/* =========================================================
   Article cards (section pages)
   Built by buildArticleCard in script.js. The title link covers the
   whole card, so the card is one big click target; the jump buttons sit
   above it and go straight to that part of the article.
   ========================================================= */
.category-card--article .category-card__title-link {
  color: inherit;
  text-decoration: none;
}

.category-card--article .category-card__title-link::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  border-radius: 8px;
}

.category-card--article .category-card__title-link:focus {
  outline: none;
}

.category-card--article:has(.category-card__title-link:focus-visible) {
  outline: 3px solid #035486;
  outline-offset: 3px;
}

/* Badges keep the theme's absolute positioning (top of the card); only
   lift them above the card-wide link */
.category-card--article .category-card__labels {
  z-index: 2;
}

/* Cards without an image or buttons still need their padding
   (the theme only pads the link area, which article cards don't use) */
.category-card.category-card--article {
  padding: 28px;
}

.category-card--article .category-card__description {
  padding-left: 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.category-card--article .category-card__jump-list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: auto;
}

.category-card--article .category-card__jump-list li,
.category-card--article.category-card--current-version .category-card__jump-list li,
.category-card--article.category-card--large .category-card__jump-list li {
  width: auto;
}

/* The gradient (current product) card stacks its list; keep the jump
   buttons in a wrapping row there too */
.category-card--article.category-card--current-version .category-card__jump-list,
.category-card--article.category-card--large .category-card__jump-list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.category-card--article .category-card__jump-list a {
  padding: 0.5rem 1.4rem;
  font-size: 1.5rem;
}

/* On phones the theme switches cards to a compact layout; match its
   padding on article cards */
@container cards-container (max-width: 500px) {
  .category-card.category-card--article {
    padding: 16px 10px;
  }
}

/* The theme stacks lists in narrow gradient cards (with !important);
   short jump buttons read better in a row */
@container large-card (max-width: 560px) {
  .category-card--article .category-card__jump-list {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.8rem !important;
  }
}

/* The theme's list-button blue (#3b82f6) is 3.7:1 on white; use the
   accessible link color for every card's buttons */
.category-card__article-list a {
  color: #0477BE;
  border-color: #0477BE;
}

.category-card--current-version .category-card__article-list a,
.category-card--large .category-card__article-list a {
  color: var(--nc-achromatic-000);
  border-color: rgba(255, 255, 255, 0.7);
}

/* The lift-on-hover respects the reduce-motion setting */
@media (prefers-reduced-motion: reduce) {
  .category-card,
  .category-card:hover,
  .category-card__icon,
  .category-card:hover .category-card__icon {
    transition: none;
    transform: none;
  }
}

html[data-theme="dark"] .category-card {
  border-color: var(--nc-border);
}

html[data-theme="dark"] .category-card:hover {
  border-color: var(--nc-accent);
  box-shadow: none;
}

html[data-theme="dark"] .category-card__title,
html[data-theme="dark"] .category-card:hover .category-card__title {
  color: var(--nc-heading);
}

html[data-theme="dark"] .category-card__description {
  color: var(--nc-muted);
}

html[data-theme="dark"] .category-card__article-list {
  border-top-color: var(--nc-border);
}

html[data-theme="dark"] .category-card__article-list a {
  color: var(--nc-accent);
  border-color: var(--nc-accent);
}

html[data-theme="dark"] .category-card__article-list a:hover {
  background: rgba(108, 196, 236, 0.12);
}

html[data-theme="dark"] .category-card--article:has(.category-card__title-link:focus-visible) {
  outline-color: var(--nc-accent);
}

/* =========================================================
   Dark mode
   Turned on by html[data-theme="dark"] (set from the saved choice, or
   the device setting if there's no saved choice).
   ========================================================= */
html[data-theme="dark"] {
  --nc-bg: #0f1b26;
  /* Soft spotlight behind product photos: dark products stay visible
     without a light box around them */
  --nc-stage: radial-gradient(closest-side, rgba(233, 238, 242, 0.24), rgba(233, 238, 242, 0.09) 55%, rgba(233, 238, 242, 0) 100%);
  --nc-stage-round: radial-gradient(circle closest-side, rgba(233, 238, 242, 0.24), rgba(233, 238, 242, 0.09) 55%, rgba(233, 238, 242, 0) 100%);
  --nc-surface: #162634;
  --nc-surface-2: #1d3142;
  --nc-border: #2e4254;
  --nc-text: #d3dce5;
  --nc-muted: #9db0c1;
  --nc-heading: #eef3f7;
  /* Brand blue in dark mode (WCAG 2.2 AA):
     --nc-accent         text, focus rings, icon lines (5.1:1 page, 4.5:1 cards)
     --nc-accent-raised  text on the lighter panels (4.5:1 on #1d3142)
     --nc-accent-fill    filled buttons and selected states, white text (4.8:1) */
  --nc-accent: #1D92D5;
  --nc-accent-raised: #259EE2;
  --nc-accent-fill: var(--nc-blue-500);
  --nc-accent-fill-ink: var(--nc-achromatic-000);
  --nc-accent-ink: #0f1b26;
  --nc-border-input: #6b8094;   /* form-field outlines: 4.3:1 page, 3.8:1 field, 3.3:1 card */
  color-scheme: dark;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .layout,
html[data-theme="dark"] footer,
html[data-theme="dark"] .footer {
  color: var(--nc-text);
  background-color: var(--nc-bg);
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] td,
html[data-theme="dark"] dd,
html[data-theme="dark"] .article__body,
html[data-theme="dark"] .markdown,
html[data-theme="dark"] .category-card__description,
html[data-theme="dark"] .search-result-description,
html[data-theme="dark"] .copyright {
  color: var(--nc-text);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] th,
html[data-theme="dark"] dt,
html[data-theme="dark"] .article__title,
html[data-theme="dark"] .category-card__title {
  color: var(--nc-heading);
}

/* Brand-blue text in articles (the cleanup tool turns inline #0477BE into
   this class): #0477BE in light mode, the dark-mode brand blue in dark */
.nc-brand-text {
  color: var(--nc-blue-500);
}

html[data-theme="dark"] .nc-brand-text {
  color: var(--nc-accent);
}

html[data-theme="dark"] a {
  color: var(--nc-accent);
}

html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:focus {
  color: #9fdaf4;
}

html[data-theme="dark"] hr,
html[data-theme="dark"] .breadcrumbs-hr {
  border-color: var(--nc-border);
}

/* Muted text */
html[data-theme="dark"] .search-result-meta,
html[data-theme="dark"] .search-result-meta a,
html[data-theme="dark"] .article-vote-controls a,
html[data-theme="dark"] .article-vote-count,
html[data-theme="dark"] .article-vote-question,
html[data-theme="dark"] .recent-activity-item-meta,
html[data-theme="dark"] .category-card__article-count,
html[data-theme="dark"] .article__disclaimer,
html[data-theme="dark"] .article__disclaimer p,
html[data-theme="dark"] .breadcrumbs [aria-current="page"],
html[data-theme="dark"] .doc-card__meta {
  color: var(--nc-muted);
}

/* Form fields and search */
html[data-theme="dark"] input:not([type="submit"]):not([type="button"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .nesty-input,
html[data-theme="dark"] .search-box--without-button #query {
  color: var(--nc-text);
  background-color: var(--nc-surface);
  border-color: var(--nc-border-input);
}

html[data-theme="dark"] label {
  color: var(--nc-text);
}

html[data-theme="dark"] .form-field.required > label:after {
  color: var(--nc-cyan-500);
}

/* Submit: a filled brand-blue button, like light mode */
html[data-theme="dark"] input[type="submit"] {
  color: var(--nc-accent-fill-ink);
  background-color: var(--nc-accent-fill);
  border-color: var(--nc-accent-fill);
}

/* Attachments drop area: the same outline as the other fields */
html[data-theme="dark"] .upload-dropzone {
  border-color: var(--nc-border-input);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .search-box--without-button #query::placeholder {
  color: var(--nc-muted);
}

/* Surfaces: cards, panels, menus */
html[data-theme="dark"] .category-card,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .pagination ul > li > a,
html[data-theme="dark"] .pagination ul > li > span,
html[data-theme="dark"] blockquote,
html[data-theme="dark"] .post-info,
html[data-theme="dark"] .request-table-toolbar,
html[data-theme="dark"] .satisfaction-box,
html[data-theme="dark"] .article__dates,
html[data-theme="dark"] .tabs--colored-1 .tab,
html[data-theme="dark"] .tabs--colored-2 .tab {
  color: var(--nc-text);
  background-color: var(--nc-surface) !important;
  border-color: var(--nc-border);
}

/* Code: a step lighter than the page and cards, with a border */
html[data-theme="dark"] code,
html[data-theme="dark"] pre code.hljs {
  color: var(--nc-text);
  background-color: var(--nc-surface-2);
  border-color: var(--nc-border);
}
html[data-theme="dark"] pre {
  background-color: transparent;
}

html[data-theme="dark"] .article__dates .article__date-label {
  color: var(--nc-heading);
}

html[data-theme="dark"] .article__disclaimer,
html[data-theme="dark"] .related-articles {
  border-top-color: var(--nc-border);
}

/* Toggles and tabs used in older articles */
html[data-theme="dark"] .accordion,
html[data-theme="dark"] .accordion__item-title,
html[data-theme="dark"] .accordion__item-content,
html[data-theme="dark"] .tab,
html[data-theme="dark"] .tabs-link.is-active,
html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td {
  border-color: var(--nc-border);
}

html[data-theme="dark"] .accordion--default .accordion__item-title--active {
  background-color: var(--nc-surface-2);
  --nc-accent: var(--nc-accent-raised);
}

html[data-theme="dark"] .tabs-link.is-active {
  color: var(--nc-accent);
  border-bottom-color: var(--nc-bg);
}

html[data-theme="dark"] .accordion--default .accordion__item-title:before {
  border-color: var(--nc-accent);
}

html[data-theme="dark"] .article__body .accordion.inner {
  background-color: var(--nc-surface);
  border-color: var(--nc-border);
}

html[data-theme="dark"] .article__body .accordion.inner + .accordion.inner {
  border-top-color: var(--nc-border);
}

html[data-theme="dark"] .article__body .accordion.inner .accordion__item-title,
html[data-theme="dark"] .article__body .accordion.inner .accordion__item-title--active {
  color: var(--nc-accent);
}

html[data-theme="dark"] .article__body .accordion.inner .accordion__item-title:hover {
  --nc-accent: var(--nc-accent-raised);
  background-color: var(--nc-surface-2);
}

html[data-theme="dark"] .article__body .accordion.inner .accordion__item-title:after {
  color: var(--nc-accent);
  background-color: var(--nc-surface-2);
  --nc-accent: var(--nc-accent-raised);
}

html[data-theme="dark"] .article__body .accordion.inner .accordion__item-title:hover:after {
  background-color: var(--nc-surface);
}

html[data-theme="dark"] .article__body .accordion.inner .accordion__item-title--active:after,
html[data-theme="dark"] .article__body .accordion.inner .accordion__item-title--active:hover:after {
  color: var(--nc-accent-fill-ink);
  background-color: var(--nc-accent-fill);
}

html[data-theme="dark"] .article__body .accordion.inner .accordion__item-content a {
  color: var(--nc-accent);
}

html[data-theme="dark"] .scroll-to-top {
  color: var(--nc-accent);
  background-color: var(--nc-surface);
  border-color: var(--nc-border);
}

/* Images: most were made for a white page. Give them a light backing
   and soften the glare. Add class="img-on-dark" to an image that already
   looks right on dark; use .img-light-only / .img-dark-only to swap in a
   dark-mode version of an image. */
html[data-theme="dark"] .article__body img:not(.img-on-dark):not(.product-overview__media img):not(.category-card--product img):not(.pdf):not(.csv):not(.xls):not([src*=".svg"]):not(.nc-theme-img),
html[data-theme="dark"] .category-card:not(.category-card--product) img.category-card__icon:not([src*=".svg"]):not(.nc-theme-img),
html[data-theme="dark"] .carousel-item__image {
  background-color: #e9eef2;
  border-radius: 6px;
  filter: brightness(0.94);
}

/* Product photos: a soft spotlight instead of the light backing */
html[data-theme="dark"] .product-overview__media {
  padding: 2.4rem 0;
  background: var(--nc-stage);
}

html[data-theme="dark"] .img-light-only,
html:not([data-theme="dark"]) .img-dark-only {
  display: none !important;
}

/* ---- Dark mode: product pages ---- */
html[data-theme="dark"] .product-header {
  background-color: var(--nc-bg);
  border-bottom-color: var(--nc-border);
  box-shadow: 0 10px 18px -14px rgba(0, 0, 0, 0.8);
}

html[data-theme="dark"] .product-header__title,
html[data-theme="dark"] .product-header__title:hover,
html[data-theme="dark"] .article__body h2.product-section {
  color: var(--nc-heading);
}

html[data-theme="dark"] .product-nav__link,
html[data-theme="dark"] .product-header__link,
html[data-theme="dark"] .article__body .product-block .tabs-link {
  color: var(--nc-accent);
  background-color: var(--nc-surface);
  border-color: var(--nc-border);
}

html[data-theme="dark"] .product-nav__link:hover,
html[data-theme="dark"] .product-nav__link:focus,
html[data-theme="dark"] .product-header__link:hover,
html[data-theme="dark"] .product-header__link:focus,
html[data-theme="dark"] .article__body .product-block .tabs-link:hover {
  color: var(--nc-accent);
  background-color: var(--nc-surface-2);
  border-color: var(--nc-accent);
  --nc-accent: var(--nc-accent-raised);
}

html[data-theme="dark"] .product-nav__link.is-current,
html[data-theme="dark"] .product-nav__link.is-current:hover,
html[data-theme="dark"] .product-header__link.is-current,
html[data-theme="dark"] .product-header__link.is-current:hover,
html[data-theme="dark"] .article__body .product-block .tabs-link.is-active,
html[data-theme="dark"] .article__body .product-block .tabs-link.is-active:hover {
  color: var(--nc-accent-fill-ink);
  background-color: var(--nc-accent-fill);
  border-color: var(--nc-accent-fill);
}

html[data-theme="dark"] .product-row__arrow {
  color: var(--nc-accent-fill-ink);
  background-color: var(--nc-accent-fill);
}

html[data-theme="dark"] .product-header__progress span {
  background-color: var(--nc-accent-fill);
}

html[data-theme="dark"] .product-block {
  border-top-color: var(--nc-border);
}

html[data-theme="dark"] .product-block::before {
  background-color: var(--nc-accent-fill);
}

html[data-theme="dark"] .article__body h3.product-subsection,
html[data-theme="dark"] .article__body .faq-group > h2.product-subsection,
html[data-theme="dark"] .article__body .product-keydocs__title,
html[data-theme="dark"] .article__body .step__title,
html[data-theme="dark"] .article__body .step__instruction,
html[data-theme="dark"] .article__body .spec-table th,
html[data-theme="dark"] .doc-card__title {
  color: var(--nc-heading);
}

html[data-theme="dark"] .article__body .spec-table td {
  color: var(--nc-text);
}

html[data-theme="dark"] .spec-group {
  background: var(--nc-surface);
  border-color: var(--nc-border);
}

html[data-theme="dark"] .article__body .spec-group > h3.product-subsection {
  border-bottom-color: var(--nc-blue-300);
}

html[data-theme="dark"] .article__body .spec-table th,
html[data-theme="dark"] .article__body .spec-table td,
html[data-theme="dark"] .product-block--faq .accordion,
html[data-theme="dark"] .product-block--faq h3 + .accordion {
  border-color: var(--nc-border);
}

html[data-theme="dark"] .product-keydocs {
  background-color: var(--nc-surface);
}

html[data-theme="dark"] .article__body a.doc-card {
  color: var(--nc-heading);
  background-color: var(--nc-surface-2);
  border-color: var(--nc-border);
  --nc-accent: var(--nc-accent-raised);
}

html[data-theme="dark"] .article__body a.doc-card:hover,
html[data-theme="dark"] .article__body a.doc-card:focus {
  border-color: var(--nc-accent);
  box-shadow: none;
}

html[data-theme="dark"] .doc-card__action {
  color: var(--nc-accent);
}

html[data-theme="dark"] .article__body .doc-cards a.doc-card::before {
  background: var(--nc-surface);
  border-bottom-color: var(--nc-border);
}

html[data-theme="dark"] .product-block--faq .accordion__item-title,
html[data-theme="dark"] .product-block--faq .accordion--default .accordion__item-title--active {
  color: var(--nc-text);
  background: none;
}

html[data-theme="dark"] .product-block--faq .accordion__item-title:hover,
html[data-theme="dark"] .product-block--faq .accordion__item-title--active {
  color: var(--nc-accent) !important;
}

html[data-theme="dark"] .product-block--faq .faq-answer {
  color: var(--nc-muted);
}

html[data-theme="dark"] .product-block--faq .faq-answer p,
html[data-theme="dark"] .product-block--faq .faq-answer li {
  color: #c2ccd6;
}

html[data-theme="dark"] .product-block--faq .faq-answer::before {
  border-color: #4d6a82;
}

html[data-theme="dark"] .product-block--faq .faq-answer::after {
  border-left-color: #4d6a82;
}

html[data-theme="dark"] .product-block--faq .accordion__item-title:after {
  color: var(--nc-accent);
  background-color: var(--nc-surface-2);
  --nc-accent: var(--nc-accent-raised);
}

html[data-theme="dark"] .product-block--faq .accordion__item-title--active:after {
  color: var(--nc-accent-fill-ink);
  background-color: var(--nc-accent-fill);
}

html[data-theme="dark"] .step::before {
  color: var(--nc-accent-fill-ink);
  background-color: var(--nc-accent-fill);
}

html[data-theme="dark"] .step::after {
  background-color: var(--nc-border);
}

html[data-theme="dark"] .product-nav__link:focus-visible,
html[data-theme="dark"] .product-header__link:focus-visible,
html[data-theme="dark"] .product-header__title:focus-visible,
html[data-theme="dark"] .article__body a.doc-card:focus-visible,
html[data-theme="dark"] .accordion__toggle:focus-visible,
html[data-theme="dark"] .tabs-toggle:focus-visible {
  outline-color: var(--nc-accent);
}


/* =========================================================
   Site header: logo, search, and support actions
   1200px and wider: everything on one row.
   768-1199px: logo, search, and a Menu button for the actions.
   Under 768px: logo and Menu on top, full-width search below.
   ========================================================= */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1.6rem;
  z-index: 100;
  padding: 1rem 1.6rem;
  font-weight: 600;
  color: var(--nc-achromatic-000);
  background: #035486;
  border-radius: 0 0 6px 6px;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--nc-achromatic-000);
  outline-offset: -3px;
}

#main-content:focus {
  outline: none;
}

/* Deeper end color so white header text passes contrast across the
   whole gradient (the original light cyan end was 2.7:1) */
.header.site-header {
  background: linear-gradient(to right, #035486 0%, #0876a1 100%);
}

.site-header__bar {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(24rem, 1fr) auto;
  grid-template-areas: "brand search actions";
  gap: 1.6rem 3.2rem;
  align-items: center;
  padding: 1.6rem 0;
}

.site-header__brand {
  display: flex;
  grid-area: brand;
  align-items: center;
  gap: 1.6rem;
}

.site-header__brand a {
  display: block;
  border-radius: 4px;
}

.site-header__brand img {
  display: block;
  max-height: 4.4rem;
  width: auto;
}

.site-header__name {
  padding-left: 1.6rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--nc-achromatic-000);
  white-space: nowrap;
  border-left: 1px solid rgba(255, 255, 255, 0.6);
}

/* Search */
.site-header__search {
  grid-area: search;
  min-width: 0;
}

.site-header__search form {
  position: relative;
  margin: 0;
}

.site-header__search form::before {
  position: absolute;
  top: 50%;
  left: 1.6rem;
  z-index: 1;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: -0.9rem;
  content: "";
  border: 2px solid #5a6b7b;
  border-radius: 50%;
  pointer-events: none;
}

.site-header__search form::after {
  position: absolute;
  top: 50%;
  left: 2.85rem;
  z-index: 1;
  width: 0.7rem;
  height: 2px;
  margin-top: 0.35rem;
  content: "";
  background: #5a6b7b;
  transform: rotate(45deg);
  pointer-events: none;
}

.site-header__search input[type="search"] {
  width: 100%;
  height: 4.4rem;
  margin: 0;
  padding: 0 1.6rem 0 4.4rem;
  font-size: 1.6rem;
  color: #1f2a33;
  background: var(--nc-achromatic-000);
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  -webkit-appearance: none;
  appearance: none;
}

.site-header__search input[type="search"]::placeholder {
  color: #5f6b76;
}

.site-header__search input[type="search"]:focus {
  outline: 3px solid var(--nc-achromatic-000);
  outline-offset: 2px;
}

/* Enter submits the search; keep the button for assistive tech only */
.site-header__search input[type="submit"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Actions */
.site-header__actions {
  display: flex;
  grid-area: actions;
  align-items: center;
  gap: 0.4rem;
}

.header .site-header__action {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1.2rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--nc-achromatic-000);
  white-space: nowrap;
  text-decoration: none;
  border-radius: 6px;
}

.header .site-header__action:hover,
.header .site-header__action:focus {
  color: var(--nc-achromatic-000);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.14);
}

.header .site-header__action:focus-visible,
.site-header__menu-button:focus-visible,
.site-header__brand a:focus-visible {
  outline: 3px solid var(--nc-achromatic-000);
  outline-offset: 2px;
}

.site-header__action-icon {
  width: 1.8rem;
  height: 1.8rem;
}

.site-header__menu-button {
  display: none;
  grid-area: menu;
  align-items: center;
  gap: 0.8rem;
  min-height: 4.4rem;
  padding: 0 1.4rem;
  font: inherit;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--nc-achromatic-000);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
}

.site-header__menu-button:hover {
  background: rgba(255, 255, 255, 0.22);
}

.site-header__menu-button:focus {
  outline: none;
}

/* Three lines that become an x when open */
.site-header__menu-icon,
.site-header__menu-icon::before,
.site-header__menu-icon::after {
  display: block;
  width: 1.8rem;
  height: 2px;
  content: "";
  background: var(--nc-achromatic-000);
  border-radius: 1px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.site-header__menu-icon {
  position: relative;
}

.site-header__menu-icon::before {
  position: absolute;
  top: -0.6rem;
}

.site-header__menu-icon::after {
  position: absolute;
  top: 0.6rem;
}

.is-menu-open .site-header__menu-icon {
  background: transparent;
}

.is-menu-open .site-header__menu-icon::before {
  transform: translateY(0.6rem) rotate(45deg);
}

.is-menu-open .site-header__menu-icon::after {
  transform: translateY(-0.6rem) rotate(-45deg);
}

/* The theme hides its old per-page search boxes' column; search now
   lives in the header on every page */
.search-box-small,
.column.vertical-offset:has(> .search-box-small) {
  display: none;
}

/* ---- Below 1200px: actions move into the menu ---- */
@media (max-width: 1199px) {
  .site-header__bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand search menu";
    gap: 1.2rem 2.4rem;
  }

  .site-header__menu-button {
    display: inline-flex;
  }

  .site-header__actions {
    position: absolute;
    top: calc(100% - 0.8rem);
    right: 0;
    z-index: 60;
    display: none;
    flex-direction: column;
    align-items: stretch;
    min-width: 26rem;
    padding: 0.8rem;
    background: var(--nc-achromatic-000);
    border: 1px solid #d5e0ea;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(5, 40, 70, 0.22);
  }

  .is-menu-open .site-header__actions {
    display: flex;
  }

  .header .site-header__action {
    padding: 1.2rem 1.4rem;
    color: #1f2a33;
  }

  .header .site-header__action:hover,
  .header .site-header__action:focus {
    color: #035486;
    background: #eef4f9;
  }

  .header .site-header__action:focus-visible {
    outline-color: #035486;
    outline-offset: -2px;
  }

  /* White icons would vanish on the white menu */
  .site-header__action-icon {
    filter: brightness(0) saturate(100%) invert(19%) sepia(64%) saturate(1500%) hue-rotate(186deg) brightness(92%);
  }
}

/* ---- Tablet: hide the site name so the search keeps its room ---- */
@media (max-width: 991px) {
  .site-header__name {
    display: none;
  }
}

/* ---- Phone: one row, the search between the logo and the Menu button.
   script.js shortens its placeholder to "Search" when it's narrow, and on the
   narrowest phones turns it into a round search button (.is-icon). Either
   way, tapping it opens the search window. ---- */
@media (max-width: 767px) {
  .site-header__bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand search menu";
    gap: 1.2rem;
    padding: 1.2rem 0;
  }

  .site-header__brand img {
    max-height: 3.6rem;
  }

  /* the menu opens just under the Menu button, at its right edge */
  .site-header__actions {
    right: 0;
    min-width: 24rem;
    max-width: calc(100vw - 3.2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__menu-icon,
  .site-header__menu-icon::before,
  .site-header__menu-icon::after {
    transition: none;
  }
}

@media print {
  .site-header__search,
  .site-header__menu-button,
  .site-header__actions {
    display: none !important;
  }
}

/* Dark mode: header gradient stays; the menu panel and search go dark */
html[data-theme="dark"] .site-header__search input[type="search"] {
  color: var(--nc-text);
  background: var(--nc-surface);
  border-color: var(--nc-border);
}

html[data-theme="dark"] .site-header__search input[type="search"]::placeholder {
  color: var(--nc-muted);
}

html[data-theme="dark"] .site-header__search form::before {
  border-color: var(--nc-muted);
}

html[data-theme="dark"] .site-header__search form::after {
  background: var(--nc-muted);
}

/* The theme's search icon (icon-search.svg) in the header search box, in
   place of the drawn one (script.js sets --nc-search-icon and the class) */
.site-header__search.has-theme-icon form::before {
  left: 1.5rem;
  width: 1.8rem;
  height: 1.8rem;
  margin-top: -0.9rem;
  background-color: #5a6b7b;
  border: 0;
  border-radius: 0;
  -webkit-mask: var(--nc-search-icon) center / contain no-repeat;
  mask: var(--nc-search-icon) center / contain no-repeat;
}

.site-header__search.has-theme-icon form::after {
  display: none;
}

html[data-theme="dark"] .site-header__search.has-theme-icon form::before {
  background-color: var(--nc-muted);
}

/* Narrowest phones: the search box becomes a round search button, styled
   like the Menu button next to it (same in dark mode, on the blue header) */
.site-header__search.is-icon form {
  width: 4.4rem;
  margin-left: auto;
}

.site-header__search.is-icon input[type="search"],
html[data-theme="dark"] .site-header__search.is-icon input[type="search"] {
  padding: 0;
  color: transparent;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}

.site-header__search.is-icon input[type="search"]:hover {
  background: rgba(255, 255, 255, 0.22);
}

.site-header__search.is-icon input[type="search"]::placeholder,
html[data-theme="dark"] .site-header__search.is-icon input[type="search"]::placeholder {
  color: transparent;
}

.site-header__search.is-icon form::before,
html[data-theme="dark"] .site-header__search.is-icon form::before {
  left: 1.3rem;
  border-color: var(--nc-achromatic-000);
}

.site-header__search.is-icon.has-theme-icon form::before,
html[data-theme="dark"] .site-header__search.is-icon.has-theme-icon form::before {
  background-color: var(--nc-achromatic-000);
}

/* Narrower still (script.js): the Menu button drops its word, so the two
   round buttons never overlap; the word stays for screen readers */
.site-header.is-menu-compact .site-header__menu-button {
  justify-content: center;
  width: 4.4rem;
  padding: 0;
}

.site-header.is-menu-compact .site-header__menu-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.site-header__search.is-icon form::after,
html[data-theme="dark"] .site-header__search.is-icon form::after {
  left: 2.55rem;
  background: var(--nc-achromatic-000);
}

@media (max-width: 1199px) {
  html[data-theme="dark"] .site-header__actions {
    background: var(--nc-surface);
    border-color: var(--nc-border);
  }

  html[data-theme="dark"] .header .site-header__action {
    color: var(--nc-text);
  }

  html[data-theme="dark"] .header .site-header__action:hover,
  html[data-theme="dark"] .header .site-header__action:focus {
    color: var(--nc-accent);
    background: var(--nc-surface-2);
  --nc-accent: var(--nc-accent-raised);
}

  html[data-theme="dark"] .site-header__action-icon {
    filter: brightness(0) invert(1) opacity(0.85);
  }
}

/* =========================================================
   Home page: Equipment, Applications, Docs (+ Recent updates)
   ========================================================= */
.home-intro {
  margin: 4.8rem auto 0;
  padding: 0;
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1.25;
  color: #035486;
  text-align: center;
  text-wrap: balance;
}

/* One line wherever it fits */
@media (min-width: 992px) {
  .home-intro {
    white-space: nowrap;
  }
}

.home-section {
  margin: 5.6rem 0;
}

.home-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.8rem 2.4rem;
  margin-bottom: 2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid #d5e0ea;
}

.home-section__title {
  margin: 0;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Home section headings name the area (they aren't links; each section's
   button or cards lead on), so they're dark gray rather than link blue */
.home-section__title,
.home-section .home-section__title {
  color: #2a3440;
}

html[data-theme="dark"] .home-section__title,
html[data-theme="dark"] .home-section .home-section__title {
  color: var(--nc-heading);
}

/* Software: one big card per platform, of equal standing */
.home-platforms.home-platforms--cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
}

a.home-platform-card {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  min-height: 12rem;
  padding: 2.8rem 3.2rem;
  text-decoration: none;
  background: var(--nc-achromatic-000);
  border: 1px solid #d5e0ea;
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.home-platform-card:hover {
  border-color: #035486;
  box-shadow: 0 4px 16px rgba(3, 84, 134, 0.12);
}

a.home-platform-card:focus-visible {
  outline: 3px solid var(--nc-blue-500);
  outline-offset: 2px;
}

.home-platform-card__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}

.home-platform-card__title {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.2;
  color: #035486;
}

.home-platform-card__for {
  font-size: 1.6rem;
  color: var(--nc-achromatic-700);
}

/* a quiet arrow on the right says the card goes somewhere (icon-arrow-right,
   drawn in the icon color; it slides a little on hover) */
.home-platform-card__arrow {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  background-color: var(--nc-icon-color);
  opacity: 0.75;
  -webkit-mask: var(--nc-arrow-right) center / contain no-repeat;
  mask: var(--nc-arrow-right) center / contain no-repeat;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

a.home-platform-card:hover .home-platform-card__arrow {
  opacity: 1;
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  a.home-platform-card:hover .home-platform-card__arrow { transform: none; }
}

@media (max-width: 767px) {
  .home-platforms.home-platforms--cards {
    grid-template-columns: minmax(0, 1fr);
  }

  a.home-platform-card {
    min-height: 0;
    padding: 2.2rem 2.4rem;
  }

  .home-platform-card__title {
    font-size: 2.4rem;
  }
}

html[data-theme="dark"] a.home-platform-card {
  background: var(--nc-surface);
  border-color: var(--nc-border);
}

html[data-theme="dark"] a.home-platform-card:hover {
  border-color: var(--nc-accent);
}

html[data-theme="dark"] .home-platform-card__title {
  color: var(--nc-heading);
}

html[data-theme="dark"] .home-platform-card__for {
  color: var(--nc-text);
}



.home-section__title a {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  color: #035486;
  text-decoration: none;
}

.home-section__title a:hover {
  color: #035486;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Chevron that nudges right on hover */
.home-section__arrow {
  width: 1.1rem;
  height: 1.1rem;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.home-section__title a:hover .home-section__arrow {
  transform: translateX(0.4rem) rotate(45deg);
}

.home-section__desc {
  margin: 0.6rem 0 0;
  padding: 0;
  font-size: 1.6rem;
  color: #55626e;
}

.home-section__all {
  padding: 0.4rem 0;
  font-size: 1.5rem;
  font-weight: 600;
  white-space: nowrap;
}

.home-section__all::after {
  content: " \2192";
}

.home-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-links li {
  margin: 0;
  padding: 0;
}

.home-link {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  height: 100%;
  padding: 1.6rem 1.8rem;
  color: #2a3440;
  text-decoration: none;
  background: var(--nc-achromatic-000);
  border: 1px solid #d5e0ea;
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.home-link:hover,
.home-link:focus {
  color: #2a3440;
  text-decoration: none;
  border-color: #035486;
  box-shadow: 0 2px 10px rgba(5, 78, 130, 0.12);
}

.home-link:focus-visible {
  outline: 3px solid #035486;
  outline-offset: 2px;
}

.home-link__title {
  font-size: 1.7rem;
  font-weight: 700;
  color: #035486;
}

.home-link__desc {
  display: -webkit-box;
  overflow: hidden;
  font-size: 1.4rem;
  line-height: 1.45;
  color: #55626e;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Equipment: product family tiles with their product image */
.home-links--equipment {
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.home-links--equipment .home-link {
  align-items: center;
  padding: 1.6rem 1.2rem 1.8rem;
  text-align: center;
}

.home-link__image {
  width: auto;
  max-width: 100%;
  height: 9.6rem;
  margin-bottom: 0.8rem;
  object-fit: contain;
}

/* Applications and Docs: a two-column list of rows, so 3, 4 or 5 links
   all sit evenly (a card grid leaves an orphan card) */
.home-links--applications,
.home-links--docs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 3.2rem;
}

.home-links--applications .home-link,
.home-links--docs .home-link {
  position: relative;
  padding: 1.4rem 3.2rem 1.4rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid #e3e8ee;
  border-radius: 0;
}

.home-links--applications .home-link::after,
.home-links--docs .home-link::after {
  position: absolute;
  top: 50%;
  right: 0.8rem;
  width: 0.8rem;
  height: 0.8rem;
  margin-top: -0.4rem;
  content: "";
  border-top: 2px solid #8aa0b3;
  border-right: 2px solid #8aa0b3;
  transform: rotate(45deg);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.home-links--applications .home-link:hover,
.home-links--applications .home-link:focus,
.home-links--docs .home-link:hover,
.home-links--docs .home-link:focus {
  box-shadow: none;
}

.home-links--applications .home-link:hover .home-link__title,
.home-links--docs .home-link:hover .home-link__title {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.home-links--applications .home-link:hover::after,
.home-links--docs .home-link:hover::after {
  border-color: #035486;
  transform: translateX(0.3rem) rotate(45deg);
}

html[data-theme="dark"] .home-links--applications .home-link,
html[data-theme="dark"] .home-links--docs .home-link {
  background: none;
  border-bottom-color: var(--nc-border);
}

html[data-theme="dark"] .home-links--applications .home-link:hover::after,
html[data-theme="dark"] .home-links--docs .home-link:hover::after {
  border-color: var(--nc-accent);
}

/* Recent updates keeps the theme's show-only-when-recent behavior */
.home-section--updates .home-section__head {
  margin-bottom: 1.2rem;
}

@media (max-width: 767px) {
  .home-intro {
    margin-top: 3.2rem;
    font-size: 2.6rem;
  }

  .home-section {
    margin: 4rem 0;
  }

  .home-section__title {
    font-size: 2.6rem;
  }

  .home-links,
  .home-links--applications,
  .home-links--docs {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Two product tiles per row on phones; an even four keeps the grid
     tidy (All products is right above) */
  .home-links--equipment {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-links--equipment li:nth-child(n + 7) {
    display: none;
  }

  .home-link__image {
    height: 7.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-section__arrow,
  .home-link {
    transition: none;
  }
}

html[data-theme="dark"] .home-intro,
html[data-theme="dark"] .home-section__desc,
html[data-theme="dark"] .home-link__desc {
  color: var(--nc-muted);
}

html[data-theme="dark"] .home-section__title a,
html[data-theme="dark"] .home-section__title a:hover,
html[data-theme="dark"] .home-link__title {
  color: var(--nc-heading);
}

html[data-theme="dark"] .home-section__head {
  border-bottom-color: var(--nc-border);
}

html[data-theme="dark"] .home-link {
  background: var(--nc-surface);
  border-color: var(--nc-border);
}

html[data-theme="dark"] .home-link:hover,
html[data-theme="dark"] .home-link:focus {
  border-color: var(--nc-accent);
  box-shadow: none;
}

html[data-theme="dark"] .home-link__images {
  background: var(--nc-stage);
}

html[data-theme="dark"] .skip-link {
  color: var(--nc-accent-fill-ink);
  background: var(--nc-accent-fill);
}


/* Recent updates: hide posts older than three months (script.js adds the
   class; the theme forces .recent-activity-item to display:flex !important,
   so an inline style couldn't hide them) */
.recent-activity-item.nc-old-update {
  display: none !important;
}

/* On the home page, Recent updates matches the other sections instead of
   sitting in a dotted box */
.home-section--updates.community-recent-activity {
  padding: 0;
  border: 0;
}

html[data-theme="dark"] .community-recent-activity,
html[data-theme="dark"] .community-recent-activity .recent-activity-item,
html[data-theme="dark"] .recent-activity-item {
  background: var(--nc-surface);
  border-color: var(--nc-border);
}

html[data-theme="dark"] .home-section--updates.community-recent-activity {
  background: none;
}

html[data-theme="dark"] .recent-activity-item-meta,
html[data-theme="dark"] .recent-activity-item-time {
  color: var(--nc-muted);
}


/* =========================================================
   Document library (.doc-library)
   ========================================================= */
.lib-intro {
  max-width: 68rem;
  padding-left: 0;
  font-size: 1.8rem;
  color: #3f4d5a;
}

.doc-library__controls {
  display: grid;
  gap: 2rem;
  margin: 2.4rem 0 3.2rem;
  padding: 2.4rem;
  background: var(--nc-achromatic-100);
  border-radius: 10px;
}

.lib-label {
  display: block;
  margin: 0 0 0.6rem;
  padding: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: #2a3440;
}

.lib-search,
.lib-select {
  width: 100%;
  height: 4.4rem;
  padding: 0 1.4rem;
  font: inherit;
  font-size: 1.6rem;
  color: #1f2a33;
  background: var(--nc-achromatic-000);
  border: 1px solid #b9c7d4;
  border-radius: 8px;
}

.lib-search:focus,
.lib-select:focus {
  border-color: #035486;
  outline: 3px solid rgba(5, 78, 130, 0.25);
  outline-offset: 0;
}

.lib-select:disabled {
  color: #6b7785;
  background: #eef2f5;
}

.lib-types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.lib-types .lib-label {
  flex-basis: 100%;
}

.lib-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 3.6rem;
  padding: 0.4rem 0.6rem 0.4rem 1.4rem;
  font: inherit;
  font-size: 1.4rem;
  font-weight: 600;
  color: #035486;
  cursor: pointer;
  background: var(--nc-achromatic-000);
  border: 1px solid #b9c7d4;
  border-radius: 999px;
}

.lib-chip:hover {
  border-color: #035486;
}

.lib-chip[aria-pressed="true"] {
  color: var(--nc-achromatic-000);
  background: #035486;
  border-color: #035486;
}

.lib-chip:disabled {
  color: #6b7785;
  cursor: default;
  border-style: dashed;
}

.lib-chip:focus {
  outline: none;
}

.lib-chip:focus-visible,
.lib-clear:focus-visible {
  outline: 3px solid #035486;
  outline-offset: 2px;
}

.lib-chip__count {
  min-width: 2.4rem;
  padding: 0.1rem 0.7rem;
  font-size: 1.2rem;
  text-align: center;
  color: #2a3440;
  background: #eef2f5;
  border-radius: 999px;
}

.lib-chip[aria-pressed="true"] .lib-chip__count {
  color: #035486;
  background: var(--nc-achromatic-000);
}

.lib-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 1.6rem;
  align-items: end;
}

.lib-field--check {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 4.4rem;
  font-size: 1.5rem;
}

.lib-field--check input {
  width: 2rem;
  height: 2rem;
  margin: 0;
  accent-color: #035486;
}

.lib-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.lib-count {
  margin: 0;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #2a3440;
}

.lib-clear {
  padding: 0.4rem 0;
  font: inherit;
  font-size: 1.5rem;
  font-weight: 600;
  color: #0477BE;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: 0;
}

.doc-library__results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 1.6rem;
}

.article__body .lib-group {
  grid-column: 1 / -1;
  margin: 2.4rem 0 0.4rem;
  padding: 0 0 0.8rem;
  font-size: 2rem;
  font-weight: 700;
  color: #2a3440;
  border-bottom: 1px solid #d5e0ea;
}

.article__body .lib-group:first-child {
  margin-top: 0;
}

/* Each document: title, then its type and product on a second line */
.article__body a.lib-doc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icon title action"
    "icon meta action";
  column-gap: 1.2rem;
  align-items: center;
}

.article__body a.lib-doc::before {
  grid-area: icon;
}

.lib-doc .doc-card__title {
  grid-area: title;
  align-self: end;
}

.lib-doc .doc-card__action {
  grid-area: action;
}

.lib-doc__type,
.lib-doc__product,
.lib-doc__family {
  display: none;
}

.lib-doc__meta {
  grid-area: meta;
  align-self: start;
  font-size: 1.3rem;
  color: #55626e;
}

.lib-doc.is-legacy .doc-card__title::after {
  display: inline-block;
  margin-left: 0.8rem;
  padding: 0 0.6rem;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.7;
  vertical-align: 0.15em;
  color: #4a4a4a;
  content: "Legacy";
  background: #e5e7eb;
  border-radius: 4px;
}

.lib-empty {
  padding: 2.4rem;
  text-align: center;
  color: #55626e;
  background: var(--nc-achromatic-100);
  border-radius: 8px;
}

@media (max-width: 991px) {
  .lib-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .doc-library__controls {
    margin-right: -15px;
    margin-left: -15px;
    padding: 1.6rem 15px;
    border-radius: 0;
  }

  .lib-row,
  .doc-library__results {
    grid-template-columns: minmax(0, 1fr);
  }
}

html[data-theme="dark"] .lib-intro {
  color: var(--nc-muted);
}

html[data-theme="dark"] .doc-library__controls,
html[data-theme="dark"] .lib-empty {
  background: var(--nc-surface);
}

html[data-theme="dark"] .lib-label,
html[data-theme="dark"] .lib-count,
html[data-theme="dark"] .article__body .lib-group {
  color: var(--nc-heading);
}

html[data-theme="dark"] .article__body .lib-group {
  border-bottom-color: var(--nc-border);
}

html[data-theme="dark"] .lib-search,
html[data-theme="dark"] .lib-select,
html[data-theme="dark"] .lib-chip {
  color: var(--nc-text);
  background: var(--nc-surface-2);
  border-color: var(--nc-border);
  --nc-accent: var(--nc-accent-raised);
}

html[data-theme="dark"] .lib-chip {
  color: var(--nc-accent);
}

html[data-theme="dark"] .lib-chip[aria-pressed="true"] {
  color: var(--nc-accent-fill-ink);
  background: var(--nc-accent-fill);
  border-color: var(--nc-accent-fill);
}

html[data-theme="dark"] .lib-chip__count {
  color: var(--nc-text);
  background: var(--nc-bg);
}

html[data-theme="dark"] .lib-chip[aria-pressed="true"] .lib-chip__count {
  color: var(--nc-accent-ink);
  background: var(--nc-achromatic-000);
}

html[data-theme="dark"] .lib-doc__meta,
html[data-theme="dark"] .lib-empty {
  color: var(--nc-muted);
}

html[data-theme="dark"] .lib-clear {
  color: var(--nc-accent);
}

html[data-theme="dark"] .lib-doc.is-legacy .doc-card__title::after {
  color: var(--nc-text);
  background: var(--nc-bg);
}

/* The theme's generic label size (24px) was overriding the library's
   checkbox label */
.doc-library .lib-field--check label {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  color: #2a3440;
}

html[data-theme="dark"] .doc-library .lib-field--check label {
  color: var(--nc-text);
}


/* =========================================================
   Home page, round 2: boxed sections, larger product tiles,
   customer-type links, docs browser
   ========================================================= */
.home-page .home-section {
  margin: 4rem 0;
  padding: 3.2rem;
  background: var(--nc-achromatic-100);
  border: 1px solid #e0e7ee;
  border-radius: 14px;
}

.home-page .home-section__head {
  border-bottom-color: #d5e0ea;
}

/* Equipment: two rows of three larger tiles */
.home-links--equipment {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
}

.home-links--equipment .home-link {
  padding: 1.6rem 1.2rem 2.2rem;
}

.home-links--equipment .home-link__title {
  font-size: 1.9rem;
}

.home-links--equipment .home-link__image {
  width: 100%;
  height: 19rem;
}

/* Customer-type links under the product tiles */
.home-segments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}

.home-segments:empty {
  display: none;
}

.home-segment {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.4rem 4.4rem 1.4rem 1.8rem;
  color: var(--nc-achromatic-000);
  text-decoration: none;
  background: linear-gradient(to right, #035486 0%, #0876a1 100%);
  border-radius: 10px;
}

.home-segment:hover,
.home-segment:focus {
  color: var(--nc-achromatic-000);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(5, 78, 130, 0.3);
}

.home-segment:focus-visible {
  outline: 3px solid #035486;
  outline-offset: 3px;
}

.home-segment::after {
  position: absolute;
  top: 50%;
  right: 1.8rem;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: -0.45rem;
  content: "";
  border-top: 2px solid var(--nc-achromatic-000);
  border-right: 2px solid var(--nc-achromatic-000);
  transform: rotate(45deg);
}

.home-segment__title {
  font-size: 1.7rem;
  font-weight: 700;
}

.home-segment__desc {
  font-size: 1.4rem;
  opacity: 0.92;
}

/* Docs: type buttons and product picker */
.home-docs {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 2.4rem 4rem;
  align-items: start;
}

.home-page .home-docs__label {
  display: block;
  margin: 0 0 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: #2a3440;
}

.home-docs__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-docs__chips li {
  margin: 0;
  padding: 0;
}

.home-docs__chip {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: #035486;
  text-decoration: none;
  background: var(--nc-achromatic-000);
  border: 1px solid #c9d6e2;
  border-radius: 999px;
}

.home-docs__chip:hover,
.home-docs__chip:focus {
  color: #035486;
  text-decoration: none;
  background: #eef4f9;
  border-color: #035486;
}

.home-docs__chip:focus-visible,
.home-docs__go:focus-visible,
.home-docs__product select:focus-visible {
  outline: 3px solid #035486;
  outline-offset: 2px;
}

.home-docs__product-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.home-docs__product select {
  flex: 1 1 100%;
  min-width: 0;
  height: 4.4rem;
  padding: 0 1.2rem;
  font-size: 1.5rem;
  color: #2a3440;
  background-color: var(--nc-achromatic-000);
  border: 1px solid #b7c6d4;
  border-radius: 8px;
}

.home-docs__go {
  height: 4.4rem;
  padding: 0 1.6rem;
  font: inherit;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--nc-achromatic-000);
  cursor: pointer;
  background: #035486;
  border: 0;
  border-radius: 8px;
}

.home-docs__go:hover {
  background: #043e68;
}

@media (max-width: 991px) {
  .home-links--equipment {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-docs {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .home-page .home-section {
    margin: 3.2rem -15px;
    padding: 2.4rem 15px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .home-links--equipment .home-link__image {
    height: 13rem;
  }

  .home-links--equipment .home-link__title {
    font-size: 1.6rem;
  }
}

html[data-theme="dark"] .home-intro {
  color: var(--nc-heading);
}

html[data-theme="dark"] .home-page .home-section {
  background: var(--nc-surface);
  border-color: var(--nc-border);
}

html[data-theme="dark"] .home-page .home-section__head {
  border-bottom-color: var(--nc-border);
}

html[data-theme="dark"] .home-page .home-link {
  background: var(--nc-surface-2);
  --nc-accent: var(--nc-accent-raised);
}

html[data-theme="dark"] .home-links--applications .home-link {
  background: none;
}

html[data-theme="dark"] .home-page .home-docs__label {
  color: var(--nc-heading);
}

html[data-theme="dark"] .home-docs__chip,
html[data-theme="dark"] .home-docs__product select {
  color: var(--nc-accent);
  background: var(--nc-surface-2);
  border-color: var(--nc-border);
  --nc-accent: var(--nc-accent-raised);
}

html[data-theme="dark"] .home-docs__product select {
  color: var(--nc-text);
}

html[data-theme="dark"] .home-docs__chip:hover,
html[data-theme="dark"] .home-docs__chip:focus {
  border-color: var(--nc-accent);
}

html[data-theme="dark"] .home-docs__go {
  color: var(--nc-accent-fill-ink);
  background: var(--nc-accent-fill);
}

/* =========================================================
   Applications page: topic cards with their article titles
   ========================================================= */
.category-card--topic .category-card__icon-wrap:not(:has(img[src])),
.category-card--topic .category-card__article-count {
  display: none;
}

.category-card.category-card--topic .category-card__link {
  flex: 0 0 auto;
  padding-bottom: 0;
  text-align: left;
}

.category-card--topic .category-card__description {
  padding-left: 0;
}

.category-card--topic .category-card__topic-list {
  margin: 0.4rem 28px 0;
}

.category-card--topic .category-card__more {
  margin: 0.4rem 28px 0;
}

/* Space below the last item, whichever it is */
.category-card--topic > :last-child {
  margin-bottom: 24px;
}

.category-card__topic-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  order: 5;
  margin: 1.2rem 0 0;
  padding: 1.2rem 0 0;
  list-style: none;
  border-top: 1px solid #e2e8f0;
}

.category-card__topic-list li {
  margin: 0;
  padding: 0;
}

.category-card__topic-list a {
  position: relative;
  z-index: 1;
  display: block;
  padding: 0.6rem 0;
  font-size: 1.5rem;
  line-height: 1.4;
  color: #0477BE;
}

.category-card__more {
  position: relative;
  z-index: 1;
  order: 6;
  margin-top: 0.8rem;
  font-size: 1.4rem;
  font-weight: 600;
}

html[data-theme="dark"] .category-card__topic-list {
  border-top-color: var(--nc-border);
}

html[data-theme="dark"] .category-card__topic-list a {
  color: var(--nc-accent);
}

/* =========================================================
   Appearance: small round button fixed to the bottom-right corner,
   with a panel holding Auto / Light / Dark
   ========================================================= */
.appearance-corner {
  position: fixed;
  right: calc(2.4rem + env(safe-area-inset-right, 0px));
  bottom: calc(2.4rem + env(safe-area-inset-bottom, 0px));
  z-index: 45;
}

.appearance-corner__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  cursor: pointer;
  background: var(--nc-achromatic-000);
  border: 1px solid #c9d6e2;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(5, 40, 70, 0.18);
}

.appearance-corner__button:hover {
  border-color: #035486;
}

.appearance-corner__button:focus {
  outline: none;
}

.appearance-corner__button:focus-visible {
  outline: 3px solid #035486;
  outline-offset: 2px;
}

/* Sun in light mode, moon in dark mode (theme assets icon-sun / icon-moon) */
.appearance-corner__icon {
  width: 2.4rem;
  height: 2.4rem;
  background-color: var(--nc-blue-500);
  -webkit-mask: var(--nc-mode-light) center / contain no-repeat;
  mask: var(--nc-mode-light) center / contain no-repeat;
}

.appearance-corner__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 1rem);
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  width: max-content;
  padding: 1.4rem 1.6rem;
  background: var(--nc-achromatic-000);
  border: 1px solid #d5e0ea;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(5, 40, 70, 0.22);
}

.appearance-corner.is-open .appearance-corner__panel {
  display: flex;
}

.appearance-corner__panel .appearance__note {
  flex-basis: auto;
  min-height: 0;
  text-align: left;
}

/* The theme's back-to-top button shares this corner; sit it above */
.scroll-to-top.is-active,
.scroll-to-top--fixed.is-active {
  bottom: calc(2.4rem + 4.4rem + 1.6rem);
}

.scroll-to-top,
.scroll-to-top--fixed {
  right: 2.4rem;
}

@media (max-width: 767px) {
  .appearance-corner {
    right: calc(1.4rem + env(safe-area-inset-right, 0px));
    bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px));
  }

  .appearance-corner__button {
    width: 4rem;
    height: 4rem;
  }
}

@media print {
  .appearance-corner {
    display: none;
  }
}

html[data-theme="dark"] .appearance-corner__button,
html[data-theme="dark"] .appearance-corner__panel {
  background: var(--nc-surface-2);
  border-color: var(--nc-border);
  --nc-accent: var(--nc-accent-raised);
}

html[data-theme="dark"] .appearance-corner__icon {
  background-color: var(--nc-blue-300);
  -webkit-mask-image: var(--nc-mode-dark);
  mask-image: var(--nc-mode-dark);
}

html[data-theme="dark"] .appearance-corner__button:focus-visible {
  outline-color: var(--nc-accent);
}


/* =========================================================
   Product page navigation, round 3
   - In-page row (before scrolling): "Jump to section:" label, outlined
     buttons, nothing highlighted.
   - Pinned header: larger title, more space, tab-style buttons (no
     outline until hover; the current section gets a bold underline),
     and a progress line under the buttons only.
   ========================================================= */
.article__body .product-nav__label,
.product-nav__label {
  margin: 0 0 0.8rem;
  padding: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: #55626e;
}

.product-header__inner {
  gap: 1.2rem;
}

.product-header__title {
  font-size: 2.6rem;
}

@media (max-width: 991px) {
  .product-header__title {
    font-size: 2.4rem;
  }
}

@media (max-width: 767px) {
  .product-header__inner {
    gap: 0.8rem;
  }

  .product-header__title {
    font-size: 2.1rem;
  }
}

.product-header__nav {
  position: relative;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  padding-bottom: 0.6rem;
}

.product-header .product-header__progress {
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: #e3e8ee;
  border-radius: 2px;
}

.product-header .product-header__progress span {
  border-radius: 2px;
}

/* Tabs in the pinned header */
.product-header .product-header__link {
  padding: 0.7rem 1.2rem 0.8rem;
  color: #3f4d5a;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 3px solid transparent;
  border-radius: 4px 4px 0 0;
}

.product-header .product-header__link:hover,
.product-header .product-header__link:focus {
  color: #035486;
  background: var(--nc-achromatic-100);
  border-color: #c9d6e2;
  border-bottom-color: #c9d6e2;
}

.product-header .product-header__link.is-current,
.product-header .product-header__link.is-current:hover {
  color: #035486;
  font-weight: 700;
  background: transparent;
  border-color: transparent;
  border-bottom-color: #035486;
}

html[data-theme="dark"] .product-nav__label {
  color: var(--nc-muted);
}

html[data-theme="dark"] .product-header .product-header__progress {
  background: var(--nc-border);
}

html[data-theme="dark"] .product-header .product-header__link {
  color: var(--nc-text);
  background: transparent;
  border-color: transparent;
}

html[data-theme="dark"] .product-header .product-header__link:hover,
html[data-theme="dark"] .product-header .product-header__link:focus {
  color: var(--nc-accent);
  background: var(--nc-surface);
  border-color: var(--nc-border);
}

html[data-theme="dark"] .product-header .product-header__link.is-current,
html[data-theme="dark"] .product-header .product-header__link.is-current:hover {
  color: var(--nc-accent);
  background: transparent;
  border-color: transparent;
  border-bottom-color: var(--nc-accent);
}

/* =========================================================
   Customer-type pages (Submetering, Municipal): product tiles grouped
   by family. Each family is a product section, so the page gets the
   same "Jump to section" buttons as product pages.
   ========================================================= */
.article__body .segment-intro {
  max-width: 64rem;
  margin: 0 0 3.2rem;
  font-size: 1.8rem;
  line-height: 1.5;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: 1.6rem;
}

.article__body a.product-tile {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.6rem 1.6rem 1.8rem;
  color: #2a3440;
  text-decoration: none;
  background: var(--nc-achromatic-000);
  border: 1px solid #d5e0ea;
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.article__body a.product-tile:hover,
.article__body a.product-tile:focus {
  color: #2a3440;
  text-decoration: none;
  border-color: #035486;
  box-shadow: 0 2px 12px rgba(5, 78, 130, 0.14);
}

.article__body a.product-tile:focus-visible {
  outline: 3px solid #035486;
  outline-offset: 2px;
}

.product-tile__image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 13rem;
  margin-bottom: 0.8rem;
  background: var(--nc-achromatic-100);
  border-radius: 6px;
}

.article__body .product-tile__image img {
  max-width: 90%;
  max-height: 11.5rem;
  margin: 0;
  padding: 0;
  object-fit: contain;
}

.product-tile__name {
  font-size: 1.8rem;
  font-weight: 700;
  color: #035486;
}

.product-tile__desc {
  display: -webkit-box;
  overflow: hidden;
  font-size: 1.4rem;
  line-height: 1.45;
  color: #55626e;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.product-tile__note {
  align-self: flex-start;
  margin-top: 0.6rem;
  padding: 0.2rem 0.8rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #5b4a00;
  background: #fdf3c4;
  border-radius: 999px;
}

.product-grid--legacy a.product-tile {
  background: #fafbfc;
}

.product-grid--legacy .product-tile__image {
  opacity: 0.85;
}

@media (max-width: 479px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .article__body a.product-tile {
    padding: 1rem 1rem 1.2rem;
  }

  .product-tile__image {
    height: 9rem;
  }

  .product-tile__name {
    font-size: 1.5rem;
  }

  .product-tile__desc {
    display: none;
  }
}

html[data-theme="dark"] .article__body a.product-tile {
  color: var(--nc-text);
  background: var(--nc-surface);
  border-color: var(--nc-border);
}

html[data-theme="dark"] .article__body a.product-tile:hover,
html[data-theme="dark"] .article__body a.product-tile:focus {
  border-color: var(--nc-accent);
  box-shadow: none;
}

html[data-theme="dark"] .product-tile__image {
  background: #e9eef2;
}

html[data-theme="dark"] .product-tile__name {
  color: var(--nc-heading);
}

html[data-theme="dark"] .product-tile__desc {
  color: var(--nc-muted);
}

html[data-theme="dark"] .product-grid--legacy a.product-tile {
  background: var(--nc-bg);
}

/* =========================================================
   Document library, round 2: calmer layout
   - Group headings without divider lines; families as larger headings
     in the browse view, products beneath them
   - Legacy tag on its own line under the card's second line
   ========================================================= */
.article__body .lib-group {
  margin: 2rem 0 0.2rem;
  padding: 0;
  font-size: 1.8rem;
  border-bottom: 0;
}

.article__body .lib-family {
  grid-column: 1 / -1;
  margin: 4rem 0 0;
  padding: 0;
  font-size: 2.4rem;
  font-weight: 700;
  color: #035486;
}

.article__body .lib-family:first-child {
  margin-top: 0;
}

.article__body .lib-group--product {
  margin-top: 1.6rem;
  font-size: 1.6rem;
  color: #3f4d5a;
}

.article__body a.lib-doc {
  grid-template-areas:
    "icon title action"
    "icon meta action"
    "icon legacy action";
}

.lib-doc.is-legacy .doc-card__title::after {
  display: none;
  content: none;
}

.lib-doc__legacy {
  grid-area: legacy;
  justify-self: start;
  margin-top: 0.4rem;
  padding: 0 0.6rem;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.7;
  color: #4a4a4a;
  background: #e5e7eb;
  border-radius: 4px;
}

html[data-theme="dark"] .article__body .lib-family {
  color: var(--nc-heading);
}

html[data-theme="dark"] .article__body .lib-group--product {
  color: var(--nc-text);
}

html[data-theme="dark"] .lib-doc__legacy {
  color: var(--nc-text);
  background: var(--nc-bg);
}


/* Article cards match the section cards: the whole card is the link, and
   the summary sits below a divider under the title (where section cards
   show their article buttons) */
.category-card--article .category-card__description {
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid #e2e8f0;
}

.category-card--current-version.category-card--article .category-card__description,
.category-card--large.category-card--article .category-card__description {
  border-top-color: rgba(255, 255, 255, 0.35);
}

html[data-theme="dark"] .category-card--article .category-card__description {
  border-top-color: var(--nc-border);
}

/* Progress fill is sized in px by script.js (position within the current
   section, under that section's tab) */
.product-header .product-header__progress span {
  width: 0;
  transform: none;
  transition: width 0.12s linear;
}

@media (prefers-reduced-motion: reduce) {
  .product-header .product-header__progress span {
    transition: none;
  }
}

/* Customer-type pages, round 2: larger product cards, and clear space
   before "Legacy products" */
.product-grid {
  grid-template-columns: repeat(auto-fill, minmax(34rem, 1fr));
  gap: 2rem;
}

.article__body a.product-tile {
  gap: 0.6rem;
  padding: 2rem 2rem 2.4rem;
}

.product-tile__image {
  height: 20rem;
  margin-bottom: 1.2rem;
}

.article__body .product-tile__image img {
  max-height: 17.5rem;
}

.product-tile__name {
  font-size: 2.2rem;
}

.product-tile__desc {
  font-size: 1.5rem;
}

.article__body .product-grid + .product-grid__legacy-heading {
  margin-top: 4.8rem;
}

.article__body .product-grid__legacy-heading {
  margin-bottom: 1.6rem;
}

@media (max-width: 767px) {
  .product-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
  }

  .product-tile__image {
    height: 16rem;
  }

  .article__body .product-tile__image img {
    max-height: 14rem;
  }

  .product-tile__name {
    font-size: 2rem;
  }

  .product-tile__desc {
    display: -webkit-box;
  }
}

/* Callout titles: the theme's brand_info/warning/success/danger colors are
   2.7, 1.4, 1.4 and 3.7:1 on white, too light for text. Keep them for the
   borders; use darker shades of the same hues for the titles. */
.note-info .note-title, .note--info .note-title { color: #0a73a1; }
.note-warning .note-title, .note--warning .note-title { color: #7a5b00; }
.note-success .note-title, .note--success .note-title { color: #1d6b35; }
.note-danger .note-title, .note--danger .note-title { color: #b3261e; }

html[data-theme="dark"] .note { color: var(--nc-text); }
html[data-theme="dark"] .note-info .note-title, html[data-theme="dark"] .note--info .note-title { color: var(--nc-accent); }
html[data-theme="dark"] .note-warning .note-title, html[data-theme="dark"] .note--warning .note-title { color: #f2d46b; }
html[data-theme="dark"] .note-success .note-title, html[data-theme="dark"] .note--success .note-title { color: #8fe3a8; }
html[data-theme="dark"] .note-danger .note-title, html[data-theme="dark"] .note--danger .note-title { color: #ff9a92; }

/* "Legacy products" is often the first subheading in its section, where
   the theme removes the top margin; keep the gap after the current products */
.article__body .product-block > .product-grid + h3.product-grid__legacy-heading {
  margin-top: 4.8rem;
}

/* =========================================================
   FAQ answer arrow: line and arrowhead drawn from the same numbers
   so the point sits exactly on the end of the line.
   Line: 8px from the left, 16px long, 2px thick, ending 14px down.
   ========================================================= */
.product-block--faq .faq-answer::before {
  box-sizing: border-box;
  top: 0;
  left: 0.8rem;
  width: 1.6rem;
  height: 1.4rem;                     /* line runs from 12px to 14px: centre 13px */
}

.product-block--faq .faq-answer::after {
  box-sizing: border-box;
  top: 0.8rem;                        /* 13px centre minus half of the 10px head */
  left: 2.3rem;                       /* starts where the line ends (8 + 16 - 1px overlap) */
  border-top-width: 5px;
  border-bottom-width: 5px;
  border-left-width: 7px;
}

/* =========================================================
   Document library: clearer group headings so it's easy to see where
   one product or document type ends and the next begins
   ========================================================= */
.article__body .lib-family {
  margin-top: 5.6rem;
  padding-bottom: 0.8rem;
  font-size: 3rem;
  border-bottom: 3px solid #035486;
}

.article__body .lib-group--product,
.article__body .lib-group {
  margin-top: 3.2rem;
  margin-bottom: 0.8rem;
  font-size: 2.1rem;
  font-weight: 700;
  color: #1f2a33;
}

.article__body .lib-family + .lib-group--product {
  margin-top: 2rem;
}

html[data-theme="dark"] .article__body .lib-family {
  border-bottom-color: var(--nc-accent);
}

html[data-theme="dark"] .article__body .lib-group--product,
html[data-theme="dark"] .article__body .lib-group {
  color: var(--nc-heading);
}

/* =========================================================
   Home page, round 3
   - Section headings stay links but lose the chevron
   - "All ..." links read as buttons
   - Software: name-only cards
   ========================================================= */
.home-section__title a:hover {
  text-decoration: underline;
}

.home-section__all {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--nc-achromatic-000);
  text-decoration: none;
  background: #035486;
  border-radius: 999px;
}

.home-section__all:hover,
.home-section__all:focus {
  color: var(--nc-achromatic-000);
  text-decoration: none;
  background: #043e68;
}

.home-section__all:focus-visible {
  outline: 3px solid #035486;
  outline-offset: 3px;
}

html[data-theme="dark"] .home-section__all,
html[data-theme="dark"] .home-section__all:hover,
html[data-theme="dark"] .home-section__all:focus {
  color: var(--nc-accent-fill-ink);
  background: var(--nc-accent-fill);
}

.home-links--applications {
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.2rem;
}

.home-links--applications .home-link {
  justify-content: center;
  min-height: 8.8rem;
  padding: 2rem;
  background: var(--nc-achromatic-000);
  border: 1px solid #d5e0ea;
  border-radius: 8px;
}

.home-links--applications .home-link::after {
  display: none;
}

.home-links--applications .home-link__title {
  font-size: 1.8rem;
}

html[data-theme="dark"] .home-links--applications .home-link {
  background: var(--nc-surface-2);
  border-color: var(--nc-border);
  --nc-accent: var(--nc-accent-raised);
}

/* =========================================================
   Equipment page: filters and product-type groups
   ========================================================= */
.equipment__controls {
  margin: 0 0 3.2rem;
  padding: 2rem 2.4rem;
  background: var(--nc-achromatic-100);
  border: 1px solid #e0e7ee;
  border-radius: 12px;
}

.equipment__label,
.equipment__segments legend {
  display: block;
  margin: 0 0 0.8rem;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #2a3440;
  border: 0;
}

.equipment__segments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0 0 2rem;
  padding: 0;
  border: 0;
}

.equipment__segments legend {
  flex-basis: 100%;
}

.equipment__segment-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.equipment__segment {
  margin: 0;
  padding: 1rem 2rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: #035486;
  cursor: pointer;
  background: var(--nc-achromatic-000);
  border: 1px solid #c9d6e2;
  border-radius: 999px;
}

.equipment__segment:hover {
  border-color: #035486;
}

.equipment__segment-input:checked + .equipment__segment {
  color: var(--nc-achromatic-000);
  background: #035486;
  border-color: #035486;
}

.equipment__segment-input:focus-visible + .equipment__segment {
  outline: 3px solid #035486;
  outline-offset: 2px;
}

.equipment__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.6rem 3.2rem;
}

.equipment__select {
  min-width: 26rem;
  height: 4.4rem;
  padding: 0 1.2rem;
  font-size: 1.5rem;
  color: #2a3440;
  background: var(--nc-achromatic-000);
  border: 1px solid #b7c6d4;
  border-radius: 8px;
}

.equipment__select:focus-visible {
  outline: 3px solid #035486;
  outline-offset: 2px;
}

.equipment__field--check {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 4.4rem;
}

.equipment__field--check input {
  width: 1.8rem;
  height: 1.8rem;
  margin: 0;
}

.equipment__field--check label {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #2a3440;
}

.equipment__count {
  margin: 1.6rem 0 0;
  padding: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: #55626e;
}

.equipment__group + .equipment__group {
  margin-top: 5.6rem;
}

.equipment__group-title {
  margin: 0 0 2rem;
  padding-bottom: 0.8rem;
  font-size: 3rem;
  font-weight: 700;
  color: #035486;
  border-bottom: 3px solid #035486;
}

@media (max-width: 767px) {
  .equipment__controls {
    padding: 1.6rem;
  }

  .equipment__segment {
    padding: 0.8rem 1.4rem;
    font-size: 1.5rem;
  }

  .equipment__select {
    min-width: 0;
    width: 100%;
  }

  .equipment__field {
    flex: 1 1 100%;
  }

  .equipment__group-title {
    font-size: 2.4rem;
  }
}

.category-card__article-list--empty {
  display: none;
}

html[data-theme="dark"] .equipment__controls {
  background: var(--nc-surface);
  border-color: var(--nc-border);
}

html[data-theme="dark"] .equipment__label,
html[data-theme="dark"] .equipment__segments legend,
html[data-theme="dark"] .equipment__field--check label {
  color: var(--nc-heading);
}

html[data-theme="dark"] .equipment__segment {
  color: var(--nc-accent);
  background: var(--nc-surface-2);
  border-color: var(--nc-border);
  --nc-accent: var(--nc-accent-raised);
}

html[data-theme="dark"] .equipment__segment-input:checked + .equipment__segment {
  color: var(--nc-accent-fill-ink);
  background: var(--nc-accent-fill);
  border-color: var(--nc-accent-fill);
}

html[data-theme="dark"] .equipment__select {
  color: var(--nc-text);
  background: var(--nc-surface-2);
  border-color: var(--nc-border);
  --nc-accent: var(--nc-accent-raised);
}

html[data-theme="dark"] .equipment__count {
  color: var(--nc-muted);
}

html[data-theme="dark"] .equipment__group-title {
  color: var(--nc-heading);
  border-bottom-color: var(--nc-accent);
}


/* =========================================================
   Header: logo and "Support Center" side by side in one link
   ========================================================= */
.site-header__brand a {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  color: var(--nc-achromatic-000);
  text-decoration: none;
}

/* =========================================================
   Equipment cards: same rhythm as section cards
   - image area at the top; the text (title, divider, summary, availability,
     features) sits at the bottom of the card and grows upward, so cards in a
     row end on the same line however much text each one has
   - summaries clamp to three lines
   ========================================================= */
.equipment__cards .category-card--article .category-card__title {
  display: -webkit-box;
  min-height: 2.6em;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
}

.equipment__cards .category-card--article .category-card__title {
  margin-top: auto;
}

.equipment__cards .category-card--article .category-card__description {
  -webkit-line-clamp: 3;
  margin-bottom: 0;
  line-height: 1.45;
}

/* Cards without a product image keep the same image-area height, so
   every card in a row lines up */
.equipment__cards .category-card--article .category-card__icon-wrap:empty::before {
  width: 9.6rem;
  height: 9.6rem;
  content: "";
  background: rgba(5, 78, 130, 0.06);
  border-radius: 12px;
}

.category-card--current-version .category-card__icon-wrap:empty::before {
  background: rgba(255, 255, 255, 0.12);
}

/* =========================================================
   Equipment page: jump-to row
   ========================================================= */
.equipment__jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.8rem;
  margin: 1.6rem 0 0;
  padding: 1.6rem 0 0;
  list-style: none;
  border-top: 1px solid #dbe3eb;
}

.equipment__jump li {
  margin: 0;
  padding: 0;
}

.equipment__jump-label {
  margin-right: 0.4rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: #55626e;
}

.equipment__jump a {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: #035486;
  text-decoration: none;
  background: var(--nc-achromatic-000);
  border: 1px solid #c9d6e2;
  border-radius: 999px;
}

.equipment__jump a:hover,
.equipment__jump a:focus {
  border-color: #035486;
}

.equipment__jump a:focus-visible {
  outline: 3px solid #035486;
  outline-offset: 2px;
}

.equipment__group-title {
  scroll-margin-top: 2.4rem;
}

html[data-theme="dark"] .equipment__jump {
  border-top-color: var(--nc-border);
}

html[data-theme="dark"] .equipment__jump-label {
  color: var(--nc-muted);
}

html[data-theme="dark"] .equipment__jump a {
  color: var(--nc-accent);
  background: var(--nc-surface-2);
  border-color: var(--nc-border);
  --nc-accent: var(--nc-accent-raised);
}

/* =========================================================
   Document library, round 3
   - no "View" (the whole card is the link)
   - quick start and specifications & installation guides gently
     highlighted as the key documents
   ========================================================= */
.lib-doc .doc-card__action {
  display: none;
}

.article__body a.lib-doc {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon meta"
    "icon legacy";
}


/* Every equipment card has the same 2px border (transparent on gradient
   cards) so content lines up exactly across a row */
.equipment__cards .category-card {
  border-width: 2px;
  border-style: solid;
}

.equipment__cards .category-card--current-version,
.equipment__cards .category-card--large {
  border-color: transparent;
}

.equipment__cards .category-card--coming-soon {
  border-style: dashed;
}

.category-card--coming-soon.category-card--article .category-card__description {
  border-top-color: rgba(5, 78, 130, 0.2);
}


/* Software on the home page: six topics sit as two rows of three */
.home-links--applications[data-count="6"],
.home-links--applications[data-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-links--applications[data-count="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 767px) {
  .home-links--applications[data-count] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* "About warranties" note under the Warranty heading: full width, normal size */
.article__body .lib-note--warranty {
  grid-column: 1 / -1;
  margin: 0 0 0.8rem;
}

.article__body .lib-note--warranty p {
  font-size: 1.5rem;
  line-height: 1.5;
}

.article__body .lib-note--warranty p.note-title {
  margin-bottom: 0.2rem;
}

/* The library's list of product pages (ul.lib-product-pages) is only data
   for script.js. Never shown, even when Zendesk's editor drops its hidden
   attribute (it did on Nov 9, 2026) */
.article__body .lib-product-pages {
  display: none !important;
}

/* =========================================================
   Product pages without a product image
   The Overview becomes a single readable column (about 70 characters
   per line) instead of leaving an empty image column.
   ========================================================= */
.product-overview--text-only,
.product-overview:not(:has(.product-overview__media)),
.product-overview:has(.product-overview__media:empty) {
  grid-template-columns: minmax(0, 1fr);
}

.product-overview--text-only .product-overview__main,
.product-overview:not(:has(.product-overview__media)) .product-overview__main {
  max-width: 72rem;
}

.product-overview__media:empty {
  display: none;
}

/* Embedded videos scale with the page */
.product-block iframe {
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 8px;
}

/* =========================================================
   Equipment page: pinned product-type bar
   ========================================================= */
html.has-equipment-list .layout {
  overflow-x: clip;               /* lets the bar stick (overflow: hidden would stop it) */
}

.equipment__bar {
  position: sticky;
  top: 0;
  z-index: 30;
  margin: -1.6rem 0 3.2rem;
  padding: 0.8rem 0 0;
  background: #fff;
  border-bottom: 1px solid #e3e8ee;
}

.equipment__bar.is-stuck {
  box-shadow: 0 10px 18px -14px rgba(5, 40, 70, 0.35);
}

.equipment__bar .equipment__jump {
  flex-wrap: nowrap;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  border-top: 0;
  scrollbar-width: none;
}

.equipment__bar .equipment__jump::-webkit-scrollbar {
  display: none;
}

.equipment__bar .equipment__jump a {
  display: block;
  padding: 0.8rem 1.2rem 0.9rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: #3f4d5a;
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 6px 6px 0 0;
}

.equipment__bar .equipment__jump a:hover,
.equipment__bar .equipment__jump a:focus {
  color: #035486;
  background: var(--nc-achromatic-100);
}

.equipment__bar .equipment__jump a.is-current {
  font-weight: 700;
  color: #035486;
  border-bottom-color: #035486;
}

.equipment__group-title {
  scroll-margin-top: 7.2rem;
}

html[data-theme="dark"] .equipment__bar {
  background: var(--nc-bg);
  border-bottom-color: var(--nc-border);
}

html[data-theme="dark"] .equipment__bar .equipment__jump a {
  color: var(--nc-text);
  background: transparent;
}

html[data-theme="dark"] .equipment__bar .equipment__jump a:hover,
html[data-theme="dark"] .equipment__bar .equipment__jump a:focus {
  color: var(--nc-accent);
  background: var(--nc-surface);
}

html[data-theme="dark"] .equipment__bar .equipment__jump a.is-current {
  color: var(--nc-accent);
  border-bottom-color: var(--nc-accent);
}


/* =========================================================
   Round 4 fixes
   ========================================================= */

/* ---- Wide pages (Equipment, Software and other category/section pages,
   and the document library): full site width, no divider under the
   breadcrumbs, less space above the content ---- */
.nc-wide-page .breadcrumbs-hr {
  display: none;
}

.nc-wide-page .breadcrumbs {
  margin-bottom: 0.8rem;
}

.nc-wide-page main .container-inner > .row:first-child,
.nc-wide-page .container > .container-inner > .row:first-child {
  margin-top: 1.2rem;
}

.nc-library-page .article__header {
  margin-top: 0.8rem;
}

.nc-library-page .article-page .breadcrumbs-container {
  padding-bottom: 40px;
}

/* ---- Product page tabs: the progress line alone marks the section ---- */
.product-header .product-header__link.is-current,
.product-header .product-header__link.is-current:hover {
  border-bottom-color: transparent;
}

html[data-theme="dark"] .product-header .product-header__link.is-current,
html[data-theme="dark"] .product-header .product-header__link.is-current:hover {
  border-bottom-color: transparent;
}

/* ---- Installation steps number straight through, even when a step list
   is split into several blocks ---- */
.steps + .steps {
  counter-reset: none;
}

/* Summary line written for cards; not shown on the article itself */
.product-card-summary {
  display: none;
}

/* ---- Card labels: status and installation as matching rounded pills,
   in title case; features as a quiet line of text ---- */
.category-card__badge,
.category-card__marker {
  text-transform: none;
  letter-spacing: 0.01em;
  border-radius: 999px;
}

.category-card__features {
  margin: 0.8rem 0 0;
  padding: 0;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.4;
  color: #55626e;
}

.category-card--current-version .category-card__features,
.category-card--large .category-card__features {
  color: rgba(255, 255, 255, 0.85);
}

html[data-theme="dark"] .category-card__features {
  color: var(--nc-muted);
}

/* ---- Product cards: title sits right on the divider (wrapping upward),
   summary is two lines ---- */
.category-card--article .category-card__title {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 2.6em;
}

.equipment__cards .category-card--article .category-card__title {
  display: flex;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.category-card--article .category-card__description,
.equipment__cards .category-card--article .category-card__description {
  -webkit-line-clamp: 2;
  min-height: 2.9em;
}

/* ---- Home page: two overlapping product images per equipment type ---- */
.home-link__images {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 14rem;
  margin-bottom: 0.8rem;
}

.home-link__images .home-link__image {
  height: 12.5rem;
  max-width: 62%;
  margin: 0;
  object-fit: contain;
}

.home-link__images--2 .home-link__image:first-child {
  position: relative;
  z-index: 1;
  transform: translateX(22%);
}

.home-link__images--2 .home-link__image + .home-link__image {
  transform: translateX(-22%) scale(0.88);
  filter: drop-shadow(-6px 4px 10px rgba(5, 40, 70, 0.12));
}

@media (max-width: 767px) {
  .home-link__images {
    height: 9.6rem;
  }

  .home-link__images .home-link__image {
    height: 8.4rem;
  }
}

/* ---- Equipment page: filters on the left, results on the right ---- */
.equipment {
  display: grid;
  grid-template-columns: 26rem minmax(0, 1fr);
  grid-template-areas: "filters main";
  gap: 3.2rem;
  align-items: start;
}

.equipment__filter-toggle {
  display: none;
}

.equipment__filters {
  position: sticky;
  top: 1.6rem;
  grid-area: filters;
  max-height: calc(100vh - 3.2rem);
  padding: 2rem;
  overflow-y: auto;
  background: var(--nc-achromatic-100);
  border: 1px solid #e0e7ee;
  border-radius: 12px;
}

.equipment__main {
  grid-area: main;
  min-width: 0;
}

.equipment__filters-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.2rem;
  margin-bottom: 1.2rem;
}

.equipment__filters-title {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 700;
  color: #1f2a33;
}

.equipment__clear {
  padding: 0.2rem 0;
  font: inherit;
  font-size: 1.4rem;
  font-weight: 600;
  color: #0477BE;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: 0;
}

.equipment__clear:disabled {
  color: #6b7785;
  text-decoration: none;
  cursor: default;
}

.equipment__fieldset {
  margin: 0;
  padding: 1.4rem 0 0;
  border: 0;
  border-top: 1px solid #dbe3eb;
}

.equipment__fieldset + .equipment__fieldset {
  margin-top: 1.4rem;
}

.equipment__legend {
  float: left;
  width: 100%;
  margin: 0 0 0.6rem;
  padding: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: #1f2a33;
  border: 0;
}

.equipment__legend + * {
  clear: both;
}

.equipment__option {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.4rem 0;
}

.equipment__option input {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  margin: 0.2rem 0 0;
  accent-color: #035486;
}

.equipment__option label {
  display: flex;
  flex: 1 1 auto;
  justify-content: space-between;
  gap: 0.8rem;
  margin: 0;
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.35;
  color: #2a3440;
  cursor: pointer;
}

.equipment__option--group label {
  font-weight: 700;
}

.equipment__option-count {
  flex: 0 0 auto;
  color: #6b7785;
}

.equipment__option.is-unavailable label {
  color: #8d98a3;
  cursor: default;
}

.equipment__nested {
  margin: 0 0 0.6rem 2.5rem;
}

.equipment__nested--flat {
  margin-left: 0;
}

.equipment__subhead {
  margin: 0.6rem 0 0.2rem;
  padding: 0;
  font-size: 1.45rem;
  font-weight: 700;
  color: #2a3440;
}

.equipment__option input:focus-visible,
.equipment__clear:focus-visible,
.equipment__view-btn:focus-visible,
.equipment__filter-toggle:focus-visible,
.equipment__row:focus-visible {
  outline: 3px solid #035486;
  outline-offset: 2px;
}

.equipment__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  margin: 0 0 2.4rem;
}

.equipment__toolbar .equipment__count {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #3f4d5a;
}

.equipment__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
}

.equipment__tool-label {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: #3f4d5a;
}

.equipment__tools .equipment__select {
  min-width: 0;
  height: 4rem;
}

.equipment__view {
  display: inline-flex;
  padding: 0.3rem;
  background: #eef2f5;
  border-radius: 999px;
}

.equipment__view-btn {
  min-height: 3.4rem;
  padding: 0 1.4rem;
  font: inherit;
  font-size: 1.4rem;
  font-weight: 600;
  color: #3f4d5a;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 999px;
}

.equipment__view-btn[aria-pressed="true"] {
  color: var(--nc-achromatic-000);
  background: #035486;
}

.equipment__main .equipment__group + .equipment__group {
  margin-top: 4.8rem;
}

.equipment__main .equipment__group-title {
  font-size: 2.6rem;
}

/* List view */
/* Equipment page while the product list loads: the template's tiles stay hidden */
html.nc-equipment-loading .category-cards-container:not(.equipment__cards) {
  visibility: hidden;
}

.equipment__list {
  display: flex;
  flex-direction: column;
}

.equipment__row {
  display: grid;
  grid-template-columns: 7.2rem minmax(0, 1fr) auto;
  gap: 1.6rem;
  align-items: center;
  padding: 1.2rem 0.8rem;
  color: #2a3440;
  text-decoration: none;
  border-bottom: 1px solid #e3e8ee;
}

.equipment__row:hover,
.equipment__row:focus {
  color: #2a3440;
  text-decoration: none;
  background: var(--nc-achromatic-100);
}

.equipment__row-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.2rem;
  height: 5.6rem;
  border-radius: 6px;
}

.equipment__row-image img {
  max-width: 90%;
  max-height: 5rem;
  object-fit: contain;
}

.equipment__row-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.equipment__row-name {
  font-size: 1.7rem;
  font-weight: 700;
  color: #035486;
}

.equipment__row:hover .equipment__row-name {
  text-decoration: underline;
}

.equipment__row-desc {
  overflow: hidden;
  font-size: 1.4rem;
  color: #55626e;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.equipment__row-features {
  font-size: 1.25rem;
  font-weight: 600;
  color: #6b7785;
}

.equipment__row-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
}

.equipment__pill {
  padding: 0.3rem 1rem;
  font-size: 1.2rem;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 999px;
}

.equipment__pill--current { color: var(--nc-achromatic-000); background: #035486; }
.equipment__pill--upcoming,
.equipment__pill--development { color: #0a3d62; background: #dbeafe; }
.equipment__pill--legacy { color: #3f4d5a; background: #e5e7eb; }
.equipment__pill--indoor { color: var(--nc-achromatic-000); background: #6d28d9; }
.equipment__pill--outdoor { color: var(--nc-achromatic-000); background: #166534; }

@media (max-width: 991px) {
  .equipment {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "toggle" "filters" "main";
    gap: 1.6rem;
  }

  .equipment__filter-toggle {
    display: inline-flex;
    grid-area: toggle;
    align-items: center;
    justify-self: start;
    gap: 0.8rem;
    min-height: 4.4rem;
    padding: 0 1.8rem;
    font: inherit;
    font-size: 1.5rem;
    font-weight: 700;
    color: #035486;
    cursor: pointer;
    background: var(--nc-achromatic-000);
    border: 1px solid #c9d6e2;
    border-radius: 999px;
  }

  .equipment__filter-toggle::before {
    width: 1.4rem;
    height: 1rem;
    content: "";
    background:
      linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) 50% 50% / 70% 2px no-repeat,
      linear-gradient(currentColor, currentColor) 50% 100% / 40% 2px no-repeat;
  }

  .equipment__filters {
    position: static;
    display: none;
    max-height: none;
  }

  .equipment.is-filters-open .equipment__filters {
    display: block;
  }
}

@media (max-width: 599px) {
  .equipment__row {
    grid-template-columns: 5.6rem minmax(0, 1fr);
  }

  .equipment__row-image {
    width: 5.6rem;
    height: 4.8rem;
  }

  .equipment__row-tags {
    grid-column: 2;
    justify-content: flex-start;
  }

  .equipment__row-desc {
    white-space: normal;
  }
}

html[data-theme="dark"] .equipment__filters {
  background: var(--nc-surface);
  border-color: var(--nc-border);
}

html[data-theme="dark"] .equipment__filters-title,
html[data-theme="dark"] .equipment__legend,
html[data-theme="dark"] .equipment__subhead,
html[data-theme="dark"] .equipment__option label,
html[data-theme="dark"] .equipment__toolbar .equipment__count,
html[data-theme="dark"] .equipment__tool-label {
  color: var(--nc-heading);
}

html[data-theme="dark"] .equipment__option-count,
html[data-theme="dark"] .equipment__option.is-unavailable label,
html[data-theme="dark"] .equipment__clear:disabled {
  color: var(--nc-muted);
}

html[data-theme="dark"] .equipment__clear {
  color: var(--nc-accent);
}

html[data-theme="dark"] .equipment__fieldset {
  border-top-color: var(--nc-border);
}

html[data-theme="dark"] .equipment__view {
  background: var(--nc-surface-2);
  --nc-accent: var(--nc-accent-raised);
}

html[data-theme="dark"] .equipment__view-btn {
  color: var(--nc-text);
}

html[data-theme="dark"] .equipment__view-btn[aria-pressed="true"] {
  color: var(--nc-accent-fill-ink);
  background: var(--nc-accent-fill);
}

html[data-theme="dark"] .equipment__filter-toggle {
  color: var(--nc-accent);
  background: var(--nc-surface-2);
  border-color: var(--nc-border);
  --nc-accent: var(--nc-accent-raised);
}

html[data-theme="dark"] .equipment__list,
html[data-theme="dark"] .equipment__row {
  border-color: var(--nc-border);
}

html[data-theme="dark"] .equipment__row,
html[data-theme="dark"] .equipment__row:hover,
html[data-theme="dark"] .equipment__row:focus {
  color: var(--nc-text);
}

html[data-theme="dark"] .equipment__row:hover,
html[data-theme="dark"] .equipment__row:focus {
  background: var(--nc-surface);
}

/* Dark mode: the same soft spotlight as the product cards, not a light box */
html[data-theme="dark"] .equipment__row-image {
  background: var(--nc-stage-round);
}

html[data-theme="dark"] .equipment__row-name {
  color: var(--nc-heading);
}

html[data-theme="dark"] .equipment__row-desc,
html[data-theme="dark"] .equipment__row-features {
  color: var(--nc-muted);
}

/* ---- Back to top (replaces the theme's own button) ---- */
.scroll-to-top,
.scroll-to-top--fixed {
  display: none !important;
}

.nc-back-to-top {
  position: fixed;
  right: calc(2.4rem + env(safe-area-inset-right, 0px));
  bottom: calc(2.4rem + 4.4rem + 1.2rem + env(safe-area-inset-bottom, 0px));
  z-index: 44;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  cursor: pointer;
  background: #035486;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(5, 40, 70, 0.25);
}

.nc-back-to-top[hidden] {
  display: none;
}

.nc-back-to-top__icon {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.5rem;
  border-top: 3px solid var(--nc-achromatic-000);
  border-left: 3px solid var(--nc-achromatic-000);
  transform: rotate(45deg);
}

.nc-back-to-top:focus {
  outline: none;
}

.nc-back-to-top:focus-visible {
  outline: 3px solid #035486;
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .nc-back-to-top {
    right: calc(1.4rem + env(safe-area-inset-right, 0px));
    bottom: calc(1.4rem + 4rem + 1rem + env(safe-area-inset-bottom, 0px));
    width: 4rem;
    height: 4rem;
  }
}

@media print {
  .nc-back-to-top {
    display: none !important;
  }
}

html[data-theme="dark"] .nc-back-to-top {
  background: var(--nc-accent-fill);
}

html[data-theme="dark"] .nc-back-to-top__icon {
  border-color: var(--nc-accent-fill-ink);
}

/* counts need 4.5:1 on the filter panel's tinted background */
.equipment__option-count {
  color: #4f5a65;
}

/* features line goes below the summary (card parts are ordered with CSS order) */
.category-card .category-card__features {
  order: 99;
}

/* title case on every card label, whatever the theme's per-label rules say */
.category-card .category-card__badge,
.category-card .category-card__marker {
  text-transform: none !important;
}

.equipment__tools .equipment__tool-label {
  display: inline;
}

.equipment__tools .equipment__select {
  width: auto;
}

/* Indoor/Outdoor labels are drawn with ::before by the theme; title case too */
.category-card--outdoor::after,
.category-card--indoor::after {
  text-transform: none !important;
  letter-spacing: 0.01em;
}


/* =========================================================
   Round 5
   ========================================================= */

/* ---- Equipment page, simplified: type buttons on top, no sidebar ---- */
.equipment.equipment--simple {
  display: block;
}

.equipment__bar-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.6rem;
  margin: 0 0 1.2rem;
}

.equipment__types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.equipment__type-btn {
  min-height: 4rem;
  padding: 0 1.6rem;
  font: inherit;
  font-size: 1.5rem;
  font-weight: 600;
  color: #035486;
  white-space: nowrap;
  cursor: pointer;
  background: var(--nc-achromatic-000);
  border: 1px solid #c9d6e2;
  border-radius: 999px;
}

.equipment__type-btn:hover {
  border-color: #035486;
}

.equipment__type-btn[aria-pressed="true"] {
  color: var(--nc-achromatic-000);
  background: #035486;
  border-color: #035486;
}

.equipment__type-btn:focus-visible,
.equipment--simple .equipment__view-btn:focus-visible {
  outline: 3px solid #035486;
  outline-offset: 2px;
}

.equipment--simple .equipment__view {
  flex: 0 0 auto;
}

.equipment--simple .equipment__view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  min-height: 3.4rem;
  padding: 0;
}

.equipment--simple .equipment__view-btn svg {
  width: 1.9rem;
  height: 1.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.equipment--simple .equipment__view-btn[aria-pressed="true"] svg {
  color: var(--nc-achromatic-000);
}

.equipment--simple .equipment__count {
  margin: 0 0 2.4rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: #55626e;
}

@media (max-width: 767px) {
  .equipment__bar-top {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  /* one scrolling row of type buttons on phones */
  .equipment__types {
    flex-wrap: nowrap;
    margin: 0 -15px;
    padding: 0.2rem 15px 0.6rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .equipment__types::-webkit-scrollbar {
    display: none;
  }

  /* the view switcher sits on the "Showing # products" line, at the right */
  .equipment.equipment--simple {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: none;
    gap: 0 1.2rem;
    align-items: center;
  }

  .equipment--simple .equipment__bar-top {
    display: contents;
  }

  .equipment--simple .equipment__tabs {
    grid-column: 1 / -1;
    margin-bottom: 1rem;
  }

  .equipment--simple .equipment__view {
    grid-column: 2;
    grid-row: 2;
  }

  .equipment--simple .equipment__count {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
  }

  .equipment--simple .equipment__results {
    grid-column: 1 / -1;
    min-width: 0;
    margin-top: 2rem;
  }

  /* shorter product cards (about a quarter less tall): smaller photo, less
     padding, and titles and summaries only as tall as their text */
  .equipment__cards .category-card.category-card--article {
    padding: 12px 10px 14px;
  }

  .equipment__cards .category-card:not(:has(.category-card__article-list li)) .category-card__icon-wrap {
    height: 148px;
    padding: 36px 0 12px;
  }

  .equipment__cards .category-card__icon {
    min-height: 0;
    max-height: 100px;
  }

  .equipment__cards .category-card--article .category-card__title {
    min-height: 0;
    margin-bottom: 4px;
  }

  .equipment__cards .category-card--article .category-card__description {
    min-height: 0;
    margin-top: 1.2rem;
    padding-top: 1.2rem;
  }
}

html[data-theme="dark"] .equipment__type-btn {
  color: var(--nc-accent);
  background: var(--nc-surface);
  border-color: var(--nc-border);
}

html[data-theme="dark"] .equipment__type-btn[aria-pressed="true"] {
  color: var(--nc-accent-fill-ink);
  background: var(--nc-accent-fill);
  border-color: var(--nc-accent-fill);
}

html[data-theme="dark"] .equipment--simple .equipment__count {
  color: var(--nc-muted);
}

/* ---- Status labels: New / Coming Soon / Legacy (no "Current"), same words
   on cards and in the list ---- */
.category-card__badge--new-release {
  color: var(--nc-achromatic-000);
  background: #0f766e;
}

.category-card--new-release {
  box-shadow: 0 0 0 3px #14b8a6, 0 8px 22px rgba(15, 118, 110, 0.25);
}

.equipment__pill--new { color: var(--nc-achromatic-000); background: #0f766e; }

/* Indoor/Outdoor: always top-left, same short wording as the list */
.category-card--outdoor::after,
.category-card--indoor::after {
  top: 12px !important;
  right: auto !important;
  left: 12px !important;
}

.category-card--outdoor::after { content: "Outdoor"; }
.category-card--indoor::after { content: "Indoor"; }

/* ---- Dark mode: status cards keep readable text ----
   (the light "coming soon" and "legacy" backgrounds were paired with
   light dark-mode text) */
html[data-theme="dark"] .category-card--coming-soon {
  background: var(--nc-surface);
  border: 2px dashed #5ea8d6;
}

html[data-theme="dark"] .category-card--previous-version {
  background: var(--nc-surface);
  border-color: var(--nc-border);
}

html[data-theme="dark"] .category-card--coming-soon .category-card__title,
html[data-theme="dark"] .category-card--coming-soon .category-card__title a,
html[data-theme="dark"] .category-card--previous-version .category-card__title,
html[data-theme="dark"] .category-card--previous-version .category-card__title a {
  color: var(--nc-heading);
}

html[data-theme="dark"] .category-card--coming-soon .category-card__description,
html[data-theme="dark"] .category-card--previous-version .category-card__description,
html[data-theme="dark"] .category-card--coming-soon .category-card__features,
html[data-theme="dark"] .category-card--previous-version .category-card__features {
  color: var(--nc-text);
}

html[data-theme="dark"] .category-card--coming-soon .category-card__description,
html[data-theme="dark"] .category-card--previous-version .category-card__description {
  border-top-color: var(--nc-border);
}

html[data-theme="dark"] .category-card--coming-soon .category-card__icon-wrap,
html[data-theme="dark"] .category-card--previous-version .category-card__icon-wrap {
  background: transparent;
}

html[data-theme="dark"] .category-card--product .category-card__icon-wrap {
  background: var(--nc-stage-round);
}

html[data-theme="dark"] .equipment__pill--current,
html[data-theme="dark"] .equipment__pill--upcoming,
html[data-theme="dark"] .equipment__pill--development {
  color: #0a2540;
  background: #bfdbfe;
}

html[data-theme="dark"] .equipment__pill--legacy {
  color: var(--nc-text);
  background: var(--nc-surface-2);
  --nc-accent: var(--nc-accent-raised);
}

/* ---- Home: single image per equipment type again ---- */
.home-link__images--1 .home-link__image {
  max-width: 90%;
  transform: none;
}

/* ---- Home: Docs box ---- */
.home-docs {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 3.2rem;
}

.home-docs__type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-docs__type-grid li {
  margin: 0;
  padding: 0;
}

.home-docs__type {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2rem;
  height: 100%;
  min-height: 11.2rem;
  padding: 1.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  color: #035486;
  text-decoration: none;
  background: var(--nc-achromatic-000);
  border: 1px solid #d5e0ea;
  border-radius: 10px;
}

.home-docs__type:hover,
.home-docs__type:focus {
  color: #035486;
  text-decoration: none;
  border-color: #035486;
  box-shadow: 0 2px 10px rgba(5, 78, 130, 0.12);
}

.home-docs__icon {
  width: 2.8rem;
  height: 2.8rem;
  padding: 0.6rem;
  fill: none;
  stroke: #035486;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: #eef4f9;
  border-radius: 8px;
  box-sizing: content-box;
}

.home-docs__families {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-docs__families li {
  margin: 0;
  padding: 0;
}

.home-docs__family {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.8rem 1.2rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: #035486;
  text-decoration: none;
  background: var(--nc-achromatic-000);
  border: 1px solid #d5e0ea;
  border-radius: 10px;
}

.home-docs__family:hover,
.home-docs__family:focus {
  color: #035486;
  text-decoration: none;
  border-color: #035486;
}

.home-docs__family-pic {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4rem;
  background: var(--nc-achromatic-100);
  border-radius: 6px;
}

.home-docs__family-pic img {
  max-width: 90%;
  max-height: 3.4rem;
  object-fit: contain;
}

.home-docs__more {
  margin-top: 1.2rem;
}

.home-docs__more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  font: inherit;
  font-size: 1.5rem;
  font-weight: 600;
  color: #0477BE;
  cursor: pointer;
  background: none;
  border: 0;
}

.home-docs__more-btn::after {
  width: 0.7rem;
  height: 0.7rem;
  margin-top: -0.3rem;
  content: "";
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.home-docs__more-btn[aria-expanded="true"]::after {
  margin-top: 0.3rem;
  transform: rotate(-135deg);
}

.home-docs__more-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}

.home-docs__more-list li {
  margin: 0;
  padding: 0;
}

.home-docs__more-list a {
  font-size: 1.5rem;
  font-weight: 600;
}

.home-docs__type:focus-visible,
.home-docs__family:focus-visible,
.home-docs__more-btn:focus-visible {
  outline: 3px solid #035486;
  outline-offset: 2px;
}

@media (max-width: 991px) {
  .home-docs {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 599px) {
  .home-docs__type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-docs__type {
    min-height: 9.6rem;
    font-size: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-docs__more-btn::after {
    transition: none;
  }
}

html[data-theme="dark"] .home-docs__type,
html[data-theme="dark"] .home-docs__family {
  color: var(--nc-heading);
  background: var(--nc-surface-2);
  border-color: var(--nc-border);
  --nc-accent: var(--nc-accent-raised);
}

html[data-theme="dark"] .home-docs__type:hover,
html[data-theme="dark"] .home-docs__family:hover {
  border-color: var(--nc-accent);
}

html[data-theme="dark"] .home-docs__icon {
  stroke: var(--nc-accent);
  background: var(--nc-surface);
}

html[data-theme="dark"] .home-docs__family-pic {
  background: #e9eef2;
}

html[data-theme="dark"] .home-docs__more-btn {
  color: var(--nc-accent);
}


/* =========================================================
   Round 6
   ========================================================= */

/* ---- Equipment: product types as a scrollable row of tabs ---- */
.equipment__bar-top {
  align-items: center;
}

.equipment__tabs {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.equipment--simple .equipment__types {
  flex-wrap: nowrap;
  gap: 0.8rem;
  margin: 0;
  padding: 0.3rem 0.3rem 0.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.equipment--simple .equipment__types::-webkit-scrollbar {
  display: none;
}

.equipment--simple .equipment__type-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.7rem;
  min-height: 4.2rem;
  padding: 0 1.5rem;
  color: #2a3440;
  border-color: #d5e0ea;
  border-radius: 8px;
}

.equipment--simple .equipment__type-btn svg {
  width: 1.8rem;
  height: 1.8rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.equipment--simple .equipment__type-btn:hover {
  color: #035486;
  border-color: #035486;
}

.equipment--simple .equipment__type-btn[aria-pressed="true"] {
  color: var(--nc-achromatic-000);
  background: #035486;
  border-color: #035486;
}

/* Scroll signals: faded edges and arrow buttons when more tabs are hidden */
.equipment__tabs::before,
.equipment__tabs::after {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 5.6rem;
  content: "";
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.equipment__tabs::before {
  left: 0;
  background: linear-gradient(to right, #fff 35%, rgba(255, 255, 255, 0));
}

.equipment__tabs::after {
  right: 0;
  background: linear-gradient(to left, #fff 35%, rgba(255, 255, 255, 0));
}

.equipment__tabs.can-scroll-back::before,
.equipment__tabs.can-scroll-forward::after {
  opacity: 1;
}

.equipment__tabs-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  width: 3.2rem;
  height: 3.2rem;
  margin-top: -1.8rem;
  padding: 0;
  cursor: pointer;
  background: #035486;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(5, 40, 70, 0.25);
}

.equipment__tabs-arrow::before {
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  margin: 0 auto;
  content: "";
  border-top: 2px solid var(--nc-achromatic-000);
  border-right: 2px solid var(--nc-achromatic-000);
}

.equipment__tabs-arrow--prev { left: 0; }
.equipment__tabs-arrow--prev::before { transform: translateX(1px) rotate(-135deg); }
.equipment__tabs-arrow--next { right: 0; }
.equipment__tabs-arrow--next::before { transform: translateX(-1px) rotate(45deg); }

.equipment__tabs.can-scroll-back .equipment__tabs-arrow--prev,
.equipment__tabs.can-scroll-forward .equipment__tabs-arrow--next {
  display: block;
}

@media (max-width: 767px) {
  .equipment--simple .equipment__types {
    margin: 0;
    padding: 0.3rem 0.3rem 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .equipment--simple .equipment__types { scroll-behavior: auto; }
  .equipment__tabs::before, .equipment__tabs::after { transition: none; }
}

html[data-theme="dark"] .equipment--simple .equipment__type-btn {
  color: var(--nc-text);
  background: var(--nc-surface);
  border-color: var(--nc-border);
}

html[data-theme="dark"] .equipment--simple .equipment__type-btn[aria-pressed="true"] {
  color: var(--nc-accent-fill-ink);
  background: var(--nc-accent-fill);
  border-color: var(--nc-accent-fill);
}

html[data-theme="dark"] .equipment__tabs::before {
  background: linear-gradient(to right, var(--nc-bg) 35%, rgba(15, 27, 38, 0));
}

html[data-theme="dark"] .equipment__tabs::after {
  background: linear-gradient(to left, var(--nc-bg) 35%, rgba(15, 27, 38, 0));
}

html[data-theme="dark"] .equipment__tabs-arrow {
  background: var(--nc-accent-fill);
}

html[data-theme="dark"] .equipment__tabs-arrow::before {
  border-color: var(--nc-accent-fill-ink);
}

/* ---- Home Docs box: document types only, one row on wide screens ---- */
.home-docs.home-docs--types-only {
  display: block;
}

.home-docs--types-only .home-docs__type-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 991px) {
  .home-docs--types-only .home-docs__type-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .home-docs--types-only .home-docs__type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- Software icons ---- */
.home-links--applications .home-link {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 1.4rem;
}

.home-link__icon {
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
  padding: 0.8rem;
  object-fit: contain;
  background: #eef4f9;
  border-radius: 10px;
}

/* Dark mode: the same dark chip as the Docs type icons */
html[data-theme="dark"] .home-link__icon {
  background: var(--nc-surface);
}

.category-card--topic .category-card__icon {
  max-height: 8rem;
}

@media (max-width: 767px) {
  .equipment__bar-top {
    align-items: stretch;
  }

  .equipment__tabs {
    width: 100%;
  }
}

/* Equipment page: quieter type headings (smaller, light rule) */
.equipment__main .equipment__group-title,
.equipment--simple .equipment__group-title {
  margin-bottom: 1.6rem;
  padding-bottom: 0.6rem;
  font-size: 2.1rem;
  font-weight: 700;
  color: #2a3440;
  border-bottom: 1px solid #d5e0ea;
}

.equipment--simple .equipment__group + .equipment__group {
  margin-top: 4rem;
}

@media (max-width: 767px) {
  .equipment--simple .equipment__group-title {
    font-size: 1.9rem;
  }
}

html[data-theme="dark"] .equipment--simple .equipment__group-title {
  color: var(--nc-heading);
  border-bottom-color: var(--nc-border);
}

/* =========================================================
   Docs: "general documents only" mode
   ========================================================= */
.lib-products {
  margin: 0 0 3.2rem;
  padding: 2rem 2.4rem;
  border: 1px solid #d5e0ea;
  border-radius: 12px;
}

.article__body .lib-products__title {
  margin: 0 0 0.4rem;
  padding: 0;
  font-size: 1.9rem;
  font-weight: 700;
  color: #1f2a33;
  border: 0;
}

.article__body .lib-products__intro {
  margin: 0 0 1.4rem;
  font-size: 1.5rem;
  color: #55626e;
}

.lib-products__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lib-products__list li {
  margin: 0;
  padding: 0;
}

.article__body a.lib-products__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.9rem 1.2rem;
  color: #035486;
  text-decoration: none;
  background: var(--nc-achromatic-100);
  border: 1px solid transparent;
  border-radius: 8px;
}

.article__body a.lib-products__link:hover,
.article__body a.lib-products__link:focus {
  text-decoration: none;
  border-color: #035486;
}

.article__body a.lib-products__link:focus-visible {
  outline: 3px solid #035486;
  outline-offset: 2px;
}

.lib-products__name {
  font-size: 1.5rem;
  font-weight: 700;
}

.lib-products__count {
  flex: 0 0 auto;
  font-size: 1.3rem;
  color: #55626e;
}

.article__body .lib-products__none {
  margin: 0;
  font-size: 1.5rem;
  color: #55626e;
}

/* while searching, matching products read as results */
.lib-products.is-searching {
  border-color: #035486;
}

.home-docs--types-only .home-docs__type-grid--six {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-docs__type--products {
  background: #eef4f9;
}

@media (max-width: 599px) {
  .home-docs--types-only .home-docs__type-grid--six {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lib-products {
    padding: 1.6rem;
  }
}

html[data-theme="dark"] .lib-products {
  border-color: var(--nc-border);
}

html[data-theme="dark"] .article__body .lib-products__title {
  color: var(--nc-heading);
}

html[data-theme="dark"] .article__body .lib-products__intro,
html[data-theme="dark"] .lib-products__count,
html[data-theme="dark"] .article__body .lib-products__none {
  color: var(--nc-muted);
}

html[data-theme="dark"] .article__body a.lib-products__link {
  color: var(--nc-accent);
  background: var(--nc-surface);
}

html[data-theme="dark"] .home-docs__type--products {
  background: var(--nc-surface);
}

/* every document is general in this mode, so that heading adds nothing */
.nc-docs-general-only .article__body .lib-family {
  display: none;
}

.nc-docs-general-only .article__body .lib-group--type:first-of-type,
.nc-docs-general-only .article__body .lib-family + .lib-group {
  margin-top: 0;
}

.article__body .lib-products__list {
  padding-left: 0;
  list-style: none;
}

.article__body .lib-products__list li::before,
.article__body .lib-products__list li::marker {
  content: none;
}

.article__body .lib-products__intro {
  padding: 0;
}

.article__body ul.lib-products__list {
  margin: 0;
  padding: 0;
}


/* =========================================================
   Round 7: docs page
   ========================================================= */

/* the intro paragraph spans the full width */
.article__body .lib-intro,
.lib-intro {
  max-width: none;
}

/* Thumbnail in place of the PDF icon: the product picture with a small
   document-type badge, or the type icon when the heading is the product */
.article__body a.lib-doc.has-thumb::before {
  display: none;
  content: none;
}

.lib-doc__thumb {
  position: relative;
  display: flex;
  grid-area: icon;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 5.6rem;
  background: var(--nc-achromatic-100);
  border-radius: 8px;
}

.lib-doc__thumb img {
  max-width: 82%;
  max-height: 82%;
  object-fit: contain;
}

.lib-doc__type-icon svg,
.lib-doc__badge svg {
  display: block;
  fill: none;
  stroke: #035486;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lib-doc__type-icon svg {
  width: 2.6rem;
  height: 2.6rem;
  margin-top: -0.8rem;
}

.lib-doc__badge {
  position: absolute;
  top: -0.6rem;
  right: -0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  background: var(--nc-achromatic-000);
  border: 1px solid #d5e0ea;
  border-radius: 50%;
}

.lib-doc__badge svg {
  width: 1.4rem;
  height: 1.4rem;
}

.lib-doc__format {
  position: absolute;
  right: 0.4rem;
  bottom: 0.3rem;
  left: 0.4rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--nc-achromatic-000);
  text-align: center;
  letter-spacing: 0.04em;
  background: #035486;
  border-radius: 3px;
}

.lib-doc__thumb.is-picture .lib-doc__format {
  right: auto;
  bottom: -0.4rem;
  left: 50%;
  padding: 0 0.5rem;
  transform: translateX(-50%);
}

/* product headings carry the product picture */
.lib-group__pic {
  width: 3.6rem;
  height: 3.6rem;
  margin: 0 1rem 0 0;
  padding: 0.3rem;
  vertical-align: middle;
  object-fit: contain;
  background: var(--nc-achromatic-100);
  border-radius: 8px;
}

.article__body h3.lib-group--product,
.article__body h2.lib-group {
  display: flex;
  align-items: center;
}

/* general-only mode: a callout instead of the product box */
.article__body .lib-products-note {
  margin: 0 0 2.4rem;
}

html[data-theme="dark"] .lib-doc__thumb.is-picture,
html[data-theme="dark"] .lib-group__pic {
  background: #e9eef2;
}

/* type icons stand on their own (no tile behind them), in both modes */
.lib-doc__thumb:not(.is-picture),
html[data-theme="dark"] .lib-doc__thumb:not(.is-picture) {
  background: none;
}

html[data-theme="dark"] .lib-doc__type-icon svg {
  stroke: #054e82;
}

html[data-theme="dark"] .lib-doc__badge {
  background: var(--nc-surface);
  border-color: var(--nc-border);
}

html[data-theme="dark"] .lib-doc__badge svg {
  stroke: var(--nc-accent);
}

/* ---- home Docs box: the product-documents pointer is a small link ---- */
.home-docs__products-link {
  margin: 1.6rem 0 0;
  font-size: 1.5rem;
  color: #55626e;
}

.home-docs__products-link a {
  font-weight: 700;
}

.home-docs__products-link a::after {
  content: " \2192";
}

html[data-theme="dark"] .home-docs__products-link {
  color: var(--nc-muted);
}

.article__body a.lib-doc.has-thumb::after {
  display: none;
  content: none;
}


/* =========================================================
   Search window
   ========================================================= */
html.nc-search-open {
  overflow: hidden;
}

/* scrolling inside the window never scrolls the page behind it */
.nc-search,
.nc-search__dialog {
  overscroll-behavior: contain;
}

.nc-search__backdrop {
  touch-action: none;
}

.nc-search[hidden] {
  display: none;
}

.nc-search {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 1.6rem 1.6rem;
}

.nc-search__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 25, 40, 0.45);
  backdrop-filter: blur(2px);
}

.nc-search__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 68rem;
  max-height: 76vh;
  overflow: hidden;
  background: var(--nc-achromatic-000);
  border: 1px solid #d5e0ea;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(5, 30, 55, 0.3);
}

.nc-search__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.nc-search__bar {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem 1.6rem;
  border-bottom: 1px solid #e3e8ee;
}

.nc-search__icon {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  fill: none;
  stroke: #55626e;
  stroke-width: 2;
  stroke-linecap: round;
}

.nc-search .nc-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 4rem;
  margin: 0;
  padding: 0;
  font-size: 1.8rem;
  color: #1f2a33;
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
}

.nc-search__close {
  flex: 0 0 auto;
  padding: 0.3rem 0.8rem;
  font: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  color: #55626e;
  cursor: pointer;
  background: var(--nc-achromatic-100);
  border: 1px solid #d5e0ea;
  border-radius: 6px;
}

.nc-search__close:focus-visible,
.nc-search__all:focus-visible,
.nc-search__empty button:focus-visible {
  outline: 3px solid #035486;
  outline-offset: 2px;
}

.nc-search__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.8rem;
}

.nc-search__group + .nc-search__group,
.nc-search__live + .nc-search__group {
  margin-top: 0.8rem;
}

.nc-search__label {
  padding: 0.8rem 1rem 0.4rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: #55626e;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

a.nc-search__opt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title meta" "text meta";
  gap: 0.2rem 1.2rem;
  align-items: center;
  padding: 1rem 1.2rem;
  color: #1f2a33;
  text-decoration: none;
  border-radius: 8px;
}

a.nc-search__opt:hover,
a.nc-search__opt.is-active {
  color: #1f2a33;
  text-decoration: none;
  background: #eef4f9;
}

a.nc-search__opt.is-active {
  box-shadow: inset 3px 0 0 #035486;
}

.nc-search__title,
.nc-search__answer-q {
  grid-area: title;
  overflow: hidden;
  font-size: 1.5rem;
  font-weight: 700;
  color: #035486;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.nc-search__text,
.nc-search__answer-a {
  grid-area: text;
  display: -webkit-box;
  overflow: hidden;
  font-size: 1.35rem;
  line-height: 1.45;
  color: #55626e;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.nc-search__meta {
  grid-area: meta;
  padding: 0.2rem 0.8rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #3f4d5a;
  white-space: nowrap;
  background: var(--nc-achromatic-100);
  border-radius: 999px;
}

/* New products: the same label, tinted brand blue */
.nc-search__opt--new .nc-search__meta {
  color: #035486;
  background: #e6f0f8;
}

.nc-search__opt--answer {
  background: var(--nc-achromatic-100);
  border: 1px solid #cfe0ee;
}

.nc-search__opt--answer + .nc-search__opt--answer {
  margin-top: 0.4rem;
}

.nc-search__answer-a {
  font-size: 1.6rem;
  font-weight: 600;
  color: #1f2a33;
  -webkit-line-clamp: 3;
}

.nc-search__opt--noanswer .nc-search__answer-a {
  font-size: 1.4rem;
  font-weight: 500;
  color: #3f4d5a;
}

.nc-search mark {
  padding: 0 0.1em;
  color: inherit;
  background: var(--nc-yellow-300);
  border-radius: 2px;
}

.nc-search__empty {
  padding: 1.6rem 1.2rem 2rem;
  font-size: 1.4rem;
  color: #55626e;
}

.nc-search__empty p {
  margin: 0;
}

.nc-search__empty button {
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: #0477BE;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: 0;
}

.nc-search__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.6rem;
  padding: 1rem 1.6rem;
  font-size: 1.25rem;
  color: #55626e;
  background: #f8fafb;
  border-top: 1px solid #e3e8ee;
}

.nc-search__foot kbd,
.nc-search__hint {
  display: inline-block;
  min-width: 2rem;
  margin: 0 0.2rem;
  padding: 0 0.5rem;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.8;
  color: #3f4d5a;
  text-align: center;
  background: var(--nc-achromatic-000);
  border: 1px solid #d5e0ea;
  border-radius: 4px;
  box-shadow: 0 1px 0 #d5e0ea;
}

.nc-search__all {
  font-weight: 700;
}

/* ⌘K hint inside the header search box */
.site-header__search {
  position: relative;
}

.site-header__search .nc-search__hint {
  position: absolute;
  top: 50%;
  right: 1.2rem;
  margin: 0;
  pointer-events: none;
  transform: translateY(-50%);
}

.site-header__search input[readonly] {
  cursor: pointer;
}

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

  /* a panel at the top of the screen; full screen once there's a search */
  .nc-search__dialog {
    max-width: none;
    max-height: 100%;
    border: 0;
    border-radius: 0 0 14px 14px;
  }

  .nc-search.is-searching .nc-search__dialog {
    height: 100%;
    border-radius: 0;
  }

  .nc-search__keys,
  .site-header__search .nc-search__hint {
    display: none;
  }

  a.nc-search__opt {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "text" "meta";
  }

  .nc-search__meta {
    justify-self: start;
    margin-top: 0.4rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .nc-search:not([hidden]) .nc-search__dialog {
    animation: nc-search-in 0.14s ease-out;
  }

  @keyframes nc-search-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.99); }
    to { opacity: 1; transform: none; }
  }
}

html[data-theme="dark"] .nc-search__dialog {
  background: var(--nc-surface);
  border-color: var(--nc-border);
}

html[data-theme="dark"] .nc-search__bar,
html[data-theme="dark"] .nc-search__foot {
  border-color: var(--nc-border);
}

html[data-theme="dark"] .nc-search .nc-search__input {
  color: var(--nc-heading);
}

html[data-theme="dark"] .nc-search__icon {
  stroke: var(--nc-muted);
}

/* the theme's search icon (icon-search.svg), drawn in the same gray */
.nc-search .nc-search__icon--theme {
  background-color: #55626e;
}

html[data-theme="dark"] .nc-search .nc-search__icon--theme {
  background-color: var(--nc-muted);
}

html[data-theme="dark"] .nc-search__label,
html[data-theme="dark"] .nc-search__text,
html[data-theme="dark"] .nc-search__empty,
html[data-theme="dark"] .nc-search__foot {
  color: var(--nc-muted);
}

html[data-theme="dark"] a.nc-search__opt,
html[data-theme="dark"] .nc-search__answer-a {
  color: var(--nc-text);
}

html[data-theme="dark"] a.nc-search__opt:hover,
html[data-theme="dark"] a.nc-search__opt.is-active {
  color: var(--nc-text);
  background: var(--nc-surface-2);
  --nc-accent: var(--nc-accent-raised);
}

html[data-theme="dark"] a.nc-search__opt.is-active {
  box-shadow: inset 3px 0 0 var(--nc-accent);
}

html[data-theme="dark"] .nc-search__title,
html[data-theme="dark"] .nc-search__answer-q {
  color: var(--nc-accent);
}

html[data-theme="dark"] .nc-search__opt--answer {
  background: var(--nc-surface-2);
  border-color: var(--nc-border);
  --nc-accent: var(--nc-accent-raised);
}

html[data-theme="dark"] .nc-search__meta,
html[data-theme="dark"] .nc-search__close,
html[data-theme="dark"] .nc-search__foot kbd,
html[data-theme="dark"] .nc-search__hint {
  color: var(--nc-text);
  background: var(--nc-bg);
  border-color: var(--nc-border);
  box-shadow: none;
}

html[data-theme="dark"] .nc-search__opt--new .nc-search__meta {
  --nc-accent: var(--nc-accent-raised);
  color: var(--nc-accent);
  background: var(--nc-bg);
  border-color: var(--nc-accent);
}

html[data-theme="dark"] .nc-search__foot {
  background: var(--nc-bg);
}

html[data-theme="dark"] .nc-search mark {
  color: #1f2a33;
  background: #f2d46b;
}

html[data-theme="dark"] .nc-search__empty button {
  color: var(--nc-accent);
}

/* Arrived from a search result: brief highlight on the exact item */
.nc-hl {
  position: relative;
  background-color: #fff4c2 !important;
  outline: 3px solid #e0b100;
  outline-offset: 2px;
  border-radius: 4px;
  transition: background-color 1.2s ease, outline-color 1.2s ease;
}

.nc-hl--fade {
  background-color: transparent !important;
  outline-color: transparent;
}

tr.nc-hl > * {
  background-color: #fff4c2;
}

tr.nc-hl--fade > * {
  background-color: transparent;
  transition: background-color 1.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .nc-hl,
  tr.nc-hl--fade > * {
    transition: none;
  }
}

html[data-theme="dark"] .nc-hl,
html[data-theme="dark"] tr.nc-hl > * {
  color: #1f2a33;
  background-color: #f2d46b !important;
}

html[data-theme="dark"] .nc-hl--fade,
html[data-theme="dark"] tr.nc-hl--fade > * {
  color: inherit;
  background-color: transparent !important;
}

/* clear recent searches */
.nc-search__clear-row {
  margin: 0 0 1rem !important;
}

.nc-search__empty .nc-search__clear {
  font-size: 1.3rem;
}

html[data-theme="dark"] tr.nc-hl > * {
  color: #1f2a33;
}

/* Search: documents carry a document icon (type + format) */
a.nc-search__opt--doc {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "icon title meta" "icon text meta";
}

.nc-search__doc-icon {
  position: relative;
  display: flex;
  grid-area: icon;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3.8rem;
  height: 4.6rem;
  background: #eef4f9;
  border: 1px solid #cfdfec;
  border-radius: 4px 12px 4px 4px;
}

.nc-search__doc-icon svg {
  width: 1.8rem;
  height: 1.8rem;
  margin-top: -0.6rem;
  fill: none;
  stroke: #035486;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nc-search__doc-icon > span:not(.nc-icon) {
  position: absolute;
  right: -0.4rem;
  bottom: 0.3rem;
  left: -0.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--nc-achromatic-000);
  text-align: center;
  background: #035486;
  border-radius: 3px;
}

/* Products as tiles (four results or fewer): the product photo on a soft panel */
a.nc-search__opt--tile {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "pic title meta" "pic text meta";
}

.nc-search__pic {
  display: flex;
  grid-area: pic;
  align-items: center;
  justify-content: center;
  width: 7.2rem;
  height: 5.4rem;
  background: var(--nc-achromatic-100);
  border-radius: 8px;
}

.nc-search__pic img {
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
}

html[data-theme="dark"] .nc-search__pic {
  background: var(--nc-stage-round);
}

@media (max-width: 767px) {
  a.nc-search__opt--doc {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon title" "icon text" "icon meta";
  }

  a.nc-search__opt--tile {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "pic title" "pic text" "pic meta";
  }

  .nc-search__pic {
    width: 5.6rem;
    height: 4.4rem;
  }
}

html[data-theme="dark"] .nc-search__doc-icon {
  background: #e9eef2;
  border-color: #e9eef2;
}

html[data-theme="dark"] .nc-search__doc-icon svg {
  stroke: #054e82;
}

html[data-theme="dark"] .nc-search__doc-icon > span:not(.nc-icon) {
  color: var(--nc-achromatic-000);
  background: #054e82;
}

/* =========================================================
   Topic labels (which platform/app, which part of the experience)
   ========================================================= */
.nc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.category-card .category-card__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  order: 98;
  margin: 1rem 0 0;
  padding: 0;
}

.category-card__topic,
.nc-search__topic {
  display: inline-block;
  padding: 0.15rem 0.8rem;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.6;
  color: #2f4a63;
  white-space: nowrap;
  background: var(--nc-achromatic-000);
  border: 1px solid #c9d6e2;
  border-radius: 6px;
}

.category-card--current-version .category-card__topic,
.category-card--large .category-card__topic {
  color: var(--nc-achromatic-000);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
}

/* search: topics sit where the "Article" tag was; each topic is its own pill,
   with no shared background behind the group (either mode) */
.nc-search__meta:has(.nc-search__topic),
html[data-theme="dark"] .nc-search__meta:has(.nc-search__topic) {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  padding: 0;
  background: transparent;
}

@media (max-width: 767px) {
  .nc-search__meta:has(.nc-search__topic),
  html[data-theme="dark"] .nc-search__meta:has(.nc-search__topic) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    justify-self: start;
    text-align: left;
  }
}

html[data-theme="dark"] .category-card__topic,
html[data-theme="dark"] .nc-search__topic {
  color: var(--nc-text);
  background: transparent;
  border-color: var(--nc-border);
}

/* =========================================================
   Home Software box: one panel per platform
   ========================================================= */
.home-platforms--two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4rem;
}

.home-platforms--two .home-platform {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background: var(--nc-achromatic-000);
  border: 1px solid #d5e0ea;
  border-radius: 12px;
}

.home-platforms--single .home-platform__title,
.home-platforms--single .home-platform__for,
.home-platforms--single .home-platform__all {
  display: none;
}

.home-platform__title {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
  color: #1f2a33;
}

/* The platform name opens its topics page; it keeps the heading's look */
.home-platform__title-link,
.home-platform__title-link:hover,
.home-platform__title-link:focus,
html[data-theme="dark"] .home-platform__title-link,
html[data-theme="dark"] .home-platform__title-link:hover,
html[data-theme="dark"] .home-platform__title-link:focus {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.home-platform__title-link:focus-visible {
  outline: 3px solid var(--nc-blue-500);
  outline-offset: 2px;
  border-radius: 2px;
}

.home-platform__for {
  margin: 0.2rem 0 1.4rem;
  font-size: 1.4rem;
  color: #55626e;
}

.home-platforms--two .home-links--applications,
.home-platforms--two .home-links--applications[data-count] {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.8rem;
}

.home-platforms--two .home-links--applications .home-link {
  min-height: 0;
  padding: 1.2rem 1.4rem;
}

.home-platform__all {
  align-self: flex-start;
  margin-top: 1.4rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.home-platform__all::after {
  content: " \2192";
}

/* with two panels, each has its own "All … topics" link */
.home-section--applications:has(.home-platforms--two) .home-section__all {
  display: none;
}

@media (max-width: 767px) {
  .home-platforms--two {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
  }

  .home-platforms--two .home-platform {
    padding: 1.6rem;
  }
}

html[data-theme="dark"] .home-platforms--two .home-platform {
  background: var(--nc-surface);
  border-color: var(--nc-border);
}

html[data-theme="dark"] .home-platform__title {
  color: var(--nc-heading);
}

html[data-theme="dark"] .home-platform__for {
  color: var(--nc-muted);
}

/* Full-walkthrough video at the top of a guide */
.nc-video {
  margin: 0 0 2.4rem;
}

.article__body .nc-video__label {
  margin: 0 0 0.8rem;
}

.nc-video iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #0f1b26;
  border: 0;
  border-radius: 10px;
}

.article__body p.nc-video__label {
  padding: 0;
}

/* =========================================================
   NextCity guide navigation
   ========================================================= */
/* guide chapters: the guide block at the end replaces "Keep exploring" */
html.nc-in-guide .nc-related {
  display: none;
}

.nc-guide-end {
  margin: 4rem 0 0;
}

.nc-guide {
  margin: 1.6rem 0 0;
  background: var(--nc-achromatic-100);
  border: 1px solid #d5e0ea;
  border-radius: 10px;
}

.nc-guide__toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 1.2rem;
  width: 100%;
  padding: 1.2rem 1.6rem;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 10px;
}

.nc-guide__toggle:focus-visible,
.nc-guide__chapter:focus-visible,
.nc-guide-pager__link:focus-visible {
  outline: 3px solid #035486;
  outline-offset: 2px;
}

.nc-guide__kicker {
  font-size: 1.25rem;
  font-weight: 700;
  color: #55626e;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.nc-guide__where {
  flex: 1 1 auto;
  font-size: 1.6rem;
  font-weight: 700;
  color: #035486;
}

.nc-guide__chev {
  width: 0.9rem;
  height: 0.9rem;
  margin-top: -0.4rem;
  border-right: 2px solid #035486;
  border-bottom: 2px solid #035486;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.nc-guide__toggle[aria-expanded="true"] .nc-guide__chev {
  margin-top: 0.4rem;
  transform: rotate(-135deg);
}

.nc-guide__outline {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  gap: 1.6rem 2.4rem;
  padding: 0.4rem 1.6rem 1.6rem;
  border-top: 1px solid #dbe3eb;
}

.nc-guide__outline[hidden] {
  display: none;
}

.article__body .nc-guide__module-title,
.nc-guide__module-title {
  margin: 1.2rem 0 0.6rem;
  padding: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: #1f2a33;
}

.nc-guide__chapters {
  margin: 0;
  padding: 0 0 0 1.2rem;
  list-style: none;
  border-left: 2px solid #d5e0ea;
}

.nc-guide__chapters li {
  margin: 0;
  padding: 0;
}

a.nc-guide__chapter {
  display: flex;
  flex-direction: column;
  margin-left: -1.4rem;
  padding: 0.5rem 0.8rem 0.5rem 1.2rem;
  color: #3f4d5a;
  text-decoration: none;
  border-left: 2px solid transparent;
}

a.nc-guide__chapter:hover {
  color: #035486;
  text-decoration: none;
}

a.nc-guide__chapter:hover .nc-guide__title {
  text-decoration: underline;
}

a.nc-guide__chapter.is-current {
  color: #035486;
  font-weight: 700;
  border-left-color: #035486;
}

.nc-guide__num {
  font-size: 1.15rem;
  font-weight: 600;
  color: #55626e;
}

.nc-guide__title {
  font-size: 1.45rem;
  line-height: 1.35;
}

.nc-guide-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  margin: 0;
}

a.nc-guide-pager__link {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.4rem 1.6rem;
  color: #1f2a33;
  text-decoration: none;
  border: 1px solid #d5e0ea;
  border-radius: 10px;
}

a.nc-guide-pager__link--next {
  align-items: flex-end;
  text-align: right;
}

a.nc-guide-pager__link:hover {
  text-decoration: none;
  border-color: #035486;
}

.nc-guide-pager__dir {
  font-size: 1.25rem;
  font-weight: 600;
  color: #55626e;
}

.nc-guide-pager__link--prev .nc-guide-pager__dir::before { content: "\2190  "; }
.nc-guide-pager__link--next .nc-guide-pager__dir::after { content: "  \2192"; }

.nc-guide-pager__title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #035486;
}

@media (max-width: 599px) {
  .nc-guide-pager {
    grid-template-columns: minmax(0, 1fr);
  }

  .nc-guide-pager__spacer {
    display: none;
  }

  a.nc-guide-pager__link--next {
    align-items: flex-start;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nc-guide__chev { transition: none; }
}

html[data-theme="dark"] .nc-guide {
  background: var(--nc-surface);
  border-color: var(--nc-border);
}

html[data-theme="dark"] .nc-guide__kicker,
html[data-theme="dark"] .nc-guide__num,
html[data-theme="dark"] .nc-guide-pager__dir {
  color: var(--nc-muted);
}

html[data-theme="dark"] .nc-guide__where,
html[data-theme="dark"] a.nc-guide__chapter.is-current,
html[data-theme="dark"] .nc-guide-pager__title {
  color: var(--nc-accent);
}

html[data-theme="dark"] .nc-guide__chev {
  border-color: var(--nc-accent);
}

html[data-theme="dark"] .nc-guide__outline {
  border-top-color: var(--nc-border);
}

html[data-theme="dark"] .nc-guide__module-title {
  color: var(--nc-heading);
}

html[data-theme="dark"] a.nc-guide__chapter {
  color: var(--nc-text);
}

html[data-theme="dark"] a.nc-guide__chapter.is-current {
  border-left-color: var(--nc-accent);
}

html[data-theme="dark"] .nc-guide__chapters {
  border-left-color: var(--nc-border);
}

html[data-theme="dark"] a.nc-guide-pager__link {
  color: var(--nc-text);
  border-color: var(--nc-border);
}

/* =========================================================
   Coming Soon ("Contact us for availability information") and In Development
   ("Not available to order yet") line on cards and list rows
   ========================================================= */
.category-card .category-card__availability {
  order: 98;              /* after the summary, above the features line (99) */
}

.category-card__availability,
.equipment__row-availability {
  display: block;
  margin: 1rem 0 0;
  padding-left: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--nc-blue-700);
}

.equipment__row-availability {
  margin-top: 0.2rem;
}

html[data-theme="dark"] .category-card__availability,
html[data-theme="dark"] .equipment__row-availability {
  color: var(--nc-text);
}

/* =========================================================
   Keep exploring (end of every article)
   Up to three panels (Works with, Guides, More <type>), each a short list of
   compact cards: a picture (product photo or topic icon), the name with its
   status, and one line of description. Kept quieter than the article.
   ========================================================= */
.nc-related {
  margin: 0.8rem 0 2rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--nc-achromatic-300);
}

.nc-related__title {
  margin: 0 0 1.2rem;
  font-size: 1.8rem;
  font-weight: 700;
}

.nc-related__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
  gap: 1.6rem;
  align-items: start;
}

.nc-related__group {
  min-width: 0;
  padding: 1.2rem 1.2rem 1rem;
  background: var(--nc-achromatic-100);
  border-radius: 10px;
}

.nc-related__group-title {
  margin: 0 0 0.6rem;
  padding: 0 0.4rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nc-achromatic-700);
}

.nc-related__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nc-related__card {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  padding: 0.8rem;
  color: inherit;
  text-decoration: none;
  background: var(--nc-achromatic-000);
  border: 1px solid var(--nc-achromatic-300);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nc-related__card:hover {
  border-color: var(--nc-blue-500);
  box-shadow: 0 1px 4px rgba(2, 48, 77, 0.12);
}

.nc-related__card:hover .nc-related__name {
  text-decoration: underline;
}

.nc-related__pic {
  display: flex;
  flex: 0 0 4.8rem;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 6px;
}

.nc-related__pic img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.nc-related__pic--icon {
  background: var(--nc-blue-100);
}

.nc-related__pic--icon img {
  width: 2.6rem;
  height: 2.6rem;
}

.nc-related__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
  gap: 0.2rem;
}

.nc-related__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.6rem;
}

.nc-related__name {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--nc-blue-700);
}

.nc-related__meta {
  display: -webkit-box;
  overflow: hidden;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--nc-achromatic-700);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.nc-related__status {
  padding: 0 0.7rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--nc-achromatic-900);
  background: var(--nc-achromatic-100);
  border-radius: 999px;
}

.nc-related__status--coming-soon,
.nc-related__status--in-development,
.nc-related__status--new {
  color: var(--nc-blue-700);
  background: var(--nc-blue-100);
}

.nc-related__all {
  display: inline-block;
  margin: 0.8rem 0.4rem 0;
  font-size: 1.5rem;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .nc-related__card { transition: none; }
}

html[data-theme="dark"] .nc-related {
  border-top-color: var(--nc-border);
}

html[data-theme="dark"] .nc-related__group {
  background: var(--nc-surface);
}

html[data-theme="dark"] .nc-related__card {
  background: var(--nc-surface-2);
  border-color: var(--nc-border);
  --nc-accent: var(--nc-accent-raised);
}

html[data-theme="dark"] .nc-related__card:hover {
  border-color: var(--nc-accent);
  box-shadow: none;
}

html[data-theme="dark"] .nc-related__name {
  color: var(--nc-accent);
}

html[data-theme="dark"] .nc-related__meta,
html[data-theme="dark"] .nc-related__group-title {
  color: var(--nc-muted);
}

html[data-theme="dark"] .nc-related__pic {
  background: var(--nc-stage-round);
}

/* icons: no spotlight or chip in dark mode, just the light icon color */
html[data-theme="dark"] .nc-related__pic.nc-related__pic--icon {
  background: none;
}

html[data-theme="dark"] .nc-related__status {
  color: var(--nc-text);
  background: var(--nc-surface);
}

html[data-theme="dark"] .nc-related__status--coming-soon,
html[data-theme="dark"] .nc-related__status--in-development,
html[data-theme="dark"] .nc-related__status--new {
  color: var(--nc-blue-900);
  background: var(--nc-blue-300);
}

/* =========================================================
   Screenshots in guides (NextCity drafts use these classes)
   - .nc-shot: a screenshot, full width at most, with a light frame
   - .nc-shot--phone: phone screenshots at phone width
   - .nc-shot-pair: two phone screenshots side by side, with captions
   ========================================================= */
.article__body .nc-shot-wrap {
  margin: 1.6rem 0;
  padding-left: 0;
  text-align: center;
}

.article__body img.nc-shot {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--nc-achromatic-300);
  border-radius: 8px;
}

.article__body img.nc-shot--phone {
  max-width: min(28rem, 100%);
}

.article__body .nc-shot-pair {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.4rem;
  margin: 1.6rem 0;
}

.article__body .nc-shot-pair figure {
  flex: 0 1 28rem;
  margin: 0;
  text-align: center;
}

.article__body .nc-shot-pair img.nc-shot--phone {
  width: auto;
  height: min(48rem, 70vh);   /* same height, so the captions line up */
  max-width: 100%;
  object-fit: contain;
}

.article__body .nc-shot-pair figcaption {
  margin-top: 0.8rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.article__body .nc-table-scroll {
  overflow-x: auto;
}

html[data-theme="dark"] .article__body img.nc-shot {
  border-color: var(--nc-border);
}

/* =========================================================
   Theme-colored icons (.nc-icon)
   Each icon file is used as a shape; the theme fills it with a color, so one
   file works in light mode, dark mode and on the blue header. The file comes
   from --nc-icon (set on the element) or, for document cards, --nc-file-pdf
   and --nc-file-web (set in document_head.hbs).
   Colors: Blue-500 in light mode, Blue-300 in dark mode (3:1 or better on
   every surface); PDF documents Red-700 / Red-500.
   ========================================================= */
:root {
  --nc-icon-color: var(--nc-blue-500);
  --nc-pdf-color: var(--nc-red-700);
}

html[data-theme="dark"] {
  --nc-icon-color: var(--nc-blue-300);
  --nc-pdf-color: var(--nc-red-500);
}

.nc-icon {
  display: inline-block;
  flex: none;
  width: 1.8rem;
  height: 1.8rem;
  vertical-align: middle;
  background-color: var(--nc-icon-color);
  -webkit-mask: var(--nc-icon) center / contain no-repeat;
  mask: var(--nc-icon) center / contain no-repeat;
}

/* an icon inside a chip: the chip keeps its background, the icon fills it */
.nc-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.nc-icon-chip > .nc-icon {
  width: 100%;
  height: 100%;
}

/* home Docs tiles: a larger chip, so the file-type labels stay readable */
.home-docs__icon.nc-icon-chip {
  width: 4rem;
  height: 4rem;
  padding: 0.5rem;
}

/* header: white, like the link text */
.site-header .nc-icon {
  background-color: var(--nc-achromatic-000);
}

/* contact page */
.contacts .contacts__icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

/* the icon matches its link text in both modes, including hover */
.contacts a .contacts__icon {
  background-color: #0477BE;
}

.contacts a:hover .contacts__icon,
.contacts a:focus .contacts__icon {
  background-color: #035486;
}

html[data-theme="dark"] .contacts a .contacts__icon {
  background-color: var(--nc-accent);
}

html[data-theme="dark"] .contacts a:hover .contacts__icon,
html[data-theme="dark"] .contacts a:focus .contacts__icon {
  background-color: #9fdaf4;
}

/* Software and NextCity cards */
.category-card .nc-icon.category-card__icon {
  width: 6.4rem;
  height: 6.4rem;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
}

.category-cards-container--compact .nc-icon.category-card__icon {
  width: 4.8rem;
  height: 4.8rem;
}

html[data-theme="dark"] .category-card .nc-icon.category-card__icon {
  padding: 0;
  background-color: var(--nc-icon-color);
  border-radius: 0;
  filter: none;
}

/* Equipment tabs: brand blue icon; white on the selected (filled) tab */
.equipment__type-btn .nc-icon {
  width: 1.8rem;
  height: 1.8rem;
  background-color: var(--nc-icon-color);
}

.equipment__type-btn[aria-pressed="true"] .nc-icon,
html[data-theme="dark"] .equipment__type-btn[aria-pressed="true"] .nc-icon {
  background-color: var(--nc-achromatic-000);
}

/* search and the Documents library */
.nc-search__doc-icon .nc-icon {
  width: 3.4rem;
  height: 3.4rem;
  margin-top: -0.8rem;
}

/* with a chosen type icon (already file-shaped), no drawn page behind it */
.nc-search__doc-icon:has(.nc-icon),
html[data-theme="dark"] .nc-search__doc-icon:has(.nc-icon) {
  background: none;
  border: 0;
}

.lib-doc__type-icon .nc-icon {
  width: 2.6rem;
  height: 2.6rem;
  margin-top: -0.8rem;
}

.lib-doc__badge .nc-icon {
  width: 1.4rem;
  height: 1.4rem;
}

/* dark mode: the light icon color on the dark tile */
html[data-theme="dark"] .lib-doc__type-icon .nc-icon {
  background-color: var(--nc-icon-color);
}

/* Keep exploring cards */
.nc-related__pic--icon .nc-icon {
  width: 2.6rem;
  height: 2.6rem;
}

/* Search: a chosen document icon on a square tile (light gray in light mode,
   the page's darkest blue in dark mode), filling most of it */
.nc-search__doc-icon.nc-search__doc-icon--chosen,
html[data-theme="dark"] .nc-search__doc-icon.nc-search__doc-icon--chosen {
  width: 4.8rem;
  height: 4.8rem;
  background: var(--nc-achromatic-100);
  border: 0;
  border-radius: 8px;
}

html[data-theme="dark"] .nc-search__doc-icon.nc-search__doc-icon--chosen {
  background: var(--nc-bg);
}

.nc-search__doc-icon.nc-search__doc-icon--chosen .nc-icon {
  width: 3.6rem;
  height: 3.6rem;
  margin: 0;
}

/* Documents library: a chosen type icon fills the space the tile used to take */
.lib-doc__type-icon.lib-doc__type-icon--chosen .nc-icon {
  width: 5.6rem;
  height: 5.6rem;
  margin: 0;
}

/* File-shaped icons are drawn a little left of center in their 24px box
   (the folded corner side is narrower); nudge them so they look centered */
.nc-icon.nc-icon--file {
  transform: translateX(4%);
}

/* ---- Article and topic cards on phones: shorter cards so a list is quick to
   scroll (icon area, padding and type tightened; product photo cards keep
   their size) ---- */
@media (max-width: 599px) {
  .category-cards-container {
    gap: 12px;
    padding: 12px 0;
  }

  .category-card:not(.category-card--product):not(.category-card--large) {
    padding: 16px 18px;
  }

  .category-card:not(.category-card--product):not(.category-card--large) .category-card__icon-wrap,
  .category-card:not(.category-card--product):not(:has(.category-card__article-list li)) .category-card__icon-wrap {
    height: auto;
    min-height: 0;
    padding: 4px 0 10px;
  }

  .category-card:not(.category-card--product) .nc-icon.category-card__icon {
    width: 4.4rem;
    height: 4.4rem;
  }

  .category-card:not(.category-card--product) img.category-card__icon {
    min-width: 0;
    min-height: 0;
    max-height: 6rem;
  }

  .category-card:not(.category-card--product) .category-card__title {
    margin-bottom: 4px;
    font-size: 18px;
    line-height: 1.35;
  }

  .category-card:not(.category-card--product) .category-card__description {
    margin-bottom: 8px;
    font-size: 14px;
  }
}

@media (max-width: 599px) {
  /* icon on the left, text beside it: about half the height of a stacked card */
  .category-card:not(.category-card--product):not(.category-card--large) .category-card__link {
    display: grid;
    grid-template-columns: 4.4rem minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    text-align: left;
  }

  .category-card:not(.category-card--product):not(.category-card--large) .category-card__link > * {
    grid-column: 2;
  }

  .category-card:not(.category-card--product):not(.category-card--large) .category-card__link > .category-card__icon-wrap {
    grid-row: 1 / span 6;
    grid-column: 1;
    justify-content: flex-start;
    padding: 2px 0 0;
  }

  .category-card:not(.category-card--product):not(.category-card--large) .category-card__link > hr,
  .category-card:not(.category-card--product):not(.category-card--large) [class*="divider"] {
    margin: 6px 0 8px;
  }
}

@media (max-width: 599px) {
  /* topic (section) cards: the padding sits on the link */
  .category-card[data-type="section"]:not(.category-card--product) .category-card__link {
    padding: 14px 16px;
    align-items: center;
  }

  /* article cards: title, summary and topics beside the icon */
  .category-card--article:not(.category-card--product) {
    display: grid;
    grid-template-columns: 4.4rem minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    text-align: left;
  }

  .category-card--article:not(.category-card--product) > * {
    grid-column: 2;
    order: 0;
  }

  .category-card--article:not(.category-card--product) > .category-card__link {
    display: block;
    grid-row: 1 / span 6;
    grid-column: 1;
    padding: 0;
  }

  .category-card--article:not(.category-card--product) > .category-card__link .category-card__icon-wrap {
    justify-content: flex-start;
    height: auto;
    padding: 4px 0 0;
  }

  .category-card--article:not(.category-card--product) .category-card__title {
    margin-top: 0;
  }
}

@media (max-width: 599px) {
  /* title and description start at the same place beside the icon (the
     site-wide 10px paragraph inset is removed from card descriptions) */
  .category-card:not(.category-card--product) .category-card__title,
  .category-card:not(.category-card--product) p.category-card__description,
  .category-card:not(.category-card--product) .category-card__description {
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-indent: 0;
  }
}

@media (max-width: 599px) {
  /* the icon is centered vertically in the card as a whole; title,
     description and topics run beside it */
  .category-card:not(.category-card--product):not(.category-card--large) .category-card__link > .category-card__icon-wrap,
  .category-card--article:not(.category-card--product) > .category-card__link {
    grid-row: 1 / span 6;
    align-self: center;
  }

  .category-card:not(.category-card--product):not(.category-card--large) .category-card__link > .category-card__icon-wrap,
  .category-card--article:not(.category-card--product) > .category-card__link .category-card__icon-wrap {
    padding: 0;
  }

  .category-card:not(.category-card--product):not(.category-card--large) .category-card__link > .category-card__title,
  .category-card--article:not(.category-card--product) > .category-card__title {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .category-card--article:not(.category-card--product) > .category-card__description {
    margin-top: 10px;
  }

  .category-card:not(.category-card--product):not(.category-card--large) .category-card__link > .category-card__description {
    margin-top: 6px;
  }
}

/* =========================================================
   Article navigation (On this page)
   Built by script.js on product pages and long articles:
   - .nc-rail: beside the article at 1100 px and wider (html.nc-rail-on)
   - .nc-otp: the On this page toggle under the title, everywhere else
   - .nc-contents and .nc-sheet: the Contents button in the bottom corner
     and the panel it opens
   Also here: the header coming back on scroll up, and the Appearance
   options in the Menu, on phones.
   ========================================================= */
html.nc-rail-on .article-page .column {
  position: relative;
}

/* the old hand-written On this page boxes: the navigation replaces them */
html.nc-nav-ready .article__body .nc-toc {
  display: none;
}

.nc-rail {
  position: absolute;
  top: 0;
  bottom: 0;
}

.nc-rail__box {
  position: sticky;
  top: 2.4rem;
  /* stops above the back-to-top button in the bottom corner */
  max-height: calc(100vh - 14rem);
  overflow-y: auto;
  /* a subtle frame; script.js counts its border and padding (32 px) in the
     rail's width */
  padding: 1.4rem 1.5rem 1.2rem;
  border: 1px solid #e3e8ee;
  border-radius: 12px;
}

.nc-rail__title {
  margin: 0 0 1rem;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4f5f6e;
}

.nc-rail__wrap {
  position: relative;
}

/* the reading line: a thin track with a fill that grows as you scroll */
.nc-rail__track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  border-radius: 0;
  background: #d5e0ea;
}

.nc-rail__progress {
  position: absolute;
  inset: 0;
  background: #0477BE;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.1s linear;
}

.nc-rail__list {
  margin: 0;
  padding: 0 0 0 1.4rem;
  list-style: none;
}

.nc-rail__list li {
  margin: 0;
  padding: 0;
}

.nc-rail__list li::before {
  content: none;
}

.nc-rail__link {
  display: block;
  /* a heading that wraps: lines after the first are indented */
  padding: 0.5rem 0 0.5rem 1.2rem;
  text-indent: -1.2rem;
  font-size: 1.4rem;
  line-height: 1.4;
  color: #4f5f6e;
  text-decoration: none;
}

/* entries inside a section (steps and sub-headings), indented and smaller */
.nc-rail__link--sub {
  padding-left: 2.4rem;
  font-size: 1.3rem;
}

.nc-rail__link:hover,
.nc-rail__link:focus-visible {
  color: #0477BE;
  text-decoration: underline;
}

.nc-rail__link[aria-current] {
  color: #0477BE;
  font-weight: 700;
}

html[data-theme="dark"] .nc-rail__title,
html[data-theme="dark"] .nc-rail__link {
  color: var(--nc-muted);
}

html[data-theme="dark"] .nc-rail__box {
  border-color: var(--nc-border);
}

html[data-theme="dark"] .nc-rail__track {
  background: var(--nc-border);
}

html[data-theme="dark"] .nc-rail__link:hover,
html[data-theme="dark"] .nc-rail__link:focus-visible,
html[data-theme="dark"] .nc-rail__link[aria-current] {
  color: var(--nc-accent);
}

html[data-theme="dark"] .nc-rail__progress {
  background: var(--nc-accent);
}

@media (prefers-reduced-motion: reduce) {
  .nc-rail__progress {
    transition: none;
  }
}

/* while the script measures how wide the headings want to be */
.nc-rail--measure .nc-rail__link {
  white-space: nowrap;
}

/* while the script works out where each heading's lines break: in bold, so
   the current section (bold) wraps exactly like the others */
.nc-rail--bold .nc-rail__link {
  font-weight: 700;
}

/* hidden whenever the script has turned the rail off (narrow window, or a
   heading that would need three lines); the toggle and Contents button show
   instead */
html:not(.nc-rail-on) .nc-rail {
  display: none;
}

html.nc-rail-on .nc-otp,
html.nc-rail-on .nc-contents {
  display: none;
}

/* ---- On this page toggle, under the title ---- */
.nc-otp {
  max-width: 64rem;
  margin: -1.6rem 0 3.2rem;
}

.nc-otp__toggle {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 4.8rem;
  margin: 0;
  padding: 0.8rem 1.6rem;
  font: inherit;
  font-size: 1.6rem;
  line-height: 1.3;
  color: #1f2a33;
  text-align: left;
  cursor: pointer;
  background: var(--nc-achromatic-000);
  border: 1px solid #c9d6e2;
  border-radius: 10px;
}

.nc-otp__toggle:hover {
  border-color: #035486;
}

.nc-otp__toggle:focus-visible,
.nc-contents:focus-visible,
.nc-sheet__close:focus-visible,
.nc-sheet__top:focus-visible {
  outline: 3px solid #035486;
  outline-offset: 2px;
}

.nc-otp__toggle[aria-expanded="true"] {
  border-radius: 10px 10px 0 0;
}

.nc-otp__icon,
.nc-otp__chev {
  display: flex;
  flex: none;
}

.nc-otp__icon {
  color: #035486;
}

.nc-otp__label {
  font-weight: 700;
}

.nc-otp__count {
  flex: 1;
  font-size: 1.4rem;
  color: #55626e;
}

.nc-otp__chev {
  color: #55626e;
  transition: transform 0.2s ease;
}

.nc-otp__toggle[aria-expanded="true"] .nc-otp__chev {
  transform: rotate(180deg);
}

.nc-otp__list {
  max-height: max(24rem, 50vh);
  margin: 0;
  padding: 0.8rem 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  background: var(--nc-achromatic-000);
  border: 1px solid #c9d6e2;
  border-top: 0;
  border-radius: 0 0 10px 10px;
}

.nc-otp__list li,
.nc-sheet__list li {
  margin: 0;
  padding: 0;
}

.nc-otp__list li::before,
.nc-sheet__list li::before {
  content: none;
}

/* one line per section; a heading that wraps has its second line indented */
.nc-otp__link,
.nc-sheet__link {
  display: block;
  padding: 0.8rem 1.6rem 0.8rem 2.8rem;
  text-indent: -1.2rem;
  font-size: 1.5rem;
  line-height: 1.4;
  color: #4f5f6e;
  text-decoration: none;
  border-left: 3px solid transparent;
}

.nc-otp__link--sub,
.nc-sheet__link--sub {
  padding-left: 4.4rem;
  font-size: 1.4rem;
}

.nc-otp__link:hover,
.nc-otp__link:focus-visible,
.nc-sheet__link:hover,
.nc-sheet__link:focus-visible,
.nc-sheet__top:hover,
.nc-sheet__top:focus-visible {
  color: #0477BE;
  text-decoration: underline;
}

.nc-otp__link[aria-current],
.nc-sheet__link[aria-current] {
  font-weight: 700;
  color: #0477BE;
  border-left-color: #0477BE;
}

/* ---- Contents button (in place of Back to top) ---- */
html.nc-has-contents .nc-back-to-top {
  display: none !important;
}

.nc-contents {
  position: fixed;
  right: calc(2.4rem + env(safe-area-inset-right, 0px));
  bottom: calc(2.4rem + 4.4rem + 1.2rem + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  height: 4.4rem;
  margin: 0;
  padding: 0 1.6rem 0 1rem;
  font: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2a33;
  cursor: pointer;
  background: var(--nc-achromatic-000);
  border: 1px solid #c9d6e2;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(5, 40, 70, 0.22);
}

.nc-contents[hidden] {
  display: none;
}

.nc-contents__ring {
  flex: none;
}

/* the ring fills as the reader moves down the article */
.nc-contents__track {
  stroke: #d5e0ea;
}

.nc-contents__arc {
  stroke: #0477BE;
  transition: stroke-dashoffset 0.1s linear;
}

/* ---- The panel it opens: above the button; a sheet from the bottom on
   phones ---- */
html.nc-sheet-open {
  overflow: hidden;
}

.nc-sheet {
  position: fixed;
  inset: 0;
  z-index: 990;
}

.nc-sheet[hidden] {
  display: none;
}

.nc-sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 25, 40, 0.35);
  touch-action: none;
}

.nc-sheet__panel {
  position: absolute;
  right: calc(2.4rem + env(safe-area-inset-right, 0px));
  bottom: calc(2.4rem + 4.4rem + 1.2rem + 4.4rem + 0.8rem + env(safe-area-inset-bottom, 0px));
  width: min(38rem, calc(100vw - 4.8rem));
  max-height: min(60vh, 56rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--nc-achromatic-000);
  border: 1px solid #d5e0ea;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(5, 30, 55, 0.28);
}

.nc-sheet__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.6rem 0.6rem 1.6rem;
  background: inherit;
  border-bottom: 1px solid #e3e8ee;
}

.nc-sheet__title {
  flex: 1;
  margin: 0;
  padding: 0;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4f5f6e;
}

.nc-sheet__close {
  width: 4.4rem;
  height: 4.4rem;
  margin: 0;
  padding: 0;
  font-size: 2.4rem;
  line-height: 1;
  color: #4f5f6e;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
}

.nc-sheet__top {
  display: flex;
  align-items: center;
  min-height: 4.4rem;
  padding: 0 1rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: #0477BE;
  text-decoration: none;
  border-radius: 8px;
}

.nc-sheet__list {
  margin: 0;
  padding: 0.6rem 0 1.2rem;
  list-style: none;
}

@media (max-width: 767px) {
  .nc-contents {
    right: calc(1.4rem + env(safe-area-inset-right, 0px));
    bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px));
  }

  .nc-sheet__panel {
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-height: 75vh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-width: 1px 0 0;
    border-radius: 16px 16px 0 0;
  }

  /* the Appearance options move into the Menu, so Back to top takes the
     bottom corner */
  .appearance-corner {
    display: none;
  }

  .nc-back-to-top {
    bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ---- Appearance options in the Menu (phones) ---- */
.site-header__appearance {
  display: none;
}

@media (max-width: 767px) {
  .site-header__appearance {
    display: grid;
    gap: 0.8rem;
    margin-top: 0.4rem;
    padding: 1.2rem 1.4rem 0.6rem;
    border-top: 1px solid #d5e0ea;
  }

  .site-header__appearance .appearance__label {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4f5f6e;
  }
}

/* ---- Header comes back on scroll up (phones; script.js decides when) ---- */
@media (max-width: 767px) {
  html.nc-hdr-reveal .header.site-header {
    position: sticky;
    top: 0;
    z-index: 900;
    transform: translateY(var(--nc-hdr-y, 0px));
  }

  html.nc-hdr-reveal .header.site-header.is-revealed {
    transform: none;
    box-shadow: 0 4px 14px rgba(5, 40, 70, 0.25);
  }

  html.nc-hdr-reveal .header.site-header.is-revealed,
  html.nc-hdr-reveal .header.site-header.is-hiding {
    transition: transform 0.25s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nc-otp__chev,
  .nc-contents__arc,
  html.nc-hdr-reveal .header.site-header.is-revealed,
  html.nc-hdr-reveal .header.site-header.is-hiding {
    transition: none;
  }
}

/* ---- Dark mode ---- */
html[data-theme="dark"] .nc-otp__toggle,
html[data-theme="dark"] .nc-otp__list,
html[data-theme="dark"] .nc-contents,
html[data-theme="dark"] .nc-sheet__panel {
  color: var(--nc-text);
  background: var(--nc-surface);
  border-color: var(--nc-border);
}

html[data-theme="dark"] .nc-otp__toggle:hover {
  border-color: var(--nc-accent);
}

html[data-theme="dark"] .nc-otp__icon,
html[data-theme="dark"] .nc-sheet__top {
  color: var(--nc-accent);
}

html[data-theme="dark"] .nc-otp__count,
html[data-theme="dark"] .nc-otp__chev,
html[data-theme="dark"] .nc-otp__link,
html[data-theme="dark"] .nc-sheet__link,
html[data-theme="dark"] .nc-sheet__title,
html[data-theme="dark"] .nc-sheet__close,
html[data-theme="dark"] .site-header__appearance .appearance__label {
  color: var(--nc-muted);
}

html[data-theme="dark"] .nc-otp__link:hover,
html[data-theme="dark"] .nc-otp__link:focus-visible,
html[data-theme="dark"] .nc-sheet__link:hover,
html[data-theme="dark"] .nc-sheet__link:focus-visible,
html[data-theme="dark"] .nc-otp__link[aria-current],
html[data-theme="dark"] .nc-sheet__link[aria-current] {
  color: var(--nc-accent);
  border-left-color: var(--nc-accent);
}

html[data-theme="dark"] .nc-contents__track {
  stroke: var(--nc-border);
}

html[data-theme="dark"] .nc-contents__arc {
  stroke: var(--nc-accent);
}

html[data-theme="dark"] .nc-sheet__head {
  border-color: var(--nc-border);
}

html[data-theme="dark"] .nc-sheet__scrim {
  background: rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .site-header__appearance {
  border-top-color: var(--nc-border);
}


/* ---- Animated GIFs: pause button (script.js, "Animated GIFs") ---- */
.article__body .nc-gif-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
  line-height: 0;
}

.article__body .nc-gif-wrap > img.nc-gif {
  max-width: 100%;
}

.article__body .nc-gif-button {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  margin: 0;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.82);
  color: #ffffff;
  cursor: pointer;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.article__body .nc-gif-button svg {
  fill: currentColor;
}

.article__body .nc-gif-button:hover {
  background: rgba(17, 24, 39, 0.95);
}

.article__body .nc-gif-button:focus-visible {
  outline: 3px solid #035486;
  outline-offset: 2px;
}

html[data-theme="dark"] .article__body .nc-gif-button:focus-visible {
  outline-color: var(--nc-accent);
}

/* ---- Breathing room: step lists after a paragraph, and card grids
   (Web Portal overview, Nov 10) ---- */
.article__body p + .steps {
  margin-top: 2.4rem;
}

.article__body .nc-features {
  margin: 3.2rem 0;
}

/* =========================================================
   Article design system (Nov 2026)
   One type scale, one spacing scale and one set of heading colors for
   article text, so every page has the same rhythm. Later in the file than
   the older rules on purpose: where both set the same thing, this wins.
   Components with their own class rules (cards, steps, product sections)
   keep their layout; only their spacing values move onto the scale.

   Spacing scale (1rem = 10px):
     --nc-space-1  0.4rem   inside a line (icon to text)
     --nc-space-2  0.8rem   heading to its first line
     --nc-space-3  1.2rem   tight pairs (list items, caption to image)
     --nc-space-4  1.6rem   paragraph to paragraph
     --nc-space-5  2.4rem   around images, tables, notes, step lists, toggles
     --nc-space-6  3.2rem   around notes, under product section titles
     --nc-space-7  4.0rem   above a subheading (h3, product subsections), around images
     --nc-space-8  4.8rem   above a section heading (h2)
     --nc-space-9  7.2rem   between product-page sections

   Type scale (desktop / phone):
     h2 2.8 / 2.4rem, 600   h3 2.2 / 2rem, 600   h4 1.8rem, 700   h5 1.6rem, 700
     body 1.8rem / 1.6      compact text (toggle answers, captions) 1.6rem / 1.6

   Heading colors: --nc-heading-ink by default; .nc-heading--brand (or the
   older .nc-primary) for brand blue. Both have dark-mode values that meet
   WCAG 2.2 AA on the page, on cards and on toggles.
   ========================================================= */
:root {
  --nc-space-1: 0.4rem;
  --nc-space-2: 0.8rem;
  --nc-space-3: 1.2rem;
  --nc-space-4: 1.6rem;
  --nc-space-5: 2.4rem;
  --nc-space-6: 3.2rem;
  --nc-space-7: 4.0rem;
  --nc-space-8: 4.8rem;
  --nc-space-9: 7.2rem;
  --nc-heading-ink: #2a3440;      /* 12.6:1 on white */
  --nc-brand-ink: #035486;        /* brand blue 700, 8.2:1 on white */
  --nc-text-compact: 1.6rem;
}

html[data-theme="dark"] {
  --nc-heading-ink: var(--nc-heading);   /* #eef3f7 */
  --nc-brand-ink: var(--nc-accent);      /* 5.1:1 page, 4.5:1 cards */
}

/* ---- Text */
.article__body p,
.article__body ul,
.article__body ol {
  margin: 0 0 var(--nc-space-4);
}

.article__body li + li {
  margin-top: var(--nc-space-1);
}

.article__body li > ul,
.article__body li > ol {
  margin: var(--nc-space-1) 0 0;
}

/* the last thing in a box doesn't add space below it; low priority (:where)
   so boxes that set their own end space keep it (toggle answers, below) */
.article__body :where(p, ul, ol, table, .note, .steps):last-child,
.article__body :where(.note) > :last-child {
  margin-bottom: 0;
}

/* compact text: one size for toggle answers and captions (tables keep
   their own sizes: 15px in spec cards, 16px elsewhere) */
.article__body .accordion__item-content :is(p, li, .spec-table th, .spec-table td),
.article__body figcaption {
  font-size: var(--nc-text-compact);
  line-height: 1.6;
}

/* ---- Headings (plain ones: headings with their own class keep their size) */
.article__body h2:not([class]),
.article__body h3:not([class]),
.article__body h4:not([class]),
.article__body h5:not([class]) {
  color: var(--nc-heading-ink);
  line-height: 1.3;
  padding: 0;
}

.article__body h2:not([class]) {
  margin: var(--nc-space-8) 0 var(--nc-space-3);
  font-size: 2.8rem;
  font-weight: 600;
}

.article__body h3:not([class]) {
  margin: var(--nc-space-7) 0 var(--nc-space-2);
  font-size: 2.2rem;
  font-weight: 600;
}

.article__body :is(h4, h5):not([class]) {
  margin: var(--nc-space-5) 0 var(--nc-space-2);
  font-size: 1.8rem;
  font-weight: 700;
}

.article__body h5:not([class]) {
  font-size: 1.6rem;
}

/* a heading at the top of its box, or right under another heading */
.article__body > :is(h2, h3, h4, h5):first-child,
.article__body :is(.accordion__item-content, .note, .tab, .step__body, .faq-answer, .nc-feature, .product-overview__main) > :is(h2, h3, h4, h5):first-child,
.article__body :is(h2, h3) + :is(h3, h4, h5):not([class]) {
  margin-top: 0;
}

.article__body :is(h2, h3) + :is(h3, h4, h5):not([class]) {
  margin-top: var(--nc-space-3);
}

.article__body > :is(h2, h3, h4, h5):first-child {
  margin-top: 0;
}

/* open toggle answers: the same space under the last line whatever it is
   (text, list, table, image, note), so the next question never crowds it */
.article__body .accordion.inner .faq-answer > :last-child,
.article__body .product-block--faq .faq-answer > :last-child {
  margin-bottom: var(--nc-space-5);
}

/* an answer that ends with a table: its last row line needs more room
   before the next question's divider */
.article__body .accordion.inner .faq-answer > :is(table, .nc-table-scroll):last-child,
.article__body .product-block--faq .faq-answer > :is(table, .nc-table-scroll):last-child {
  margin-bottom: var(--nc-space-6);
}

/* headings inside toggle answers: one step smaller than in the text */
.article__body .accordion__item-content h3:not([class]) {
  margin-top: var(--nc-space-5);
  font-size: 1.8rem;
}

.article__body .accordion__item-content :is(h4, h5):not([class]) {
  margin-top: var(--nc-space-4);
  font-size: 1.6rem;
}

/* heading colors */
.article__body .nc-heading--brand,
.article__body .nc-primary {
  color: var(--nc-brand-ink);
}

/* ---- Blocks: images, tables, notes, step lists, toggle groups, cards */
.article__body p:has(> img:not(.pdf, .csv, .xls)),
.article__body p:has(> a > img),
.article__body p:has(> iframe),
.article__body pre,
.article__body .doc-rows,
.article__body p.nc-shot-wrap,
.article__body figure,
.article__body .nc-shot-pair,
.article__body .nc-video,
.article__body table,
.article__body table.spec-table,
.article__body div:has(> table:only-child),
.article__body .nc-table-scroll,
.article__body .nc-dims,
.article__body > .steps {
  margin-top: var(--nc-space-5);
  margin-bottom: var(--nc-space-5);
}

/* toggles stack into one group; the group gets block spacing */
.article__body > .accordion,
.article__body .tab > .accordion {
  margin-top: 0;
  margin-bottom: 0;
}

.article__body :not(.accordion) + .accordion {
  margin-top: var(--nc-space-5);
}

.article__body .accordion:not(:has(+ .accordion)) {
  margin-bottom: var(--nc-space-5);
}

/* images get more room than other blocks: they were drawn for a white page
   and need space around them to read as separate from the text */
.article__body p:has(> img:not(.pdf, .csv, .xls)),
.article__body p:has(> a > img),
.article__body p:has(> .nc-gif-wrap),
.article__body p.nc-shot-wrap,
.article__body figure,
.article__body .nc-shot-pair {
  margin-top: var(--nc-space-7);
  margin-bottom: var(--nc-space-7);
}

/* an image inside a step sits a little closer to the instruction it shows */
.article__body .step__body p:has(> img:not(.pdf, .csv, .xls)),
.article__body .step__body p:has(> .nc-gif-wrap) {
  margin-top: var(--nc-space-6);
  margin-bottom: var(--nc-space-7);
}

/* notes stand a little further apart than other blocks */
.article__body .note {
  margin-top: var(--nc-space-6);
  margin-bottom: var(--nc-space-6);
}

/* a table inside a scroll box or a spec card is spaced by its box */
.article__body :is(.nc-table-scroll, .spec-group, .nc-dims__table) table {
  margin-top: 0;
  margin-bottom: 0;
}

.article__body hr {
  margin: var(--nc-space-6) 0;
}

/* empty paragraphs left from the old editor take no space */
.article__body p:empty {
  display: none;
}

/* a step's instruction to what follows it inside the step */
.article__body .step__instruction {
  margin-bottom: var(--nc-space-3);
}

.article__body .note p:not(:last-child) {
  margin-bottom: var(--nc-space-3);
}

/* a diagram right under a product subheading (spec cards) */
.article__body h3.product-subsection + :is(img, figure, picture) {
  margin-top: var(--nc-space-4);
}

/* spec tables wrapped in a figure, inside spec cards */
.article__body .spec-group > h3.product-subsection + figure {
  margin-top: var(--nc-space-3);
}

/* images inside a note: a little tighter than in the text, notes are compact */
.article__body .note :is(figure, p:has(> img:not(.pdf, .csv, .xls))) {
  margin-top: var(--nc-space-5);
  margin-bottom: var(--nc-space-5);
}

.article__body .note > :is(figure, p):last-child {
  margin-bottom: 0;
}

/* box contents on product pages (A - Remote Reader, B - Mounting Plate...):
   a two-column list of labels */
.article__body ul.nc-kit-list {
  columns: 2;
  column-gap: var(--nc-space-5);
  margin: var(--nc-space-5) 0;
  padding: 0;
  list-style: none;
}

.article__body ul.nc-kit-list li {
  margin: 0 0 var(--nc-space-3);
  font-weight: 600;
  color: var(--nc-heading-ink);
  break-inside: avoid;
}

@media (max-width: 479px) {
  .article__body ul.nc-kit-list {
    columns: 1;
  }
}

/* ---- Product pages: the same scale */
.article__body .product-block + .product-block {
  margin-top: var(--nc-space-9);
}

.article__body .product-block > h2.product-section {
  margin-bottom: var(--nc-space-6);
}

.article__body h3.product-subsection + :is(table, .spec-table, p, .doc-rows, .doc-cards, .steps, .accordion, ul) ,
.article__body h3.product-subsection + p:has(> img) {
  margin-top: var(--nc-space-3);
}

.article__body .product-block :is(ul, ol, p, .steps, .accordion, table, .column-container, .product-overview, .nc-kit-list, .tabs) + h3.product-subsection {
  margin-top: var(--nc-space-7);
}

.article__body .faq-answer > :is(h3, h4):not([class]) {
  margin-top: var(--nc-space-5);
}

.article__body .faq-answer > :is(h3, h4):not([class]):first-child {
  margin-top: 0;
}

@media (max-width: 599px) {
  .article__body h2:not([class]) {
    margin-top: var(--nc-space-7);
    font-size: 2.4rem;
  }

  .article__body h3:not([class]) {
    margin-top: var(--nc-space-6);
    font-size: 2rem;
  }
}

/* ---- Support hours and closures article: script.js turns the closures
   table into these date cards (upcoming closures only) and hides the table,
   which stays in the article as the thing to edit. ---- */
.nc-closures {
  margin: 1.6rem 0 2.4rem;
}

/* .article__body so the article list spacing (margin under every ul) doesn't
   apply; the items' margin rule below also beats "li + li" */
.article__body .nc-closures__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.article__body .nc-closures__item {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin: 0;
  padding: 1.2rem 1.4rem;
  border: 1px solid #d9e2ea;
  border-radius: 10px;
  background: #ffffff;
}

.nc-closures__cal {
  flex: none;
  width: 5.6rem;
  overflow: hidden;
  border: 1px solid #0477be;
  border-radius: 8px;
  background: #ffffff;
  text-align: center;
}

.nc-closures__month {
  display: block;
  padding: 0.2rem 0;
  background: #0477be;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nc-closures__day {
  display: block;
  padding: 0.2rem 0 0.3rem;
  color: #2a3440;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.2;
}

.nc-closures__text {
  min-width: 0;
  line-height: 1.45;
}

.nc-closures__text > span {
  display: block;
}

.nc-closures__date {
  color: #2a3440;
  font-weight: 700;
}

.nc-closures__hours {
  color: #2a3440;
}

.nc-closures__reason {
  color: #6b625e;
  font-size: 1.4rem;
}

html[data-theme="dark"] .article__body .nc-closures__item {
  border-color: var(--nc-border);
  background: var(--nc-surface);
}

html[data-theme="dark"] .nc-closures__cal {
  border-color: var(--nc-accent);   /* 3:1 or more against the card */
  background: var(--nc-surface-2);
}

html[data-theme="dark"] .nc-closures__month {
  background: var(--nc-accent-fill);
  color: var(--nc-accent-fill-ink);
}

html[data-theme="dark"] .nc-closures__day,
html[data-theme="dark"] .nc-closures__date {
  color: var(--nc-heading);
}

html[data-theme="dark"] .nc-closures__hours {
  color: var(--nc-text);
}

html[data-theme="dark"] .nc-closures__reason {
  color: var(--nc-muted);
}

/* Search window: the support hours answer's closures line ("Closed tomorrow
   (Thanksgiving)"), under the next opening or closing */
.nc-search__hours-note {
  display: block;
  font-size: 1.4rem;
  font-weight: 500;
  color: #3f4d5a;
}

html[data-theme="dark"] .nc-search__hours-note {
  color: var(--nc-muted);
}

/* ---- Closure banner: top of every page, from 5 business days before a
   closure until it ends. script.js builds it from the closures table in the
   "Support hours and closures" article and the built-in holidays. ---- */
.nc-closure-banner {
  background: #0a3a5c;
  color: #ffffff;
}

.nc-closure-banner__inner {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.2rem 1.6rem;
}

.nc-closure-banner__text {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.5;
  text-align: center;
}

.nc-closure-banner__text a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.nc-closure-banner__text a:hover,
.nc-closure-banner__text a:focus {
  text-decoration-thickness: 2px;
}

.nc-closure-banner__close {
  flex: none;
  width: 3.2rem;
  height: 3.2rem;
  margin: -0.4rem 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.nc-closure-banner__close:hover {
  background: rgba(255, 255, 255, 0.15);
}

.nc-closure-banner a:focus-visible,
.nc-closure-banner__close:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

html[data-theme="dark"] .nc-closure-banner {
  background: #123a57;
  color: #ffffff;
  border-bottom: 1px solid var(--nc-border);
}

/* the dark theme's text and link colors would be grayer or too dark on the
   banner */
html[data-theme="dark"] .nc-closure-banner__text,
html[data-theme="dark"] .nc-closure-banner__text a {
  color: #ffffff;
}

@media (max-width: 767px) {
  .nc-closure-banner__inner {
    padding: 1rem 1.6rem;
  }

  .nc-closure-banner__text {
    font-size: 1.4rem;
    text-align: left;
  }
}

/* Support hours and closures article: a closure this business week (from
   Thursday on, through next Tuesday) is highlighted, and its date says
   "Today", "Tomorrow", "This Friday" or "Next Monday" */
.article__body .nc-closures__item--soon {
  border-color: #0477be;
  background: #eaf4fb;
  box-shadow: inset 4px 0 0 #0477be;
}

html[data-theme="dark"] .article__body .nc-closures__item--soon {
  border-color: var(--nc-accent);
  background: var(--nc-surface-2);
  box-shadow: inset 4px 0 0 var(--nc-accent);
}