@charset "UTF-8";

/* ============================================
   ONTARIO FONTS & ICONS
   ============================================ */

/* Inter Font Family */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Phosphor Icons */
@import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css');
@import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/bold/style.css');
@import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/fill/style.css');


/***** Normalize.css *****/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

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

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

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

a {
  background-color: transparent;
}

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

b,
strong {
  font-weight: bolder;
}

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

small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

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

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

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

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

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

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

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

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

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

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

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

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

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

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}


/* ============================================
   PHOSPHOR ICONS CONFIGURATION
   ============================================ */

/* Base icon class */
.ph {
  font-family: 'Phosphor' !important;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Bold variant */
.ph-bold {
  font-family: 'Phosphor-Bold' !important;
  font-weight: 700;
}

/* Fill variant */
.ph-fill {
  font-family: 'Phosphor-Fill' !important;
}

/* Icon sizing */
.ph-sm { font-size: 16px; }
.ph-md { font-size: 20px; }
.ph-lg { font-size: 24px; }
.ph-xl { font-size: 32px; }

/* ============================================
   ONTARIO ICON COLORS
   Icons use Ontario blue palette - no colorful icons
   ============================================ */

/* Default icon color - Ontario blue-700 */
.ph,
.ph-bold,
.ph-fill {
  color: #0A52A2 !important;
}

/* Icons in section headers on homepage - white on gradient backgrounds */
.knowledge-base .section h3 .section-icon {
  color: #FFFFFF !important;
  font-size: 24px;
  margin-right: 12px;
  vertical-align: middle;
}

/* Icons in article content - Ontario blue */
.article-body .ph,
.article-body .ph-bold,
.article-body .ph-fill {
  color: #0A52A2 !important;
}

/* Icons in buttons/interactive elements - inherit or white */
button .ph,
.article-read-more .ph,
a.button .ph {
  color: inherit !important;
}

/* Icons in light backgrounds - dark blue for contrast */
.callout .ph,
.intro-note .ph,
.alert .ph {
  color: #050A51 !important;
}

/* Hover states - slightly lighter blue */
a:hover .ph,
.see-all-articles:hover .ph {
  color: #1275BF !important;
}

/* Success/status icons can use semantic colors ONLY when explicitly set */
.ph.icon-success { color: #10B981 !important; }
.ph.icon-warning { color: #F59E0B !important; }
.ph.icon-error { color: #EF4444 !important; }
.ph.icon-info { color: #0A52A2 !important; }


/* ============================================
   ONTARIO HERO - NO OVERFLOW VERSION
   Replace your hero section CSS with this
   ============================================ */

.hero {
  background: linear-gradient(90deg, #050A51 0%, #1F94D3 100%) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Contained animation - stays within bounds */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 80px,
    rgba(255, 255, 255, 0.04) 80px,
    rgba(255, 255, 255, 0.04) 160px
  );
  animation: diagonalSlideContained 40s linear infinite;
  pointer-events: none;
  overflow: hidden;
}

@keyframes diagonalSlideContained {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 160px 160px;
  }
}

/* Glow accent - contained */
.hero::after {
  content: '';
  position: absolute;
  top: 20%;
  right: 10%;
  width: 400px;
  height: 400px;
  max-width: 40%;
  background: radial-gradient(circle, rgba(107, 195, 231, 0.15) 0%, transparent 70%);
  pointer-events: none;
  animation: glowPulse 8s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.2);
  }
}

/* Hero inner content */
.hero-inner {
  position: relative;
  z-index: 10;
  padding: 40px 20px;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

@charset "UTF-8";

/* ============================================
   ONTARIO FONTS & ICONS
   ============================================ */

/* Inter Font Family */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Phosphor Icons */
@import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css');
@import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/bold/style.css');
@import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/fill/style.css');


/***** Normalize.css *****/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

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

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

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

a {
  background-color: transparent;
}

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

b,
strong {
  font-weight: bolder;
}

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

small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

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

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

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

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

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

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

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

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

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

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

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

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

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

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}


/* ============================================
   PHOSPHOR ICONS CONFIGURATION
   ============================================ */

/* Base icon class */
.ph {
  font-family: 'Phosphor' !important;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Bold variant */
.ph-bold {
  font-family: 'Phosphor-Bold' !important;
  font-weight: 700;
}

/* Fill variant */
.ph-fill {
  font-family: 'Phosphor-Fill' !important;
}

/* Icon sizing */
.ph-sm { font-size: 16px; }
.ph-md { font-size: 20px; }
.ph-lg { font-size: 24px; }
.ph-xl { font-size: 32px; }

/* ============================================
   ONTARIO ICON COLORS
   Icons use Ontario blue palette - no colorful icons
   ============================================ */

/* Default icon color - Ontario blue-700 */
.ph,
.ph-bold,
.ph-fill {
  color: #0A52A2 !important;
}

/* Icons in section headers on homepage - white on gradient backgrounds */
.knowledge-base .section h3 .section-icon {
  color: #FFFFFF !important;
  font-size: 24px;
  margin-right: 12px;
  vertical-align: middle;
}

/* Icons in article content - Ontario blue */
.article-body .ph,
.article-body .ph-bold,
.article-body .ph-fill {
  color: #0A52A2 !important;
}

/* Icons in buttons/interactive elements - inherit or white */
button .ph,
.article-read-more .ph,
a.button .ph {
  color: inherit !important;
}

/* Icons in light backgrounds - dark blue for contrast */
.callout .ph,
.intro-note .ph,
.alert .ph {
  color: #050A51 !important;
}

/* Hover states - slightly lighter blue */
a:hover .ph,
.see-all-articles:hover .ph {
  color: #1275BF !important;
}

/* Success/status icons can use semantic colors ONLY when explicitly set */
.ph.icon-success { color: #10B981 !important; }
.ph.icon-warning { color: #F59E0B !important; }
.ph.icon-error { color: #EF4444 !important; }
.ph.icon-info { color: #0A52A2 !important; }


/* ============================================
   ONTARIO HERO - NO OVERFLOW VERSION
   Replace your hero section CSS with this
   ============================================ */

.hero {
  background: linear-gradient(90deg, #050A51 0%, #1F94D3 100%) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Contained animation - stays within bounds */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 80px,
    rgba(255, 255, 255, 0.04) 80px,
    rgba(255, 255, 255, 0.04) 160px
  );
  animation: diagonalSlideContained 40s linear infinite;
  pointer-events: none;
  overflow: hidden;
}

@keyframes diagonalSlideContained {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 160px 160px;
  }
}

/* Glow accent - contained */
.hero::after {
  content: '';
  position: absolute;
  top: 20%;
  right: 10%;
  width: 400px;
  height: 400px;
  max-width: 40%;
  background: radial-gradient(circle, rgba(107, 195, 231, 0.15) 0%, transparent 70%);
  pointer-events: none;
  animation: glowPulse 8s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.2);
  }
}

/* Hero inner content */
.hero-inner {
  position: relative;
  z-index: 10;
  padding: 40px 20px;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* Logo sizing */
.hero-inner img {
  max-width: 600px !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

/* Responsive sizing */
@media (max-width: 768px) {
  .hero {
    padding: 60px 0 !important;
  }
  
  .hero-inner img {
    max-width: 400px !important;
  }
  
  .hero::after {
    width: 300px;
    height: 300px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-inner img {
    max-width: 500px !important;
  }
}


/* ============================================
   ALTERNATIVE: NO ANIMATION (SAFEST)
   Use this if overflow persists
   ============================================ */

/*
.hero {
  background: linear-gradient(90deg, #050A51 0%, #1F94D3 100%) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(107, 195, 231, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(18, 117, 191, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 10;
  padding: 40px 20px;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.hero-inner img {
  max-width: 600px !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

@media (max-width: 768px) {
  .hero {
    padding: 60px 0 !important;
  }
  
  .hero-inner img {
    max-width: 400px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-inner img {
    max-width: 500px !important;
  }
}
*/

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

body {
  background-color: rgba(1, 34, 81, 1);
  color: rgba(255, 255, 255, 1);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

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

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

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

h4 {
  font-size: 16px;
}

a {
  color: rgba(90, 174, 253, 1);
  text-decoration: none;
}
a:visited {
  color: rgba(5, 227, 227, 1);
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}

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

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

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

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

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

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

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

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

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

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

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

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

.button-secondary {
  color: #fff;
  border: 1px solid #87929D;
  background-color: transparent;
}
.button-secondary:visited {
  color: #fff;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: rgba(255, 255, 255, 1);
  border: 1px solid #87929D;
  background-color: #011c42;
}

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

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

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

/***** Tables *****/
.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
@media (min-width: 768px) {
  .table {
    table-layout: auto;
  }
}
.table th,
.table th a {
  color: #fff;
  font-size: 13px;
  text-align: left;
}
[dir=rtl] .table th,
[dir=rtl] .table th a {
  text-align: right;
}
.table tr {
  border-bottom: 1px solid #ddd;
  display: block;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .table tr {
    display: table-row;
  }
}
.table td {
  display: block;
}
@media (min-width: 768px) {
  .table td {
    display: table-cell;
  }
}
@media (min-width: 1024px) {
  .table td, .table th {
    padding: 20px 30px;
  }
}
@media (min-width: 768px) {
  .table td, .table th {
    padding: 10px 20px;
    height: 60px;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ============================================================
   HINT TEXT ABOVE INPUT: OPTIONAL STYLE ENHANCEMENTS
   ============================================================ */
.hint-above {
  margin-bottom: 6px;
  color: #666;
  font-size: 0.9em;
}

/* Form info header styling */
.form-info-header {
  margin-bottom: 24px;
  padding: 16px 20px;
  background-color: #f7f9fa;
  border-left: 4px solid #17494D;
  border-radius: 4px;
}

.form-info-title {
  margin: 0 0 8px 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #2f3941;
}

.form-info-description {
  margin: 0;
  font-size: 0.95rem;
  color: #68737d;
  line-height: 1.5;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .form-info-header {
    background-color: #1a1a1a;
    border-left-color: #4a9ba0;
  }
  
  .form-info-title {
    color: #e6e6e6;
  }
  
  .form-info-description {
    color: #a0a0a0;
  }
}

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

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

.logo span {
  margin: 0 10px;
  color: rgba(5, 227, 227, 1);
}

.logo a {
  display: inline-block;
}

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

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

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

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

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

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

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

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

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

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

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

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

.powered-by-zendesk a,
.powered-by-zendesk a:visited {
  color: #1E3A8A;
}

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

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

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

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

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

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

/***** Hero component *****/
.hero {
  background-image: url(/hc/theming_assets/01K3H6W07ZF01G744205SFAR9B);
  background-position: center;
  background-size: cover;
  height: 300px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}
.hero-inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-width: 610px;
  margin: 0 auto;
}

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

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

/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
}
@media (min-width: 768px) {
  .blocks-list {
    margin: 0 -15px;
  }
}
.blocks-item {
  border: 1px solid rgba(5, 227, 227, 1);
  border-radius: 4px;
  box-sizing: border-box;
  color: rgba(5, 227, 227, 1);
  display: flex;
  flex: 1 0 340px;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
}
@media (min-width: 768px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  background-color: rgba(5, 227, 227, 1);
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: #FFFFFF;
  text-decoration: none;
}
.blocks-item-internal {
  background-color: transparent;
  border: 1px solid #ddd;
}
.blocks-item-internal .icon-lock {
  height: 15px;
  width: 15px;
  bottom: 5px;
  position: relative;
}
.blocks-item-internal a {
  color: rgba(255, 255, 255, 1);
}
.blocks-item-link {
  color: rgba(5, 227, 227, 1);
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  border-radius: inherit;
}
.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active {
  color: inherit;
  text-decoration: none;
}
.blocks-item-link:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(5, 227, 227, 1);
  text-decoration: none;
}
.blocks-item-title {
  margin-bottom: 0;
  font-size: 16px;
}
.blocks-item-description {
  margin: 0;
}
.blocks-item-description:not(:empty) {
  margin-top: 10px;
}

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

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

/***** Promoted articles *****/
.promoted-articles {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
@media (min-width: 1024px) {
  .promoted-articles {
    flex-direction: row;
  }
}
.promoted-articles-item {
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .promoted-articles-item {
    align-self: flex-end;
    flex: 0 0 auto;
    padding-right: 30px;
    width: 33%; /* Three columns on desktop */
  }
  [dir=rtl] .promoted-articles-item {
    padding: 0 0 0 30px;
  }
}
.promoted-articles-item:nth-child(3n) {
  padding-right: 0;
}
.promoted-articles-item a {
  display: block;
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
}
.promoted-articles-item .icon-lock {
  vertical-align: baseline;
}
.promoted-articles-item:last-child a {
  border: 0;
}
@media (min-width: 1024px) {
  .promoted-articles-item:last-child a {
    border-bottom: 1px solid #ddd;
  }
}

/***** Community section in homepage *****/
.community {
  text-align: center;
}
.community-image {
  min-height: 300px;
  margin-top: 32px;
  background-image: url(/hc/theming_assets/01K3H6W11D4KHX91DAH6HQC3K9);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}
.community a {
  color: rgba(90, 174, 253, 1);
  text-decoration: underline;
}
.community a:visited {
  color: rgba(5, 227, 227, 1);
}
.community a:hover, .community a:active, .community a:focus {
  color: rgba(5, 227, 227, 1);
}

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

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

/***** Category pages *****/
.category-container {
  display: flex;
  justify-content: flex-end;
}
.category-content {
  flex: 1;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .category-content {
    flex: 0 0 80%;
  }
}

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

.article-list-item {
  font-size: 16px;
  padding: 15px 0;
  text-overflow: ellipsis;
  overflow: hidden;
}
.article-list-item a {
  color: rgba(255, 255, 255, 1);
}

.icon-star {
  color: rgba(5, 227, 227, 1);
  font-size: 18px;
}

/***** Section pages *****/
.section-container {
  display: flex;
  justify-content: flex-end;
}
.section-content {
  flex: 1;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .section-content {
    flex: 0 0 80%;
  }
}
.section-list {
  margin: 40px 0;
}

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

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

/***** Article *****/
.article {
  /*
  * The article grid is defined this way to optimize readability:
  * Sidebar | Content | Free space
  * 17%     | 66%     | 17%
  */
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .article {
    flex: 1 0 66%;
    max-width: 66%;
    min-width: 640px;
    padding: 0 30px;
  }
}
.article-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .article-container {
    flex-direction: row;
  }
}
.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 40px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}
.article-avatar {
  margin-right: 10px;
}
.article-author {
  margin-bottom: 10px;
}
.article-title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (min-width: 768px) {
  .article-title {
    flex-basis: 100%; /* Take entire row */
  }
}
.article-title .icon-lock {
  position: relative;
  left: -5px;
  vertical-align: baseline;
}
.article [role=button] {
  flex-shrink: 0; /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
  width: 100%;
}
@media (min-width: 768px) {
  .article [role=button] {
    width: auto;
  }
}
.article-info {
  max-width: 100%;
}
.article-meta {
  display: inline-block;
  vertical-align: middle;
}
.article-body {
  display: flow-root;
}
.article-body a {
  color: rgba(90, 174, 253, 1);
  text-decoration: underline;
}
.article-body a:visited {
  color: rgba(5, 227, 227, 1);
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: rgba(5, 227, 227, 1);
}
.article-body img {
  height: auto;
  max-width: 100%;
}
.article-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figure.image {
  display: table;
  margin: 0 auto;
}
.article-body figure.image > img {
  display: block;
  width: 100%;
}
.article-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #011738;
}
.article-body ul,
.article-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .article-body ul,
[dir=rtl] .article-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.article-body ul > ul,
.article-body ol > ol,
.article-body ol > ul,
.article-body ul > ol,
.article-body li > ul,
.article-body li > ol {
  margin: 0;
}
.article-body ul {
  list-style-type: disc;
}
.article-body :not(pre) > code {
  background: #011c42;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: #011c42;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.article-body blockquote {
  border-left: 1px solid #ddd;
  color: #fff;
  font-style: italic;
  padding: 0 15px;
}
.article-body > p:last-child {
  margin-bottom: 0;
}
.article-content {
  line-height: 1.6;
  margin: 40px 0;
  word-wrap: break-word;
}
.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.article-comment-count {
  color: #fff;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: rgba(5, 227, 227, 1);
  width: 18px;
  height: 18px;
}
.article-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    flex: 0 0 17%;
    height: auto;
    max-width: 17%;
  }
}
.article-relatives {
  border-top: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .article-relatives {
    flex-direction: row;
  }
}
.article-relatives > * {
  flex: 1 0 50%;
  min-width: 50%;
  overflow-wrap: break-word;
  margin-right: 0;
}
.article-relatives > *:last-child {
  padding: 0;
}
@media (min-width: 768px) {
  .article-relatives > * {
    padding-right: 20px;
  }
}
.article-votes {
  border-top: 1px solid #ddd;
  padding: 30px 0;
  text-align: center;
}
.article-votes-question {
  font-size: 15px;
  font-weight: normal;
  margin-bottom: 0;
}
.article-vote {
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}
.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}
.article-more-questions a {
  color: rgba(90, 174, 253, 1);
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: rgba(5, 227, 227, 1);
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: rgba(5, 227, 227, 1);
}
.article-return-to-top {
  border-top: 1px solid #87929D;
}
@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}
.article-return-to-top a {
  color: rgba(255, 255, 255, 1);
  display: block;
  padding: 20px 0;
}
.article-return-to-top a:hover, .article-return-to-top a:focus {
  text-decoration: none;
}
.article-return-to-top-icon {
  transform: rotate(0.5turn);
}
.article td > p:first-child,
.article th > p:first-child {
  margin-top: 0;
}
.article td > p:last-child,
.article th > p:last-child {
  margin-bottom: 0;
}

.sidenav-title {
  font-size: 15px;
  position: relative;
  font-weight: 600;
}
.sidenav-item {
  display: block;
  margin-top: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/* ============================================
   TABLE OF CONTENTS (TOC)
   ============================================ */
.toc-container {
  background: #fff;
  border-left: 3px solid #ddd;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  margin: 1em 0 2em 0;
  padding: 1em 1em 1em 1.2em;
  border-radius: 6px;
  font-size: 0.95em;
}

.toc-container .toc-heading-label {
  font-weight: 500;
  margin-bottom: 8px;
  color: #222;
}

.toc-container ul {
  list-style: none;
  padding-left: 1em;
  margin: 0;
}

.toc-h2 a {
  text-decoration: none;
  color: #0073e6;
  display: block;
  padding: 4px 0;
  line-height: 1.4;
}

.toc-container a.active {
  font-weight: bold;
  color: #222;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .toc-container {
    background: #1c1c1e;
    border-left-color: #444;
    box-shadow: 0 1px 6px rgba(255, 255, 255, 0.08);
  }

  .toc-container .toc-heading-label,
  .toc-container a {
    color: #ddd;
  }

  .toc-container a.active {
    color: #fff;
  }
}

/* Mobile responsive */
@media (max-width: 768px) {
  .toc-container {
    padding: 1em 1em 1em 1.2em;
    border-left: 3px solid #ddd;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border-radius: 6px;
  }

  .toc-container ul {
    display: block !important;
    padding-left: 1em;
  }

  .toc-container .toc-heading-label {
    background: none;
    padding: 0;
    cursor: default;
    margin-bottom: 8px;
    border-radius: 0;
  }
}

/* ============================================
   BACK TO TOP BUTTON
   ============================================ */
#back-to-top-btn {
  position: fixed;
  bottom: 40px;
  left: 40px;
  background: #050A51; /* Ontario primary color */
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

#back-to-top-btn:hover {
  background: #0A1270; /* Slightly lighter Ontario blue */
  transform: scale(1.05) translateZ(0);
  -webkit-transform: scale(1.05) translateZ(0);
}

#back-to-top-btn.visible {
  opacity: 1;
  visibility: visible;
}

#back-to-top-btn svg {
  transform: rotate(180deg);
}

/* Mobile optimization */
@media (max-width: 768px) {
  #back-to-top-btn {
    bottom: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
    opacity: 0.85;
    position: fixed !important;
    -webkit-position: fixed !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  #back-to-top-btn.visible {
    opacity: 0.85;
  }
  
  #back-to-top-btn:active {
    opacity: 1;
  }
}

/* ============================================
   READING PROGRESS BAR
   ============================================ */
.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background: #05FCFC; /* Smith Electric Blue */
  z-index: 9999;
  transition: width 0.2s ease-out;
  box-shadow: 0 2px 4px rgba(5, 252, 252, 0.3);
}

/* Subtle glow effect */
.reading-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(5, 252, 252, 0.4));
  pointer-events: none;
}

/* Mobile - slightly thicker for visibility */
@media (max-width: 768px) {
  .reading-progress-bar {
    height: 5px;
  }
}

/* Accessibility: High contrast mode */
@media (prefers-contrast: high) {
  .reading-progress-bar {
    background: currentColor;
    opacity: 1;
  }
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reading-progress-bar {
    transition: none;
  }
}

/* Print - hide progress bar */
@media print {
  .reading-progress-bar {
    display: none;
  }
}

/* Floating Back to Top Button - Article Pages Only */
#back-to-top-btn {
  position: fixed;
  bottom: 40px;
  left: 40px;
  background: #1a8ac3;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Force hardware acceleration for smoother mobile performance */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

#back-to-top-btn:hover {
  background: #0A52A2;
  transform: scale(1.05) translateZ(0);
  -webkit-transform: scale(1.05) translateZ(0);
}

#back-to-top-btn.visible {
  opacity: 1;
  visibility: visible;
}

#back-to-top-btn svg {
  transform: rotate(180deg);
}

/* Mobile-specific fixes */
@media (max-width: 768px) {
  #back-to-top-btn {
    /* Use viewport units for better mobile support */
    bottom: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
    opacity: 0.85;
    /* Ensure it stays fixed on mobile */
    position: fixed !important;
    -webkit-position: fixed !important;
    /* Prevent iOS Safari from breaking fixed positioning */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  #back-to-top-btn.visible {
    opacity: 0.85;
  }
  
  #back-to-top-btn:active {
    opacity: 1;
  }
}

/* Fix Zendesk support widget positioning on mobile */
@media (max-width: 768px) {
  /* Target the widget container */
  .sc-1w3tvxe-0,
  [class*="sc-1w3tvxe"],
  iframe[title*="Messaging window"],
  div[shape="square"],
  .StyledButton-sc-qe3ace-0 {
    position: fixed !important;
    -webkit-position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    /* iOS Safari fixes */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
}
/* ==== END FLOATING BACK TO TOP BUTTON ==== */

/* ==== TOC MAIN STYLING ==== */
.toc-container {
  background: #fff;
  border-left: 3px solid #ddd;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  margin: 1em 0 2em 0;
  padding: 1em 1em 1em 1.2em;
  border-radius: 6px;
  font-size: 0.95em;
}

.toc-container .toc-heading-label {
  font-weight: 500;
  margin-bottom: 8px;
  color: #222;
}

.toc-container ul {
  list-style: none;
  padding-left: 1em; /* <-- slight indent */
  margin: 0;
}

.toc-h2 a {
  text-decoration: none;
  color: #0073e6;
  display: block;
  padding: 4px 0;
  line-height: 1.4;
}

.toc-container a.active {
  font-weight: bold;
  color: #222;
}

/* === DARK MODE === */
@media (prefers-color-scheme: dark) {
  .toc-container {
    background: #1c1c1e;
    border-left-color: #444;
    box-shadow: 0 1px 6px rgba(255, 255, 255, 0.08);
  }

  .toc-container .toc-heading-label,
  .toc-container a {
    color: #ddd;
  }

  .toc-container a.active {
    color: #fff;
  }
}

/* === MOBILE COLLAPSIBLE === */
@media (max-width: 768px) {
  .toc-container {
    padding: 1em 1em 1em 1.2em;
    border-left: 3px solid #ddd;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border-radius: 6px;
  }

  .toc-container ul {
    display: block !important;
    padding-left: 1em;
  }

  .toc-container .toc-heading-label {
    background: none;
    padding: 0;
    cursor: default;
    margin-bottom: 8px;
    border-radius: 0;
  }
}
/* === ALERT BANNER === */
.alert-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background-color: #003E51; /* Deep brand teal */
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  z-index: 999;
  position: relative;
  text-align: center;
}

.alert-banner.alert-info {
  background-color: #007E94;
}

.alert-banner.alert-warning {
  background-color: #FFD166;
  color: #231f20;
}

.alert-banner button#dismiss-alert {
  background: none;
  border: none;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  margin-left: 20px;
}



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

.upload-dropzone span {
  color: #fff;
}

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

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

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

.share a {
  color: #fff;
}
.share a:hover {
  text-decoration: none;
  color: rgba(5, 227, 227, 1);
}
.share a svg {
  height: 18px;
  width: 18px;
  display: block;
}

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

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

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

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

.vote-up:hover,
.vote-down:hover {
  color: rgba(5, 227, 227, 1);
}

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

.vote-voted {
  color: rgba(5, 227, 227, 1);
}

.vote-voted:hover {
  color: #037f7f;
}

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

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

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

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

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

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

/* Topic, post and user follow button */
.community-follow {
  margin-bottom: 10px;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow {
    margin-bottom: 0;
    width: auto;
  }
}
.community-follow button {
  line-height: 30px;
  padding: 0 10px 0 15px;
  position: relative;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow button {
    width: auto;
  }
}
.community-follow button:hover {
  background-color: rgba(5, 227, 227, 1);
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: #FFFFFF;
  color: #FFFFFF;
}
.community-follow button[data-selected=true] {
  background-color: rgba(5, 227, 227, 1);
  color: #FFFFFF;
}
.community-follow button[data-selected=true]::after {
  border-left: 1px solid #FFFFFF;
  color: #FFFFFF;
}
.community-follow button[data-selected=true]:hover {
  background-color: #037f7f;
  border-color: #037f7f;
}
.community-follow button::after {
  border-left: 1px solid rgba(5, 227, 227, 1);
  content: attr(data-follower-count);
  color: rgba(5, 227, 227, 1);
  display: inline-block;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}
@media (min-width: 768px) {
  .community-follow button::after {
    position: static;
  }
}
[dir=rtl] .community-follow button::after {
  border-left: 0;
  border-right: 1px solid rgba(5, 227, 227, 1);
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
}

/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  padding: 0;
}
.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}
.striped-list-info {
  flex: 2;
}
.striped-list-title {
  color: rgba(90, 174, 253, 1);
  margin-bottom: 10px;
  margin-right: 5px;
}
.striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active {
  text-decoration: underline;
}
.striped-list-title:visited {
  color: rgba(5, 227, 227, 1);
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #fff;
  font-size: 13px;
  justify-content: flex-start;
  text-transform: capitalize;
}
@media (min-width: 768px) {
  .striped-list-count {
    display: flex;
    flex: 1;
    justify-content: space-around;
  }
}
.striped-list-count-item::after {
  content: "·";
  display: inline-block;
  padding: 0 5px;
}
@media (min-width: 768px) {
  .striped-list-count-item::after {
    display: none;
  }
}
.striped-list-count-item:last-child::after {
  display: none;
}
.striped-list-number {
  text-align: center;
}
@media (min-width: 768px) {
  .striped-list-number {
    color: rgba(255, 255, 255, 1);
    display: block;
  }
}

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

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

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

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

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

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

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

.community-badge {
  margin: 2px;
}

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

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

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

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

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

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

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

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

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

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

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

.no-activities {
  color: #fff;
}

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

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

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

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

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

.meta-group * {
  display: inline;
}

.meta-data {
  color: #fff;
  font-size: 13px;
}
.meta-data:not(:last-child)::after {
  content: "•";
  margin: 0 8px;
  opacity: 0.6;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/***** Notifications *****/
.notification {
  border: 1px solid;
  display: table;
  font-family: sans-serif;
  font-size: 12px;
  padding: 13px 15px;
  transition: height 0.2s;
  width: 100%;
  color: #555;
}

.notification a {
  color: #158ec2;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*################################################################################################################################################################################################*/
/*#################### CUSTOM STYLES: No changes have been made to default stylesheet. All changes and overrides are below. ######################################################################*/
/*################################################################################################################################################################################################*/

/* ############### GLOBAL STYLES ############### */
body, html, h1, h2, h3, h4, h5, h6, p, a {
  font-family: 'Instrument Sans', 'Open Sans', Sans-serif;
}
h1 {
  line-height: 1.3;
  font-weight: 600;
}
.page-header h1, .post-title h1, h1.article-title, header.my-activities-header h1, .search-result-title {
  font-weight: 600;
}
h2 {
  font-size: 32px;
  font-weight: 600;
}
h3 {
  line-height: 1.3;
  margin-bottom: 5px !important;
}
.category-tree .section-tree h3 {
  font-size: 22px;
}
.button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
  border-radius: 20px;
}
@media (min-width: 1024px) {
.section-content {
    flex: 0 0 100%;
}
}
.button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
    border: 1px solid rgb(31 115 183);
    color: rgb(31 115 183);
}
.button:visited, .pagination-next-link:visited, .pagination-prev-link:visited, .pagination-first-link:visited, .pagination-last-link:visited, .subscriptions-subscribe button:visited, .requests-table-toolbar .organization-subscribe button:visited, .community-follow button:visited, .article-subscribe button:visited, .section-subscribe button:visited, .split-button button:visited {
  color: #236a6d;
}
.button:hover, .pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover, .subscriptions-subscribe button:hover, .requests-table-toolbar .organization-subscribe button:hover, .community-follow button:hover, .article-subscribe button:hover, .section-subscribe button:hover, .split-button button:hover, .button:active, .pagination-next-link:active, .pagination-prev-link:active, .pagination-first-link:active, .pagination-last-link:active, .subscriptions-subscribe button:active, .requests-table-toolbar .organization-subscribe button:active, .community-follow button:active, .article-subscribe button:active, .section-subscribe button:active, .split-button button:active, .button:focus, .pagination-next-link:focus, .pagination-prev-link:focus, .pagination-first-link:focus, .pagination-last-link:focus, .subscriptions-subscribe button:focus, .requests-table-toolbar .organization-subscribe button:focus, .community-follow button:focus, .article-subscribe button:focus, .section-subscribe button:focus, .split-button button:focus, .button.button-primary, .button-primary.pagination-next-link, .button-primary.pagination-prev-link, .button-primary.pagination-first-link, .button-primary.pagination-last-link, .subscriptions-subscribe button.button-primary, .subscriptions-subscribe button[data-selected=true], .requests-table-toolbar .organization-subscribe button.button-primary, .requests-table-toolbar .organization-subscribe button[data-selected=true], .community-follow button.button-primary, .article-subscribe button.button-primary, .article-subscribe button[data-selected=true], .section-subscribe button.button-primary, .section-subscribe button[data-selected=true], .split-button button.button-primary {
  background-color: #236a6d;
  text-decoration: none;
  border-color: #236a6d; 
}
.button.button-primary:hover, .button-primary.pagination-next-link:hover, .button-primary.pagination-prev-link:hover, .button-primary.pagination-first-link:hover, .button-primary.pagination-last-link:hover, .subscriptions-subscribe button.button-primary:hover, .subscriptions-subscribe button[data-selected=true]:hover, .requests-table-toolbar .organization-subscribe button.button-primary:hover, .requests-table-toolbar .organization-subscribe button[data-selected=true]:hover, .community-follow button.button-primary:hover, .article-subscribe button.button-primary:hover, .article-subscribe button[data-selected=true]:hover, .section-subscribe button.button-primary:hover, .section-subscribe button[data-selected=true]:hover, .split-button button:hover, .button.button-primary:focus, .button-primary.pagination-next-link:focus, .button-primary.pagination-prev-link:focus, .button-primary.pagination-first-link:focus, .button-primary.pagination-last-link:focus, .subscriptions-subscribe button.button-primary:focus, .subscriptions-subscribe button[data-selected=true]:focus, .requests-table-toolbar .organization-subscribe button.button-primary:focus, .requests-table-toolbar .organization-subscribe button[data-selected=true]:focus, .community-follow button.button-primary:focus, .article-subscribe button.button-primary:focus, .article-subscribe button[data-selected=true]:focus, .section-subscribe button.button-primary:focus, .section-subscribe button[data-selected=true]:focus, .split-button button.button-primary:focus, .button.button-primary:active, .button-primary.pagination-next-link:active, .button-primary.pagination-prev-link:active, .button-primary.pagination-first-link:active, .button-primary.pagination-last-link:active, .subscriptions-subscribe button.button-primary:active, .subscriptions-subscribe button[data-selected=true]:active, .requests-table-toolbar .organization-subscribe button.button-primary:active, .requests-table-toolbar .organization-subscribe button[data-selected=true]:active, .community-follow button.button-primary:active, .article-subscribe button.button-primary:active, .article-subscribe button[data-selected=true]:active, .section-subscribe button.button-primary:active, .section-subscribe button[data-selected=true]:active, .split-button button.button-primary:active {
  background-color: #236a6d;
  border-color: #236a6d;
}
.section-tree {
    justify-content: flex-start;
    gap: 20px;
}

/* ############### HEADER ############### */
header.article-header {
  background: #f3f3f3;
  padding: 20px 40px;
  border-radius: 20px;
}
#global-header {
  width: 100%;
  background: linear-gradient(180deg, #000000 0%, #01265A 100%);
}
.hero-inner svg {
  max-width: 450px;
}
@media (max-width: 768px) {
  .hero-inner svg {
    max-width: 300px;
}
}
.user-info span {
  color: #fff;
}
.button-large, input[type=submit] {
  background-color: #236a6d;
  border-radius: 20px;
  min-width: 150px;
  padding: 0 1em;
  transition: opacity ease-in-out 0.5s;
}
.button-large:hover, input[type=submit]:hover {
  background-color: #236a6d;
  text-decoration: none;
  opacity: 0.75;
}
a.button.button-large {
  color: #fff;
}
.sub-nav .breadcrumbs {
  margin-top: 10px;
}
/* ############### NAV ############### */
.header .user-nav li a, .header .user-nav li .cat-dropdown-btn {
  color: #fff;
  font-weight: 500;
}
.nav-wrapper-desktop a:hover, .nav-wrapper-desktop a:focus, .nav-wrapper-desktop a:active {
  text-decoration: none;
  color: #b3d6e5 !important;
}
.nav-wrapper-desktop .dropdown-menu a:hover, .nav-wrapper-desktop .dropdown-menu a:focus, .nav-wrapper-desktop .dropdown-menu a:active {
  text-decoration: none;
  color: #2f3941 !important;
}
.dropdown-menu [role=separator] {
    border-bottom: 0 solid #e9ebed;
}

/* ############### CATEGORY/SECTION NAV ############### */
.cat-dropdown {
  position: relative; /* Needed for menu positioning */
  display: inline-block;
}
.cat-dropdown-btn {
  cursor: pointer;
  background: none;
  border-style: none;
  padding: 0 20px 0 0;
}
.cat-dropdown-content {
 display: none;
  position: absolute; /* Positions the menu relative to button */
  /*background-color: #2c5364;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 10; /* Ensures menu appears above other elements */
    background: #fff;
    border: 1px solid #d8dcde;
    border-radius: 3px;
    box-shadow: 0px 20px 30px 0px rgba(23, 73, 77, 0.15);
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    left: 0;
    margin-top: 1px;
    min-width: 170px;
    padding: 10px 0;
    position: absolute;
    text-align: left;
    z-index: 1000;
}
.cat-dropdown-content a, .cat-dropdown-content a:hover {
  /*color: #fff;*/
  color: #2f3941 !important;
  font-weight: 300 !important;
  padding: 8px 16px;
  text-decoration: none;
  display: block;
}
.cat-dropdown-content a:hover {
  background: #1f73b714;
}
/*.cat-dropdown:hover .cat-dropdown-content { /* Optional hover effect */
 /*display: block;
}*/
.show {
  display: block;
}

/* ############### SEARCH ############### */
.search input[type="search"] {
  border-radius: 30px;
  box-sizing: border-box;
  color: #333333 !important;
  height: 48px;
  padding-left: 40px;
  padding-right: 20px;
  -webkit-appearance: none;
  width: 100%;
  background: linear-gradient(white, white) padding-box, linear-gradient(to right, #2c4959 0%, #5a99a3 38%, #2c4959 100%) border-box !important;
  border-radius: 50em !important;
  border: 4px solid transparent !important;
}
.search-wrapper {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    max-width: 610px;
    margin: 0 auto;
}
.search {
  border-style: none;
}
.search-icon {
  color: #333333;
  top: 82%;
}
.top-search-bar {
  margin-top: 100px;
  text-align: center;
}
.top-search-bar h2 {
  font-size: 34px;
  margin-bottom: 12px;
}
input {
  font-size: 16px;
}
.search .clear-button, .search .clear-button:hover {
  color: #fff;
  background-color: #236a6d;
  border-color: transparent;
  padding: 0 18px;
}
[dir=ltr] .search .clear-button {
  border-bottom-left-radius: 30px;
  border-top-left-radius: 30px;
}

/* ############### HOME: TRENDING TOPICS ############### */
.browse-other-bucket {
/*background: #f3f3f3;
  padding: 20px;
  border-radius: 20px;
  max-width: 200px;
  text-align: center;*/
}
section.other-guides {
  margin-bottom: 70px;
  margin-top: 20px;
}
#browse-other-wrapper {
  display: flex !important;
  gap: 50px;
}
.browse-other-bucket {
  display: flex !important;
  align-items: center;
  flex: 1;
  /* Make each child flex item take up equal space */
  /*min-height: 100px;*/
}
.browse-other-bucket img {
  width: 100%;
}
@media (max-width: 768px) {
  section.other-guides {
    margin-top: 20px;
  }
  #browse-other-wrapper {
    flex-wrap: wrap;
    gap: inherit;
  }
  .browse-other-bucket img {
    height: 120px !important;
    width: auto !important;
    margin: 10px 10px;
    text-align: center;
  }
}

/* ############### HOME: ARTICLES ############### */
.section-tree .section {
  border: 4px solid #7BA0C440;
  border-radius: 20px;
  padding: 30px;
}
@media (min-width: 768px) {
  .section {
    margin-bottom: 30px;
  }
  .section-tree .section {
    flex: 0 0 32%;
  }
}
@media (min-width: 1024px) {
  .promoted-articles {
    gap: 30px;
  }
.promoted-articles-item {
    align-self: flex-start;
    flex: 0 0 auto;
    width: 31.5%;
    padding-right: 0;
  }
}
section.articles {
  margin-top: 40px;
}
a.see-all-articles {
  background: #236a6d;
  color: #fff;
  width: 60%;
  text-align: center;
  border-radius: 20px;
}
.section-tree .see-all-articles {
  padding: 10px 10px;
  margin-top: 20px;
}
li.promoted-articles-item a {
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 0;
}
.promoted-articles-item:last-child a {
  border-bottom: 0;
}
li.promoted-articles-item img {
  width: 100%;
  border-radius: 20px;
}
.promoted-articles-item a {
  border-bottom: none;
  line-height: 1.3;
  margin-bottom: 8px;
}
.community, .activity {
  border-top: none;
}
section:not(.profile-section) h3 a, 
section:not(.profile-section) h3 a:visited {
  color: #333;
}
 
/* ############### HOME: RECENT ACTIVITY AND COMMUNITY ############### */
/*h2.recent-activity-header, .community h2, .articles h2 {
  font-size: 32px;
  color: rgba(127, 39, 41, 1);
  font-weight: 600;
}
@media (min-width: 768px) {
  .recent-activity-list {
    display: flex;
    flex-wrap: wrap;
  }
  .recent-activity-item {
    flex: 1 0 21%;
    padding: 20px;
    border-bottom: 0;
  }
  .recent-activity-item-meta {
    float: none;
  }
}*/
section.section.home-section.activity {
  display: none;
}
.community a, .recent-activity-controls a, a.article-sidebar-item {
  text-decoration: none;
  color: #fff !important;
  background: #236a6d;
  padding: 10px 20px;
  border-radius: 20px;
}
.community a:hover, .recent-activity-controls a:hover, a.article-sidebar-item:hover {
  text-decoration: none;
  background: #0A52A2;
  transition: all ease-in-out 0.5s;
}
.community-image {
  margin-top: 40px;
}
.recent-activity-item-parent {
  font-size: 16px;
}
.recent-activity-item-link {
  font-size: 15px;
}
/* Recent Activities show 5 and cannot change. Hide last child to display only 4 */
/*.recent-activity-list .recent-activity-item:last-child {
  display: none;
}
section.recent-activity-item {
  border-radius: 20px;
  margin: 10px;
  background: #f3f3f3;
}
.recent-activity-controls {
  text-align: center;
  margin-top: 10px;
} */
@media (max-width: 768px) {
 .community-image {
    background-position: center left;
  }
}

/* ############### FOOTER ############### */
.footer {
  background-color: #E2E8F0;  /* Light grey background */
  background-image: none;
  padding: 40px 0 70px;
  text-align: center;
  width: 100%;
}

.footer .ebm-footer-info p, 
.footer .ebm-footer-info a {
  color: #1E3A8A;  /* EBM Navy blue text */
}

.footer .ebm-footer-info a:hover {
  color: #0A52A2;  /* Lighter blue on hover */
  text-decoration: underline;
}
.footer .ebm-footer-info p {
  margin-bottom: 5px;
  margin-top: 5px;
}
@media (max-width: 768px) {
  .footer .ebm-footer-info p {
  font-size: 12px;
    line-height: 16px;
    margin-left: 10px;
  }
  .footer-inner {
    display: block;
  }
}

/* ############### COMMUNITY LANDING PAGE: community_topic_list_page ############### */
.blocks-item {
  border: 4px solid #7BA0C440;
  border-radius: 20px;
  padding: 20px;
}
.blocks-item:hover {
  background: #7BA0C440;
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: #231f20;
  text-decoration: none;
}
a span.blocks-item-title {
  font-size: 24px;
  font-weight: 500;
}
.community-footer-title {
  font-size: 28px;
  font-weight: 600;
}
.community-featured-posts .title {
  font-size: 28px;
}
.community-header .title {
  font-size: 28px;
  font-weight: 600;
}
.blocks-item-link:focus {
  box-shadow: 0 0 0 0 rgb(242 0 61);
}
.recent-activity-comment-icon svg {
    color: #0A52A2;
}
.status-label-pinned, .status-label-featured, .status-label-official {
    background-color: rgb(9 113 206);
}

/* ############### SEARCH BAR INTERIOR PAGES (white bg) ############### */
.search-container .search input[type="search"] {
  background: linear-gradient(white, white) padding-box, linear-gradient(to right, #2c4959 0%, #5a99a3 38%, #2c4959 100%) border-box !important;
  color: #757575 !important;
}
.search-container .search-icon {
  color: #757575;
  top: 52%;
}

/* ############### ARTICLES ############### */
.collapsible-sidebar-body li:last-child {
  margin-bottom: 40px;
}
.collapsible-sidebar-body {
  padding-bottom: 30px;
}
@media (min-width: 1024px) {
  .article {
    flex: 1 0 85%;
    max-width: 85%;
  }
}
.recent-articles li, .related-articles li {
  margin-bottom: 5px;
}

/* --- Enhanced Blockquote Styling --- */
.article-body blockquote {
  border-left: 4px solid #ccc;
  background-color: #f9f9f9;
  border-radius: 4px;
  color: #333;
  font-style: normal;
  padding: 10px 16px;
  margin: 12px 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  animation: fadeSlideIn 0.3s ease;
}

/* Default blockquote (unstyled) */
.article-body blockquote:not(.important):not(.fyi):not(.note):not(.info):not(.relevant):not(.tip):not(.action):not(.troubleshoot):not(.context) {
  background-color: #f4f5f7;
  border-left-color: #5e6c84;
  color: #333;
  font-style: normal;
}

/* --- Updated and New Blockquote Variants --- */

/* Important - Light Pink */
.article-body blockquote.important {
  background-color: #ffebe6;
  border-left-color: #d13c2f;
  color: #333;
}

/* FYI - Light Blue */
.article-body blockquote.fyi {
  background-color: #deebff;
  border-left-color: #3779db;
  color: #333;
}

/* Note - Soft Yellow */
.article-body blockquote.note {
  background-color: #fffbe6;
  border-left-color: #e6b800;
  color: #333;
}

/* Info - Soft Mint */
.article-body blockquote.info {
  background-color: #e6fbf3;
  border-left-color: #3aa77d;
  color: #333;
}

/* Relevant - Soft Lavender Blue */
.article-body blockquote.relevant {
  background-color: #f5f3f0;
  border-left-color: #a09b92;
  color: #2e2e2e;
}

/* Tip - Light Green */
.article-body blockquote.tip {
  background-color: #e8f5e9;
  border-left-color: #43a047;
  color: #2e7d32;
}

/* Action - Light Orange */
.article-body blockquote.action {
  background-color: #fff3e0;
  border-left-color: #fb8c00;
  color: #e65100;
}

/* Troubleshoot - Warm Peach */
.article-body blockquote.troubleshoot {
  background-color: #fbe9e7;
  border-left-color: #d84315;
  color: #4e342e;
}

/* Context - Soft Steel Blue */
.article-body blockquote.context {
  background-color: #e3e7f0;
  border-left-color: #627aa0;
  color: #2f3e5c;
}

/* Hover effect for all blockquotes */
.article-body blockquote:hover {
  background-color: #eef1f3;
}

/* Inline Alert Callout */
.article-body .alert-inline {
  display: inline-block;
  background-color: #fff8c5;
  color: #594d00;
  border-left: 4px solid #e3b800;
  padding: 4px 8px;
  margin: 2px 0;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;
  animation: fadeSlideIn 0.3s ease;
}

/* Slide & Fade In Animation */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Font Adjustment on Mobile */
@media (max-width: 600px) {
  .article-body blockquote {
    font-size: 15px;
  }
  .article-body .alert-inline {
    font-size: 14px;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .article-body blockquote {
    background-color: #2e2e2e;
    color: #ddd;
    border-left-color: #666;
  }
  .article-body blockquote:not(.important):not(.fyi):not(.note):not(.info):not(.relevant):not(.tip):not(.action):not(.troubleshoot):not(.context) {
    background-color: #3a3a3a;
    border-left-color: #888;
    color: #ddd;
  }
  .article-body blockquote.important {
    background-color: #4b1f1f;
    border-left-color: #ff6b6b;
  }
  .article-body blockquote.fyi {
    background-color: #1f2b4b;
    border-left-color: #4c9aff;
  }
  .article-body blockquote.note {
    background-color: #4b3f1f;
    border-left-color: #ffcd4b;
  }
  .article-body blockquote.info {
    background-color: #1f4b2b;
    border-left-color: #4bffa0;
  }
  .article-body blockquote.relevant {
    background-color: #3b4152;
    border-left-color: #91a4d1;
    color: #eee;
  }
  .article-body blockquote.tip {
    background-color: #264d36;
    border-left-color: #43ff91;
  }
  .article-body blockquote.action {
    background-color: #4e3b1f;
    border-left-color: #ffc47d;
  }
  .article-body blockquote.troubleshoot {
    background-color: #51231d;
    border-left-color: #ff8e72;
  }
  .article-body blockquote.context {
    background-color: #2f3540;
    border-left-color: #99b0d1;
  }
  .article-body .alert-inline {
    background-color: #5c4600;
    color: #fff8c5;
    border-left-color: #ffcc00;
  }
}
/* === FEATURED IMAGE VISIBILITY & RESIZE === */
.article-body .feat-image {
  display: none;
}

.article-body p.feat-image img {
  max-width: 921px;
  max-height: 518px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Heading anchor links */
.heading-anchor {
  margin-left: 0.5em;
  opacity: 0;
  transition: opacity 0.2s ease;
  color: var(--link-color, #1f73b7);
  padding: 0.25em;
  text-decoration: none;
  vertical-align: middle;
}

.heading-anchor:hover {
  color: var(--link-color-hover, #0d5a9e);
}

.heading-anchor svg {
  display: inline-block;
  vertical-align: middle;
}

/* Show on heading hover */
.article-body h2:hover .heading-anchor,
.article-body h3:hover .heading-anchor,
.article-body h4:hover .heading-anchor,
.heading-anchor:focus {
  opacity: 1;
}

/* Copied feedback */
.heading-anchor.copied::after {
  content: 'Copied!';
  margin-left: 0.5em;
  font-size: 12px;
  background: #68737d;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  vertical-align: middle;
  text-decoration: none;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .heading-anchor {
    color: #6db3f2;
  }
  .heading-anchor:hover {
    color: #9ecbf7;
  }
  .heading-anchor.copied::after {
    background: #87929d;
  }
}

/* ############### SECTIONS PAGE ############### */
.section-header {
  background: #4991D6 !important; /* image removed for Smith */
  /* background-position removed */
  /* background-size removed */
  padding: 50px 40px;
  width: 100%; 
  margin-bottom: 40px;
}
.section-header h1 {
  color: #fff;
}
.section-header .section-subscribe button:hover {
  background-color: #0A52A2;
  border: 1px solid #0A52A2;
}
.section-header .section-subscribe button {
    border: 1px solid rgb(255 255 255);
    color: rgb(255 255 255);
}
.section-container {
  display: flex;
  justify-content: flex-start;
}
.article-list-item a.article-list-link {
  color: rgba(26, 138, 195, 1);
  font-weight: 500;
  font-size: 18px;
}
li.article-list-item {
  padding: 26px;
  background: #f5f5f5;
  border-radius: 20px;
}
li.article-list-item.article-promoted svg {
    color: rgb(123 160 196 / 60%);
}
.article-read-more {
  background: #236a6d;
  padding: 6px 12px;
  color: #fff !important;
  border-radius: 15px;
  font-size: 12px;
}
.article-read-more:hover {
  background: #0A52A2;
  transition: all ease-in-out 0.5s;
  text-decoration: none;
}
.section-container ul.article-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
@media (min-width: 768px) {
.section-container .article-list-item {
  width: 31.6%;
}
}

/* ############### REQUESTS ############### */
header.my-activities-header h1 {
  margin-top: 40px;
}
.requests-table-toolbar .search input[type="search"] {
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(to right, #4ca1bc 0%, #409FC1 30%, #3196C2 34%, #1B8AC3 38%, #0981C5 66%, #264A82 95%, #264A82 100%) border-box !important;
  color: #757575 !important;
}
.requests-table-toolbar .search-icon {
  color: #757575;
  top: 52%;
}

/* ############### CATEGORIES TEMPLATE ############### */
@media (min-width: 1024px) {
  .category-content {
      flex: 0 0 100%;
  }
}
.category-container {
    li.article-list-item {
        padding: 0;
        background: transparent;
        border-radius: 0;
        margin-bottom: 10px;
    }
    h1 {
      margin-bottom: 30px;
    }
    h2.section-tree-title {
        font-size: 22px;
        margin-bottom: 8px;
    }
  a.see-all-articles {
    width: 100%;
    background: #236a6d;
    transition: all ease-in-out .5s;
  }
  a.see-all-articles:hover {
    opacity: .75;
    text-decoration: none;
  }
}
/* Limit number of articles to 3 */
.category-container .article-list li:nth-child(n+4) {
 display: none;
}

/* #################### REQUESTS PAGE #######################*/
.request-breadcrumbs {
    margin-top: 14px;
}

/* #################### USER PROFILE PAGE ############################ */
.split-button button {
    background-color: rgb(31 115 183);
    color: #ffffff !important;
    outline-color: rgb(31 115 183);
    transition: all ease-in-out .5s;
}
.split-button button:hover {
    opacity: .75;
}

/* #################### MOBILE ############################ */
.nav-wrapper-mobile .menu-button-mobile {
    color: #fff;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  display: none;
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
    background: #008dc4;
}

/*#################### CUSTOM FEATURE: Request Form Inline Note #################################################################*/

.request-note {
  background: #f7fafc;               /* light neutral background */
  border-left: 3px solid #1a8ac3;    /* subtle brand-colored accent */
  padding: 8px 12px;
  margin: 6px 0 10px;
  border-radius: 4px;
  font-size: 14px;
  color: #2f3941;
}

.request-note a {
  color: #1a8ac3;                    /* match brand link color */
  text-decoration: underline;
  font-weight: 500;
}

.request-note p {
  margin: 0;
  line-height: 1.5;
}

/*#################### CUSTOM FEATURE: Search Inline by Typing in Dropdowns #################################################################*/

/* Keyboard search highlighting inside Zendesk Nesty panels */
.nesty-panel li.kb-match {
  background-color: #fff6d6; /* subtle highlight for all matches */
}
.nesty-panel li.kb-focused {
  background-color: #ffe8a3; /* stronger highlight for focused match */
  outline: 1px dashed #c97a00;
}

/* ========================================
   COMPREHENSIVE DARK MODE IMPLEMENTATION
   Add this to the end of style.css
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ========== BASE STYLES ========== */
  body {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
  }
  
  .container,
  .error-page,
  main {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
  }
  
  /* ========== HEADINGS ========== */
  h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
  }
  
  /* ========== LINKS ========== */
  a {
    color: #4db8ff !important;
  }
  
a:visited:not(.search-results-sidebar a):not(.sidenav-item a):not(.knowledge-base .section h3 a):not(.section-tree .section h3 a):not(.section h3 a):not(.section .article-list a):not(.section-tree .section ul a):not(.article-list-item a):not(.promoted-articles-item a):not(.see-all-articles) {
  color: #9d7dff !important;
}
  
  a:hover, a:active, a:focus {
    color: #6ec6ff !important;
  }
  
  /* Override for search sidebar - keep visited links dark for contrast */
.search-results-sidebar a:visited,
.search-results-sidebar .sidenav-item a:visited {
  color: #e0e0e0 !important;
}
  
  /* ========== FORMS & INPUTS ========== */
  input:not([type=checkbox]),
  textarea,
  select {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  input:focus,
  textarea:focus,
  select:focus {
    border-color: #4db8ff !important;
    background-color: #333333 !important;
  }
  
  input[disabled] {
    background-color: #3a3a3a !important;
    color: #888 !important;
  }
  
  input::placeholder,
  textarea::placeholder {
    color: #888 !important;
  }
  
  /* Fix all heading levels in form description CKEditor - both themes */
.ck-editor__editable h1,
.ck-editor__editable h2,
.ck-editor__editable h3 {
  color: #2f3941 !important;
}

@media (prefers-color-scheme: dark) {
  .ck-editor__editable h1,
  .ck-editor__editable h2,
  .ck-editor__editable h3 {
    color: #2f3941 !important;
  }
}
  
  /* Select dropdown arrow */
  select {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23888' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") !important;
  }
  
  /* ========== BUTTONS ========== */
  .button,
  .pagination-next-link,
  .pagination-prev-link,
  .pagination-first-link,
  .pagination-last-link,
  button {
    background-color: #2d2d2d !important;
    color: #4db8ff !important;
    border-color: #4db8ff !important;
  }
  
  .button:hover,
  button:hover {
    background-color: #3a3a3a !important;
    color: #6ec6ff !important;
  }
  
  .button-primary,
  .button[aria-selected="true"] {
    background-color: #0066cc !important;
    color: #ffffff !important;
  }
  
  /* ========== HEADER & NAVIGATION ========== */
  .header {
    background-color: #1f1f1f !important;
    border-bottom-color: #333 !important;
  }
  
  .header .logo-link,
  .header a {
    color: #e0e0e0 !important;
  }
  
  .nav-wrapper .menu-button {
    color: #e0e0e0 !important;
  }
  
  .nav-wrapper .dropdown-menu {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .nav-wrapper .dropdown-menu a {
    color: #e0e0e0 !important;
  }
  
  .nav-wrapper .dropdown-menu a:hover {
    background-color: #3a3a3a !important;
  }
  
  /* Mobile navigation */
  .nav-wrapper-mobile {
    background-color: #1f1f1f !important;
  }
  
  .nav-wrapper-mobile .menu-button-mobile {
    color: #e0e0e0 !important;
  }
  
  .nav-wrapper-mobile .menu-list-mobile {
    background-color: #2d2d2d !important;
  }
  
  /* ========== BREADCRUMBS ========== */
  .breadcrumbs {
    color: #b0b0b0 !important;
  }
  
  .breadcrumbs a {
    color: #4db8ff !important;
  }
  
  /* ========== SEARCH ========== */
  .search input[type="search"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  .search-icon {
    color: #888 !important;
  }
  
  /* ========== HOME PAGE ========== */
  .hero {
    background-color: #242424 !important;
  }
  
  .hero h1,
  .hero p {
    color: #ffffff !important;
  }
  
  .blocks {
    background-color: #1a1a1a !important;
  }
  
  .blocks-item {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .blocks-item:hover {
    background-color: #3a3a3a !important;
  }
  
  .blocks-item-title {
    color: #ffffff !important;
  }
  
  .blocks-item-description {
    color: #b0b0b0 !important;
  }
  
  /* ========== SECTION PAGE ========== */
  .section-header {
    background-color: #1f3a52 !important;
  }
  
  .section-header h1 {
    color: #ffffff !important;
  }
  
  .section-container {
    background-color: #1a1a1a !important;
  }
  
  li.article-list-item {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  li.article-list-item:hover {
    background-color: #3a3a3a !important;
  }
  
  .article-list-link {
    color: #4db8ff !important;
  }
  
  .article-list-item-description {
    color: #b0b0b0 !important;
  }
  
  .article-read-more {
    background-color: #0066cc !important;
    color: #ffffff !important;
  }
  
  .article-read-more:hover {
    background-color: #0A52A2 !important;
  }
  
  /* ========== CATEGORY PAGE ========== */
  .category-container {
    background-color: #1a1a1a !important;
  }
  
  .section-tree-title {
    color: #ffffff !important;
  }
  
  .see-all-articles {
    background-color: #0066cc !important;
    color: #ffffff !important;
  }
  
  /* ========== ARTICLE PAGE ========== */
  .article {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
  }
  
  .article-header {
    border-bottom-color: #333 !important;
  }
  
  .article-title {
    color: #ffffff !important;
  }
  
  .article-sidebar {
    background-color: #242424 !important;
    border-color: #333 !important;
  }
  
  .sidenav-item {
    color: #e0e0e0 !important;
    border-bottom-color: #333 !important;
  }
  
  .sidenav-item:hover,
  .sidenav-item.current-article {
    background-color: #2d2d2d !important;
    color: #4db8ff !important;
  }
  
  .sidenav-title {
    color: #ffffff !important;
  }
  
  /* Article body content */
  .article-body {
    color: #e0e0e0 !important;
  }
  
  .article-body p,
  .article-body li,
  .article-body td,
  .article-body th {
    color: #e0e0e0 !important;
  }
  
  .article-body strong,
  .article-body b {
    color: #ffffff !important;
  }
  
  /* Code blocks */
  .article-body pre,
  .article-body code {
    background-color: #2d2d2d !important;
    color: #f0f0f0 !important;
    border-color: #454545 !important;
  }
  
  /* Horizontal rules */
  .article-body hr {
    border-color: #454545 !important;
  }
  
  /* ========== ARTICLE INLINE STYLES (Critical for custom HTML) ========== */
  
  /* Override inline background colors for divs and spans */
  .article-body div[style*="background"],
  .article-body span[style*="background"],
  .article-body p[style*="background"] {
    background-color: #2d2d2d !important;
  }
  
  /* Override inline text colors */
  .article-body div[style*="color"],
  .article-body span[style*="color"],
  .article-body p[style*="color"],
  .article-body h1[style*="color"],
  .article-body h2[style*="color"],
  .article-body h3[style*="color"],
  .article-body h4[style*="color"] {
    color: #e0e0e0 !important;
  }
  
  /* Gradient backgrounds (for hero sections) */
  .article-body div[style*="linear-gradient"],
  .article-body div[style*="gradient"] {
    background: linear-gradient(135deg, #050A51 0%, #1F94D3 100%);
  }
  
  /* Tables with inline styles */
  .article-body table,
  .article-body table[style] {
    border-color: #454545 !important;
  }
  
  .article-body th,
  .article-body td,
  .article-body th[style],
  .article-body td[style] {
    border-color: #454545 !important;
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
  }
  
  .article-body thead th,
  .article-body thead th[style] {
    background-color: #1a4d7a !important;
    color: #ffffff !important;
  }
  
  .article-body tr[style*="background-color"] {
    background-color: #242424 !important;
  }
  
  .article-body tbody tr:nth-child(even) {
    background-color: #242424 !important;
  }
  
  /* Colored boxes and containers */
  .article-body div[style*="#e3f2fd"],
  .article-body div[style*="#e8f5e9"],
  .article-body div[style*="#f5f7fa"],
  .article-body div[style*="#fff3e0"],
  .article-body div[style*="background: #f"] {
    background-color: #2d3d4d !important;
    border-color: #4db8ff !important;
  }
  
  /* Special styled sections */
  .article-body .intro-note,
  .article-body .closing-cta {
    background-color: #2d2d2d !important;
  }
  
  /* Figures and images containers */
  .article-body figure {
    background-color: transparent !important;
  }
  
  /* ========== BLOCKQUOTES (Enhanced) ========== */
  .article-body blockquote {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-left-color: #666 !important;
  }
  
  /* All blockquote variants already handled in existing CSS (lines 5432-5485) */
  /* But let's add overrides for any inline styles */
  .article-body blockquote[style*="background"] {
    background-color: #2d2d2d !important;
  }
  
  .article-body blockquote[style*="border-left"] {
    border-left-color: #4db8ff !important;
  }
  
  /* ========== TABLES (General) ========== */
  table {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  thead {
    background-color: #1f1f1f !important;
  }
  
  th {
    background-color: #1a4d7a !important;
    color: #ffffff !important;
    border-color: #454545 !important;
  }
  
  td {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  tbody tr:nth-child(even) td {
    background-color: #242424 !important;
  }
  
  /* ========== REQUESTS PAGE ========== */
  .requests-table {
    background-color: #2d2d2d !important;
  }
  
  .requests-table th {
    background-color: #1f1f1f !important;
    color: #ffffff !important;
    border-bottom-color: #454545 !important;
  }
  
  .requests-table td {
    border-bottom-color: #333 !important;
  }
  
  .requests-table tr:hover {
    background-color: #3a3a3a !important;
  }
  
  .request-status {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
  }
  
  .request-id {
    color: #4db8ff !important;
  }
  
  /* ========== REQUEST PAGE (Single Request) ========== */
  .request-container {
    background-color: #2d2d2d !important;
  }
  
  .request-header {
    background-color: #242424 !important;
    border-bottom-color: #333 !important;
  }
  
  .request-title {
    color: #ffffff !important;
  }
  
  .status-label {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
  }
  
  /* Request comments */
  .comment {
    background-color: #242424 !important;
    border-color: #333 !important;
  }
  
  .comment:hover {
    background-color: #2d2d2d !important;
  }
  
  .comment-body {
    color: #e0e0e0 !important;
  }
  
  .comment-info {
    border-bottom-color: #333 !important;
  }
  
  /* Request form */
  .request-form {
    background-color: #2d2d2d !important;
  }
  
  .form-field label {
    color: #e0e0e0 !important;
  }
  
  .request-note {
    background-color: #2d3d4d !important;
    color: #e0e0e0 !important;
    border-left-color: #4db8ff !important;
  }
  
  /* ========== FOOTER ========== */
  .footer {
    background-color: #1f2937 !important;  /* Dark slate grey */
    background-image: none !important;
    border-top-color: #374151 !important;
    color: #e5e7eb !important;
  }
  
  .footer .ebm-footer-info p,
  .footer .ebm-footer-info a {
    color: #e5e7eb !important;  /* Light grey text in dark mode */
  }
  
  .footer .ebm-footer-info a:hover {
    color: #93c5fd !important;  /* Light blue on hover */
  }
  
  .footer h2,
  .footer h3 {
    color: #ffffff !important;
  }
  
  /* ========== PAGINATION ========== */
  .pagination {
    background-color: transparent !important;
  }
  
  .pagination-item {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .pagination-item:hover,
  .pagination-item.current {
    background-color: #3a3a3a !important;
  }
  
  /* ========== DROPDOWNS ========== */
  .dropdown-menu {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  }
  
  .dropdown-menu a {
    color: #e0e0e0 !important;
  }
  
  .dropdown-menu a:hover {
    background-color: #3a3a3a !important;
  }
  
  /* ========== LABELS & BADGES ========== */
  .label,
  .badge {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
  }
  
  .label-primary {
    background-color: #0066cc !important;
    color: #ffffff !important;
  }
  
  /* ========== AVATARS ========== */
  .avatar {
    background-color: #3a3a3a !important;
  }
  
  .user-avatar {
    border-color: #454545 !important;
  }
  
  /* ========== NOTIFICATIONS & ALERTS ========== */
  .notification,
  .alert {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
    color: #e0e0e0 !important;
  }
  
  .notification-success {
    background-color: #1a3d2d !important;
    border-color: #2d6d4d !important;
  }
  
  .notification-error {
    background-color: #4d1a1a !important;
    border-color: #7d2d2d !important;
  }
  
  .notification-info {
    background-color: #1a2d4d !important;
    border-color: #2d4d7d !important;
  }
  
  /* ========== ICONS ========== */
  svg {
    color: inherit !important;
  }
  
  .icon-lock,
  .icon-agent {
    color: #b0b0b0 !important;
  }
  
  /* ========== LOADING & SPINNER ========== */
  .loading {
    background-color: #2d2d2d !important;
  }
  
  .spinner {
    border-color: #454545 !important;
    border-top-color: #4db8ff !important;
  }
  
  /* ========== TOOLTIPS ========== */
  .tooltip {
    background-color: #1f1f1f !important;
    color: #e0e0e0 !important;
    border: 1px solid #454545 !important;
  }
  
  /* ========== COMMUNITY / FORUMS ========== */
  .community-post,
  .community-topic {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .community-post:hover,
  .community-topic:hover {
    background-color: #3a3a3a !important;
  }
  
  .community-badge {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
  }
  
  /* ========== VOTES ========== */
  .article-votes {
    background-color: #242424 !important;
    border-color: #333 !important;
  }
  
  .article-vote {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .article-vote:hover {
    background-color: #3a3a3a !important;
  }
  
  /* ========== SUBSCRIPTIONS ========== */
  .subscriptions-list {
    background-color: #2d2d2d !important;
  }
  
  .subscriptions-list-item {
    border-bottom-color: #333 !important;
  }
  
  .subscriptions-list-item:hover {
    background-color: #3a3a3a !important;
  }
  
  /* ========== CONTRIBUTIONS PAGE ========== */
  .contributions-header {
    background-color: #242424 !important;
    border-bottom-color: #333 !important;
  }
  
  .contributions-nav {
    background-color: #2d2d2d !important;
  }
  
  .contributions-nav a {
    color: #4db8ff !important;
  }
  
  .contributions-nav a.active {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
  }
  
  /* ========== USER PROFILE ========== */
  .profile-header {
    background-color: #242424 !important;
    border-bottom-color: #333 !important;
  }
  
  .profile-card {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .profile-info {
    color: #e0e0e0 !important;
  }
  
  .profile-stats {
    background-color: #242424 !important;
  }
  
  .profile-stat-value {
    color: #ffffff !important;
  }
  
  /* ========== SEARCH RESULTS ========== */
  .search-results {
    background-color: #1a1a1a !important;
  }
  
  .search-result-item {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .search-result-item:hover {
    background-color: #3a3a3a !important;
  }
  
  .search-result-title {
    color: #4db8ff !important;
  }
  
  .search-result-description {
    color: #b0b0b0 !important;
  }
  
  .search-result-breadcrumbs {
    color: #888 !important;
  }
  
  /* ========== ERROR PAGE ========== */
  .error-page {
    background-color: #1a1a1a !important;
  }
  
  .error-page h1,
  .error-page h2 {
    color: #ffffff !important;
  }
  
  /* ========== COLLAPSIBLE SIDEBAR ========== */
  .collapsible-sidebar {
    background-color: #242424 !important;
    border-color: #333 !important;
  }
  
  .collapsible-sidebar-toggle {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
  }
  
  .collapsible-sidebar-toggle:hover {
    background-color: #3a3a3a !important;
  }
  
  /* ========== ATTACHMENTS ========== */
  .attachment-item {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .attachment-item:hover {
    background-color: #3a3a3a !important;
  }
  
  .attachment-icon {
    color: #b0b0b0 !important;
  }
  
  /* ========== NESTY PANELS (Dropdown search) ========== */
  .nesty-panel {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .nesty-panel li {
    color: #e0e0e0 !important;
  }
  
  .nesty-panel li:hover {
    background-color: #3a3a3a !important;
  }
  
  .nesty-panel li.kb-match {
    background-color: #3d3d2d !important;
  }
  
  .nesty-panel li.kb-focused {
    background-color: #4d4d2d !important;
    outline-color: #d4a574 !important;
  }
  
  /* ========== CONTAINER DIVIDERS ========== */
  .container-divider {
    border-top-color: #333 !important;
  }
  
  /* ========== SHADOWS ========== */
  .shadow,
  .box-shadow,
  [class*="shadow"] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  }
  
  /* ========== SPECIAL OVERRIDES FOR INLINE STYLES ========== */
  
  /* White text on colored backgrounds needs special handling */
  .article-body div[style*="color: white"],
  .article-body div[style*="color:#fff"],
  .article-body div[style*="color: #fff"],
  .article-body h1[style*="color: white"],
  .article-body h2[style*="color: white"],
  .article-body h3[style*="color: white"],
  .article-body h4[style*="color: white"],
  .article-body p[style*="color: white"] {
    color: #ffffff !important;
  }
  
  /* Preserve white backgrounds that are intentional */
  .article-body div[style*="background: white"],
  .article-body div[style*="background:#fff"],
  .article-body div[style*="background: #fff"] {
    background-color: #2d2d2d !important;
  }
  
  /* Border colors */
  .article-body div[style*="border"],
  .article-body table[style*="border"] {
    border-color: #454545 !important;
  }
  
  /* ========== IMAGES ========== */
  
  /* Reduce brightness for images in dark mode */
  .article-body img {
    opacity: 0.9;
  }
  
  /* Keep logos and icons at full brightness */
  .logo img,
  .icon img,
  .avatar img {
    opacity: 1 !important;
  }
  
  /* ========== ACCESSIBILITY ========== */
  
  /* Focus indicators */
  *:focus {
    outline-color: #4db8ff !important;
  }
  
  /* Selection highlight */
  ::selection {
    background-color: #4db8ff !important;
    color: #ffffff !important;
  }
  
  ::-moz-selection {
    background-color: #4db8ff !important;
    color: #ffffff !important;
  }
  
  /* ========== SCROLLBARS (Webkit browsers) ========== */
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }
  
  ::-webkit-scrollbar-track {
    background: #1a1a1a;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #454545;
    border-radius: 6px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #555555;
  }
  
  /* ========== PRINT STYLES (Revert to light mode for printing) ========== */
  @media print {
    body,
    .container,
    .article-body {
      background-color: white !important;
      color: black !important;
    }
    
    a {
      color: #0066cc !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
      color: black !important;
    }
  }
  
}

/* ========== END DARK MODE ========== */

/* ========================================
   DARK MODE FIXES - Add after the main dark mode CSS
   Addresses: Article titles, header disconnect, profile page white bar
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== FIX 1: ARTICLE TITLE VISIBILITY ===== */
  /* Make sure article header has dark background so white title is visible */
  
  .article-header,
  .article .article-header {
    background-color: #1a1a1a !important;
  }
  
  /* Ensure article title is always visible */
  .article-title,
  .article .article-title,
  .article-header .article-title,
  h1.article-title {
    color: #ffffff !important;
    background-color: transparent !important;
  }
  
  /* Article header wrapper - ensure no light backgrounds */
  .article-header-wrapper,
  .article-info,
  header.article-header {
    background-color: #1a1a1a !important;
  }
  
  
  /* ===== FIX 2: HEADER BAR - SMOOTH TRANSITION ===== */
  /* Keep the teal header (brand color) but ensure smooth visual flow */
  
  /* Main header - keep teal but slightly darker for consistency */
  .header,
  header.header,
  .header-wrapper {
    background-color: #012251 !important; /* Ontario navy */
    border-bottom: 1px solid #1a1a1a !important;
  }
  
  /* Alternative: If you prefer all-black header, uncomment below and comment above */
  /*
  .header,
  header.header,
  .header-wrapper {
    background-color: #1a1a1a !important;
    border-bottom: 1px solid #333 !important;
  }
  */
  
  /* Header inner elements */
  .header .container,
  .header-inner {
    background-color: transparent !important;
  }
  
  /* Navigation area directly under header */
  .sub-nav,
  .breadcrumbs-container,
  nav[aria-label="Current location"] {
    background-color: #1a1a1a !important;
    padding-top: 10px;
  }
  
  /* Remove any white gaps */
  body > header,
  body > .header {
    margin-bottom: 0 !important;
  }
  
  main,
  body > main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  
  /* ===== FIX 3: PROFILE PAGE WHITE BAR ===== */
  /* Fix the white bar behind Contributions/Following tabs */
  
  /* Activities header (the white bar area) */
  .my-activities-header,
  header.my-activities-header,
  .activities-header {
    background-color: #1a1a1a !important;
  }
  
  /* Profile navigation tabs */
  .profile-nav,
  .my-activities-nav,
  .activities-nav {
    background-color: #1a1a1a !important;
    border-bottom-color: #333 !important;
  }
  
  /* Individual tab items */
  .profile-nav a,
  .my-activities-nav a,
  .activities-nav a {
    background-color: transparent !important;
    color: #4db8ff !important;
    border-bottom: 2px solid transparent !important;
  }
  
  .profile-nav a:hover,
  .my-activities-nav a:hover,
  .activities-nav a:hover {
    background-color: #2d2d2d !important;
    border-bottom-color: #4db8ff !important;
  }
  
  .profile-nav a.active,
  .my-activities-nav a.active,
  .activities-nav a.active,
  .profile-nav a[aria-selected="true"],
  .my-activities-nav a[aria-selected="true"],
  .activities-nav a[aria-selected="true"] {
    color: #ffffff !important;
    border-bottom-color: #4db8ff !important;
    background-color: #2d2d2d !important;
  }
  
  /* Contributions page specific */
  .contributions-header,
  .subscriptions-header {
    background-color: #1a1a1a !important;
  }
  
  /* Remove any white backgrounds in profile area */
  .profile-header,
  .my-activities,
  .contributions,
  .subscriptions {
    background-color: #1a1a1a !important;
  }
  
  /* Profile page container */
  .profile-container,
  .my-activities-container {
    background-color: #1a1a1a !important;
  }
  
  
  /* ===== ADDITIONAL SAFETY FIXES ===== */
  /* Catch any other potential white backgrounds */
  
/* Ensure no white backgrounds anywhere */
section[class*="header"],
div[class*="header"]:not([class*="article-header"]):not(.header-inner) {
  background-color: #1a1a1a !important;
}
  
  /* Article container should be fully dark */
  .article-container,
  .article-wrapper {
    background-color: #1a1a1a !important;
  }
  
  /* Search container in header area */
  .search-container {
    background-color: transparent !important;
  }
  
  /* Ensure sidebar has no light backgrounds */
  .article-sidebar,
  aside.article-sidebar {
    background-color: #242424 !important;
  }
  
  /* Tab/nav lists should blend with dark background */
  nav ul,
  .nav-list,
  [role="navigation"] ul {
    background-color: transparent !important;
  }
  
  /* Fix any light-colored backgrounds on navigation items */
  nav li,
  .nav-item {
    background-color: transparent !important;
  }
  
  nav li:hover,
  .nav-item:hover {
    background-color: #2d2d2d !important;
  }
  
}

/* ========== END FIXES ========== */

/* ========================================
   DROPDOWN MENU FIXES - Add after previous fixes
   Addresses: Menu text contrast, black boxes, hover readability
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== FIX 1: DROPDOWN MENU TEXT VISIBILITY ===== */
  /* Make dropdown menu items clearly readable */
  
  /* Topics dropdown and all dropdown menus */
  .dropdown-menu,
  .nav-wrapper .dropdown-menu,
  [role="menu"],
  .menu-dropdown {
    background-color: #ffffff !important; /* Keep light background for readability */
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Dropdown menu items - DARK TEXT on LIGHT background */
  .dropdown-menu a,
  .nav-wrapper .dropdown-menu a,
  [role="menu"] a,
  [role="menuitem"],
  .dropdown-menu li,
  .menu-dropdown a {
    color: #333333 !important; /* Dark gray text for contrast */
    background-color: transparent !important;
  }
  
  /* Dropdown hover state - light gray background, keep dark text */
  .dropdown-menu a:hover,
  .nav-wrapper .dropdown-menu a:hover,
  [role="menu"] a:hover,
  [role="menuitem"]:hover,
  .dropdown-menu li:hover,
  .menu-dropdown a:hover {
    background-color: #f5f5f5 !important; /* Light gray hover */
    color: #000000 !important; /* Black text on hover */
  }
  
  /* Active/selected dropdown items */
  .dropdown-menu a:active,
  .dropdown-menu a[aria-checked="true"],
  .dropdown-menu .active {
    background-color: #e8f4f8 !important;
    color: #0066cc !important;
  }
  
  
  /* ===== FIX 2: REMOVE BLACK BOXES AROUND DROPDOWNS ===== */
  /* Remove unwanted black backgrounds */
  
  /* Dropdown toggle buttons (Topics, Profile name) */
  .dropdown-toggle,
  .nav-wrapper .dropdown-toggle,
  button.dropdown-toggle {
    background-color: transparent !important;
  }
  
  /* Dropdown containers - no black boxes */
  .dropdown,
  .nav-wrapper .dropdown,
  nav .dropdown {
    background-color: transparent !important;
  }
  
  /* Remove any wrapper backgrounds */
  .dropdown-wrapper,
  .menu-wrapper {
    background-color: transparent !important;
  }
  
  
  /* ===== FIX 3: PROFILE DROPDOWN SPECIFIC ===== */
  /* Fix the user profile dropdown menu */
  
  /* Profile dropdown menu */
  .user-nav .dropdown-menu,
  [aria-labelledby*="user"],
  .profile-dropdown .dropdown-menu {
    background-color: #ffffff !important;
    color: #333333 !important;
  }
  
  /* Profile menu items */
  .user-nav .dropdown-menu a,
  .profile-dropdown .dropdown-menu a {
    color: #333333 !important;
    background-color: transparent !important;
  }
  
  /* Profile menu hover - readable */
  .user-nav .dropdown-menu a:hover,
  .profile-dropdown .dropdown-menu a:hover {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
  }
  
  
  /* ===== FIX 4: NAVIGATION ITEMS CONSISTENCY ===== */
  /* Make sure all top nav items look consistent */
  
  /* Top navigation links (Community, Topics, Submit a request) */
  .header .nav-link,
  .nav-wrapper .nav-link,
  header nav a {
    background-color: transparent !important;
  }
  
  /* Keep header text white/light for visibility on teal */
  .header a,
  .header button,
  .nav-wrapper a,
  .nav-wrapper button {
    color: #ffffff !important;
  }
  
  .header a:hover,
  .header button:hover,
  .nav-wrapper a:hover,
  .nav-wrapper button:hover {
    color: #e0e0e0 !important;
  }
  
  
  /* ===== FIX 5: CHEVRON ICONS IN DROPDOWNS ===== */
  /* Ensure dropdown arrows are visible */
  
  .dropdown-toggle svg,
  .dropdown-chevron-icon,
  .chevron-icon {
    color: currentColor !important;
  }
  
  
  /* ===== FIX 6: MOBILE DROPDOWN MENUS ===== */
  /* Fix mobile navigation dropdowns */
  
  @media (max-width: 768px) {
    .menu-list-mobile .dropdown-menu,
    .mobile-nav .dropdown-menu {
      background-color: #ffffff !important;
    }
    
    .menu-list-mobile .dropdown-menu a,
    .mobile-nav .dropdown-menu a {
      color: #333333 !important;
    }
    
    .menu-list-mobile .dropdown-menu a:hover,
    .mobile-nav .dropdown-menu a:hover {
      background-color: #f5f5f5 !important;
      color: #000000 !important;
    }
  }
  
  
  /* ===== FIX 7: SEARCH DROPDOWN (if applicable) ===== */
  /* Fix search suggestions dropdown */
  
  .search-results-dropdown,
  .search-dropdown {
    background-color: #ffffff !important;
  }
  
  .search-results-dropdown a,
  .search-dropdown a {
    color: #333333 !important;
  }
  
  .search-results-dropdown a:hover,
  .search-dropdown a:hover {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
  }
  
  
  /* ===== FIX 8: ENSURE DROPDOWN POSITIONING ===== */
  /* Make sure dropdowns appear correctly */
  
  .dropdown-menu {
    position: absolute !important;
    z-index: 1000 !important;
  }
  
  /* Remove any dark overlays */
  .dropdown-backdrop,
  .dropdown-overlay {
    display: none !important;
  }
  
}

/* ========== END DROPDOWN FIXES ========== */

/* ========================================
   CUSTOM TOPICS DROPDOWN FIXES - Add after previous dropdown fixes
   Targets the .cat-dropdown custom menu structure
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== FIX 1: REMOVE BLACK BACKGROUND FROM TOPICS BUTTON ===== */
  
  /* Topics button - should be transparent like other nav items */
  .cat-dropdown-btn,
  button.cat-dropdown-btn {
    background-color: transparent !important;
    color: #ffffff !important; /* White text to match other header items */
    border: none !important;
  }
  
  /* Topics button hover */
  .cat-dropdown-btn:hover,
  button.cat-dropdown-btn:hover {
    background-color: transparent !important;
    color: #e0e0e0 !important;
  }
  
  /* Topics dropdown container */
  .cat-dropdown {
    background-color: transparent !important;
  }
  
  
  /* ===== FIX 2: MAKE DROPDOWN MENU ITEMS VISIBLE ===== */
  
  /* Topics dropdown content - LIGHT background for readability */
  .cat-dropdown-content,
  .cat-dropdown-content.show {
    background-color: #ffffff !important; /* White background */
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Topics dropdown links - DARK text, always visible */
  .cat-dropdown-content a,
  .cat-dropdown-content.show a {
    color: #333333 !important; /* Dark gray text - always visible */
    background-color: transparent !important;
    display: block !important;
    padding: 10px 16px !important;
    text-decoration: none !important;
    opacity: 1 !important; /* Ensure links are always visible */
    visibility: visible !important;
  }
  
  
  /* ===== FIX 3: READABLE HOVER STATES ===== */
  
  /* Topics dropdown hover - LIGHT gray with DARK text */
  .cat-dropdown-content a:hover,
  .cat-dropdown-content.show a:hover {
    background-color: #f5f5f5 !important; /* Light gray hover */
    color: #000000 !important; /* Black text for maximum contrast */
    text-decoration: none !important;
  }
  
  /* Active/focus states */
  .cat-dropdown-content a:active,
  .cat-dropdown-content a:focus,
  .cat-dropdown-content.show a:active,
  .cat-dropdown-content.show a:focus {
    background-color: #e8f4f8 !important;
    color: #0066cc !important;
  }
  
  
  /* ===== FIX 4: ENSURE TEXT IS NEVER HIDDEN ===== */
  
  /* Override any opacity or visibility rules */
  .cat-dropdown-content a,
  .cat-dropdown-content a span,
  .cat-dropdown-content a *,
  .cat-dropdown-content.show a,
  .cat-dropdown-content.show a span,
  .cat-dropdown-content.show a * {
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
  }
  
  /* Ensure no color: transparent or similar issues */
  .cat-dropdown-content {
    color: #333333 !important;
  }
  
  
  /* ===== FIX 5: DROPDOWN POSITIONING & DISPLAY ===== */
  
  /* Make sure dropdown appears correctly */
  .cat-dropdown-content {
    position: absolute !important;
    z-index: 1000 !important;
    min-width: 200px !important;
  }
  
  /* Show dropdown when open */
  .cat-dropdown-content.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  
  /* ===== FIX 6: CONSISTENCY WITH OTHER NAV ITEMS ===== */
  
  /* Make sure Topics button looks like other nav items */
  .header .cat-dropdown-btn,
  .nav-wrapper .cat-dropdown-btn {
    font-weight: normal !important;
    font-size: inherit !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
  }
  
  /* Chevron icon in Topics button */
  .cat-dropdown-btn svg,
  .cat-dropdown-btn .dropdown-chevron-icon {
    color: #ffffff !important; /* White to match button text */
  }
  
  .cat-dropdown-btn:hover svg,
  .cat-dropdown-btn:hover .dropdown-chevron-icon {
    color: #e0e0e0 !important;
  }
  
  
  /* ===== FIX 7: MOBILE RESPONSIVENESS ===== */
  
  @media (max-width: 768px) {
    .cat-dropdown-content {
      width: 100% !important;
      left: 0 !important;
      right: 0 !important;
    }
    
    .cat-dropdown-content a {
      padding: 12px 16px !important;
      font-size: 14px !important;
    }
  }
  
}

/* ========== END CUSTOM TOPICS DROPDOWN FIXES ========== */

/* ========================================
   USER PROFILE DROPDOWN FIX v2 - PRECISE TARGETING
   Targets a[role="menuitem"] in profile dropdown
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== FIX: TARGET MENU ITEMS BY ROLE ATTRIBUTE ===== */
  
  /* All menu items with role="menuitem" in dropdown */
  a[role="menuitem"],
  [role="menuitem"] {
    color: #333333 !important; /* Dark gray text - ALWAYS visible */
    background-color: transparent !important;
    display: block !important;
    padding: 10px 16px !important;
    text-decoration: none !important;
    opacity: 1 !important; /* Force visibility */
    visibility: visible !important; /* Force visibility */
  }
  
  /* Hover state for menuitem links */
  a[role="menuitem"]:hover,
  [role="menuitem"]:hover {
    background-color: #f5f5f5 !important; /* Light gray hover */
    color: #000000 !important; /* Black text for contrast */
    text-decoration: none !important;
  }
  
  /* Focus state for accessibility */
  a[role="menuitem"]:focus,
  [role="menuitem"]:focus {
    background-color: #e8f4f8 !important;
    color: #0066cc !important;
    outline: 2px solid #0066cc !important;
  }
  
  
  /* ===== TARGET SPECIFIC MENU ITEMS ===== */
  
  /* Profile link */
  a[role="menuitem"][href*="/profiles/"],
  a[role="menuitem"][href*="profiles"] {
    color: #333333 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Requests link */
  a[role="menuitem"][href*="/requests"],
  a[role="menuitem"].requests-link,
  .requests-link {
    color: #333333 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Activities link */
  a[role="menuitem"][href*="/contributions"],
  a[role="menuitem"][href*="contributions/posts"] {
    color: #333333 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  
  /* ===== ENSURE PARENT DROPDOWN IS LIGHT ===== */
  
  /* Target dropdown menu containing role="menuitem" items */
  .dropdown-menu:has(a[role="menuitem"]),
  [role="menu"]:has(a[role="menuitem"]),
  div:has(> a[role="menuitem"]) {
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Fallback for browsers that don't support :has() */
  .dropdown-menu,
  [role="menu"] {
    background-color: #ffffff !important;
  }
  
  
  /* ===== FORCE ALL TEXT CONTENT TO BE VISIBLE ===== */
  
  /* Ensure all text within menuitem links is visible */
  a[role="menuitem"] *,
  [role="menuitem"] * {
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Override any potential color: transparent or white */
  a[role="menuitem"],
  a[role="menuitem"]:link,
  a[role="menuitem"]:visited {
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
  }
  
  /* Hover override */
  a[role="menuitem"]:hover,
  a[role="menuitem"]:hover * {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
  }
  
  
  /* ===== REMOVE ANY HIDING MECHANISMS ===== */
  
  /* Remove display: none or visibility: hidden */
  a[role="menuitem"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
  }
  
  /* Ensure no clip-path or clip hiding */
  a[role="menuitem"],
  [role="menuitem"] {
    clip-path: none !important;
    clip: auto !important;
  }
  
  
  /* ===== DROPDOWN POSITIONING ===== */
  
  /* Ensure dropdown menu is visible and positioned correctly */
  .dropdown-menu:has(a[role="menuitem"]) {
    position: absolute !important;
    z-index: 1000 !important;
    min-width: 160px !important;
    display: block !important;
  }
  
  /* When dropdown is shown */
  .dropdown-menu.show,
  .dropdown-menu[style*="display: block"] {
    background-color: #ffffff !important;
  }
  
  
  /* ===== SPECIFICITY OVERRIDES ===== */
  
  /* Maximum specificity for stubborn styles */
  .header a[role="menuitem"],
  .nav-wrapper a[role="menuitem"],
  header a[role="menuitem"],
  nav a[role="menuitem"] {
    color: #333333 !important;
    background-color: transparent !important;
  }
  
  .header a[role="menuitem"]:hover,
  .nav-wrapper a[role="menuitem"]:hover,
  header a[role="menuitem"]:hover,
  nav a[role="menuitem"]:hover {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
  }
  
  /* Target within any dropdown container */
  .dropdown a[role="menuitem"],
  [class*="dropdown"] a[role="menuitem"] {
    color: #333333 !important;
  }
  
  .dropdown a[role="menuitem"]:hover,
  [class*="dropdown"] a[role="menuitem"]:hover {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
  }
  
  
  /* ===== MOBILE RESPONSIVE ===== */
  
  @media (max-width: 768px) {
    a[role="menuitem"] {
      padding: 12px 16px !important;
      font-size: 14px !important;
    }
  }
  
}

/* ========== END USER PROFILE DROPDOWN FIX v2 ========== */

/* ========================================
   ADDITIONAL DARK MODE FIXES - Round 6
   Add after all previous dark mode CSS
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== FIX 1: PROFILE PAGE ACTIVITY TEXT ===== */
  /* Make activity/contribution text more visible */
  
  .profile-contribution-body,
  .profile-activity-body,
  .activity-body {
    color: #e0e0e0 !important; /* Light grey for readability */
  }
  
  /* Profile contribution items */
  .profile-contribution,
  .profile-activity-item {
    color: #e0e0e0 !important;
  }
  
  /* Any paragraphs in profile sections */
  .profile-section p,
  .activity-section p {
    color: #e0e0e0 !important;
  }
  
  
  /* ===== FIX 2: PROFILE DROPDOWN - REMOVE ALWAYS-VISIBLE BUG ===== */
  /* Fix the dropdown that stays open all the time */
  
  /* CRITICAL: Remove the display: block that was forcing it to always show */
  .dropdown-menu:has(a[role="menuitem"]) {
    display: none !important; /* Hidden by default */
  }
  
  /* ONLY show when it has the .show class */
  .dropdown-menu.show:has(a[role="menuitem"]),
  .dropdown-menu[aria-expanded="true"]:has(a[role="menuitem"]) {
    display: block !important; /* Only visible when open */
  }
  
  /* Alternative targeting for the specific dropdown */
  div[role="menu"].dropdown-menu {
    display: none !important; /* Hidden by default */
  }
  
  div[role="menu"].dropdown-menu.show,
  div[role="menu"].dropdown-menu[aria-expanded="true"] {
    display: block !important; /* Only visible when open */
  }
  
  
  /* ===== FIX 3: MY REQUESTS PAGE - SORTABLE COLUMN HEADERS ===== */
  /* Make "Created" and "Last activity" headers more visible */
  
  /* Sortable column headers */
  .requests-link,
  a.requests-link {
    color: #4db8ff !important; /* Bright blue for visibility */
  }
  
  .requests-link:hover,
  a.requests-link:hover {
    color: #6ec6ff !important; /* Lighter blue on hover */
  }
  
  /* Sort symbol (arrow) */
  .requests-sort-symbol {
    color: #4db8ff !important;
  }
  
  /* Table headers in requests page */
  .requests-table th a {
    color: #4db8ff !important;
  }
  
  
  /* ===== FIX 4: FORM EMAIL PILLS - TEXT VISIBILITY ===== */
  /* Make entered email addresses readable */
  
  /* Email pill container */
  li[data-hc-pill="true"],
  [data-hc-pill="true"] {
    background-color: #3a3a3a !important;
    border-color: #555 !important;
  }
  
  /* Email text inside pill */
  li[data-hc-pill="true"] span,
  [data-hc-pill="true"] span {
    color: #ffffff !important; /* White text */
  }
  
  /* Pills container */
  ul[data-hc-pills-container="true"],
  [data-hc-pills-container="true"] {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  /* Input field inside pills */
  ul[data-hc-pills-container] input[type="text"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border: none !important;
  }
  
  
  /* ===== FIX 5: FORM DESCRIPTION TEXT - HINTS AND LABELS ===== */
  /* Make all form helper text more visible */
  
  /* Hint text (paragraphs with *_hint id) */
  p[id*="_hint"],
  .hint,
  .form-hint,
  .field-hint {
    color: #b0b0b0 !important; /* Light grey for helper text */
  }
  
  /* Form labels */
  .form-field label,
  label {
    color: #e0e0e0 !important; /* Bright for labels */
  }
  
  /* Required field indicators */
  .required,
  abbr[title="required"] {
    color: #ff6b6b !important;
  }
  
  /* Form descriptions and instructions */
  .form-description,
  .field-description,
  .form-instructions {
    color: #b0b0b0 !important;
  }
  
  
  /* ===== FIX 6: DROPDOWN MENU SELECTIONS (NESTY) ===== */
  /* Make dropdown options visible before hover */
  
  /* Nesty input (dropdown trigger) */
  .nesty-input,
  a.nesty-input {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  .nesty-input:hover,
  a.nesty-input:hover {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
  }
  
  /* Nesty panel (dropdown menu) */
  .nesty-panel {
    background-color: #ffffff !important; /* Light background for readability */
    border-color: #ddd !important;
  }
  
  /* Nesty options - ALWAYS VISIBLE */
  .nesty-panel li,
  .nesty-panel a,
  .nesty-panel div {
    color: #333333 !important; /* Dark text on light background */
    background-color: transparent !important;
  }
  
  /* Nesty hover state */
  .nesty-panel li:hover,
  .nesty-panel a:hover {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
  }
  
  /* Nesty focused/selected item */
  .nesty-panel li.kb-focused,
  .nesty-panel li[aria-selected="true"] {
    background-color: #e8f4f8 !important;
    color: #0066cc !important;
  }
  
  /* Ensure nesty items are visible */
  .nesty-panel li,
  .nesty-panel div {
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  
  /* ===== ADDITIONAL FORM FIXES ===== */
  /* Catch any other form elements that might be hard to read */
  
  /* All form inputs */
  .request-form input:not([type="checkbox"]):not([type="radio"]),
  .request-form textarea,
  .request-form select {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  /* Form input focus state */
  .request-form input:focus,
  .request-form textarea:focus,
  .request-form select:focus {
    background-color: #333333 !important;
    border-color: #4db8ff !important;
  }
  
  /* Placeholder text */
  .request-form input::placeholder,
  .request-form textarea::placeholder {
    color: #888 !important;
  }
  
  /* Form field wrappers */
  .form-field {
    background-color: transparent !important;
  }
  
  /* Error messages */
  .error-message,
  .field-error,
  [id*="_error"] {
    color: #ff6b6b !important;
  }
  
  
  /* ===== PROFILE PAGE ADDITIONAL FIXES ===== */
  /* Ensure all profile text is readable */
  
  /* Activity items */
  .activity-item,
  .contribution-item {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .activity-item:hover,
  .contribution-item:hover {
    background-color: #3a3a3a !important;
  }
  
  /* Activity timestamps */
  .activity-timestamp,
  .contribution-timestamp {
    color: #b0b0b0 !important;
  }
  
  /* Activity titles/links */
  .activity-title,
  .contribution-title {
    color: #4db8ff !important;
  }
  
  
  /* ===== TABLE IMPROVEMENTS ===== */
  /* Improve all table headers that might be links */
  
  /* Table header links */
  th a,
  thead a {
    color: #4db8ff !important;
  }
  
  th a:hover,
  thead a:hover {
    color: #6ec6ff !important;
  }
  
  
  /* ===== SEPARATOR VISIBILITY ===== */
  /* Make dropdown separators visible */
  
  .separator[role="separator"],
  .dropdown-menu .separator {
    border-top: 1px solid #ddd !important;
    margin: 5px 0 !important;
  }
  
}

/* ========== END ROUND 6 FIXES ========== */


/* ========================================
   ADDITIONAL DARK MODE FIXES - Round 7
   Add after Round 6 fixes
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== FIX 1: PROFILE DROPDOWN - MAKE IT WORK AGAIN ===== */
  /* Fix the dropdown so it opens when clicked */
  
  /* REVERT the display: none from Round 6 - it broke the dropdown */
  /* Instead, rely on Zendesk's JavaScript to manage visibility */
  
  /* Remove the forced display: none */
  .dropdown-menu:has(a[role="menuitem"]) {
    display: none; /* Not !important - allow JS to override */
  }
  
  /* Show when aria-expanded is true OR when .show class is present */
  .dropdown-toggle[aria-expanded="true"] + .dropdown-menu,
  .dropdown-toggle[aria-expanded="true"] ~ .dropdown-menu,
  button[aria-expanded="true"] + .dropdown-menu,
  button[aria-expanded="true"] ~ .dropdown-menu {
    display: block !important;
  }
  
  /* Also show when .show class is present */
  .dropdown-menu.show {
    display: block !important;
  }
  
  /* User dropdown specific - using the button ID pattern */
  .user-info.dropdown .dropdown-toggle[aria-expanded="true"] + .dropdown-menu,
  .user-info.dropdown button[aria-expanded="true"] + .dropdown-menu {
    display: block !important;
  }
  
  /* Ensure dropdown menu stays light with dark text */
  .user-info .dropdown-menu {
    background-color: #ffffff !important;
  }
  
  
  /* ===== FIX 2: PROFILE ACTIVITY TEXT - STRONGER SELECTORS ===== */
  /* Make profile contribution body text more visible */
  
  /* Target the specific profile contribution structure */
  .profile-activity-contribution .profile-contribution-body,
  .profile-contribution .profile-contribution-body,
  p.profile-contribution-body {
    color: #e0e0e0 !important; /* Light grey for readability */
    background-color: transparent !important;
  }
  
  /* All text content within profile contributions */
  .profile-activity-contribution,
  .profile-contribution {
    color: #e0e0e0 !important;
  }
  
  /* Profile contribution headers */
  .profile-contribution-header {
    background-color: transparent !important;
  }
  
  /* Profile contribution title */
  .profile-contribution-title {
    color: #ffffff !important;
  }
  
  .profile-contribution-title a {
    color: #4db8ff !important;
  }
  
  /* Profile contribution breadcrumbs */
  .profile-contribution-breadcrumbs {
    color: #b0b0b0 !important;
  }
  
  .profile-contribution-breadcrumbs a {
    color: #4db8ff !important;
  }
  
  /* Meta data in contributions */
  .profile-contribution .meta-data,
  .profile-activity-contribution .meta-data {
    color: #b0b0b0 !important;
  }
  
  
  /* ===== FIX 3: EMAIL SIGNATURES IN COMMENTS ===== */
  /* Override inline styles in email signatures to make them readable */
  
  /* Target comment body section */
  .comment-body,
  section.comment-body {
    background-color: transparent !important;
    color: #e0e0e0 !important;
  }
  
  /* Override all inline color styles in comments */
  .comment-body *[style*="color"],
  .zd-comment *[style*="color"],
  .zd-comment-pre-styled *[style*="color"] {
    color: #e0e0e0 !important; /* Override ALL inline colors */
  }
  
  /* Override inline background colors in comments */
  .comment-body *[style*="background"],
  .zd-comment *[style*="background"],
  .zd-comment-pre-styled *[style*="background"] {
    background-color: transparent !important;
  }
  
  /* Specific targeting for email signature tables */
  .comment-body table,
  .comment-body table[style],
  .zd-comment table,
  .zd-comment table[style] {
    background-color: transparent !important;
    border-color: #454545 !important;
  }
  
  .comment-body table td,
  .comment-body table td[style],
  .comment-body table span,
  .comment-body table span[style],
  .zd-comment table td,
  .zd-comment table td[style],
  .zd-comment table span,
  .zd-comment table span[style] {
    color: #e0e0e0 !important; /* Force light color */
    background-color: transparent !important;
  }
  
  /* Email signature paragraphs */
  .comment-body p,
  .comment-body p[style],
  .zd-comment p,
  .zd-comment p[style] {
    color: #e0e0e0 !important;
  }
  
  /* Links in comments should be visible */
  .comment-body a,
  .zd-comment a {
    color: #4db8ff !important;
  }
  
  .comment-body a:hover,
  .zd-comment a:hover {
    color: #6ec6ff !important;
  }
  
  /* Bold text in signatures */
  .comment-body b,
  .comment-body strong,
  .zd-comment b,
  .zd-comment strong {
    color: #ffffff !important;
  }
  
  /* Divs with inline styles in comments */
  .comment-body div[style],
  .zd-comment div[style],
  .zd-comment-pre-styled div[style] {
    color: #e0e0e0 !important;
    background-color: transparent !important;
  }
  
  /* Override color: black specifically (common in email signatures) */
  .comment-body *[style*="color: black"],
  .comment-body *[style*="color:black"],
  .comment-body *[style*="color:#000"],
  .zd-comment *[style*="color: black"],
  .zd-comment *[style*="color:black"],
  .zd-comment *[style*="color:#000"] {
    color: #e0e0e0 !important;
  }
  
  /* Override color: currentcolor (common in links) */
  .comment-body *[style*="color: currentcolor"],
  .comment-body *[style*="color:currentcolor"],
  .zd-comment *[style*="color: currentcolor"],
  .zd-comment *[style*="color:currentcolor"] {
    color: #4db8ff !important;
  }
  
  /* Override specific RGB colors that might be too dark */
  .comment-body *[style*="color: rgb"],
  .zd-comment *[style*="color: rgb"] {
    color: #e0e0e0 !important;
  }
  
  /* Comment container background */
  .comment {
    background-color: #242424 !important;
    border-color: #454545 !important;
  }
  
  .comment:hover {
    background-color: #2d2d2d !important;
  }
  
  /* Comment info section */
  .comment-info {
    border-bottom-color: #454545 !important;
  }
  
  /* Comment author name */
  .comment-author a {
    color: #4db8ff !important;
  }
  
  /* Comment meta data */
  .comment-meta .meta-data {
    color: #b0b0b0 !important;
  }
  
  
  /* ===== ADDITIONAL SAFETY OVERRIDES ===== */
  /* Catch any other potential inline style issues */
  
  /* Override white text on white background */
  .comment-body *[style*="color: white"],
  .comment-body *[style*="color:#fff"],
  .comment-body *[style*="color: #fff"],
  .zd-comment *[style*="color: white"],
  .zd-comment *[style*="color:#fff"],
  .zd-comment *[style*="color: #fff"] {
    color: #ffffff !important; /* Keep white text white */
  }
  
  /* Force visibility of all comment content */
  .comment-body *,
  .zd-comment * {
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Remove any potential hiding mechanisms */
  .comment-body,
  .zd-comment {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
}

/* ========== END ROUND 7 FIXES ========== */

/* ========================================
   PROFILE ACTIVITY TEXT FIX - Round 8
   Add after Round 6 and Round 7
   Dark text for white activity boxes
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== PROFILE ACTIVITY BOXES - WHITE BACKGROUND ===== */
  /* These boxes have white backgrounds, so text needs to be DARK */
  
  /* Profile contribution container - ensure white background */
  .profile-activity-contribution,
  .profile-contribution {
    background-color: #ffffff !important; /* White boxes */
    border: 1px solid #ddd !important;
  }
  
  /* Profile contribution body text - DARK on WHITE */
  .profile-activity-contribution .profile-contribution-body,
  .profile-contribution .profile-contribution-body,
  p.profile-contribution-body {
    color: #333333 !important; /* Dark grey for readability on white */
    background-color: transparent !important;
  }
  
  /* Profile contribution header - white background */
  .profile-contribution-header {
    background-color: #ffffff !important;
  }
  
  /* Profile contribution title - dark on white */
  .profile-contribution-title {
    color: #1a1a1a !important;
  }
  
  /* Profile contribution title links - blue */
  .profile-contribution-title a {
    color: #0066cc !important;
  }
  
  .profile-contribution-title a:hover {
    color: #0A52A2 !important;
  }
  
  /* Profile contribution breadcrumbs - dark on white */
  .profile-contribution-breadcrumbs {
    color: #666666 !important;
  }
  
  .profile-contribution-breadcrumbs a {
    color: #0066cc !important;
  }
  
  /* Meta data in contributions - medium grey on white */
  .profile-contribution .meta-data,
  .profile-activity-contribution .meta-data {
    color: #666666 !important;
  }
  
  /* Meta group container */
  .profile-contribution .meta-group,
  .profile-activity-contribution .meta-group {
    background-color: transparent !important;
  }
  
  
  /* ===== PROFILE ACTIVITY HEADER (OUTSIDE BOXES) ===== */
  /* This is the dark area with "Tom S created an article" */
  
  .profile-activity-header {
    background-color: transparent !important;
  }
  
  .profile-activity-description {
    color: #e0e0e0 !important; /* Light text on dark background */
  }
  
  .profile-activity-description span {
    color: #ffffff !important;
  }
  
  
  /* ===== PROFILE SECTION HEADERS ===== */
  /* "Activity overview" heading area */
  
  .profile-section-header {
    background-color: transparent !important;
  }
  
  .profile-section-title {
    color: #ffffff !important;
  }
  
  .profile-section-description {
    color: #b0b0b0 !important;
  }
  
  
  /* ===== PROFILE ACTIVITY LIST ===== */
  /* The container for all activities */
  
  .profile-activity-list {
    background-color: transparent !important;
  }
  
  .profile-activity-list li {
    background-color: transparent !important;
  }
  
  /* Profile activity item (the whole item with icon and box) */
  .profile-activity {
    background-color: transparent !important;
  }
  
  /* Profile activity icon */
  .profile-activity-icon {
    color: #e0e0e0 !important;
  }
  
  .profile-activity-icon svg {
    color: #e0e0e0 !important;
  }
  
  
  /* ===== ENSURE CONTRAST ===== */
  /* Make sure all text is readable */
  
  /* Any paragraph in the white contribution boxes */
  .profile-contribution p,
  .profile-activity-contribution p {
    color: #333333 !important;
  }
  
  /* Any div in the white contribution boxes */
  .profile-contribution div,
  .profile-activity-contribution div {
    color: inherit;
  }
  
  /* Strong/bold text in contributions */
  .profile-contribution strong,
  .profile-contribution b {
    color: #1a1a1a !important;
  }
  
}

/* ========== END ROUND 8 FIX ========== */

/* ============================================
   ESTIMATED READING TIME
   ============================================
   Displays reading time in article metadata
   Styled to match existing meta-data elements
*/

.reading-time {
  display: inline-flex;
  align-items: center;
  font-weight: 500; /* Slightly bolder to stand out */
}

.reading-time-icon svg {
  display: inline-block;
  opacity: 0.7;
}

/* Ensure reading time is visible in both light and dark modes */
.reading-time {
  color: inherit; /* Uses the same color as other meta-data */
}

/* Hover effect for better interactivity */
.reading-time:hover .reading-time-icon svg {
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* Mobile optimization - ensure icon scales properly */
@media (max-width: 768px) {
  .reading-time {
    font-size: inherit; /* Match parent font size */
  }
  
  .reading-time-icon svg {
    width: 11px;
    height: 11px;
  }
}

/* Print styles - include reading time in print but hide progress bar */
@media print {
  .reading-progress-bar {
    display: none;
  }
  
  .reading-time {
    display: inline-flex;
  }
}


/* ============================================
   OPTIONAL ENHANCEMENTS
   ============================================
   Uncomment these if you want additional features
*/

/* Animated pulse on page load to draw attention to progress bar */
/*
@keyframes progress-pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.reading-progress-bar {
  animation: progress-pulse 2s ease-in-out 1;
}
*/

/* Alternative: Solid color progress bar (simpler look) */
/*
.reading-progress-bar {
  background: #0070B9; 
  background: var(--brand-color, #0070B9);
}

.reading-progress-bar::after {
  display: none;
}
*/

/* Alternative: Rounded edge on progress bar */
/*
.reading-progress-bar {
  border-radius: 0 0 4px 0;
}
*/
/* Hide Trending Topics section for Ontario MVP */
.other-guides {
  display: none !important;
}
/* ============================================
   ONTARIO THEME CUSTOMIZATIONS
   Add these rules to the END of your style.css
   ============================================ */

/* Hide Trending Topics section */
.other-guides {
  display: none !important;
}

/* Update progress bar gradient to Ontario colors */
.reading-progress-bar {
  background: linear-gradient(90deg, #050A51, #1F94D3) !important;
}

/* Update hero section gradient to Ontario colors */
.hero {
  background: linear-gradient(135deg, #050A51 0%, #1F94D3 100%) !important;
}

/* Section header styling with Ontario gradient background */
.section-header,
.category-header,
section.section h3 {
  background: #4991D6; /* gradient removed for Smith */
  color: #FFFFFF;
  padding: 20px;
  border-radius: 8px 8px 0 0;
  margin-bottom: 0;
}

.section-header a,
.category-header a,
section.section h3 a {
  color: #FFFFFF !important;
}

.section-header a:hover,
.category-header a:hover,
section.section h3 a:hover {
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none;
}

/* Section page headers (like "Getting Started" page) */
.section-page .section-header {
  background: #4991D6; /* gradient removed for Smith */
  color: #FFFFFF;
  padding: 40px 20px;
  margin: -40px -20px 40px;
  border-radius: 0;
}

.section-page .section-title {
  color: #FFFFFF !important;
  font-size: 36px;
  margin: 0;
}

.section-page .section-description {
  color: rgba(255, 255, 255, 0.9);
  margin-top: 10px;
}

/* Category page headers */
.category-page .category-header {
  background: #4991D6; /* gradient removed for Smith */
  color: #FFFFFF;
  padding: 40px 20px;
  margin: -40px -20px 40px;
  border-radius: 0;
}

.category-page .category-title {
  color: #FFFFFF !important;
  font-size: 36px;
  margin: 0;
}

/* Ensure section cards have proper styling */
.section-tree .section {
  background-color: #414771;
  border: 1px solid rgba(90, 174, 253, 0.3);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.section-tree .section:hover {
  box-shadow: 0 4px 12px rgba(10, 82, 162, 0.15);
}

.section-tree .section h3 {
  margin: 0;
  border-radius: 8px 8px 0 0;
}

.section-tree .section ul {
  padding: 20px;
}

/* Dark mode adjustments for section headers */
@media (prefers-color-scheme: dark) {
  .section-tree .section {
    background-color: #242424;
    border-color: #454545;
  }
  
  .section-header,
  .category-header,
  section.section h3 {
    /* Keep gradient in dark mode - it looks good */
    background: #4991D6; /* gradient removed for Smith */
  }
}
/* Fix header bar to use Ontario colors */
.header {
  background-color: #012251 !important; /* Smith Midnight Blue */
}

/* Ensure nav items are white */
.header a,
.header .menu-button-mobile {
  color: #FFFFFF !important;
}

/* Header hover states */
.header a:hover,
.header a:focus {
  color: rgba(255, 255, 255, 0.9) !important;
}
/* ============================================
   ONTARIO HEADER FIXES - COMPLETE
   Replace your previous header CSS with this
   ============================================ */

/* Header background - full width */
.header {
  background-color: #012251 !important;
  padding: 0 !important;
}

/* Header inner - constrained width for content */
.header-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: transparent !important;
}

@media (min-width: 1160px) {
  .header-inner {
    padding: 20px 0;
    width: 90%;
  }
}

/* Remove conflicting full-width CSS */
#global-header {
  width: 100% !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background-color: #012251 !important;
}

/* Logo positioning */
.logo {
  flex-shrink: 0;
}

/* Navigation wrapper */
.nav-wrapper-desktop {
  display: flex;
  align-items: center;
  gap: 20px;
  background-color: transparent !important;
}

.nav-wrapper-mobile {
  background-color: transparent !important;
}

/* User nav list */
.user-nav-list {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nav links styling */
.user-nav-list a {
  color: #FFFFFF !important;
  padding: 10px 15px;
  text-decoration: none;
  font-size: 14px;
}

.user-nav-list a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  text-decoration: none;
}

/* ============================================
   TOPICS DROPDOWN FIXES
   ============================================ */

/* Topics Dropdown Container */
.cat-dropdown {
  position: relative;
  display: inline-block;
}

/* Topics Button */
.cat-dropdown-btn {
  background-color: transparent;
  border: none;
  color: #FFFFFF !important;
  cursor: pointer;
  font-size: 14px;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background-color 0.2s ease;
}

.cat-dropdown-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

/* Dropdown chevron */
.cat-dropdown-btn .dropdown-chevron-icon {
  transition: transform 0.3s ease;
}

.cat-dropdown-btn[aria-expanded="true"] .dropdown-chevron-icon {
  transform: rotate(180deg);
}

/* Dropdown Content - FIXED CONTRAST */
.cat-dropdown-content {
  display: none;
  position: absolute;
  background-color: #FFFFFF !important;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border-radius: 4px;
  z-index: 1000;
  top: 100%;
  left: 0;
  margin-top: 5px;
  border: 1px solid #ddd;
}

.cat-dropdown-content.show {
  display: block;
}

/* Dropdown Links - FIXED CONTRAST */
.cat-dropdown-content a {
  color: #333333 !important; /* Dark text on white background */
  background-color: #FFFFFF !important;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 14px;
  transition: background-color 0.2s ease;
  border: none !important;
}

.cat-dropdown-content a:hover {
  background-color: #f5f5f5 !important;
  color: #0A52A2 !important; /* Ontario blue on hover */
  text-decoration: none;
}

.cat-dropdown-content a:first-child {
  border-radius: 4px 4px 0 0;
}

.cat-dropdown-content a:last-child {
  border-radius: 0 0 4px 4px;
}

/* ============================================
   PROFILE DROPDOWN FIXES
   ============================================ */

/* User info dropdown button */
.user-info .dropdown-toggle {
  color: #FFFFFF !important;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-info .dropdown-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.user-info .dropdown-toggle span {
  color: #FFFFFF !important;
}

.user-info .dropdown-toggle .dropdown-chevron-icon {
  stroke: #FFFFFF;
}

/* Profile dropdown menu - FIXED CONTRAST */
.user-info .dropdown-menu {
  background-color: #FFFFFF !important;
  border: 1px solid #ddd;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border-radius: 4px;
  min-width: 180px;
  margin-top: 5px;
}

.user-info .dropdown-menu a {
  color: #333333 !important; /* Dark text on white background */
  background-color: #FFFFFF !important;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 14px;
  transition: background-color 0.2s ease;
}

.user-info .dropdown-menu a:hover {
  background-color: #f5f5f5 !important;
  color: #0A52A2 !important; /* Ontario blue on hover */
  text-decoration: none;
}

.user-info .dropdown-menu .separator {
  height: 1px;
  background-color: #ddd;
  margin: 8px 0;
}

/* ============================================
   MOBILE MENU
   ============================================ */

.menu-list-mobile {
  background-color: #FFFFFF !important;
}

.menu-list-mobile-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-list-mobile-items .item a {
  color: #333333 !important;
  padding: 12px 20px;
  display: block;
  text-decoration: none;
}

.menu-list-mobile-items .item a:hover {
  background-color: #f5f5f5 !important;
  color: #0A52A2 !important;
  text-decoration: none;
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
  .header {
    background-color: #012251 !important; /* Keep Ontario blue in dark mode */
  }
  
  /* Dropdown menus stay white for contrast */
  .cat-dropdown-content,
  .user-info .dropdown-menu {
    background-color: #FFFFFF !important;
  }
  
  .cat-dropdown-content a,
  .user-info .dropdown-menu a {
    color: #333333 !important;
  }
}


/* ============================================
   PHOSPHOR ICONS CONFIGURATION
   ============================================ */

/* Base icon class */
.ph {
  font-family: 'Phosphor' !important;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Bold variant */
.ph-bold {
  font-family: 'Phosphor-Bold' !important;
  font-weight: 700;
}

/* Fill variant */
.ph-fill {
  font-family: 'Phosphor-Fill' !important;
}

/* Icon sizing */
.ph-sm { font-size: 16px; }
.ph-md { font-size: 20px; }
.ph-lg { font-size: 24px; }
.ph-xl { font-size: 32px; }


/* ============================================
   ONTARIO HERO BACKGROUNDS - CATALYST INSPIRED
   Pick ONE option by uncommenting it
   ============================================ */

/* ============================================
   OPTION 1: DIAGONAL LINES (CATALYST STYLE)
   Most similar to Catalyst screenshot
   ============================================ */
/*
.hero {
  background: linear-gradient(90deg, #050A51 0%, #1F94D3 100%) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden;
}

/* Animated diagonal light streaks */
.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 80px,
    rgba(255, 255, 255, 0.04) 80px,
    rgba(255, 255, 255, 0.04) 160px
  );
  animation: diagonalSlide 40s linear infinite;
  pointer-events: none;
}

@keyframes diagonalSlide {
  0% {
    transform: translateX(0) translateY(0);
  }
  100% {
    transform: translateX(160px) translateY(160px);
  }
}

/* Subtle glow accent */
.hero::after {
  content: '';
  position: absolute;
  top: 20%;
  right: 10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(107, 195, 231, 0.15) 0%, transparent 70%);
  pointer-events: none;
  animation: glowPulse 8s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.2);
  }
}

/* Ensure logo stays on top */
.hero-inner {
  position: relative;
  z-index: 10;
  padding: 40px 20px;
}

/* Make logo larger */
.hero-inner img {
  max-width: 600px !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

/* Responsive sizing */
@media (max-width: 768px) {
  .hero {
    padding: 60px 0 !important;
  }
  
  .hero-inner img {
    max-width: 400px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-inner img {
    max-width: 500px !important;
  }
}
*/

/* ============================================
   OPTION 2: FLOWING DATA WAVES
   More dynamic wave movement
   ============================================ */

/*
.hero {
  background: linear-gradient(90deg, #050A51 0%, #1F94D3 100%) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: 
    repeating-linear-gradient(
      135deg,
      transparent,
      transparent 100px,
      rgba(255, 255, 255, 0.03) 100px,
      rgba(255, 255, 255, 0.03) 200px
    ),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 60px,
      rgba(255, 255, 255, 0.02) 60px,
      rgba(255, 255, 255, 0.02) 120px
    );
  animation: waveFlow 30s linear infinite;
  pointer-events: none;
}

@keyframes waveFlow {
  0% {
    transform: translateX(0) translateY(0);
  }
  100% {
    transform: translateX(200px) translateY(-100px);
  }
}

.hero::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(57, 176, 225, 0.2) 0%, transparent 70%);
  animation: floatGlow 10s ease-in-out infinite;
  pointer-events: none;
}

@keyframes floatGlow {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translate(50px, -30px) scale(1.3);
    opacity: 0.6;
  }
}

.hero-inner {
  position: relative;
  z-index: 10;
  padding: 40px 20px;
}

.hero-inner img {
  max-width: 600px !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

@media (max-width: 768px) {
  .hero {
    padding: 60px 0 !important;
  }
  .hero-inner img {
    max-width: 400px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-inner img {
    max-width: 500px !important;
  }
}
*/


/* ============================================
   OPTION 3: TECH GRID WITH LIGHT BEAMS
   Similar to Catalyst but with grid overlay
   ============================================ */

/*
.hero {
  background: linear-gradient(90deg, #050A51 0%, #1F94D3 100%) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -100%;
  right: -50%;
  width: 200%;
  height: 300%;
  background-image: 
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 100px,
      rgba(255, 255, 255, 0.03) 100px,
      rgba(255, 255, 255, 0.03) 102px
    ),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 100px,
      rgba(255, 255, 255, 0.02) 100px,
      rgba(255, 255, 255, 0.02) 102px
    );
  animation: gridSlide 50s linear infinite;
  pointer-events: none;
}

@keyframes gridSlide {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
  100% {
    transform: translateX(100px) translateY(100px) rotate(2deg);
  }
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse at 30% 40%, rgba(57, 176, 225, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(18, 117, 191, 0.12) 0%, transparent 50%);
  animation: lightShift 12s ease-in-out infinite;
  pointer-events: none;
}

@keyframes lightShift {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

.hero-inner {
  position: relative;
  z-index: 10;
  padding: 40px 20px;
}

.hero-inner img {
  max-width: 600px !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

@media (max-width: 768px) {
  .hero {
    padding: 60px 0 !important;
  }
  .hero-inner img {
    max-width: 400px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-inner img {
    max-width: 500px !important;
  }
}
*/


/* ============================================
   OPTION 4: SPEED LINES (FASTEST MOTION)
   High-energy streaking lines
   ============================================ */


.hero {
  background: linear-gradient(90deg, #050A51 0%, #1F94D3 100%) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 300%;
  height: 100%;
  background: repeating-linear-gradient(
    -30deg,
    transparent,
    transparent 120px,
    rgba(255, 255, 255, 0.05) 120px,
    rgba(255, 255, 255, 0.05) 125px,
    transparent 125px,
    transparent 250px
  );
  animation: speedLines 25s linear infinite;
  pointer-events: none;
}

@keyframes speedLines {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(250px);
  }
}

.hero::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20%;
  width: 600px;
  height: 300px;
  background: linear-gradient(90deg, transparent 0%, rgba(107, 195, 231, 0.1) 50%, transparent 100%);
  transform: translateY(-50%) skewX(-15deg);
  animation: sweepLight 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sweepLight {
  0%, 100% {
    opacity: 0;
    transform: translateY(-50%) translateX(-100px) skewX(-15deg);
  }
  50% {
    opacity: 1;
    transform: translateY(-50%) translateX(100px) skewX(-15deg);
  }
}

.hero-inner {
  position: relative;
  z-index: 10;
  padding: 40px 20px;
}

.hero-inner img {
  max-width: 600px !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

@media (max-width: 768px) {
  .hero {
    padding: 60px 0 !important;
  }
  .hero-inner img {
    max-width: 400px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-inner img {
    max-width: 500px !important;
  }
}

/* ============================================
   ONTARIO COMMUNITY BANNER - FIXED
   No horizontal overflow + Inverted colors
   ============================================ */

/* Hide the default community-image div (Catalyst banner) */
.community-image {
  display: none !important;
}

/* Ensure no horizontal overflow from community section */
.home-section.community {
  text-align: center;
  background: #F5F7FA;
  padding: 60px 40px;
  margin: 40px 0;
  border-radius: 12px;
  position: relative;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(10, 82, 162, 0.1);
  border: 2px solid #E5F4F9;
  max-width: 100%;
  box-sizing: border-box;
}

/* Subtle blue accent gradient on edges */
.home-section.community::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(90deg, rgba(10, 82, 162, 0.03) 0%, transparent 20%, transparent 80%, rgba(57, 176, 225, 0.03) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Decorative accent bar at top */
.home-section.community::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #050A51 0%, #0A52A2 50%, #1F94D3 100%);
  z-index: 0;
}

/* Community content styling */
.home-section.community h2 {
  color: #0A52A2 !important;
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.home-section.community p {
  color: #333333 !important;
  font-size: 18px !important;
  padding: 0 20px 30px 20px !important;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  line-height: 1.6;
}

/* Call-to-action button - Blue gradient */
.community-link {
  display: inline-block;
  background: linear-gradient(135deg, #050A51 0%, #0A52A2 100%);
  color: #FFFFFF !important;
  padding: 14px 32px;
  border-radius: 6px;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(10, 82, 162, 0.25);
}

.community-link:hover {
  background: linear-gradient(135deg, #0A52A2 0%, #1F94D3 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10, 82, 162, 0.35);
  color: #FFFFFF !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .home-section.community {
    padding: 40px 20px;
    margin: 30px 0;
  }
  
  .home-section.community h2 {
    font-size: 24px;
    margin-bottom: 15px;
  }
  
  .home-section.community p {
    font-size: 16px !important;
    padding: 0 10px 20px 10px !important;
  }
  
  .community-link {
    padding: 12px 24px;
    font-size: 15px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .home-section.community h2 {
    font-size: 28px;
  }
}

/* Fix any potential overflow from parent containers */
.container {
  max-width: 100%;
  overflow-x: hidden;
}


/* ============================================
   ALTERNATIVE: WHITE WITH BLUE ACCENTS
   Clean white card style
   ============================================ */

/*
.community-image {
  display: none !important;
}

.home-section.community {
  text-align: center;
  background: #FFFFFF;
  padding: 60px 40px;
  margin: 40px 0;
  border-radius: 12px;
  position: relative;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(10, 82, 162, 0.12);
  border: 3px solid #050A51;
  max-width: 100%;
  box-sizing: border-box;
}

.home-section.community::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  height: 6px;
  background: linear-gradient(90deg, #050A51 0%, #0A52A2 50%, #1F94D3 100%);
  z-index: 0;
}

.home-section.community h2 {
  color: #0A52A2 !important;
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.home-section.community p {
  color: #333333 !important;
  font-size: 18px !important;
  padding: 0 20px 30px 20px !important;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  line-height: 1.6;
}

.community-link {
  display: inline-block;
  background: linear-gradient(135deg, #050A51 0%, #0A52A2 100%);
  color: #FFFFFF !important;
  padding: 14px 32px;
  border-radius: 6px;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(10, 82, 162, 0.25);
}

.community-link:hover {
  background: linear-gradient(135deg, #0A52A2 0%, #1F94D3 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10, 82, 162, 0.35);
}

.container {
  max-width: 100%;
  overflow-x: hidden;
}
*/


/* ============================================
   ALTERNATIVE: SUBTLE PATTERN BACKGROUND
   Light grey with dot pattern
   ============================================ */


.community-image {
  display: none !important;
}

.home-section.community {
  text-align: center;
  background: 
    radial-gradient(circle, rgba(10, 82, 162, 0.05) 1px, transparent 1px);
  background-color: #F8F9FA;
  background-size: 20px 20px;
  padding: 60px 40px;
  margin: 40px 0;
  border-radius: 12px;
  position: relative;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(10, 82, 162, 0.08);
  border-top: 4px solid #050A51;
  border-bottom: 4px solid #1F94D3;
  max-width: 100%;
  box-sizing: border-box;
}

.home-section.community h2 {
  color: #0A52A2 !important;
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.home-section.community p {
  color: #333333 !important;
  font-size: 18px !important;
  padding: 0 20px 30px 20px !important;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  line-height: 1.6;
}

.community-link {
  display: inline-block;
  background: linear-gradient(135deg, #050A51 0%, #0A52A2 100%);
  color: #FFFFFF !important;
  padding: 14px 32px;
  border-radius: 6px;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(10, 82, 162, 0.25);
}

.community-link:hover {
  background: linear-gradient(135deg, #0A52A2 0%, #1F94D3 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10, 82, 162, 0.35);
}

.container {
  max-width: 100%;
  overflow-x: hidden;
}

/* ============================================
   ONTARIO - SECTION PAGE SPACING
   Adds space above article list on section pages
   ============================================ */

/* Add space above article list on section pages only */
.section-content > .article-list {
  margin-top: 40px;
}

/* Ensure cards align at top and have consistent heights */
.section-content .article-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.section-content .article-list-item {
  flex: 1 1 calc(33.333% - 20px);
  min-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Keep homepage sections unaffected */
.knowledge-base .article-list {
  margin-top: 0;
}

/* ============================================
   ONTARIO SITE-WIDE ENHANCEMENTS (FINAL v2)
   Underline animation + Blue buttons + Colored hover backgrounds
   ============================================ */

/* ===== 1. SECTION ICONS (HOMEPAGE ONLY) ===== */

/* Icons now handled by Phosphor Icons in home_page.hbs template */
/* Emoji ::before content removed - white Phosphor icons display instead */

/* Getting Started - Now uses Phosphor ph-rocket-launch */
.knowledge-base .section a[href*="Getting-Started"]::before {
  content: '';
}

/* Project Management - Now uses Phosphor ph-kanban */
.knowledge-base .section a[href*="Project-Management"]::before {
  content: '';
}

/* Files and Folders - Now uses Phosphor ph-folder-open */
.knowledge-base .section a[href*="Files-and-Folders"]::before {
  content: '';
}

/* Tasks and Workflows - Now uses Phosphor ph-list-checks */
.knowledge-base .section a[href*="Tasks-and-Workflows"]::before {
  content: '';
}

/* User Management - Now uses Phosphor ph-users-three */
.knowledge-base .section a[href*="User-Management"]::before {
  content: '';
}

/* Notifications & Help - Now uses Phosphor ph-bell-ringing */
.knowledge-base .section a[href*="Notifications-Help"]::before {
  content: '';
}

/* NO ICONS IN BREADCRUMBS */
.breadcrumbs a::before {
  content: none !important;
}


/* ===== 2. HOMEPAGE CARD STRUCTURE WITH COLORED HOVER BACKGROUNDS ===== */

/* Section cards - white background */
.knowledge-base .section {
  transition: all 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
  background: #414771;
  border: 1px solid rgba(90, 174, 253, 0.3);
}

/* Hover effect - lift, shadow, and colored background */
.knowledge-base .section:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(10, 82, 162, 0.15);
}

/* Unique hover background colors for each section */
.knowledge-base .section:nth-child(1):hover {
  background: rgba(10, 82, 162, 0.05); /* Getting Started - Very light deep blue */
}

.knowledge-base .section:nth-child(2):hover {
  background: rgba(18, 117, 191, 0.05); /* Project Management - Very light medium blue */
}

.knowledge-base .section:nth-child(3):hover {
  background: rgba(57, 176, 225, 0.05); /* Files and Folders - Very light light blue */
}

.knowledge-base .section:nth-child(4):hover {
  background: rgba(31, 148, 211, 0.05); /* Tasks and Workflows - Very light blue-500 */
}

.knowledge-base .section:nth-child(5):hover {
  background: rgba(7, 43, 125, 0.05); /* User Management - Very light blue-800 */
}

.knowledge-base .section:nth-child(6):hover {
  background: rgba(107, 195, 231, 0.05); /* Notifications & Help - Very light bright blue */
}

/* Section header hover effect */
.knowledge-base .section h3 {
  transition: background 0.3s ease;
}

.knowledge-base .section:hover h3 {
  background: linear-gradient(135deg, #0A52A2 0%, #1F94D3 100%);
}


/* ===== 3. SECTION PAGE HEADER STYLING ===== */

/* Section page header bar */
.section-page header,
.category-page header {
  background: #4991D6; /* gradient removed for Smith */
  color: #FFFFFF;
  padding: 30px 40px;
  margin-bottom: 40px;
  border-radius: 8px;
}

.section-page header h1,
.category-page header h1 {
  color: #FFFFFF !important;
  margin: 0;
  font-size: 32px;
}

/* Apply gradient variations to section page headers */
body[class*="section-42679658758925"] header {
  background: #4991D6; /* gradient removed for Smith */ /* Getting Started */
}

body[class*="section-42679681047053"] header {
  background: #4991D6; /* gradient removed for Smith */ /* Project Management */
}

body[class*="section-42679711032589"] header {
  background: #4991D6; /* gradient removed for Smith */ /* Files and Folders */
}

body[class*="section-42679693922189"] header {
  background: #4991D6; /* gradient removed for Smith */ /* Tasks and Workflows */
}

body[class*="section-42679736498573"] header {
  background: #4991D6; /* gradient removed for Smith */ /* User Management */
}

body[class*="section-42679701344781"] header {
  background: #4991D6; /* gradient removed for Smith */ /* Notifications & Help */
}


/* ===== 4. HOMEPAGE SECTION HEADER GRADIENTS ===== */

/* Base gradient for all homepage section headers */
.knowledge-base .section h3 {
  background: linear-gradient(135deg, #050A51 0%, #0A52A2 100%);
  color: #FFFFFF;
  padding: 20px;
  margin: 0;
  border-radius: 8px 8px 0 0;
}

/* Unique gradients for each homepage section */
.knowledge-base .section:nth-child(1) h3 {
  background: linear-gradient(135deg, #050A51 0%, #0A52A2 100%); /* Getting Started */
}

.knowledge-base .section:nth-child(2) h3 {
  background: linear-gradient(135deg, #0A52A2 0%, #1275BF 100%); /* Project Management */
}

.knowledge-base .section:nth-child(3) h3 {
  background: linear-gradient(135deg, #1275BF 0%, #1F94D3 100%); /* Files and Folders */
}

.knowledge-base .section:nth-child(4) h3 {
  background: linear-gradient(135deg, #0A52A2 0%, #1F94D3 100%); /* Tasks and Workflows */
}

.knowledge-base .section:nth-child(5) h3 {
  background: linear-gradient(135deg, #050A51 0%, #1275BF 100%); /* User Management */
}

.knowledge-base .section:nth-child(6) h3 {
  background: linear-gradient(135deg, #1F94D3 0%, #39B0E1 100%); /* Notifications & Help */
}


/* ===== 5. ARTICLE CARD HOVER EFFECTS (SECTION PAGES) ===== */

/* Article cards on section pages */
.section-content .article-list-item {
  transition: all 0.3s ease;
  border-radius: 8px;
  padding: 20px;
  background: #F8F9FA;
  border: 1px solid #E5E5E5;
}

.section-content .article-list-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(10, 82, 162, 0.1);
  background: #FFFFFF;
  border-color: #0A52A2;
}


/* ===== 6. LINK STYLING - UNDERLINE ANIMATION ===== */

/* Article links with animated underline */
.article-list a,
.article-list-link {
  color: #1275BF;
  position: relative;
  display: inline-block;
  text-decoration: none;
}

/* Animated underline */
.article-list a::after,
.article-list-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #050A51;
  transition: width 0.3s ease;
}

.article-list a:hover::after,
.article-list-link:hover::after {
  width: 100%;
}

.article-list a:hover,
.article-list-link:hover {
  color: #0A52A2;
  text-decoration: none;
}

/* Homepage article links */
.knowledge-base .section .article-list a {
  display: block;
  padding: 8px 0;
}


/* ===== 7. BREADCRUMB STYLING ===== */

/* Clean breadcrumbs */
.breadcrumbs {
  margin-bottom: 20px;
  font-size: 14px;
}

.breadcrumbs a {
  color: #1275BF;
  position: relative;
  text-decoration: none;
}

/* Animated underline for breadcrumbs */
.breadcrumbs a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: #050A51;
  transition: width 0.3s ease;
}

.breadcrumbs a:hover::after {
  width: 100%;
}

.breadcrumbs a:hover {
  color: #0A52A2;
}


/* ===== 8. READ MORE BUTTONS - PRIMARY BLUE ===== */

/* Primary blue button with hover effect */
.article-read-more {
  display: inline-block;
  background-color: #050A51; /* Primary deep blue */
  color: #FFFFFF !important;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  margin-top: 10px;
  border: none;
}

.article-read-more:hover {
  background-color: #0A52A2; /* Lighter blue on hover */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(5, 10, 81, 0.3);
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* "See all articles" link */
.see-all-articles {
  color: #0A52A2;
  text-decoration: none;
  font-weight: 600;
  position: relative;
  display: inline-block;
}

/* Animated underline for see all link */
.see-all-articles::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #050A51;
  transition: width 0.3s ease;
}

.see-all-articles:hover::after {
  width: 100%;
}

.see-all-articles:hover {
  color: #050A51;
  text-decoration: none;
}


/* ===== 9. HOMEPAGE SECTION CONTENT STRUCTURE ===== */

/* Homepage section content area */
.knowledge-base .section > div {
  padding: 20px;
}


/* ===== 10. RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 768px) {
  /* Smaller icons on mobile */
  .knowledge-base .section h3 a::before {
    font-size: 16px;
    margin-right: 6px;
  }
  
  /* Less dramatic hovers on mobile */
  .knowledge-base .section:hover {
    transform: translateY(-2px);
  }
  
  .section-content .article-list-item:hover {
    transform: translateY(-1px);
  }
  
  /* Smaller section page headers */
  .section-page header,
  .category-page header {
    padding: 20px;
  }
  
  .section-page header h1,
  .category-page header h1 {
    font-size: 24px;
  }
}


/* ============================================
   FINAL DESIGN FEATURES:
   
   ✅ Animated underline on all links
   ✅ Primary blue (#0A52A2) buttons
   ✅ Colored background on card hover (matches section color)
   ✅ Blue gradient headers (maintained)
   ✅ Icons on homepage sections
   ✅ Card lift + shadow hover effects
   ✅ Clean white cards (not blue overload)
   ✅ Each section has unique visual identity
   
   ⚠️  Dark mode support NOT included yet
   ============================================ */

/* ============================================
   ONTARIO HEADER ALIGNMENT & MOBILE MENU FIX
   Fixes misalignment and mobile breakpoint issues
   ============================================ */

/* ===== FIX 1: HEADER ALIGNMENT ===== */

/* Ensure header container matches Catalyst alignment */
.header {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 71px !important;
}

@media (min-width: 1160px) {
  .header {
    padding: 0 !important;
    width: 90% !important;
  }
}

/* Logo alignment */
.header .logo {
  display: flex;
  align-items: center;
  margin: 0;
}

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

/* Right side navigation alignment */
.header .nav-wrapper-desktop,
.header .nav-wrapper-mobile {
  display: flex;
  align-items: center;
  margin: 0;
}


/* ===== FIX 2: MOBILE MENU BREAKPOINT ===== */

/* Hide mobile menu on desktop (>= 1024px) */
@media (min-width: 1024px) {
  .nav-wrapper-mobile {
    display: none !important;
  }
}

/* Show mobile menu on tablet and mobile (< 1024px) */
@media (max-width: 1023px) {
  .nav-wrapper-desktop {
    display: none !important;
  }
  
  .nav-wrapper-mobile {
    display: inline-block !important;
  }
}

/* Proper mobile menu button styling */
.nav-wrapper-mobile .menu-button-mobile {
  background: none;
  border: 0;
  width: auto;
  min-width: 71px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.nav-wrapper-mobile .menu-button-mobile .icon-menu {
  padding: 7px;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

/* Mobile menu dropdown positioning */
.nav-wrapper-mobile .menu-list-mobile {
  position: absolute;
  background-color: #fff;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 999;
  max-width: 100vw;
}

.nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] {
  display: none;
}

.nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
  display: block;
}


/* ===== FIX 3: DESKTOP NAVIGATION SPACING ===== */

/* Ensure desktop nav items have proper spacing */
@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: flex !important;
    align-items: center;
    gap: 20px;
  }
  
  .nav-wrapper-desktop a,
  .nav-wrapper-desktop button,
  .nav-wrapper-desktop .dropdown {
    margin: 0 10px;
  }
}


/* ===== FIX 4: USER PROFILE ALIGNMENT ===== */

/* Fix user profile dropdown alignment */
.user-nav {
  display: inline-flex;
  align-items: center;
  position: relative;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .user-nav {
    position: relative;
  }
}

/* Profile button */
.user-nav button,
.user-nav .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
}


/* ===== FIX 5: PREVENT HORIZONTAL OVERFLOW ===== */

/* Ensure nothing causes horizontal scroll */
html {
  overflow-x: hidden !important;
}

body {
  overflow-x: hidden !important;
}

.header,
.header * {
  max-width: 100%;
  box-sizing: border-box;
}


/* ===== FIX 6: TOPICS DROPDOWN ALIGNMENT ===== */

/* Fix Topics dropdown if present */
.header .dropdown {
  display: inline-flex;
  align-items: center;
}

.header .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent !important;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.header .dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  min-width: 200px;
  z-index: 1000;
}


/* ===== FIX 7: SUBMIT A REQUEST BUTTON ===== */

/* Ensure "Submit a request" is properly aligned */
.header a[href*="requests"],
.header a[href*="submit"] {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  white-space: nowrap;
}


/* ===== FIX 8: RESPONSIVE HEADER ADJUSTMENTS ===== */

/* Tablet breakpoint adjustments */
@media (max-width: 1023px) {
  .header {
    padding: 0 20px !important;
  }
  
  /* Ensure logo doesn't get too small */
  .header .logo img {
    max-height: 32px;
  }
}

/* Mobile breakpoint adjustments */
@media (max-width: 768px) {
  .header {
    padding: 0 16px !important;
  }
  
  .header .logo img {
    max-height: 28px;
  }
}


/* ===== FIX 9: PREVENT ITEMS FROM SQUASHING ===== */

/* Ensure header items maintain minimum sizes */
.header .nav-wrapper-mobile {
  flex-shrink: 0;
  min-width: 71px;
}

.header .logo {
  flex-shrink: 0;
  min-width: 100px;
}

.header .user-nav {
  flex-shrink: 0;
}


/* ===== FIX 10: Z-INDEX MANAGEMENT ===== */

/* Proper z-index layering */
.header {
  position: relative;
  z-index: 100;
}

.nav-wrapper-mobile .menu-list-mobile {
  z-index: 999;
}

.header .dropdown-menu {
  z-index: 1000;
}


/* ============================================
   ONTARIO PROFILE DROPDOWN - SINGLE SELECTOR FIX
   ============================================ */

/* Ultra-specific selector to override everything */
.user-info.dropdown .dropdown-menu[role="menu"][id] {
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15) !important;
  -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15) !important;
  background: #ffffff !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  padding: 8px 0 !important;
  position: absolute !important;
  right: 0 !important;
  margin-top: 8px !important;
  min-width: 200px !important;
  z-index: 1000 !important;
}

/* Clean menu items */
.user-info.dropdown .dropdown-menu[role="menu"] a {
  display: block !important;
  padding: 10px 20px !important;
  color: #333333 !important;
  text-decoration: none !important;
  background: transparent !important;
}

.user-info.dropdown .dropdown-menu[role="menu"] a:hover {
  background-color: #f5f5f5 !important;
}

/* Separator */
.user-info.dropdown .dropdown-menu .separator {
  border-top: 1px solid #e5e5e5 !important;
  margin: 8px 0 !important;
}


/* ============================================
   ONTARIO DARK MODE FIXES
   Forms, Profile, Articles - NOT header
   ============================================ */


/* ================================================================================
   FORM DROPDOWN (NESTY-PANEL) HOVER STATES
   ================================================================================  */

@media (prefers-color-scheme: dark) {
  
  .nesty-panel {
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  }
  
  .nesty-panel li {
    background-color: #ffffff !important;
    color: #333333 !important;
  }
  
  .nesty-panel li a,
  .nesty-panel a {
    color: #333333 !important;
    background-color: transparent !important;
  }
  
  .nesty-panel li:hover,
  .nesty-panel li:focus,
  .nesty-panel li.is-selected,
  .nesty-panel li[aria-selected="true"] {
    background-color: #f0f0f0 !important;
    color: #000000 !important;
  }
  
  .nesty-panel li:hover a,
  .nesty-panel li:focus a,
  .nesty-panel li.is-selected a {
    color: #000000 !important;
  }
  
  .nesty-panel li.is-current,
  .nesty-panel li.selected,
  .nesty-panel li[data-selected="true"] {
    background-color: #e3f2fd !important;
    color: #0066cc !important;
  }
  
  .nesty-input {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  .nesty-input:focus {
    border-color: #4db8ff !important;
  }
  
  .nesty-input .nesty-current-value,
  .nesty-input span {
    color: #e0e0e0 !important;
  }
}


/* ================================================================================
   PROFILE PAGE ACTIVITY CARDS
   ================================================================================  */

@media (prefers-color-scheme: dark) {
  
  .profile-activity-contribution {
    background-color: #2d3748 !important;
    border-radius: 8px;
    padding: 16px;
  }
  
  .profile-activity-contribution a,
  .profile-contribution-title a,
  .profile-activity-contribution .profile-contribution-title {
    color: #4db8ff !important;
  }
  
  .profile-activity-contribution a:hover {
    color: #6ec6ff !important;
  }
  
  .profile-activity-contribution .meta-data,
  .profile-activity-contribution .meta-group a {
    color: #f59e0b !important;
  }
  
  .profile-activity-contribution p,
  .profile-activity-contribution .profile-contribution-body,
  .profile-contribution-body {
    color: #e0e0e0 !important;
  }
  
  .profile-activity-contribution span,
  .profile-activity-contribution div:not([class]) {
    color: #cbd5e1 !important;
  }
  
  .profile-activity-contribution .meta-group,
  .profile-activity-contribution .meta-data {
    color: #888888 !important;
  }
  
  .profile-contribution {
    border-color: #374151 !important;
  }
  
  .profile-contribution-title {
    color: #ffffff !important;
  }
  
  .profile-activity-description {
    color: #e0e0e0 !important;
  }
  
  .profile-activity-description span:first-child {
    color: #ffffff !important;
  }
  
  .profile-activity-icon {
    background-color: #374151 !important;
  }
  
  .profile-header {
    background-color: #1f2937 !important;
  }
  
  .profile-header .name,
  .profile-header h1 {
    color: #4db8ff !important;
  }
  
  .profile-stats .stat-label {
    color: #9ca3af !important;
  }
  
  .profile-stats .stat-value,
  .profile-stats-activity .stat span:not(.stat-label),
  .profile-stats-counters .stat span:not(.stat-label) {
    color: #e0e0e0 !important;
  }
  
  .profile-nav {
    background-color: #111827 !important;
    border-bottom-color: #374151 !important;
  }
  
  .profile-nav a {
    color: #4db8ff !important;
  }
  
  .profile-nav a:hover,
  .profile-nav a.current {
    color: #ffffff !important;
    border-bottom-color: #4db8ff !important;
  }
  
  .profile-section h2,
  .activity-overview h2 {
    color: #ffffff !important;
  }
  
  .profile-section > p,
  .activity-overview > p {
    color: #9ca3af !important;
  }
  
  .profile-activity-description span:first-child,
  .profile-activity strong {
    color: #ffffff !important;
  }
  
  .profile-activity-description {
    color: #d1d5db !important;
  }
}


/* ================================================================================
   MOBILE RESPONSIVE - ARTICLE CONTENT CARDS
   ================================================================================  */

@media (max-width: 768px) {
  
  .article-body div[style*="display: flex"],
  zd-html-block div[style*="display: flex"] {
    flex-wrap: wrap !important;
  }
  
  .article-body div[style*="min-width: 200px"],
  .article-body div[style*="min-width:200px"],
  zd-html-block div[style*="min-width: 200px"],
  zd-html-block div[style*="min-width:200px"] {
    min-width: 100% !important;
    flex: 1 1 100% !important;
  }
  
  .article-body div[style*="flex: 1"],
  zd-html-block div[style*="flex: 1"] {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }
  
  .article-body zd-html-block,
  .article-body > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }
  
  .article-body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  
  .article-body div[style*="min-width: 200px"],
  zd-html-block div[style*="min-width: 200px"] {
    min-width: 45% !important;
    flex: 1 1 45% !important;
  }
}


/* ================================================================================
   ARTICLE DARK MODE - INLINE STYLES
   ================================================================================  */

@media (prefers-color-scheme: dark) {
  
  /* Target gradient backgrounds */
  zd-html-block div[style*="gradient"][style*="135deg"] {
    background: linear-gradient(135deg, #1e3a5f 0%, #234e78 100%) !important;
  }
  
  [style*="f0f9ff"],
  [style*="e0f2fe"] {
    background: linear-gradient(135deg, #1e3a5f 0%, #234e78 100%) !important;
  }
  
  [style*="e3f2fd"] {
    background: #1e3a5f !important;
  }
  
  [style*="f8fafc"] {
    background: #1e293b !important;
  }
  
  [style*="border: 2px dashed"][style*="f8fafc"] {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
  }
  
  [style*="color: #0c4a6e"],
  [style*="color:#0c4a6e"] {
    color: #7dd3fc !important;
  }
  
  [style*="color: #475569"],
  [style*="color:#475569"] {
    color: #cbd5e1 !important;
  }
  
  [style*="color: #1e293b"],
  [style*="color:#1e293b"] {
    color: #f1f5f9 !important;
  }
  
  [style*="color: #64748b"],
  [style*="color:#64748b"] {
    color: #94a3b8 !important;
  }
  
  [style*="background: white"],
  [style*="background-color: white"],
  [style*="background:#fff"],
  [style*="background-color:#fff"] {
    background: #2d3748 !important;
  }
  
  [style*="border"][style*="#e2e8f0"],
  [style*="border"][style*="#e5e7eb"],
  [style*="border"][style*="#cbd5e1"] {
    border-color: #475569 !important;
  }
  
  zd-html-block p {
    color: #cbd5e1 !important;
  }
  
  zd-html-block li {
    color: #cbd5e1 !important;
  }
  
  zd-html-block h1,
  zd-html-block h2,
  zd-html-block h3,
  zd-html-block h4,
  zd-html-block h5,
  zd-html-block h6 {
    color: #f1f5f9 !important;
  }
  
  zd-html-block h3[style*="#0c4a6e"],
  zd-html-block h4[style*="#0c4a6e"] {
    color: #7dd3fc !important;
  }
}

/* Form submit button - make it distinct */
input[type="submit"],
.form input[type="submit"],
button[type="submit"] {
  background-color: #012251 !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 12px 24px !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

input[type="submit"]:hover,
.form input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: #0A52A2 !important;
}

/* Dark mode submit button */
@media (prefers-color-scheme: dark) {
  input[type="submit"],
  .form input[type="submit"],
  button[type="submit"] {
    background-color: #1F94D3 !important;
    color: #FFFFFF !important;
  }
  
  input[type="submit"]:hover,
  .form input[type="submit"]:hover,
  button[type="submit"]:hover {
    background-color: #39B0E1 !important;
  }
}

/* ================================================================================
   END OF DARK MODE FIXES - HEADER NOT INCLUDED
   ================================================================================  */

/* ============================================
   COMPLETE ARTICLE LIST SECTION
   Located on homepage below section cards
   ============================================ */

/* Main container */
.complete-article-list {
  margin-top: 60px;
  margin-bottom: 60px;
}

/* ===== HERO BANNER ===== */
.article-list-hero {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8c 50%, #4a7ab8 100%);
  border-radius: 16px;
  padding: 50px 40px;
  margin-bottom: 50px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Decorative circle */
.article-list-hero::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  top: -200px;
  right: -100px;
  pointer-events: none;
}

.article-list-hero-content {
  position: relative;
  z-index: 1;
}

.article-list-hero h2 {
  color: #FFFFFF;
  font-size: 38px;
  font-weight: 700;
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
}

.article-list-hero p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  margin: 0;
  font-weight: 400;
}

/* ===== SECTION GROUPS ===== */
.article-section-group {
  margin-bottom: 50px;
  padding-bottom: 40px;
  border-bottom: 1px solid #E5E5E5;
}

.article-section-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Section header with icon */
.article-section-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.section-icon-large {
  font-size: 36px;
  color: #0A52A2;
  flex-shrink: 0;
}

.article-section-header-text h3 {
  margin: 0 0 5px 0;
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
}

.article-section-header-text p.section-description {
  margin: 0;
  font-size: 15px;
  color: #64748b;
  line-height: 1.5;
}

/* ===== ARTICLE GRID ===== */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

/* Article cards */
.article-card {
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  padding: 24px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  position: relative;
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(10, 82, 162, 0.12);
  border-color: #0A52A2;
}

.article-card h4 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.4;
}

.article-card:hover h4 {
  color: #0A52A2;
}

.article-card .article-description {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  flex-grow: 1;
}

.article-card .article-read-more {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #0A52A2;
  margin-top: auto;
}

.article-card:hover .article-read-more {
  gap: 10px;
}

.article-card .article-read-more i {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.article-card:hover .article-read-more i {
  transform: translateX(4px);
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet */
@media (max-width: 1024px) {
  .article-list-hero {
    padding: 40px 30px;
  }
  
  .article-list-hero h2 {
    font-size: 32px;
  }
  
  .article-list-hero p {
    font-size: 16px;
  }
  
  .article-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
  }
  
  .article-section-header-text h3 {
    font-size: 22px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .complete-article-list {
    margin-top: 40px;
    margin-bottom: 40px;
  }
  
  .article-list-hero {
    padding: 30px 20px;
    margin-bottom: 35px;
  }
  
  .article-list-hero h2 {
    font-size: 26px;
  }
  
  .article-list-hero p {
    font-size: 15px;
  }
  
  .article-section-group {
    margin-bottom: 40px;
    padding-bottom: 30px;
  }
  
  .article-section-header {
    gap: 15px;
    margin-bottom: 20px;
  }
  
  .section-icon-large {
    font-size: 28px;
  }
  
  .article-section-header-text h3 {
    font-size: 20px;
  }
  
  .article-section-header-text p.section-description {
    font-size: 14px;
  }
  
  .article-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .article-card {
    padding: 20px;
  }
  
  .article-card h4 {
    font-size: 16px;
  }
  
  .article-card .article-description {
    font-size: 13px;
  }
  
  .article-card:hover {
    transform: translateY(-2px);
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .article-list-hero h2 {
    font-size: 22px;
  }
  
  .article-list-hero p {
    font-size: 14px;
  }
  
  .article-section-header {
    gap: 12px;
  }
  
  .section-icon-large {
    font-size: 24px;
  }
  
  .article-section-header-text h3 {
    font-size: 18px;
  }
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
  /* Main container - dark background */
  .complete-article-list {
    background-color: #1a1a1a;
  }
  
  /* Hero banner - keep gradient but adjust for dark mode */
  .article-list-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #2563eb 100%);
  }
  
  /* Section groups - dark borders */
  .article-section-group {
    border-bottom-color: #333333;
  }
  
  /* Section header text */
  .article-section-header-text h3 {
    color: #ffffff !important;
  }
  
  .article-section-header-text p.section-description {
    color: #a0a0a0 !important;
  }
  
  /* Article cards - dark background */
  .article-card {
    background: #242424;
    border-color: #333333;
  }
  
  .article-card:hover {
    background: #2a2a2a;
    border-color: #4db8ff;
    box-shadow: 0 12px 24px rgba(77, 184, 255, 0.15);
  }
  
  /* Article card titles - WHITE TEXT (this is the fix!) */
  .article-card h4 {
    color: #ffffff !important;
  }
  
  .article-card:hover h4 {
    color: #4db8ff !important;
  }
  
  /* Article descriptions */
  .article-card .article-description {
    color: #a0a0a0 !important;
  }
  
  /* Read more links */
  .article-card .article-read-more {
    color: #4db8ff !important;
  }
  
  /* Icon color in dark mode */
  .section-icon-large {
    color: #4db8ff !important;
  }
}

/* ==== ZENDESK WEB WIDGET CUSTOMIZATIONS ==== */

/* 1. Conversation header bar - white background, medium weight text */
[class*="sc-vrqbdz-0"][class*="enrcyr"],
iframe[title*="Messaging"] [class*="sc-vrqbdz-0"] {
  background-color: #FFFFFF !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
}

/* 2. Bot avatar image - 80% size */
[class*="sc-vrqbdz-2"][class*="ilyblu"] img,
[class*="ilyblu"] img {
  width: 80% !important;
  height: 80% !important;
}

/* 3. Avatar styling - .dysjee class adjustments */
img[class*="dysjee"],
[class*="sc-1p16ygh"] img {
  min-height: 1.75rem !important;
  max-height: 1.75rem !important;
  min-width: 1.75rem !important;
  max-width: 1.75rem !important;
  border-radius: 0.25rem !important;
  object-fit: cover !important;
}

/* 4. Hide "Built with Zendesk" branding */
[class*="sc-"][data-testid*="powered-by"],
a[href*="zendesk.com"][class*="powered"],
[class*="PoweredBy"],
iframe[title*="Messaging"] + div[class*="powered"],
div[class*="sc-"]:has(> a[href*="zendesk.com/messaging"]) {
  display: none !important;
  visibility: hidden !important;
}

/* ============================================
   SMITH AGGRESSIVE COLOR OVERRIDES
   Ensures Smith branding appears correctly
   ============================================ */

/* SECTION CARDS - Force slate background #414771 */
.knowledge-base .section,
.section-tree .section,
section.section {
  background-color: #414771 !important;
  background: #414771 !important;
  background-image: none !important;
  border: 1px solid rgba(90, 174, 253, 0.3) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* SECTION HEADERS - Force teal #05E3E3 */
.knowledge-base .section h3,
.section-tree .section h3,
section.section h3,
.section h3 {
  background: #05E3E3 !important;
  background-color: #05E3E3 !important;
  background-image: none !important;
  color: #ffffff !important;
  padding: 20px 24px !important;
  margin: 0 !important;
  border-radius: 12px 12px 0 0 !important;
  border: none !important;
}

.section h3 a,
.section h3 a:visited,
.section h3 a:hover {
  color: #ffffff !important;
}

/* ARTICLE LIST INSIDE SECTIONS - Force slate background */
.section .article-list,
.section ul.article-list {
  background: #414771 !important;
  background-color: #414771 !important;
  padding: 20px 24px !important;
}

.section .article-list li,
.section .article-list li a {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

.section .article-list li a:hover {
  color: #05E3E3 !important;
}

/* BOTTOM SECTION HEADERS - Force WHITE text */
.article-section-header h3,
.article-section-group h3 {
  color: #ffffff !important;
  background: transparent !important;
  background-color: transparent !important;
}

.article-section-header .section-description,
.article-section-header p {
  color: #ffffff !important;
  opacity: 0.9 !important;
}

/* ARTICLE CARDS AT BOTTOM - Force slate with white text */
.article-card,
a.article-card {
  background: #414771 !important;
  background-color: #414771 !important;
  color: #ffffff !important;
  border: 1px solid rgba(90, 174, 253, 0.3) !important;
}

.article-card h4,
.article-card h4 a {
  color: #ffffff !important;
}

.article-card p,
.article-card .article-description {
  color: #ffffff !important;
  opacity: 0.9 !important;
}

.article-card .article-read-more {
  color: #05E3E3 !important;
  background: none !important;
  background-color: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ============================================
   SMITH HEADER GAP FIX - CRITICAL
   Removes the dark blue gap in header middle
   ============================================ */

/* Force full-width header background */
#global-header {
  width: 100% !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background-color: #01265A !important;
}

.header {
  background-color: #01265A !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Header inner - constrained content width */
.header-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: transparent !important;
}

@media (min-width: 1160px) {
  .header-inner {
    padding: 20px 0;
    width: 90%;
  }
}

/* ============================================
   SMITH VISUAL UPDATES - ADD TO END OF STYLE.CSS
   Hero logo sizing, blue section headers, community fixes
   ============================================ */

/* ===== HERO LOGO SIZING ===== */
.hero-logo {
  max-width: 500px !important;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .hero-logo {
    max-width: 350px !important;
  }
}

@media (max-width: 480px) {
  .hero-logo {
    max-width: 280px !important;
  }
}


/* ===== SECTION CARD HEADERS - SOLID TEAL ===== */

/* Homepage section cards - h3 gets the color */
.knowledge-base .section h3 {
  background: #4991d6 !important;
  color: #ffffff !important;
}

/* The <a> inside h3 must be transparent - kills the inner box */
.knowledge-base .section h3 a,
.knowledge-base .section h3 a:visited,
.knowledge-base .section h3 a:hover {
  background: transparent !important;
  color: #ffffff !important;
  padding: 0 !important;
  text-decoration: none !important;
}

/* Section tree at bottom */
.section-tree .section h3 {
  background: #4991d6 !important;
  color: #ffffff !important;
}
.section-tree .section h3 a,
.section-tree .section h3 a:visited {
  background: transparent !important;
  color: #ffffff !important;
  padding: 0 !important;
}

/* Complete article list section headers - WHITE TEXT */
.article-section-header-text h3 {
  color: #ffffff !important;
  background: transparent !important;
}
.section-icon-large {
  color: #05E3E3 !important;
}

/* ===== COMMUNITY SECTION IMPROVEMENTS ===== */
.home-section.community {
  background: linear-gradient(135deg, #414771 0%, #2a2d52 100%) !important;
  padding: 60px 40px;
  margin: 40px 0;
  border-radius: 12px;
  border: 1px solid rgba(73, 145, 214, 0.3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Community heading - white for contrast */
.home-section.community h2 {
  color: #ffffff !important;
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 20px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Community description text - light color for readability */
.home-section.community p {
  color: #e8eef5 !important;
  font-size: 18px !important;
  padding: 0 20px 30px 20px !important;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.home-section.community p strong {
  color: #ffffff !important;
  font-weight: 600;
}

/* Community button - blue with white text */
.community-link {
  display: inline-block;
  background: #4991d6 !important;
  color: #ffffff !important;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(73, 145, 214, 0.3);
  border: 2px solid transparent;
}

.community-link:hover {
  background: #5aa3e8 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(73, 145, 214, 0.4);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff !important;
}

.community-link:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(73, 145, 214, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .home-section.community {
    padding: 40px 20px;
  }
  
  .home-section.community h2 {
    font-size: 28px;
  }
  
  .home-section.community p {
    font-size: 16px !important;
    padding: 0 10px 20px 10px !important;
  }
  
  .community-link {
    padding: 12px 24px;
    font-size: 15px;
  }
}


/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
  /* Keep section headers blue in dark mode */
  .knowledge-base .section h3,
  .knowledge-base .section h3 a,
  .section-tree .section h3,
  .section-tree .section h3 a {
    background: #4991d6 !important;
    color: #ffffff !important;
  }
  
  /* Community section maintains its styling in dark mode */
  .home-section.community {
    background: linear-gradient(135deg, #414771 0%, #2a2d52 100%) !important;
    border-color: rgba(73, 145, 214, 0.3);
  }
  
  .home-section.community h2 {
    color: #ffffff !important;
  }
  
  .home-section.community p {
    color: #e8eef5 !important;
  }
  
  .community-link {
    background: #4991d6 !important;
    color: #ffffff !important;
  }
  
  .community-link:hover {
    background: #5aa3e8 !important;
  }
}

/* ============================================
   SMITH FOOTER STYLING
   Slate gray background with light text
   ADD THIS TO END OF STYLE.CSS (after previous additions)
   ============================================ */

/* Footer background - slate gray */
.footer {
  background-color: #414771 !important;
  border-top: 1px solid rgba(90, 174, 253, 0.2);
  padding: 30px 20px;
  margin-top: 60px;
}

.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

/* Footer logo */
.footer-logo {
  flex-shrink: 0;
}

.footer-logo img {
  max-width: 80px;
  height: auto;
  filter: brightness(1.2);
}

/* Footer info text */
.ebm-footer-info {
  flex-grow: 1;
  text-align: right;
}

.ebm-footer-info p {
  color: #e8eef5 !important;
  font-size: 14px;
  line-height: 1.6;
  margin: 5px 0;
}

/* Footer links - Finance Blue */
.ebm-footer-info a {
  color: #5AAEFD !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

.ebm-footer-info a:hover {
  color: #7bc4ff !important;
  text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  
  .footer-logo {
    order: -1;
  }
  
  .ebm-footer-info {
    text-align: center;
  }
  
  .ebm-footer-info p {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .footer {
    padding: 25px 15px;
  }
  
  .ebm-footer-info p {
    font-size: 12px;
    line-height: 1.8;
  }
  
  /* Stack bullets on mobile for better readability */
  .ebm-footer-info p {
    word-break: break-word;
  }
}

/* Dark mode - maintain consistent footer styling */
@media (prefers-color-scheme: dark) {
  .footer {
    background-color: #414771 !important;
    border-top-color: rgba(90, 174, 253, 0.2);
  }
  
  .ebm-footer-info p {
    color: #e8eef5 !important;
  }
  
  .ebm-footer-info a {
    color: #5AAEFD !important;
  }
  
  .ebm-footer-info a:hover {
    color: #7bc4ff !important;
  }
}


/* ============================================
   ALTERNATIVE: NO ANIMATION (SAFEST)
   Use this if overflow persists
   ============================================ */

/*
.hero {
  background: linear-gradient(90deg, #050A51 0%, #1F94D3 100%) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(107, 195, 231, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(18, 117, 191, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 10;
  padding: 40px 20px;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.hero-inner img {
  max-width: 600px !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

@media (max-width: 768px) {
  .hero {
    padding: 60px 0 !important;
  }
  
  .hero-inner img {
    max-width: 400px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-inner img {
    max-width: 500px !important;
  }
}
*/

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

body {
  background-color: rgba(1, 34, 81, 1);
  color: rgba(255, 255, 255, 1);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

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

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

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

h4 {
  font-size: 16px;
}

a {
  color: rgba(90, 174, 253, 1);
  text-decoration: none;
}
a:visited {
  color: rgba(5, 227, 227, 1);
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}

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

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

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

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

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

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

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

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

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

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

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

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

.button-secondary {
  color: #fff;
  border: 1px solid #87929D;
  background-color: transparent;
}
.button-secondary:visited {
  color: #fff;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: rgba(255, 255, 255, 1);
  border: 1px solid #87929D;
  background-color: #011c42;
}

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

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

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

/***** Tables *****/
.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
@media (min-width: 768px) {
  .table {
    table-layout: auto;
  }
}
.table th,
.table th a {
  color: #fff;
  font-size: 13px;
  text-align: left;
}
[dir=rtl] .table th,
[dir=rtl] .table th a {
  text-align: right;
}
.table tr {
  border-bottom: 1px solid #ddd;
  display: block;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .table tr {
    display: table-row;
  }
}
.table td {
  display: block;
}
@media (min-width: 768px) {
  .table td {
    display: table-cell;
  }
}
@media (min-width: 1024px) {
  .table td, .table th {
    padding: 20px 30px;
  }
}
@media (min-width: 768px) {
  .table td, .table th {
    padding: 10px 20px;
    height: 60px;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ============================================================
   HINT TEXT ABOVE INPUT: OPTIONAL STYLE ENHANCEMENTS
   ============================================================ */
.hint-above {
  margin-bottom: 6px;
  color: #666;
  font-size: 0.9em;
}

/* Form info header styling */
.form-info-header {
  margin-bottom: 24px;
  padding: 16px 20px;
  background-color: #f7f9fa;
  border-left: 4px solid #17494D;
  border-radius: 4px;
}

.form-info-title {
  margin: 0 0 8px 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #2f3941;
}

.form-info-description {
  margin: 0;
  font-size: 0.95rem;
  color: #68737d;
  line-height: 1.5;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .form-info-header {
    background-color: #1a1a1a;
    border-left-color: #4a9ba0;
  }
  
  .form-info-title {
    color: #e6e6e6;
  }
  
  .form-info-description {
    color: #a0a0a0;
  }
}

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

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

.logo span {
  margin: 0 10px;
  color: rgba(5, 227, 227, 1);
}

.logo a {
  display: inline-block;
}

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

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

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

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

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

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

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

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

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

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

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

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

.powered-by-zendesk a,
.powered-by-zendesk a:visited {
  color: #1E3A8A;
}

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

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

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

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

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

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

/***** Hero component *****/
.hero {
  background-image: url(/hc/theming_assets/01K3H6W07ZF01G744205SFAR9B);
  background-position: center;
  background-size: cover;
  height: 300px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}
.hero-inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-width: 610px;
  margin: 0 auto;
}

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

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

/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
}
@media (min-width: 768px) {
  .blocks-list {
    margin: 0 -15px;
  }
}
.blocks-item {
  border: 1px solid rgba(5, 227, 227, 1);
  border-radius: 4px;
  box-sizing: border-box;
  color: rgba(5, 227, 227, 1);
  display: flex;
  flex: 1 0 340px;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
}
@media (min-width: 768px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  background-color: rgba(5, 227, 227, 1);
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: #FFFFFF;
  text-decoration: none;
}
.blocks-item-internal {
  background-color: transparent;
  border: 1px solid #ddd;
}
.blocks-item-internal .icon-lock {
  height: 15px;
  width: 15px;
  bottom: 5px;
  position: relative;
}
.blocks-item-internal a {
  color: rgba(255, 255, 255, 1);
}
.blocks-item-link {
  color: rgba(5, 227, 227, 1);
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  border-radius: inherit;
}
.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active {
  color: inherit;
  text-decoration: none;
}
.blocks-item-link:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(5, 227, 227, 1);
  text-decoration: none;
}
.blocks-item-title {
  margin-bottom: 0;
  font-size: 16px;
}
.blocks-item-description {
  margin: 0;
}
.blocks-item-description:not(:empty) {
  margin-top: 10px;
}

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

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

/***** Promoted articles *****/
.promoted-articles {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
@media (min-width: 1024px) {
  .promoted-articles {
    flex-direction: row;
  }
}
.promoted-articles-item {
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .promoted-articles-item {
    align-self: flex-end;
    flex: 0 0 auto;
    padding-right: 30px;
    width: 33%; /* Three columns on desktop */
  }
  [dir=rtl] .promoted-articles-item {
    padding: 0 0 0 30px;
  }
}
.promoted-articles-item:nth-child(3n) {
  padding-right: 0;
}
.promoted-articles-item a {
  display: block;
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
}
.promoted-articles-item .icon-lock {
  vertical-align: baseline;
}
.promoted-articles-item:last-child a {
  border: 0;
}
@media (min-width: 1024px) {
  .promoted-articles-item:last-child a {
    border-bottom: 1px solid #ddd;
  }
}

/***** Community section in homepage *****/
.community {
  text-align: center;
}
.community-image {
  min-height: 300px;
  margin-top: 32px;
  background-image: url(/hc/theming_assets/01K3H6W11D4KHX91DAH6HQC3K9);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}
.community a {
  color: rgba(90, 174, 253, 1);
  text-decoration: underline;
}
.community a:visited {
  color: rgba(5, 227, 227, 1);
}
.community a:hover, .community a:active, .community a:focus {
  color: rgba(5, 227, 227, 1);
}

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

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

/***** Category pages *****/
.category-container {
  display: flex;
  justify-content: flex-end;
}
.category-content {
  flex: 1;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .category-content {
    flex: 0 0 80%;
  }
}

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

.article-list-item {
  font-size: 16px;
  padding: 15px 0;
  text-overflow: ellipsis;
  overflow: hidden;
}
.article-list-item a {
  color: rgba(255, 255, 255, 1);
}

.icon-star {
  color: rgba(5, 227, 227, 1);
  font-size: 18px;
}

/***** Section pages *****/
.section-container {
  display: flex;
  justify-content: flex-end;
}
.section-content {
  flex: 1;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .section-content {
    flex: 0 0 80%;
  }
}
.section-list {
  margin: 40px 0;
}

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

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

/***** Article *****/
.article {
  /*
  * The article grid is defined this way to optimize readability:
  * Sidebar | Content | Free space
  * 17%     | 66%     | 17%
  */
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .article {
    flex: 1 0 66%;
    max-width: 66%;
    min-width: 640px;
    padding: 0 30px;
  }
}
.article-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .article-container {
    flex-direction: row;
  }
}
.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 40px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}
.article-avatar {
  margin-right: 10px;
}
.article-author {
  margin-bottom: 10px;
}
.article-title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (min-width: 768px) {
  .article-title {
    flex-basis: 100%; /* Take entire row */
  }
}
.article-title .icon-lock {
  position: relative;
  left: -5px;
  vertical-align: baseline;
}
.article [role=button] {
  flex-shrink: 0; /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
  width: 100%;
}
@media (min-width: 768px) {
  .article [role=button] {
    width: auto;
  }
}
.article-info {
  max-width: 100%;
}
.article-meta {
  display: inline-block;
  vertical-align: middle;
}
.article-body {
  display: flow-root;
}
.article-body a {
  color: rgba(90, 174, 253, 1);
  text-decoration: underline;
}
.article-body a:visited {
  color: rgba(5, 227, 227, 1);
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: rgba(5, 227, 227, 1);
}
.article-body img {
  height: auto;
  max-width: 100%;
}
.article-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figure.image {
  display: table;
  margin: 0 auto;
}
.article-body figure.image > img {
  display: block;
  width: 100%;
}
.article-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #011738;
}
.article-body ul,
.article-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .article-body ul,
[dir=rtl] .article-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.article-body ul > ul,
.article-body ol > ol,
.article-body ol > ul,
.article-body ul > ol,
.article-body li > ul,
.article-body li > ol {
  margin: 0;
}
.article-body ul {
  list-style-type: disc;
}
.article-body :not(pre) > code {
  background: #011c42;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: #011c42;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.article-body blockquote {
  border-left: 1px solid #ddd;
  color: #fff;
  font-style: italic;
  padding: 0 15px;
}
.article-body > p:last-child {
  margin-bottom: 0;
}
.article-content {
  line-height: 1.6;
  margin: 40px 0;
  word-wrap: break-word;
}
.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.article-comment-count {
  color: #fff;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: rgba(5, 227, 227, 1);
  width: 18px;
  height: 18px;
}
.article-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    flex: 0 0 17%;
    height: auto;
    max-width: 17%;
  }
}
.article-relatives {
  border-top: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .article-relatives {
    flex-direction: row;
  }
}
.article-relatives > * {
  flex: 1 0 50%;
  min-width: 50%;
  overflow-wrap: break-word;
  margin-right: 0;
}
.article-relatives > *:last-child {
  padding: 0;
}
@media (min-width: 768px) {
  .article-relatives > * {
    padding-right: 20px;
  }
}
.article-votes {
  border-top: 1px solid #ddd;
  padding: 30px 0;
  text-align: center;
}
.article-votes-question {
  font-size: 15px;
  font-weight: normal;
  margin-bottom: 0;
}
.article-vote {
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}
.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}
.article-more-questions a {
  color: rgba(90, 174, 253, 1);
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: rgba(5, 227, 227, 1);
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: rgba(5, 227, 227, 1);
}
.article-return-to-top {
  border-top: 1px solid #87929D;
}
@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}
.article-return-to-top a {
  color: rgba(255, 255, 255, 1);
  display: block;
  padding: 20px 0;
}
.article-return-to-top a:hover, .article-return-to-top a:focus {
  text-decoration: none;
}
.article-return-to-top-icon {
  transform: rotate(0.5turn);
}
.article td > p:first-child,
.article th > p:first-child {
  margin-top: 0;
}
.article td > p:last-child,
.article th > p:last-child {
  margin-bottom: 0;
}

.sidenav-title {
  font-size: 15px;
  position: relative;
  font-weight: 600;
}
.sidenav-item {
  display: block;
  margin-top: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/* ============================================
   TABLE OF CONTENTS (TOC)
   ============================================ */
.toc-container {
  background: #fff;
  border-left: 3px solid #ddd;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  margin: 1em 0 2em 0;
  padding: 1em 1em 1em 1.2em;
  border-radius: 6px;
  font-size: 0.95em;
}

.toc-container .toc-heading-label {
  font-weight: 500;
  margin-bottom: 8px;
  color: #222;
}

.toc-container ul {
  list-style: none;
  padding-left: 1em;
  margin: 0;
}

.toc-h2 a {
  text-decoration: none;
  color: #0073e6;
  display: block;
  padding: 4px 0;
  line-height: 1.4;
}

.toc-container a.active {
  font-weight: bold;
  color: #222;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .toc-container {
    background: #1c1c1e;
    border-left-color: #444;
    box-shadow: 0 1px 6px rgba(255, 255, 255, 0.08);
  }

  .toc-container .toc-heading-label,
  .toc-container a {
    color: #ddd;
  }

  .toc-container a.active {
    color: #fff;
  }
}

/* Mobile responsive */
@media (max-width: 768px) {
  .toc-container {
    padding: 1em 1em 1em 1.2em;
    border-left: 3px solid #ddd;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border-radius: 6px;
  }

  .toc-container ul {
    display: block !important;
    padding-left: 1em;
  }

  .toc-container .toc-heading-label {
    background: none;
    padding: 0;
    cursor: default;
    margin-bottom: 8px;
    border-radius: 0;
  }
}

/* ============================================
   BACK TO TOP BUTTON
   ============================================ */
#back-to-top-btn {
  position: fixed;
  bottom: 40px;
  left: 40px;
  background: #050A51; /* Ontario primary color */
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

#back-to-top-btn:hover {
  background: #0A1270; /* Slightly lighter Ontario blue */
  transform: scale(1.05) translateZ(0);
  -webkit-transform: scale(1.05) translateZ(0);
}

#back-to-top-btn.visible {
  opacity: 1;
  visibility: visible;
}

#back-to-top-btn svg {
  transform: rotate(180deg);
}

/* Mobile optimization */
@media (max-width: 768px) {
  #back-to-top-btn {
    bottom: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
    opacity: 0.85;
    position: fixed !important;
    -webkit-position: fixed !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  #back-to-top-btn.visible {
    opacity: 0.85;
  }
  
  #back-to-top-btn:active {
    opacity: 1;
  }
}

/* Floating Back to Top Button - Article Pages Only */
#back-to-top-btn {
  position: fixed;
  bottom: 40px;
  left: 40px;
  background: #1a8ac3;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Force hardware acceleration for smoother mobile performance */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

#back-to-top-btn:hover {
  background: #0A52A2;
  transform: scale(1.05) translateZ(0);
  -webkit-transform: scale(1.05) translateZ(0);
}

#back-to-top-btn.visible {
  opacity: 1;
  visibility: visible;
}

#back-to-top-btn svg {
  transform: rotate(180deg);
}

/* Mobile-specific fixes */
@media (max-width: 768px) {
  #back-to-top-btn {
    /* Use viewport units for better mobile support */
    bottom: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
    opacity: 0.85;
    /* Ensure it stays fixed on mobile */
    position: fixed !important;
    -webkit-position: fixed !important;
    /* Prevent iOS Safari from breaking fixed positioning */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  #back-to-top-btn.visible {
    opacity: 0.85;
  }
  
  #back-to-top-btn:active {
    opacity: 1;
  }
}

/* Fix Zendesk support widget positioning on mobile */
@media (max-width: 768px) {
  /* Target the widget container */
  .sc-1w3tvxe-0,
  [class*="sc-1w3tvxe"],
  iframe[title*="Messaging window"],
  div[shape="square"],
  .StyledButton-sc-qe3ace-0 {
    position: fixed !important;
    -webkit-position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    /* iOS Safari fixes */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
}
/* ==== END FLOATING BACK TO TOP BUTTON ==== */

/* ==== TOC MAIN STYLING ==== */
.toc-container {
  background: #fff;
  border-left: 3px solid #ddd;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  margin: 1em 0 2em 0;
  padding: 1em 1em 1em 1.2em;
  border-radius: 6px;
  font-size: 0.95em;
}

.toc-container .toc-heading-label {
  font-weight: 500;
  margin-bottom: 8px;
  color: #222;
}

.toc-container ul {
  list-style: none;
  padding-left: 1em; /* <-- slight indent */
  margin: 0;
}

.toc-h2 a {
  text-decoration: none;
  color: #0073e6;
  display: block;
  padding: 4px 0;
  line-height: 1.4;
}

.toc-container a.active {
  font-weight: bold;
  color: #222;
}

/* === DARK MODE === */
@media (prefers-color-scheme: dark) {
  .toc-container {
    background: #1c1c1e;
    border-left-color: #444;
    box-shadow: 0 1px 6px rgba(255, 255, 255, 0.08);
  }

  .toc-container .toc-heading-label,
  .toc-container a {
    color: #ddd;
  }

  .toc-container a.active {
    color: #fff;
  }
}

/* === MOBILE COLLAPSIBLE === */
@media (max-width: 768px) {
  .toc-container {
    padding: 1em 1em 1em 1.2em;
    border-left: 3px solid #ddd;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border-radius: 6px;
  }

  .toc-container ul {
    display: block !important;
    padding-left: 1em;
  }

  .toc-container .toc-heading-label {
    background: none;
    padding: 0;
    cursor: default;
    margin-bottom: 8px;
    border-radius: 0;
  }
}
/* === ALERT BANNER === */
.alert-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background-color: #003E51; /* Deep brand teal */
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  z-index: 999;
  position: relative;
  text-align: center;
}

.alert-banner.alert-info {
  background-color: #007E94;
}

.alert-banner.alert-warning {
  background-color: #FFD166;
  color: #231f20;
}

.alert-banner button#dismiss-alert {
  background: none;
  border: none;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  margin-left: 20px;
}



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

.upload-dropzone span {
  color: #fff;
}

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

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

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

.share a {
  color: #fff;
}
.share a:hover {
  text-decoration: none;
  color: rgba(5, 227, 227, 1);
}
.share a svg {
  height: 18px;
  width: 18px;
  display: block;
}

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

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

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

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

.vote-up:hover,
.vote-down:hover {
  color: rgba(5, 227, 227, 1);
}

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

.vote-voted {
  color: rgba(5, 227, 227, 1);
}

.vote-voted:hover {
  color: #037f7f;
}

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

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

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

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

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

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

/* Topic, post and user follow button */
.community-follow {
  margin-bottom: 10px;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow {
    margin-bottom: 0;
    width: auto;
  }
}
.community-follow button {
  line-height: 30px;
  padding: 0 10px 0 15px;
  position: relative;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow button {
    width: auto;
  }
}
.community-follow button:hover {
  background-color: rgba(5, 227, 227, 1);
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: #FFFFFF;
  color: #FFFFFF;
}
.community-follow button[data-selected=true] {
  background-color: rgba(5, 227, 227, 1);
  color: #FFFFFF;
}
.community-follow button[data-selected=true]::after {
  border-left: 1px solid #FFFFFF;
  color: #FFFFFF;
}
.community-follow button[data-selected=true]:hover {
  background-color: #037f7f;
  border-color: #037f7f;
}
.community-follow button::after {
  border-left: 1px solid rgba(5, 227, 227, 1);
  content: attr(data-follower-count);
  color: rgba(5, 227, 227, 1);
  display: inline-block;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}
@media (min-width: 768px) {
  .community-follow button::after {
    position: static;
  }
}
[dir=rtl] .community-follow button::after {
  border-left: 0;
  border-right: 1px solid rgba(5, 227, 227, 1);
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
}

/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  padding: 0;
}
.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}
.striped-list-info {
  flex: 2;
}
.striped-list-title {
  color: rgba(90, 174, 253, 1);
  margin-bottom: 10px;
  margin-right: 5px;
}
.striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active {
  text-decoration: underline;
}
.striped-list-title:visited {
  color: rgba(5, 227, 227, 1);
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #fff;
  font-size: 13px;
  justify-content: flex-start;
  text-transform: capitalize;
}
@media (min-width: 768px) {
  .striped-list-count {
    display: flex;
    flex: 1;
    justify-content: space-around;
  }
}
/* Fix 1: Striped list separator */
.striped-list-count-item::after {
  content: "•";
  display: inline-block;
  padding: 0 5px;
}
@media (min-width: 768px) {
  .striped-list-count-item::after {
    display: none;
  }
}
.striped-list-count-item:last-child::after {
  display: none;
}
.striped-list-number {
  text-align: center;
}
@media (min-width: 768px) {
  .striped-list-number {
    color: rgba(255, 255, 255, 1);
    display: block;
  }
}

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

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

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

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

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

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

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

.community-badge {
  margin: 2px;
}

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

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

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

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

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

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

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

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

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

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

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

.no-activities {
  color: #fff;
}

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

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

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

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

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

.meta-group * {
  display: inline;
}

.meta-data {
  color: #fff;
  font-size: 13px;
}
.meta-data:not(:last-child)::after {
  content: "•";
  margin: 0 8px;
  opacity: 0.6;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/***** Notifications *****/
.notification {
  border: 1px solid;
  display: table;
  font-family: sans-serif;
  font-size: 12px;
  padding: 13px 15px;
  transition: height 0.2s;
  width: 100%;
  color: #555;
}

.notification a {
  color: #158ec2;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*################################################################################################################################################################################################*/
/*#################### CUSTOM STYLES: No changes have been made to default stylesheet. All changes and overrides are below. ######################################################################*/
/*################################################################################################################################################################################################*/

/* ############### GLOBAL STYLES ############### */
body, html, h1, h2, h3, h4, h5, h6, p, a {
  font-family: 'Instrument Sans', 'Open Sans', Sans-serif;
}
h1 {
  line-height: 1.3;
  font-weight: 600;
}
.page-header h1, .post-title h1, h1.article-title, header.my-activities-header h1, .search-result-title {
  font-weight: 600;
}
h2 {
  font-size: 32px;
  font-weight: 600;
}
h3 {
  line-height: 1.3;
  margin-bottom: 5px !important;
}
.category-tree .section-tree h3 {
  font-size: 22px;
}
.button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
  border-radius: 20px;
}
@media (min-width: 1024px) {
.section-content {
    flex: 0 0 100%;
}
}
.button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
    border: 1px solid rgb(31 115 183);
    color: rgb(31 115 183);
}
.button:visited, .pagination-next-link:visited, .pagination-prev-link:visited, .pagination-first-link:visited, .pagination-last-link:visited, .subscriptions-subscribe button:visited, .requests-table-toolbar .organization-subscribe button:visited, .community-follow button:visited, .article-subscribe button:visited, .section-subscribe button:visited, .split-button button:visited {
  color: #236a6d;
}
.button:hover, .pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover, .subscriptions-subscribe button:hover, .requests-table-toolbar .organization-subscribe button:hover, .community-follow button:hover, .article-subscribe button:hover, .section-subscribe button:hover, .split-button button:hover, .button:active, .pagination-next-link:active, .pagination-prev-link:active, .pagination-first-link:active, .pagination-last-link:active, .subscriptions-subscribe button:active, .requests-table-toolbar .organization-subscribe button:active, .community-follow button:active, .article-subscribe button:active, .section-subscribe button:active, .split-button button:active, .button:focus, .pagination-next-link:focus, .pagination-prev-link:focus, .pagination-first-link:focus, .pagination-last-link:focus, .subscriptions-subscribe button:focus, .requests-table-toolbar .organization-subscribe button:focus, .community-follow button:focus, .article-subscribe button:focus, .section-subscribe button:focus, .split-button button:focus, .button.button-primary, .button-primary.pagination-next-link, .button-primary.pagination-prev-link, .button-primary.pagination-first-link, .button-primary.pagination-last-link, .subscriptions-subscribe button.button-primary, .subscriptions-subscribe button[data-selected=true], .requests-table-toolbar .organization-subscribe button.button-primary, .requests-table-toolbar .organization-subscribe button[data-selected=true], .community-follow button.button-primary, .article-subscribe button.button-primary, .article-subscribe button[data-selected=true], .section-subscribe button.button-primary, .section-subscribe button[data-selected=true], .split-button button.button-primary {
  background-color: #236a6d;
  text-decoration: none;
  border-color: #236a6d; 
}
.button.button-primary:hover, .button-primary.pagination-next-link:hover, .button-primary.pagination-prev-link:hover, .button-primary.pagination-first-link:hover, .button-primary.pagination-last-link:hover, .subscriptions-subscribe button.button-primary:hover, .subscriptions-subscribe button[data-selected=true]:hover, .requests-table-toolbar .organization-subscribe button.button-primary:hover, .requests-table-toolbar .organization-subscribe button[data-selected=true]:hover, .community-follow button.button-primary:hover, .article-subscribe button.button-primary:hover, .article-subscribe button[data-selected=true]:hover, .section-subscribe button.button-primary:hover, .section-subscribe button[data-selected=true]:hover, .split-button button:hover, .button.button-primary:focus, .button-primary.pagination-next-link:focus, .button-primary.pagination-prev-link:focus, .button-primary.pagination-first-link:focus, .button-primary.pagination-last-link:focus, .subscriptions-subscribe button.button-primary:focus, .subscriptions-subscribe button[data-selected=true]:focus, .requests-table-toolbar .organization-subscribe button.button-primary:focus, .requests-table-toolbar .organization-subscribe button[data-selected=true]:focus, .community-follow button.button-primary:focus, .article-subscribe button.button-primary:focus, .article-subscribe button[data-selected=true]:focus, .section-subscribe button.button-primary:focus, .section-subscribe button[data-selected=true]:focus, .split-button button.button-primary:focus, .button.button-primary:active, .button-primary.pagination-next-link:active, .button-primary.pagination-prev-link:active, .button-primary.pagination-first-link:active, .button-primary.pagination-last-link:active, .subscriptions-subscribe button.button-primary:active, .subscriptions-subscribe button[data-selected=true]:active, .requests-table-toolbar .organization-subscribe button.button-primary:active, .requests-table-toolbar .organization-subscribe button[data-selected=true]:active, .community-follow button.button-primary:active, .article-subscribe button.button-primary:active, .article-subscribe button[data-selected=true]:active, .section-subscribe button.button-primary:active, .section-subscribe button[data-selected=true]:active, .split-button button.button-primary:active {
  background-color: #236a6d;
  border-color: #236a6d;
}
.section-tree {
    justify-content: flex-start;
    gap: 20px;
}

/* ############### HEADER ############### */
header.article-header {
  background: #f3f3f3;
  padding: 20px 40px;
  border-radius: 20px;
}
#global-header {
  width: 100%;
  background: linear-gradient(180deg, #000000 0%, #01265A 100%);
}
.hero-inner svg {
  max-width: 450px;
}
@media (max-width: 768px) {
  .hero-inner svg {
    max-width: 300px;
}
}
.user-info span {
  color: #fff;
}
.button-large, input[type=submit] {
  background-color: #236a6d;
  border-radius: 20px;
  min-width: 150px;
  padding: 0 1em;
  transition: opacity ease-in-out 0.5s;
}
.button-large:hover, input[type=submit]:hover {
  background-color: #236a6d;
  text-decoration: none;
  opacity: 0.75;
}
a.button.button-large {
  color: #fff;
}
.sub-nav .breadcrumbs {
  margin-top: 10px;
}
/* ############### NAV ############### */
.header .user-nav li a, .header .user-nav li .cat-dropdown-btn {
  color: #fff;
  font-weight: 500;
}
.nav-wrapper-desktop a:hover, .nav-wrapper-desktop a:focus, .nav-wrapper-desktop a:active {
  text-decoration: none;
  color: #b3d6e5 !important;
}
.nav-wrapper-desktop .dropdown-menu a:hover, .nav-wrapper-desktop .dropdown-menu a:focus, .nav-wrapper-desktop .dropdown-menu a:active {
  text-decoration: none;
  color: #2f3941 !important;
}
.dropdown-menu [role=separator] {
    border-bottom: 0 solid #e9ebed;
}

/* ############### CATEGORY/SECTION NAV ############### */
.cat-dropdown {
  position: relative; /* Needed for menu positioning */
  display: inline-block;
}
.cat-dropdown-btn {
  cursor: pointer;
  background: none;
  border-style: none;
  padding: 0 20px 0 0;
}
.cat-dropdown-content {
 display: none;
  position: absolute; /* Positions the menu relative to button */
  /*background-color: #2c5364;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 10; /* Ensures menu appears above other elements */
    background: #fff;
    border: 1px solid #d8dcde;
    border-radius: 3px;
    box-shadow: 0px 20px 30px 0px rgba(23, 73, 77, 0.15);
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    left: 0;
    margin-top: 1px;
    min-width: 170px;
    padding: 10px 0;
    position: absolute;
    text-align: left;
    z-index: 1000;
}
.cat-dropdown-content a, .cat-dropdown-content a:hover {
  /*color: #fff;*/
  color: #2f3941 !important;
  font-weight: 300 !important;
  padding: 8px 16px;
  text-decoration: none;
  display: block;
}
.cat-dropdown-content a:hover {
  background: #1f73b714;
}
/*.cat-dropdown:hover .cat-dropdown-content { /* Optional hover effect */
 /*display: block;
}*/
.show {
  display: block;
}

/* ############### SEARCH ############### */
.search input[type="search"] {
  border-radius: 30px;
  box-sizing: border-box;
  color: #333333 !important;
  height: 48px;
  padding-left: 40px;
  padding-right: 20px;
  -webkit-appearance: none;
  width: 100%;
  background: linear-gradient(white, white) padding-box, linear-gradient(to right, #2c4959 0%, #5a99a3 38%, #2c4959 100%) border-box !important;
  border-radius: 50em !important;
  border: 4px solid transparent !important;
}
.search-wrapper {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    max-width: 610px;
    margin: 0 auto;
}
.search {
  border-style: none;
}
.search-icon {
  color: #333333;
  top: 82%;
}
.top-search-bar {
  margin-top: 100px;
  text-align: center;
}
.top-search-bar h2 {
  font-size: 34px;
  margin-bottom: 12px;
}
input {
  font-size: 16px;
}
.search .clear-button, .search .clear-button:hover {
  color: #fff;
  background-color: #236a6d;
  border-color: transparent;
  padding: 0 18px;
}
[dir=ltr] .search .clear-button {
  border-bottom-left-radius: 30px;
  border-top-left-radius: 30px;
}

/* ############### HOME: TRENDING TOPICS ############### */
.browse-other-bucket {
/*background: #f3f3f3;
  padding: 20px;
  border-radius: 20px;
  max-width: 200px;
  text-align: center;*/
}
section.other-guides {
  margin-bottom: 70px;
  margin-top: 20px;
}
#browse-other-wrapper {
  display: flex !important;
  gap: 50px;
}
.browse-other-bucket {
  display: flex !important;
  align-items: center;
  flex: 1;
  /* Make each child flex item take up equal space */
  /*min-height: 100px;*/
}
.browse-other-bucket img {
  width: 100%;
}
@media (max-width: 768px) {
  section.other-guides {
    margin-top: 20px;
  }
  #browse-other-wrapper {
    flex-wrap: wrap;
    gap: inherit;
  }
  .browse-other-bucket img {
    height: 120px !important;
    width: auto !important;
    margin: 10px 10px;
    text-align: center;
  }
}

/* ############### HOME: ARTICLES ############### */
.section-tree .section {
  border: 4px solid #7BA0C440;
  border-radius: 20px;
  padding: 30px;
}
@media (min-width: 768px) {
  .section {
    margin-bottom: 30px;
  }
  .section-tree .section {
    flex: 0 0 32%;
  }
}
@media (min-width: 1024px) {
  .promoted-articles {
    gap: 30px;
  }
.promoted-articles-item {
    align-self: flex-start;
    flex: 0 0 auto;
    width: 31.5%;
    padding-right: 0;
  }
}
section.articles {
  margin-top: 40px;
}
a.see-all-articles {
  background: #236a6d;
  color: #fff;
  width: 60%;
  text-align: center;
  border-radius: 20px;
}
.section-tree .see-all-articles {
  padding: 10px 10px;
  margin-top: 20px;
}
li.promoted-articles-item a {
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 0;
}
.promoted-articles-item:last-child a {
  border-bottom: 0;
}
li.promoted-articles-item img {
  width: 100%;
  border-radius: 20px;
}
.promoted-articles-item a {
  border-bottom: none;
  line-height: 1.3;
  margin-bottom: 8px;
}
.community, .activity {
  border-top: none;
}
section:not(.profile-section) h3 a, 
section:not(.profile-section) h3 a:visited {
  color: #333;
}
 
/* ############### HOME: RECENT ACTIVITY AND COMMUNITY ############### */
/*h2.recent-activity-header, .community h2, .articles h2 {
  font-size: 32px;
  color: rgba(127, 39, 41, 1);
  font-weight: 600;
}
@media (min-width: 768px) {
  .recent-activity-list {
    display: flex;
    flex-wrap: wrap;
  }
  .recent-activity-item {
    flex: 1 0 21%;
    padding: 20px;
    border-bottom: 0;
  }
  .recent-activity-item-meta {
    float: none;
  }
}*/
section.section.home-section.activity {
  display: none;
}
.community a, .recent-activity-controls a, a.article-sidebar-item {
  text-decoration: none;
  color: #fff !important;
  background: #236a6d;
  padding: 10px 20px;
  border-radius: 20px;
}
.community a:hover, .recent-activity-controls a:hover, a.article-sidebar-item:hover {
  text-decoration: none;
  background: #0A52A2;
  transition: all ease-in-out 0.5s;
}
.community-image {
  margin-top: 40px;
}
.recent-activity-item-parent {
  font-size: 16px;
}
.recent-activity-item-link {
  font-size: 15px;
}
/* Recent Activities show 5 and cannot change. Hide last child to display only 4 */
/*.recent-activity-list .recent-activity-item:last-child {
  display: none;
}
section.recent-activity-item {
  border-radius: 20px;
  margin: 10px;
  background: #f3f3f3;
}
.recent-activity-controls {
  text-align: center;
  margin-top: 10px;
} */
@media (max-width: 768px) {
 .community-image {
    background-position: center left;
  }
}

/* ############### FOOTER ############### */
.footer {
  background-color: #E2E8F0;  /* Light grey background */
  background-image: none;
  padding: 40px 0 70px;
  text-align: center;
  width: 100%;
}

.footer .ebm-footer-info p, 
.footer .ebm-footer-info a {
  color: #1E3A8A;  /* EBM Navy blue text */
}

.footer .ebm-footer-info a:hover {
  color: #0A52A2;  /* Lighter blue on hover */
  text-decoration: underline;
}
.footer .ebm-footer-info p {
  margin-bottom: 5px;
  margin-top: 5px;
}
@media (max-width: 768px) {
  .footer .ebm-footer-info p {
  font-size: 12px;
    line-height: 16px;
    margin-left: 10px;
  }
  .footer-inner {
    display: block;
  }
}

/* ############### COMMUNITY LANDING PAGE: community_topic_list_page ############### */
.blocks-item {
  border: 4px solid #7BA0C440;
  border-radius: 20px;
  padding: 20px;
}
.blocks-item:hover {
  background: #7BA0C440;
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: #231f20;
  text-decoration: none;
}
a span.blocks-item-title {
  font-size: 24px;
  font-weight: 500;
}
.community-footer-title {
  font-size: 28px;
  font-weight: 600;
}
.community-featured-posts .title {
  font-size: 28px;
}
.community-header .title {
  font-size: 28px;
  font-weight: 600;
}
.blocks-item-link:focus {
  box-shadow: 0 0 0 0 rgb(242 0 61);
}
.recent-activity-comment-icon svg {
    color: #0A52A2;
}
.status-label-pinned, .status-label-featured, .status-label-official {
    background-color: rgb(9 113 206);
}

/* ############### SEARCH BAR INTERIOR PAGES (white bg) ############### */
.search-container .search input[type="search"] {
  background: linear-gradient(white, white) padding-box, linear-gradient(to right, #2c4959 0%, #5a99a3 38%, #2c4959 100%) border-box !important;
  color: #757575 !important;
}
.search-container .search-icon {
  color: #757575;
  top: 52%;
}

/* ############### ARTICLES ############### */
.collapsible-sidebar-body li:last-child {
  margin-bottom: 40px;
}
.collapsible-sidebar-body {
  padding-bottom: 30px;
}
@media (min-width: 1024px) {
  .article {
    flex: 1 0 85%;
    max-width: 85%;
  }
}
.recent-articles li, .related-articles li {
  margin-bottom: 5px;
}

/* --- Enhanced Blockquote Styling --- */
.article-body blockquote {
  border-left: 4px solid #ccc;
  background-color: #f9f9f9;
  border-radius: 4px;
  color: #333;
  font-style: normal;
  padding: 10px 16px;
  margin: 12px 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  animation: fadeSlideIn 0.3s ease;
}

/* Default blockquote (unstyled) */
.article-body blockquote:not(.important):not(.fyi):not(.note):not(.info):not(.relevant):not(.tip):not(.action):not(.troubleshoot):not(.context) {
  background-color: #f4f5f7;
  border-left-color: #5e6c84;
  color: #333;
  font-style: normal;
}

/* --- Updated and New Blockquote Variants --- */

/* Important - Light Pink */
.article-body blockquote.important {
  background-color: #ffebe6;
  border-left-color: #d13c2f;
  color: #333;
}

/* FYI - Light Blue */
.article-body blockquote.fyi {
  background-color: #deebff;
  border-left-color: #3779db;
  color: #333;
}

/* Note - Soft Yellow */
.article-body blockquote.note {
  background-color: #fffbe6;
  border-left-color: #e6b800;
  color: #333;
}

/* Info - Soft Mint */
.article-body blockquote.info {
  background-color: #e6fbf3;
  border-left-color: #3aa77d;
  color: #333;
}

/* Relevant - Soft Lavender Blue */
.article-body blockquote.relevant {
  background-color: #f5f3f0;
  border-left-color: #a09b92;
  color: #2e2e2e;
}

/* Tip - Light Green */
.article-body blockquote.tip {
  background-color: #e8f5e9;
  border-left-color: #43a047;
  color: #2e7d32;
}

/* Action - Light Orange */
.article-body blockquote.action {
  background-color: #fff3e0;
  border-left-color: #fb8c00;
  color: #e65100;
}

/* Troubleshoot - Warm Peach */
.article-body blockquote.troubleshoot {
  background-color: #fbe9e7;
  border-left-color: #d84315;
  color: #4e342e;
}

/* Context - Soft Steel Blue */
.article-body blockquote.context {
  background-color: #e3e7f0;
  border-left-color: #627aa0;
  color: #2f3e5c;
}

/* Hover effect for all blockquotes */
.article-body blockquote:hover {
  background-color: #eef1f3;
}

/* Inline Alert Callout */
.article-body .alert-inline {
  display: inline-block;
  background-color: #fff8c5;
  color: #594d00;
  border-left: 4px solid #e3b800;
  padding: 4px 8px;
  margin: 2px 0;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;
  animation: fadeSlideIn 0.3s ease;
}

/* Slide & Fade In Animation */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Font Adjustment on Mobile */
@media (max-width: 600px) {
  .article-body blockquote {
    font-size: 15px;
  }
  .article-body .alert-inline {
    font-size: 14px;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .article-body blockquote {
    background-color: #2e2e2e;
    color: #ddd;
    border-left-color: #666;
  }
  .article-body blockquote:not(.important):not(.fyi):not(.note):not(.info):not(.relevant):not(.tip):not(.action):not(.troubleshoot):not(.context) {
    background-color: #3a3a3a;
    border-left-color: #888;
    color: #ddd;
  }
  .article-body blockquote.important {
    background-color: #4b1f1f;
    border-left-color: #ff6b6b;
  }
  .article-body blockquote.fyi {
    background-color: #1f2b4b;
    border-left-color: #4c9aff;
  }
  .article-body blockquote.note {
    background-color: #4b3f1f;
    border-left-color: #ffcd4b;
  }
  .article-body blockquote.info {
    background-color: #1f4b2b;
    border-left-color: #4bffa0;
  }
  .article-body blockquote.relevant {
    background-color: #3b4152;
    border-left-color: #91a4d1;
    color: #eee;
  }
  .article-body blockquote.tip {
    background-color: #264d36;
    border-left-color: #43ff91;
  }
  .article-body blockquote.action {
    background-color: #4e3b1f;
    border-left-color: #ffc47d;
  }
  .article-body blockquote.troubleshoot {
    background-color: #51231d;
    border-left-color: #ff8e72;
  }
  .article-body blockquote.context {
    background-color: #2f3540;
    border-left-color: #99b0d1;
  }
  .article-body .alert-inline {
    background-color: #5c4600;
    color: #fff8c5;
    border-left-color: #ffcc00;
  }
}
/* === FEATURED IMAGE VISIBILITY & RESIZE === */
.article-body .feat-image {
  display: none;
}

.article-body p.feat-image img {
  max-width: 921px;
  max-height: 518px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Heading anchor links */
.heading-anchor {
  margin-left: 0.5em;
  opacity: 0;
  transition: opacity 0.2s ease;
  color: var(--link-color, #1f73b7);
  padding: 0.25em;
  text-decoration: none;
  vertical-align: middle;
}

.heading-anchor:hover {
  color: var(--link-color-hover, #0d5a9e);
}

.heading-anchor svg {
  display: inline-block;
  vertical-align: middle;
}

/* Show on heading hover */
.article-body h2:hover .heading-anchor,
.article-body h3:hover .heading-anchor,
.article-body h4:hover .heading-anchor,
.heading-anchor:focus {
  opacity: 1;
}

/* Copied feedback */
.heading-anchor.copied::after {
  content: 'Copied!';
  margin-left: 0.5em;
  font-size: 12px;
  background: #68737d;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  vertical-align: middle;
  text-decoration: none;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .heading-anchor {
    color: #6db3f2;
  }
  .heading-anchor:hover {
    color: #9ecbf7;
  }
  .heading-anchor.copied::after {
    background: #87929d;
  }
}

/* ############### SECTIONS PAGE ############### */
.section-header {
  background: #4991D6 !important; /* image removed for Smith */
  /* background-position removed */
  /* background-size removed */
  padding: 50px 40px;
  width: 100%; 
  margin-bottom: 40px;
}
.section-header h1 {
  color: #fff;
}
.section-header .section-subscribe button:hover {
  background-color: #0A52A2;
  border: 1px solid #0A52A2;
}
.section-header .section-subscribe button {
    border: 1px solid rgb(255 255 255);
    color: rgb(255 255 255);
}
.section-container {
  display: flex;
  justify-content: flex-start;
}
.article-list-item a.article-list-link {
  color: rgba(26, 138, 195, 1);
  font-weight: 500;
  font-size: 18px;
}
li.article-list-item {
  padding: 26px;
  background: #f5f5f5;
  border-radius: 20px;
}
li.article-list-item.article-promoted svg {
    color: rgb(123 160 196 / 60%);
}
.article-read-more {
  background: #236a6d;
  padding: 6px 12px;
  color: #fff !important;
  border-radius: 15px;
  font-size: 12px;
}
.article-read-more:hover {
  background: #0A52A2;
  transition: all ease-in-out 0.5s;
  text-decoration: none;
}
.section-container ul.article-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
@media (min-width: 768px) {
.section-container .article-list-item {
  width: 31.6%;
}
}

/* ############### REQUESTS ############### */
header.my-activities-header h1 {
  margin-top: 40px;
}
.requests-table-toolbar .search input[type="search"] {
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(to right, #4ca1bc 0%, #409FC1 30%, #3196C2 34%, #1B8AC3 38%, #0981C5 66%, #264A82 95%, #264A82 100%) border-box !important;
  color: #757575 !important;
}
.requests-table-toolbar .search-icon {
  color: #757575;
  top: 52%;
}

/* ############### CATEGORIES TEMPLATE ############### */
@media (min-width: 1024px) {
  .category-content {
      flex: 0 0 100%;
  }
}
.category-container {
    li.article-list-item {
        padding: 0;
        background: transparent;
        border-radius: 0;
        margin-bottom: 10px;
    }
    h1 {
      margin-bottom: 30px;
    }
    h2.section-tree-title {
        font-size: 22px;
        margin-bottom: 8px;
    }
  a.see-all-articles {
    width: 100%;
    background: #236a6d;
    transition: all ease-in-out .5s;
  }
  a.see-all-articles:hover {
    opacity: .75;
    text-decoration: none;
  }
}
/* Limit number of articles to 3 */
.category-container .article-list li:nth-child(n+4) {
 display: none;
}

/* #################### REQUESTS PAGE #######################*/
.request-breadcrumbs {
    margin-top: 14px;
}

/* #################### USER PROFILE PAGE ############################ */
.split-button button {
    background-color: rgb(31 115 183);
    color: #ffffff !important;
    outline-color: rgb(31 115 183);
    transition: all ease-in-out .5s;
}
.split-button button:hover {
    opacity: .75;
}

/* #################### MOBILE ############################ */
.nav-wrapper-mobile .menu-button-mobile {
    color: #fff;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  display: none;
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
    background: #008dc4;
}

/*#################### CUSTOM FEATURE: Request Form Inline Note #################################################################*/

.request-note {
  background: #f7fafc;               /* light neutral background */
  border-left: 3px solid #1a8ac3;    /* subtle brand-colored accent */
  padding: 8px 12px;
  margin: 6px 0 10px;
  border-radius: 4px;
  font-size: 14px;
  color: #2f3941;
}

.request-note a {
  color: #1a8ac3;                    /* match brand link color */
  text-decoration: underline;
  font-weight: 500;
}

.request-note p {
  margin: 0;
  line-height: 1.5;
}

/*#################### CUSTOM FEATURE: Search Inline by Typing in Dropdowns #################################################################*/

/* Keyboard search highlighting inside Zendesk Nesty panels */
.nesty-panel li.kb-match {
  background-color: #fff6d6; /* subtle highlight for all matches */
}
.nesty-panel li.kb-focused {
  background-color: #ffe8a3; /* stronger highlight for focused match */
  outline: 1px dashed #c97a00;
}

/* ========================================
   COMPREHENSIVE DARK MODE IMPLEMENTATION
   Add this to the end of style.css
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ========== BASE STYLES ========== */
  body {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
  }
  
  .container,
  .error-page,
  main {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
  }
  
  /* ========== HEADINGS ========== */
  h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
  }
  
  /* ========== LINKS ========== */
  a {
    color: #4db8ff !important;
  }
  
  a:visited {
    color: #9d7dff !important;
  }
  
  a:hover, a:active, a:focus {
    color: #6ec6ff !important;
  }
  
  /* ========== FORMS & INPUTS ========== */
  input:not([type=checkbox]),
  textarea,
  select {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  input:focus,
  textarea:focus,
  select:focus {
    border-color: #4db8ff !important;
    background-color: #333333 !important;
  }
  
  input[disabled] {
    background-color: #3a3a3a !important;
    color: #888 !important;
  }
  
  input::placeholder,
  textarea::placeholder {
    color: #888 !important;
  }
  
  /* Fix all heading levels in form description CKEditor - both themes */
.ck-editor__editable h1,
.ck-editor__editable h2,
.ck-editor__editable h3 {
  color: #2f3941 !important;
}

@media (prefers-color-scheme: dark) {
  .ck-editor__editable h1,
  .ck-editor__editable h2,
  .ck-editor__editable h3 {
    color: #2f3941 !important;
  }
}
  
  /* Select dropdown arrow */
  select {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23888' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") !important;
  }
  
  /* ========== BUTTONS ========== */
  .button,
  .pagination-next-link,
  .pagination-prev-link,
  .pagination-first-link,
  .pagination-last-link,
  button {
    background-color: #2d2d2d !important;
    color: #4db8ff !important;
    border-color: #4db8ff !important;
  }
  
  .button:hover,
  button:hover {
    background-color: #3a3a3a !important;
    color: #6ec6ff !important;
  }
  
  .button-primary,
  .button[aria-selected="true"] {
    background-color: #0066cc !important;
    color: #ffffff !important;
  }
  
  /* ========== HEADER & NAVIGATION ========== */
  .header {
    background-color: #1f1f1f !important;
    border-bottom-color: #333 !important;
  }
  
  .header .logo-link,
  .header a {
    color: #e0e0e0 !important;
  }
  
  .nav-wrapper .menu-button {
    color: #e0e0e0 !important;
  }
  
  .nav-wrapper .dropdown-menu {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .nav-wrapper .dropdown-menu a {
    color: #e0e0e0 !important;
  }
  
  .nav-wrapper .dropdown-menu a:hover {
    background-color: #3a3a3a !important;
  }
  
  /* Mobile navigation */
  .nav-wrapper-mobile {
    background-color: #1f1f1f !important;
  }
  
  .nav-wrapper-mobile .menu-button-mobile {
    color: #e0e0e0 !important;
  }
  
  .nav-wrapper-mobile .menu-list-mobile {
    background-color: #2d2d2d !important;
  }
  
  /* ========== BREADCRUMBS ========== */
  .breadcrumbs {
    color: #b0b0b0 !important;
  }
  
  .breadcrumbs a {
    color: #4db8ff !important;
  }
  
  /* ========== SEARCH ========== */
  .search input[type="search"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  .search-icon {
    color: #888 !important;
  }
  
  /* ========== HOME PAGE ========== */
  .hero {
    background-color: #242424 !important;
  }
  
  .hero h1,
  .hero p {
    color: #ffffff !important;
  }
  
  .blocks {
    background-color: #1a1a1a !important;
  }
  
  .blocks-item {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .blocks-item:hover {
    background-color: #3a3a3a !important;
  }
  
  .blocks-item-title {
    color: #ffffff !important;
  }
  
  .blocks-item-description {
    color: #b0b0b0 !important;
  }
  
  /* ========== SECTION PAGE ========== */
  .section-header {
    background-color: #1f3a52 !important;
  }
  
  .section-header h1 {
    color: #ffffff !important;
  }
  
  .section-container {
    background-color: #1a1a1a !important;
  }
  
  li.article-list-item {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  li.article-list-item:hover {
    background-color: #3a3a3a !important;
  }
  
  .article-list-link {
    color: #4db8ff !important;
  }
  
  .article-list-item-description {
    color: #b0b0b0 !important;
  }
  
  .article-read-more {
    background-color: #0066cc !important;
    color: #ffffff !important;
  }
  
  .article-read-more:hover {
    background-color: #0A52A2 !important;
  }
  
  /* ========== CATEGORY PAGE ========== */
  .category-container {
    background-color: #1a1a1a !important;
  }
  
  .section-tree-title {
    color: #ffffff !important;
  }
  
  .see-all-articles {
    background-color: #0066cc !important;
    color: #ffffff !important;
  }
  
  /* ========== ARTICLE PAGE ========== */
  .article {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
  }
  
  .article-header {
    border-bottom-color: #333 !important;
  }
  
  .article-title {
    color: #ffffff !important;
  }
  
  .article-author,
  .article-meta {
    color: #b0b0b0 !important;
  }
  
  .article-sidebar {
    background-color: #242424 !important;
    border-color: #333 !important;
  }
  
  .sidenav-item {
    color: #e0e0e0 !important;
    border-bottom-color: #333 !important;
  }
  
  .sidenav-item:hover,
  .sidenav-item.current-article {
    background-color: #2d2d2d !important;
    color: #4db8ff !important;
  }
  
  .sidenav-title {
    color: #ffffff !important;
  }
  
  /* Article body content */
  .article-body {
    color: #e0e0e0 !important;
  }
  
  .article-body p,
  .article-body li,
  .article-body td,
  .article-body th {
    color: #e0e0e0 !important;
  }
  
  .article-body strong,
  .article-body b {
    color: #ffffff !important;
  }
  
  /* Code blocks */
  .article-body pre,
  .article-body code {
    background-color: #2d2d2d !important;
    color: #f0f0f0 !important;
    border-color: #454545 !important;
  }
  
  /* Horizontal rules */
  .article-body hr {
    border-color: #454545 !important;
  }
  
  /* ========== ARTICLE INLINE STYLES (Critical for custom HTML) ========== */
  
  /* Override inline background colors for divs and spans */
  .article-body div[style*="background"],
  .article-body span[style*="background"],
  .article-body p[style*="background"] {
    background-color: #2d2d2d !important;
  }
  
  /* Override inline text colors */
  .article-body div[style*="color"],
  .article-body span[style*="color"],
  .article-body p[style*="color"],
  .article-body h1[style*="color"],
  .article-body h2[style*="color"],
  .article-body h3[style*="color"],
  .article-body h4[style*="color"] {
    color: #e0e0e0 !important;
  }
  
  /* Gradient backgrounds (for hero sections) */
  .article-body div[style*="linear-gradient"],
  .article-body div[style*="gradient"] {
    background: linear-gradient(135deg, #050A51 0%, #1F94D3 100%);
  }
  
  /* Tables with inline styles */
  .article-body table,
  .article-body table[style] {
    border-color: #454545 !important;
  }
  
  .article-body th,
  .article-body td,
  .article-body th[style],
  .article-body td[style] {
    border-color: #454545 !important;
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
  }
  
  .article-body thead th,
  .article-body thead th[style] {
    background-color: #1a4d7a !important;
    color: #ffffff !important;
  }
  
  .article-body tr[style*="background-color"] {
    background-color: #242424 !important;
  }
  
  .article-body tbody tr:nth-child(even) {
    background-color: #242424 !important;
  }
  
  /* Colored boxes and containers */
  .article-body div[style*="#e3f2fd"],
  .article-body div[style*="#e8f5e9"],
  .article-body div[style*="#f5f7fa"],
  .article-body div[style*="#fff3e0"],
  .article-body div[style*="background: #f"] {
    background-color: #2d3d4d !important;
    border-color: #4db8ff !important;
  }
  
  /* Special styled sections */
  .article-body .intro-note,
  .article-body .closing-cta {
    background-color: #2d2d2d !important;
  }
  
  /* Figures and images containers */
  .article-body figure {
    background-color: transparent !important;
  }
  
  /* ========== BLOCKQUOTES (Enhanced) ========== */
  .article-body blockquote {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-left-color: #666 !important;
  }
  
  /* All blockquote variants already handled in existing CSS (lines 5432-5485) */
  /* But let's add overrides for any inline styles */
  .article-body blockquote[style*="background"] {
    background-color: #2d2d2d !important;
  }
  
  .article-body blockquote[style*="border-left"] {
    border-left-color: #4db8ff !important;
  }
  
  /* ========== TABLES (General) ========== */
  table {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  thead {
    background-color: #1f1f1f !important;
  }
  
  th {
    background-color: #1a4d7a !important;
    color: #ffffff !important;
    border-color: #454545 !important;
  }
  
  td {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  tbody tr:nth-child(even) td {
    background-color: #242424 !important;
  }
  
  /* ========== REQUESTS PAGE ========== */
  .requests-table {
    background-color: #2d2d2d !important;
  }
  
  .requests-table th {
    background-color: #1f1f1f !important;
    color: #ffffff !important;
    border-bottom-color: #454545 !important;
  }
  
  .requests-table td {
    border-bottom-color: #333 !important;
  }
  
  .requests-table tr:hover {
    background-color: #3a3a3a !important;
  }
  
  .request-status {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
  }
  
  .request-id {
    color: #4db8ff !important;
  }
  
  /* ========== REQUEST PAGE (Single Request) ========== */
  .request-container {
    background-color: #2d2d2d !important;
  }
  
  .request-header {
    background-color: #242424 !important;
    border-bottom-color: #333 !important;
  }
  
  .request-title {
    color: #ffffff !important;
  }
  
  .status-label {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
  }
  
  /* Request comments */
  .comment {
    background-color: #242424 !important;
    border-color: #333 !important;
  }
  
  .comment:hover {
    background-color: #2d2d2d !important;
  }
  
  .comment-body {
    color: #e0e0e0 !important;
  }
  
  .comment-info {
    border-bottom-color: #333 !important;
  }
  
  /* Request form */
  .request-form {
    background-color: #2d2d2d !important;
  }
  
  .form-field label {
    color: #e0e0e0 !important;
  }
  
  .request-note {
    background-color: #2d3d4d !important;
    color: #e0e0e0 !important;
    border-left-color: #4db8ff !important;
  }
  
  /* ========== FOOTER ========== */
  .footer {
    background-color: #1f2937 !important;  /* Dark slate grey */
    background-image: none !important;
    border-top-color: #374151 !important;
    color: #e5e7eb !important;
  }
  
  .footer .ebm-footer-info p,
  .footer .ebm-footer-info a {
    color: #e5e7eb !important;  /* Light grey text in dark mode */
  }
  
  .footer .ebm-footer-info a:hover {
    color: #93c5fd !important;  /* Light blue on hover */
  }
  
  .footer h2,
  .footer h3 {
    color: #ffffff !important;
  }
  
  /* ========== PAGINATION ========== */
  .pagination {
    background-color: transparent !important;
  }
  
  .pagination-item {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .pagination-item:hover,
  .pagination-item.current {
    background-color: #3a3a3a !important;
  }
  
  /* ========== DROPDOWNS ========== */
  .dropdown-menu {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  }
  
  .dropdown-menu a {
    color: #e0e0e0 !important;
  }
  
  .dropdown-menu a:hover {
    background-color: #3a3a3a !important;
  }
  
  /* ========== LABELS & BADGES ========== */
  .label,
  .badge {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
  }
  
  .label-primary {
    background-color: #0066cc !important;
    color: #ffffff !important;
  }
  
  /* ========== AVATARS ========== */
  .avatar {
    background-color: #3a3a3a !important;
  }
  
  .user-avatar {
    border-color: #454545 !important;
  }
  
  /* ========== NOTIFICATIONS & ALERTS ========== */
  .notification,
  .alert {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
    color: #e0e0e0 !important;
  }
  
  .notification-success {
    background-color: #1a3d2d !important;
    border-color: #2d6d4d !important;
  }
  
  .notification-error {
    background-color: #4d1a1a !important;
    border-color: #7d2d2d !important;
  }
  
  .notification-info {
    background-color: #1a2d4d !important;
    border-color: #2d4d7d !important;
  }
  
  /* ========== ICONS ========== */
  svg {
    color: inherit !important;
  }
  
  .icon-lock,
  .icon-agent {
    color: #b0b0b0 !important;
  }
  
  /* ========== LOADING & SPINNER ========== */
  .loading {
    background-color: #2d2d2d !important;
  }
  
  .spinner {
    border-color: #454545 !important;
    border-top-color: #4db8ff !important;
  }
  
  /* ========== TOOLTIPS ========== */
  .tooltip {
    background-color: #1f1f1f !important;
    color: #e0e0e0 !important;
    border: 1px solid #454545 !important;
  }
  
  /* ========== COMMUNITY / FORUMS ========== */
  .community-post,
  .community-topic {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .community-post:hover,
  .community-topic:hover {
    background-color: #3a3a3a !important;
  }
  
  .community-badge {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
  }
  
  /* ========== VOTES ========== */
  .article-votes {
    background-color: #242424 !important;
    border-color: #333 !important;
  }
  
  .article-vote {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .article-vote:hover {
    background-color: #3a3a3a !important;
  }
  
  /* ========== SUBSCRIPTIONS ========== */
  .subscriptions-list {
    background-color: #2d2d2d !important;
  }
  
  .subscriptions-list-item {
    border-bottom-color: #333 !important;
  }
  
  .subscriptions-list-item:hover {
    background-color: #3a3a3a !important;
  }
  
  /* ========== CONTRIBUTIONS PAGE ========== */
  .contributions-header {
    background-color: #242424 !important;
    border-bottom-color: #333 !important;
  }
  
  .contributions-nav {
    background-color: #2d2d2d !important;
  }
  
  .contributions-nav a {
    color: #4db8ff !important;
  }
  
  .contributions-nav a.active {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
  }
  
  /* ========== USER PROFILE ========== */
  .profile-header {
    background-color: #242424 !important;
    border-bottom-color: #333 !important;
  }
  
  .profile-card {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .profile-info {
    color: #e0e0e0 !important;
  }
  
  .profile-stats {
    background-color: #242424 !important;
  }
  
  .profile-stat-value {
    color: #ffffff !important;
  }
  
  /* ========== SEARCH RESULTS ========== */
  .search-results {
    background-color: #1a1a1a !important;
  }
  
  .search-result-item {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .search-result-item:hover {
    background-color: #3a3a3a !important;
  }
  
  .search-result-title {
    color: #4db8ff !important;
  }
  
  .search-result-description {
    color: #b0b0b0 !important;
  }
  
  .search-result-breadcrumbs {
    color: #888 !important;
  }
  
  /* ========== ERROR PAGE ========== */
  .error-page {
    background-color: #1a1a1a !important;
  }
  
  .error-page h1,
  .error-page h2 {
    color: #ffffff !important;
  }
  
  /* ========== COLLAPSIBLE SIDEBAR ========== */
  .collapsible-sidebar {
    background-color: #242424 !important;
    border-color: #333 !important;
  }
  
  .collapsible-sidebar-toggle {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
  }
  
  .collapsible-sidebar-toggle:hover {
    background-color: #3a3a3a !important;
  }
  
  /* ========== ATTACHMENTS ========== */
  .attachment-item {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .attachment-item:hover {
    background-color: #3a3a3a !important;
  }
  
  .attachment-icon {
    color: #b0b0b0 !important;
  }
  
  /* ========== NESTY PANELS (Dropdown search) ========== */
  .nesty-panel {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .nesty-panel li {
    color: #e0e0e0 !important;
  }
  
  .nesty-panel li:hover {
    background-color: #3a3a3a !important;
  }
  
  .nesty-panel li.kb-match {
    background-color: #3d3d2d !important;
  }
  
  .nesty-panel li.kb-focused {
    background-color: #4d4d2d !important;
    outline-color: #d4a574 !important;
  }
  
  /* ========== CONTAINER DIVIDERS ========== */
  .container-divider {
    border-top-color: #333 !important;
  }
  
  /* ========== SHADOWS ========== */
  .shadow,
  .box-shadow,
  [class*="shadow"] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  }
  
  /* ========== SPECIAL OVERRIDES FOR INLINE STYLES ========== */
  
  /* White text on colored backgrounds needs special handling */
  .article-body div[style*="color: white"],
  .article-body div[style*="color:#fff"],
  .article-body div[style*="color: #fff"],
  .article-body h1[style*="color: white"],
  .article-body h2[style*="color: white"],
  .article-body h3[style*="color: white"],
  .article-body h4[style*="color: white"],
  .article-body p[style*="color: white"] {
    color: #ffffff !important;
  }
  
  /* Preserve white backgrounds that are intentional */
  .article-body div[style*="background: white"],
  .article-body div[style*="background:#fff"],
  .article-body div[style*="background: #fff"] {
    background-color: #2d2d2d !important;
  }
  
  /* Border colors */
  .article-body div[style*="border"],
  .article-body table[style*="border"] {
    border-color: #454545 !important;
  }
  
  /* ========== IMAGES ========== */
  
  /* Reduce brightness for images in dark mode */
  .article-body img {
    opacity: 0.9;
  }
  
  /* Keep logos and icons at full brightness */
  .logo img,
  .icon img,
  .avatar img {
    opacity: 1 !important;
  }
  
  /* ========== ACCESSIBILITY ========== */
  
  /* Focus indicators */
  *:focus {
    outline-color: #4db8ff !important;
  }
  
  /* Selection highlight */
  ::selection {
    background-color: #4db8ff !important;
    color: #ffffff !important;
  }
  
  ::-moz-selection {
    background-color: #4db8ff !important;
    color: #ffffff !important;
  }
  
  /* ========== SCROLLBARS (Webkit browsers) ========== */
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }
  
  ::-webkit-scrollbar-track {
    background: #1a1a1a;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #454545;
    border-radius: 6px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #555555;
  }
  
  /* ========== PRINT STYLES (Revert to light mode for printing) ========== */
  @media print {
    body,
    .container,
    .article-body {
      background-color: white !important;
      color: black !important;
    }
    
    a {
      color: #0066cc !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
      color: black !important;
    }
  }
  
}

/* ========== END DARK MODE ========== */

/* ========================================
   DARK MODE FIXES - Add after the main dark mode CSS
   Addresses: Article titles, header disconnect, profile page white bar
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== FIX 1: ARTICLE TITLE VISIBILITY ===== */
  /* Make sure article header has dark background so white title is visible */
  
  .article-header,
  .article .article-header {
    background-color: #1a1a1a !important;
  }
  
  /* Ensure article title is always visible */
  .article-title,
  .article .article-title,
  .article-header .article-title,
  h1.article-title {
    color: #ffffff !important;
    background-color: transparent !important;
  }
  
  /* Article header wrapper - ensure no light backgrounds */
  .article-header-wrapper,
  .article-info,
  header.article-header {
    background-color: #1a1a1a !important;
  }
  
  
  /* ===== FIX 2: HEADER BAR - SMOOTH TRANSITION ===== */
  /* Keep the teal header (brand color) but ensure smooth visual flow */
  
  /* Main header - keep teal but slightly darker for consistency */
  .header,
  header.header,
  .header-wrapper {
    background-color: #012251 !important; /* Ontario navy */
    border-bottom: 1px solid #1a1a1a !important;
  }
  
  /* Alternative: If you prefer all-black header, uncomment below and comment above */
  /*
  .header,
  header.header,
  .header-wrapper {
    background-color: #1a1a1a !important;
    border-bottom: 1px solid #333 !important;
  }
  */
  
  /* Header inner elements */
  .header .container,
  .header-inner {
    background-color: transparent !important;
  }
  
  /* Navigation area directly under header */
  .sub-nav,
  .breadcrumbs-container,
  nav[aria-label="Current location"] {
    background-color: #1a1a1a !important;
    padding-top: 10px;
  }
  
  /* Remove any white gaps */
  body > header,
  body > .header {
    margin-bottom: 0 !important;
  }
  
  main,
  body > main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  
  /* ===== FIX 3: PROFILE PAGE WHITE BAR ===== */
  /* Fix the white bar behind Contributions/Following tabs */
  
  /* Activities header (the white bar area) */
  .my-activities-header,
  header.my-activities-header,
  .activities-header {
    background-color: #1a1a1a !important;
  }
  
  /* Profile navigation tabs */
  .profile-nav,
  .my-activities-nav,
  .activities-nav {
    background-color: #1a1a1a !important;
    border-bottom-color: #333 !important;
  }
  
  /* Individual tab items */
  .profile-nav a,
  .my-activities-nav a,
  .activities-nav a {
    background-color: transparent !important;
    color: #4db8ff !important;
    border-bottom: 2px solid transparent !important;
  }
  
  .profile-nav a:hover,
  .my-activities-nav a:hover,
  .activities-nav a:hover {
    background-color: #2d2d2d !important;
    border-bottom-color: #4db8ff !important;
  }
  
  .profile-nav a.active,
  .my-activities-nav a.active,
  .activities-nav a.active,
  .profile-nav a[aria-selected="true"],
  .my-activities-nav a[aria-selected="true"],
  .activities-nav a[aria-selected="true"] {
    color: #ffffff !important;
    border-bottom-color: #4db8ff !important;
    background-color: #2d2d2d !important;
  }
  
  /* Contributions page specific */
  .contributions-header,
  .subscriptions-header {
    background-color: #1a1a1a !important;
  }
  
  /* Remove any white backgrounds in profile area */
  .profile-header,
  .my-activities,
  .contributions,
  .subscriptions {
    background-color: #1a1a1a !important;
  }
  
  /* Profile page container */
  .profile-container,
  .my-activities-container {
    background-color: #1a1a1a !important;
  }
  
  
  /* ===== ADDITIONAL SAFETY FIXES ===== */
  /* Catch any other potential white backgrounds */
  
/* Ensure no white backgrounds anywhere */
section[class*="header"],
div[class*="header"]:not([class*="article-header"]):not(.header-inner) {
  background-color: #1a1a1a !important;
}
  
  /* Article container should be fully dark */
  .article-container,
  .article-wrapper {
    background-color: #1a1a1a !important;
  }
  
  /* Search container in header area */
  .search-container {
    background-color: transparent !important;
  }
  
  /* Ensure sidebar has no light backgrounds */
  .article-sidebar,
  aside.article-sidebar {
    background-color: #242424 !important;
  }
  
  /* Tab/nav lists should blend with dark background */
  nav ul,
  .nav-list,
  [role="navigation"] ul {
    background-color: transparent !important;
  }
  
  /* Fix any light-colored backgrounds on navigation items */
  nav li,
  .nav-item {
    background-color: transparent !important;
  }
  
  nav li:hover,
  .nav-item:hover {
    background-color: #2d2d2d !important;
  }
  
}

/* ========== END FIXES ========== */

/* ========================================
   DROPDOWN MENU FIXES - Add after previous fixes
   Addresses: Menu text contrast, black boxes, hover readability
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== FIX 1: DROPDOWN MENU TEXT VISIBILITY ===== */
  /* Make dropdown menu items clearly readable */
  
  /* Topics dropdown and all dropdown menus */
  .dropdown-menu,
  .nav-wrapper .dropdown-menu,
  [role="menu"],
  .menu-dropdown {
    background-color: #ffffff !important; /* Keep light background for readability */
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Dropdown menu items - DARK TEXT on LIGHT background */
  .dropdown-menu a,
  .nav-wrapper .dropdown-menu a,
  [role="menu"] a,
  [role="menuitem"],
  .dropdown-menu li,
  .menu-dropdown a {
    color: #333333 !important; /* Dark gray text for contrast */
    background-color: transparent !important;
  }
  
  /* Dropdown hover state - light gray background, keep dark text */
  .dropdown-menu a:hover,
  .nav-wrapper .dropdown-menu a:hover,
  [role="menu"] a:hover,
  [role="menuitem"]:hover,
  .dropdown-menu li:hover,
  .menu-dropdown a:hover {
    background-color: #f5f5f5 !important; /* Light gray hover */
    color: #000000 !important; /* Black text on hover */
  }
  
  /* Active/selected dropdown items */
  .dropdown-menu a:active,
  .dropdown-menu a[aria-checked="true"],
  .dropdown-menu .active {
    background-color: #e8f4f8 !important;
    color: #0066cc !important;
  }
  
  
  /* ===== FIX 2: REMOVE BLACK BOXES AROUND DROPDOWNS ===== */
  /* Remove unwanted black backgrounds */
  
  /* Dropdown toggle buttons (Topics, Profile name) */
  .dropdown-toggle,
  .nav-wrapper .dropdown-toggle,
  button.dropdown-toggle {
    background-color: transparent !important;
  }
  
  /* Dropdown containers - no black boxes */
  .dropdown,
  .nav-wrapper .dropdown,
  nav .dropdown {
    background-color: transparent !important;
  }
  
  /* Remove any wrapper backgrounds */
  .dropdown-wrapper,
  .menu-wrapper {
    background-color: transparent !important;
  }
  
  
  /* ===== FIX 3: PROFILE DROPDOWN SPECIFIC ===== */
  /* Fix the user profile dropdown menu */
  
  /* Profile dropdown menu */
  .user-nav .dropdown-menu,
  [aria-labelledby*="user"],
  .profile-dropdown .dropdown-menu {
    background-color: #ffffff !important;
    color: #333333 !important;
  }
  
  /* Profile menu items */
  .user-nav .dropdown-menu a,
  .profile-dropdown .dropdown-menu a {
    color: #333333 !important;
    background-color: transparent !important;
  }
  
  /* Profile menu hover - readable */
  .user-nav .dropdown-menu a:hover,
  .profile-dropdown .dropdown-menu a:hover {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
  }
  
  
  /* ===== FIX 4: NAVIGATION ITEMS CONSISTENCY ===== */
  /* Make sure all top nav items look consistent */
  
  /* Top navigation links (Community, Topics, Submit a request) */
  .header .nav-link,
  .nav-wrapper .nav-link,
  header nav a {
    background-color: transparent !important;
  }
  
  /* Keep header text white/light for visibility on teal */
  .header a,
  .header button,
  .nav-wrapper a,
  .nav-wrapper button {
    color: #ffffff !important;
  }
  
  .header a:hover,
  .header button:hover,
  .nav-wrapper a:hover,
  .nav-wrapper button:hover {
    color: #e0e0e0 !important;
  }
  
  
  /* ===== FIX 5: CHEVRON ICONS IN DROPDOWNS ===== */
  /* Ensure dropdown arrows are visible */
  
  .dropdown-toggle svg,
  .dropdown-chevron-icon,
  .chevron-icon {
    color: currentColor !important;
  }
  
  
  /* ===== FIX 6: MOBILE DROPDOWN MENUS ===== */
  /* Fix mobile navigation dropdowns */
  
  @media (max-width: 768px) {
    .menu-list-mobile .dropdown-menu,
    .mobile-nav .dropdown-menu {
      background-color: #ffffff !important;
    }
    
    .menu-list-mobile .dropdown-menu a,
    .mobile-nav .dropdown-menu a {
      color: #333333 !important;
    }
    
    .menu-list-mobile .dropdown-menu a:hover,
    .mobile-nav .dropdown-menu a:hover {
      background-color: #f5f5f5 !important;
      color: #000000 !important;
    }
  }
  
  
  /* ===== FIX 7: SEARCH DROPDOWN (if applicable) ===== */
  /* Fix search suggestions dropdown */
  
  .search-results-dropdown,
  .search-dropdown {
    background-color: #ffffff !important;
  }
  
  .search-results-dropdown a,
  .search-dropdown a {
    color: #333333 !important;
  }
  
  .search-results-dropdown a:hover,
  .search-dropdown a:hover {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
  }
  
  
  /* ===== FIX 8: ENSURE DROPDOWN POSITIONING ===== */
  /* Make sure dropdowns appear correctly */
  
  .dropdown-menu {
    position: absolute !important;
    z-index: 1000 !important;
  }
  
  /* Remove any dark overlays */
  .dropdown-backdrop,
  .dropdown-overlay {
    display: none !important;
  }
  
}

/* ========== END DROPDOWN FIXES ========== */

/* ========================================
   CUSTOM TOPICS DROPDOWN FIXES - Add after previous dropdown fixes
   Targets the .cat-dropdown custom menu structure
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== FIX 1: REMOVE BLACK BACKGROUND FROM TOPICS BUTTON ===== */
  
  /* Topics button - should be transparent like other nav items */
  .cat-dropdown-btn,
  button.cat-dropdown-btn {
    background-color: transparent !important;
    color: #ffffff !important; /* White text to match other header items */
    border: none !important;
  }
  
  /* Topics button hover */
  .cat-dropdown-btn:hover,
  button.cat-dropdown-btn:hover {
    background-color: transparent !important;
    color: #e0e0e0 !important;
  }
  
  /* Topics dropdown container */
  .cat-dropdown {
    background-color: transparent !important;
  }
  
  
  /* ===== FIX 2: MAKE DROPDOWN MENU ITEMS VISIBLE ===== */
  
  /* Topics dropdown content - LIGHT background for readability */
  .cat-dropdown-content,
  .cat-dropdown-content.show {
    background-color: #ffffff !important; /* White background */
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Topics dropdown links - DARK text, always visible */
  .cat-dropdown-content a,
  .cat-dropdown-content.show a {
    color: #333333 !important; /* Dark gray text - always visible */
    background-color: transparent !important;
    display: block !important;
    padding: 10px 16px !important;
    text-decoration: none !important;
    opacity: 1 !important; /* Ensure links are always visible */
    visibility: visible !important;
  }
  
  
  /* ===== FIX 3: READABLE HOVER STATES ===== */
  
  /* Topics dropdown hover - LIGHT gray with DARK text */
  .cat-dropdown-content a:hover,
  .cat-dropdown-content.show a:hover {
    background-color: #f5f5f5 !important; /* Light gray hover */
    color: #000000 !important; /* Black text for maximum contrast */
    text-decoration: none !important;
  }
  
  /* Active/focus states */
  .cat-dropdown-content a:active,
  .cat-dropdown-content a:focus,
  .cat-dropdown-content.show a:active,
  .cat-dropdown-content.show a:focus {
    background-color: #e8f4f8 !important;
    color: #0066cc !important;
  }
  
  
  /* ===== FIX 4: ENSURE TEXT IS NEVER HIDDEN ===== */
  
  /* Override any opacity or visibility rules */
  .cat-dropdown-content a,
  .cat-dropdown-content a span,
  .cat-dropdown-content a *,
  .cat-dropdown-content.show a,
  .cat-dropdown-content.show a span,
  .cat-dropdown-content.show a * {
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
  }
  
  /* Ensure no color: transparent or similar issues */
  .cat-dropdown-content {
    color: #333333 !important;
  }
  
  
  /* ===== FIX 5: DROPDOWN POSITIONING & DISPLAY ===== */
  
  /* Make sure dropdown appears correctly */
  .cat-dropdown-content {
    position: absolute !important;
    z-index: 1000 !important;
    min-width: 200px !important;
  }
  
  /* Show dropdown when open */
  .cat-dropdown-content.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  
  /* ===== FIX 6: CONSISTENCY WITH OTHER NAV ITEMS ===== */
  
  /* Make sure Topics button looks like other nav items */
  .header .cat-dropdown-btn,
  .nav-wrapper .cat-dropdown-btn {
    font-weight: normal !important;
    font-size: inherit !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
  }
  
  /* Chevron icon in Topics button */
  .cat-dropdown-btn svg,
  .cat-dropdown-btn .dropdown-chevron-icon {
    color: #ffffff !important; /* White to match button text */
  }
  
  .cat-dropdown-btn:hover svg,
  .cat-dropdown-btn:hover .dropdown-chevron-icon {
    color: #e0e0e0 !important;
  }
  
  
  /* ===== FIX 7: MOBILE RESPONSIVENESS ===== */
  
  @media (max-width: 768px) {
    .cat-dropdown-content {
      width: 100% !important;
      left: 0 !important;
      right: 0 !important;
    }
    
    .cat-dropdown-content a {
      padding: 12px 16px !important;
      font-size: 14px !important;
    }
  }
  
}

/* ========== END CUSTOM TOPICS DROPDOWN FIXES ========== */

/* ========================================
   USER PROFILE DROPDOWN FIX v2 - PRECISE TARGETING
   Targets a[role="menuitem"] in profile dropdown
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== FIX: TARGET MENU ITEMS BY ROLE ATTRIBUTE ===== */
  
  /* All menu items with role="menuitem" in dropdown */
  a[role="menuitem"],
  [role="menuitem"] {
    color: #333333 !important; /* Dark gray text - ALWAYS visible */
    background-color: transparent !important;
    display: block !important;
    padding: 10px 16px !important;
    text-decoration: none !important;
    opacity: 1 !important; /* Force visibility */
    visibility: visible !important; /* Force visibility */
  }
  
  /* Hover state for menuitem links */
  a[role="menuitem"]:hover,
  [role="menuitem"]:hover {
    background-color: #f5f5f5 !important; /* Light gray hover */
    color: #000000 !important; /* Black text for contrast */
    text-decoration: none !important;
  }
  
  /* Focus state for accessibility */
  a[role="menuitem"]:focus,
  [role="menuitem"]:focus {
    background-color: #e8f4f8 !important;
    color: #0066cc !important;
    outline: 2px solid #0066cc !important;
  }
  
  
  /* ===== TARGET SPECIFIC MENU ITEMS ===== */
  
  /* Profile link */
  a[role="menuitem"][href*="/profiles/"],
  a[role="menuitem"][href*="profiles"] {
    color: #333333 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Requests link */
  a[role="menuitem"][href*="/requests"],
  a[role="menuitem"].requests-link,
  .requests-link {
    color: #333333 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Activities link */
  a[role="menuitem"][href*="/contributions"],
  a[role="menuitem"][href*="contributions/posts"] {
    color: #333333 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  
  /* ===== ENSURE PARENT DROPDOWN IS LIGHT ===== */
  
  /* Target dropdown menu containing role="menuitem" items */
  .dropdown-menu:has(a[role="menuitem"]),
  [role="menu"]:has(a[role="menuitem"]),
  div:has(> a[role="menuitem"]) {
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Fallback for browsers that don't support :has() */
  .dropdown-menu,
  [role="menu"] {
    background-color: #ffffff !important;
  }
  
  
  /* ===== FORCE ALL TEXT CONTENT TO BE VISIBLE ===== */
  
  /* Ensure all text within menuitem links is visible */
  a[role="menuitem"] *,
  [role="menuitem"] * {
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Override any potential color: transparent or white */
  a[role="menuitem"],
  a[role="menuitem"]:link,
  a[role="menuitem"]:visited {
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
  }
  
  /* Hover override */
  a[role="menuitem"]:hover,
  a[role="menuitem"]:hover * {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
  }
  
  
  /* ===== REMOVE ANY HIDING MECHANISMS ===== */
  
  /* Remove display: none or visibility: hidden */
  a[role="menuitem"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
  }
  
  /* Ensure no clip-path or clip hiding */
  a[role="menuitem"],
  [role="menuitem"] {
    clip-path: none !important;
    clip: auto !important;
  }
  
  
  /* ===== DROPDOWN POSITIONING ===== */
  
  /* Ensure dropdown menu is visible and positioned correctly */
  .dropdown-menu:has(a[role="menuitem"]) {
    position: absolute !important;
    z-index: 1000 !important;
    min-width: 160px !important;
    display: block !important;
  }
  
  /* When dropdown is shown */
  .dropdown-menu.show,
  .dropdown-menu[style*="display: block"] {
    background-color: #ffffff !important;
  }
  
  
  /* ===== SPECIFICITY OVERRIDES ===== */
  
  /* Maximum specificity for stubborn styles */
  .header a[role="menuitem"],
  .nav-wrapper a[role="menuitem"],
  header a[role="menuitem"],
  nav a[role="menuitem"] {
    color: #333333 !important;
    background-color: transparent !important;
  }
  
  .header a[role="menuitem"]:hover,
  .nav-wrapper a[role="menuitem"]:hover,
  header a[role="menuitem"]:hover,
  nav a[role="menuitem"]:hover {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
  }
  
  /* Target within any dropdown container */
  .dropdown a[role="menuitem"],
  [class*="dropdown"] a[role="menuitem"] {
    color: #333333 !important;
  }
  
  .dropdown a[role="menuitem"]:hover,
  [class*="dropdown"] a[role="menuitem"]:hover {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
  }
  
  
  /* ===== MOBILE RESPONSIVE ===== */
  
  @media (max-width: 768px) {
    a[role="menuitem"] {
      padding: 12px 16px !important;
      font-size: 14px !important;
    }
  }
  
}

/* ========== END USER PROFILE DROPDOWN FIX v2 ========== */

/* ========================================
   ADDITIONAL DARK MODE FIXES - Round 6
   Add after all previous dark mode CSS
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== FIX 1: PROFILE PAGE ACTIVITY TEXT ===== */
  /* Make activity/contribution text more visible */
  
  .profile-contribution-body,
  .profile-activity-body,
  .activity-body {
    color: #e0e0e0 !important; /* Light grey for readability */
  }
  
  /* Profile contribution items */
  .profile-contribution,
  .profile-activity-item {
    color: #e0e0e0 !important;
  }
  
  /* Any paragraphs in profile sections */
  .profile-section p,
  .activity-section p {
    color: #e0e0e0 !important;
  }
  
  
  /* ===== FIX 2: PROFILE DROPDOWN - REMOVE ALWAYS-VISIBLE BUG ===== */
  /* Fix the dropdown that stays open all the time */
  
  /* CRITICAL: Remove the display: block that was forcing it to always show */
  .dropdown-menu:has(a[role="menuitem"]) {
    display: none !important; /* Hidden by default */
  }
  
  /* ONLY show when it has the .show class */
  .dropdown-menu.show:has(a[role="menuitem"]),
  .dropdown-menu[aria-expanded="true"]:has(a[role="menuitem"]) {
    display: block !important; /* Only visible when open */
  }
  
  /* Alternative targeting for the specific dropdown */
  div[role="menu"].dropdown-menu {
    display: none !important; /* Hidden by default */
  }
  
  div[role="menu"].dropdown-menu.show,
  div[role="menu"].dropdown-menu[aria-expanded="true"] {
    display: block !important; /* Only visible when open */
  }
  
  
  /* ===== FIX 3: MY REQUESTS PAGE - SORTABLE COLUMN HEADERS ===== */
  /* Make "Created" and "Last activity" headers more visible */
  
  /* Sortable column headers */
  .requests-link,
  a.requests-link {
    color: #4db8ff !important; /* Bright blue for visibility */
  }
  
  .requests-link:hover,
  a.requests-link:hover {
    color: #6ec6ff !important; /* Lighter blue on hover */
  }
  
  /* Sort symbol (arrow) */
  .requests-sort-symbol {
    color: #4db8ff !important;
  }
  
  /* Table headers in requests page */
  .requests-table th a {
    color: #4db8ff !important;
  }
  
  
  /* ===== FIX 4: FORM EMAIL PILLS - TEXT VISIBILITY ===== */
  /* Make entered email addresses readable */
  
  /* Email pill container */
  li[data-hc-pill="true"],
  [data-hc-pill="true"] {
    background-color: #3a3a3a !important;
    border-color: #555 !important;
  }
  
  /* Email text inside pill */
  li[data-hc-pill="true"] span,
  [data-hc-pill="true"] span {
    color: #ffffff !important; /* White text */
  }
  
  /* Pills container */
  ul[data-hc-pills-container="true"],
  [data-hc-pills-container="true"] {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  /* Input field inside pills */
  ul[data-hc-pills-container] input[type="text"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border: none !important;
  }
  
  
  /* ===== FIX 5: FORM DESCRIPTION TEXT - HINTS AND LABELS ===== */
  /* Make all form helper text more visible */
  
  /* Hint text (paragraphs with *_hint id) */
  p[id*="_hint"],
  .hint,
  .form-hint,
  .field-hint {
    color: #b0b0b0 !important; /* Light grey for helper text */
  }
  
  /* Form labels */
  .form-field label,
  label {
    color: #e0e0e0 !important; /* Bright for labels */
  }
  
  /* Required field indicators */
  .required,
  abbr[title="required"] {
    color: #ff6b6b !important;
  }
  
  /* Form descriptions and instructions */
  .form-description,
  .field-description,
  .form-instructions {
    color: #b0b0b0 !important;
  }
  
  
  /* ===== FIX 6: DROPDOWN MENU SELECTIONS (NESTY) ===== */
  /* Make dropdown options visible before hover */
  
  /* Nesty input (dropdown trigger) */
  .nesty-input,
  a.nesty-input {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  .nesty-input:hover,
  a.nesty-input:hover {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
  }
  
  /* Nesty panel (dropdown menu) */
  .nesty-panel {
    background-color: #ffffff !important; /* Light background for readability */
    border-color: #ddd !important;
  }
  
  /* Nesty options - ALWAYS VISIBLE */
  .nesty-panel li,
  .nesty-panel a,
  .nesty-panel div {
    color: #333333 !important; /* Dark text on light background */
    background-color: transparent !important;
  }
  
  /* Nesty hover state */
  .nesty-panel li:hover,
  .nesty-panel a:hover {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
  }
  
  /* Nesty focused/selected item */
  .nesty-panel li.kb-focused,
  .nesty-panel li[aria-selected="true"] {
    background-color: #e8f4f8 !important;
    color: #0066cc !important;
  }
  
  /* Ensure nesty items are visible */
  .nesty-panel li,
  .nesty-panel div {
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  
  /* ===== ADDITIONAL FORM FIXES ===== */
  /* Catch any other form elements that might be hard to read */
  
  /* All form inputs */
  .request-form input:not([type="checkbox"]):not([type="radio"]),
  .request-form textarea,
  .request-form select {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  /* Form input focus state */
  .request-form input:focus,
  .request-form textarea:focus,
  .request-form select:focus {
    background-color: #333333 !important;
    border-color: #4db8ff !important;
  }
  
  /* Placeholder text */
  .request-form input::placeholder,
  .request-form textarea::placeholder {
    color: #888 !important;
  }
  
  /* Form field wrappers */
  .form-field {
    background-color: transparent !important;
  }
  
  /* Error messages */
  .error-message,
  .field-error,
  [id*="_error"] {
    color: #ff6b6b !important;
  }
  
  
  /* ===== PROFILE PAGE ADDITIONAL FIXES ===== */
  /* Ensure all profile text is readable */
  
  /* Activity items */
  .activity-item,
  .contribution-item {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .activity-item:hover,
  .contribution-item:hover {
    background-color: #3a3a3a !important;
  }
  
  /* Activity timestamps */
  .activity-timestamp,
  .contribution-timestamp {
    color: #b0b0b0 !important;
  }
  
  /* Activity titles/links */
  .activity-title,
  .contribution-title {
    color: #4db8ff !important;
  }
  
  
  /* ===== TABLE IMPROVEMENTS ===== */
  /* Improve all table headers that might be links */
  
  /* Table header links */
  th a,
  thead a {
    color: #4db8ff !important;
  }
  
  th a:hover,
  thead a:hover {
    color: #6ec6ff !important;
  }
  
  
  /* ===== SEPARATOR VISIBILITY ===== */
  /* Make dropdown separators visible */
  
  .separator[role="separator"],
  .dropdown-menu .separator {
    border-top: 1px solid #ddd !important;
    margin: 5px 0 !important;
  }
  
}

/* ========== END ROUND 6 FIXES ========== */


/* ========================================
   ADDITIONAL DARK MODE FIXES - Round 7
   Add after Round 6 fixes
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== FIX 1: PROFILE DROPDOWN - MAKE IT WORK AGAIN ===== */
  /* Fix the dropdown so it opens when clicked */
  
  /* REVERT the display: none from Round 6 - it broke the dropdown */
  /* Instead, rely on Zendesk's JavaScript to manage visibility */
  
  /* Remove the forced display: none */
  .dropdown-menu:has(a[role="menuitem"]) {
    display: none; /* Not !important - allow JS to override */
  }
  
  /* Show when aria-expanded is true OR when .show class is present */
  .dropdown-toggle[aria-expanded="true"] + .dropdown-menu,
  .dropdown-toggle[aria-expanded="true"] ~ .dropdown-menu,
  button[aria-expanded="true"] + .dropdown-menu,
  button[aria-expanded="true"] ~ .dropdown-menu {
    display: block !important;
  }
  
  /* Also show when .show class is present */
  .dropdown-menu.show {
    display: block !important;
  }
  
  /* User dropdown specific - using the button ID pattern */
  .user-info.dropdown .dropdown-toggle[aria-expanded="true"] + .dropdown-menu,
  .user-info.dropdown button[aria-expanded="true"] + .dropdown-menu {
    display: block !important;
  }
  
  /* Ensure dropdown menu stays light with dark text */
  .user-info .dropdown-menu {
    background-color: #ffffff !important;
  }
  
  
  /* ===== FIX 2: PROFILE ACTIVITY TEXT - STRONGER SELECTORS ===== */
  /* Make profile contribution body text more visible */
  
  /* Target the specific profile contribution structure */
  .profile-activity-contribution .profile-contribution-body,
  .profile-contribution .profile-contribution-body,
  p.profile-contribution-body {
    color: #e0e0e0 !important; /* Light grey for readability */
    background-color: transparent !important;
  }
  
  /* All text content within profile contributions */
  .profile-activity-contribution,
  .profile-contribution {
    color: #e0e0e0 !important;
  }
  
  /* Profile contribution headers */
  .profile-contribution-header {
    background-color: transparent !important;
  }
  
  /* Profile contribution title */
  .profile-contribution-title {
    color: #ffffff !important;
  }
  
  .profile-contribution-title a {
    color: #4db8ff !important;
  }
  
  /* Profile contribution breadcrumbs */
  .profile-contribution-breadcrumbs {
    color: #b0b0b0 !important;
  }
  
  .profile-contribution-breadcrumbs a {
    color: #4db8ff !important;
  }
  
  /* Meta data in contributions */
  .profile-contribution .meta-data,
  .profile-activity-contribution .meta-data {
    color: #b0b0b0 !important;
  }
  
  
  /* ===== FIX 3: EMAIL SIGNATURES IN COMMENTS ===== */
  /* Override inline styles in email signatures to make them readable */
  
  /* Target comment body section */
  .comment-body,
  section.comment-body {
    background-color: transparent !important;
    color: #e0e0e0 !important;
  }
  
  /* Override all inline color styles in comments */
  .comment-body *[style*="color"],
  .zd-comment *[style*="color"],
  .zd-comment-pre-styled *[style*="color"] {
    color: #e0e0e0 !important; /* Override ALL inline colors */
  }
  
  /* Override inline background colors in comments */
  .comment-body *[style*="background"],
  .zd-comment *[style*="background"],
  .zd-comment-pre-styled *[style*="background"] {
    background-color: transparent !important;
  }
  
  /* Specific targeting for email signature tables */
  .comment-body table,
  .comment-body table[style],
  .zd-comment table,
  .zd-comment table[style] {
    background-color: transparent !important;
    border-color: #454545 !important;
  }
  
  .comment-body table td,
  .comment-body table td[style],
  .comment-body table span,
  .comment-body table span[style],
  .zd-comment table td,
  .zd-comment table td[style],
  .zd-comment table span,
  .zd-comment table span[style] {
    color: #e0e0e0 !important; /* Force light color */
    background-color: transparent !important;
  }
  
  /* Email signature paragraphs */
  .comment-body p,
  .comment-body p[style],
  .zd-comment p,
  .zd-comment p[style] {
    color: #e0e0e0 !important;
  }
  
  /* Links in comments should be visible */
  .comment-body a,
  .zd-comment a {
    color: #4db8ff !important;
  }
  
  .comment-body a:hover,
  .zd-comment a:hover {
    color: #6ec6ff !important;
  }
  
  /* Bold text in signatures */
  .comment-body b,
  .comment-body strong,
  .zd-comment b,
  .zd-comment strong {
    color: #ffffff !important;
  }
  
  /* Divs with inline styles in comments */
  .comment-body div[style],
  .zd-comment div[style],
  .zd-comment-pre-styled div[style] {
    color: #e0e0e0 !important;
    background-color: transparent !important;
  }
  
  /* Override color: black specifically (common in email signatures) */
  .comment-body *[style*="color: black"],
  .comment-body *[style*="color:black"],
  .comment-body *[style*="color:#000"],
  .zd-comment *[style*="color: black"],
  .zd-comment *[style*="color:black"],
  .zd-comment *[style*="color:#000"] {
    color: #e0e0e0 !important;
  }
  
  /* Override color: currentcolor (common in links) */
  .comment-body *[style*="color: currentcolor"],
  .comment-body *[style*="color:currentcolor"],
  .zd-comment *[style*="color: currentcolor"],
  .zd-comment *[style*="color:currentcolor"] {
    color: #4db8ff !important;
  }
  
  /* Override specific RGB colors that might be too dark */
  .comment-body *[style*="color: rgb"],
  .zd-comment *[style*="color: rgb"] {
    color: #e0e0e0 !important;
  }
  
  /* Comment container background */
  .comment {
    background-color: #242424 !important;
    border-color: #454545 !important;
  }
  
  .comment:hover {
    background-color: #2d2d2d !important;
  }
  
  /* Comment info section */
  .comment-info {
    border-bottom-color: #454545 !important;
  }
  
  /* Comment author name */
  .comment-author a {
    color: #4db8ff !important;
  }
  
  /* Comment meta data */
  .comment-meta .meta-data {
    color: #b0b0b0 !important;
  }
  
  
  /* ===== ADDITIONAL SAFETY OVERRIDES ===== */
  /* Catch any other potential inline style issues */
  
  /* Override white text on white background */
  .comment-body *[style*="color: white"],
  .comment-body *[style*="color:#fff"],
  .comment-body *[style*="color: #fff"],
  .zd-comment *[style*="color: white"],
  .zd-comment *[style*="color:#fff"],
  .zd-comment *[style*="color: #fff"] {
    color: #ffffff !important; /* Keep white text white */
  }
  
  /* Force visibility of all comment content */
  .comment-body *,
  .zd-comment * {
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Remove any potential hiding mechanisms */
  .comment-body,
  .zd-comment {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
}

/* ========== END ROUND 7 FIXES ========== */

/* ========================================
   PROFILE ACTIVITY TEXT FIX - Round 8
   Add after Round 6 and Round 7
   Dark text for white activity boxes
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== PROFILE ACTIVITY BOXES - WHITE BACKGROUND ===== */
  /* These boxes have white backgrounds, so text needs to be DARK */
  
  /* Profile contribution container - ensure white background */
  .profile-activity-contribution,
  .profile-contribution {
    background-color: #ffffff !important; /* White boxes */
    border: 1px solid #ddd !important;
  }
  
  /* Profile contribution body text - DARK on WHITE */
  .profile-activity-contribution .profile-contribution-body,
  .profile-contribution .profile-contribution-body,
  p.profile-contribution-body {
    color: #333333 !important; /* Dark grey for readability on white */
    background-color: transparent !important;
  }
  
  /* Profile contribution header - white background */
  .profile-contribution-header {
    background-color: #ffffff !important;
  }
  
  /* Profile contribution title - dark on white */
  .profile-contribution-title {
    color: #1a1a1a !important;
  }
  
  /* Profile contribution title links - blue */
  .profile-contribution-title a {
    color: #0066cc !important;
  }
  
  .profile-contribution-title a:hover {
    color: #0A52A2 !important;
  }
  
  /* Profile contribution breadcrumbs - dark on white */
  .profile-contribution-breadcrumbs {
    color: #666666 !important;
  }
  
  .profile-contribution-breadcrumbs a {
    color: #0066cc !important;
  }
  
  /* Meta data in contributions - medium grey on white */
  .profile-contribution .meta-data,
  .profile-activity-contribution .meta-data {
    color: #666666 !important;
  }
  
  /* Meta group container */
  .profile-contribution .meta-group,
  .profile-activity-contribution .meta-group {
    background-color: transparent !important;
  }
  
  
  /* ===== PROFILE ACTIVITY HEADER (OUTSIDE BOXES) ===== */
  /* This is the dark area with "Tom S created an article" */
  
  .profile-activity-header {
    background-color: transparent !important;
  }
  
  .profile-activity-description {
    color: #e0e0e0 !important; /* Light text on dark background */
  }
  
  .profile-activity-description span {
    color: #ffffff !important;
  }
  
  
  /* ===== PROFILE SECTION HEADERS ===== */
  /* "Activity overview" heading area */
  
  .profile-section-header {
    background-color: transparent !important;
  }
  
  .profile-section-title {
    color: #ffffff !important;
  }
  
  .profile-section-description {
    color: #b0b0b0 !important;
  }
  
  
  /* ===== PROFILE ACTIVITY LIST ===== */
  /* The container for all activities */
  
  .profile-activity-list {
    background-color: transparent !important;
  }
  
  .profile-activity-list li {
    background-color: transparent !important;
  }
  
  /* Profile activity item (the whole item with icon and box) */
  .profile-activity {
    background-color: transparent !important;
  }
  
  /* Profile activity icon */
  .profile-activity-icon {
    color: #e0e0e0 !important;
  }
  
  .profile-activity-icon svg {
    color: #e0e0e0 !important;
  }
  
  
  /* ===== ENSURE CONTRAST ===== */
  /* Make sure all text is readable */
  
  /* Any paragraph in the white contribution boxes */
  .profile-contribution p,
  .profile-activity-contribution p {
    color: #333333 !important;
  }
  
  /* Any div in the white contribution boxes */
  .profile-contribution div,
  .profile-activity-contribution div {
    color: inherit;
  }
  
  /* Strong/bold text in contributions */
  .profile-contribution strong,
  .profile-contribution b {
    color: #1a1a1a !important;
  }
  
}

/* ========== END ROUND 8 FIX ========== */


/* ============================================
   ESTIMATED READING TIME
   ============================================
   Displays reading time in article metadata
   Styled to match existing meta-data elements
*/

.reading-time {
  display: inline-flex;
  align-items: center;
  font-weight: 500; /* Slightly bolder to stand out */
}

.reading-time-icon svg {
  display: inline-block;
  opacity: 0.7;
}

/* Ensure reading time is visible in both light and dark modes */
.reading-time {
  color: inherit; /* Uses the same color as other meta-data */
}

/* Hover effect for better interactivity */
.reading-time:hover .reading-time-icon svg {
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* Mobile optimization - ensure icon scales properly */
@media (max-width: 768px) {
  .reading-time {
    font-size: inherit; /* Match parent font size */
  }
  
  .reading-time-icon svg {
    width: 11px;
    height: 11px;
  }
}

/* Print styles - include reading time in print but hide progress bar */
@media print {
  .reading-progress-bar {
    display: none;
  }
  
  .reading-time {
    display: inline-flex;
  }
}


/* ============================================
   OPTIONAL ENHANCEMENTS
   ============================================
   Uncomment these if you want additional features
*/

/* Animated pulse on page load to draw attention to progress bar */
/*
@keyframes progress-pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.reading-progress-bar {
  animation: progress-pulse 2s ease-in-out 1;
}
*/

/* Alternative: Solid color progress bar (simpler look) */
/*
.reading-progress-bar {
  background: #0070B9; 
  background: var(--brand-color, #0070B9);
}

.reading-progress-bar::after {
  display: none;
}
*/

/* Alternative: Rounded edge on progress bar */
/*
.reading-progress-bar {
  border-radius: 0 0 4px 0;
}
*/
/* Hide Trending Topics section for Ontario MVP */
.other-guides {
  display: none !important;
}
/* ============================================
   ONTARIO THEME CUSTOMIZATIONS
   Add these rules to the END of your style.css
   ============================================ */

/* Hide Trending Topics section */
.other-guides {
  display: none !important;
}

/* Update hero section gradient to Ontario colors */
.hero {
  background: linear-gradient(135deg, #050A51 0%, #1F94D3 100%) !important;
}

/* Section header styling with Ontario gradient background */
.section-header,
.category-header,
section.section h3 {
  background: #4991D6; /* gradient removed for Smith */
  color: #FFFFFF;
  padding: 20px;
  border-radius: 8px 8px 0 0;
  margin-bottom: 0;
}

.section-header a,
.category-header a,
section.section h3 a {
  color: #FFFFFF !important;
}

.section-header a:hover,
.category-header a:hover,
section.section h3 a:hover {
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none;
}

/* Section page headers (like "Getting Started" page) */
.section-page .section-header {
  background: #4991D6; /* gradient removed for Smith */
  color: #FFFFFF;
  padding: 40px 20px;
  margin: -40px -20px 40px;
  border-radius: 0;
}

.section-page .section-title {
  color: #FFFFFF !important;
  font-size: 36px;
  margin: 0;
}

.section-page .section-description {
  color: rgba(255, 255, 255, 0.9);
  margin-top: 10px;
}

/* Category page headers */
.category-page .category-header {
  background: #4991D6; /* gradient removed for Smith */
  color: #FFFFFF;
  padding: 40px 20px;
  margin: -40px -20px 40px;
  border-radius: 0;
}

.category-page .category-title {
  color: #FFFFFF !important;
  font-size: 36px;
  margin: 0;
}

/* Ensure section cards have proper styling */
.section-tree .section {
  background-color: #414771;
  border: 1px solid rgba(90, 174, 253, 0.3);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.section-tree .section:hover {
  box-shadow: 0 4px 12px rgba(10, 82, 162, 0.15);
}

.section-tree .section h3 {
  margin: 0;
  border-radius: 8px 8px 0 0;
}

.section-tree .section ul {
  padding: 20px;
}

/* Dark mode adjustments for section headers */
@media (prefers-color-scheme: dark) {
  .section-tree .section {
    background-color: #242424;
    border-color: #454545;
  }
  
  .section-header,
  .category-header,
  section.section h3 {
    /* Keep gradient in dark mode - it looks good */
    background: linear-gradient(135deg, #050A51 0%, #1F94D3 100%);
  }
}
/* Fix header bar to use Ontario colors */
.header {
  background-color: #012251 !important; /* Smith Midnight Blue */
}

/* Ensure nav items are white */
.header a,
.header .menu-button-mobile {
  color: #FFFFFF !important;
}

/* Header hover states */
.header a:hover,
.header a:focus {
  color: rgba(255, 255, 255, 0.9) !important;
}
/* ============================================
   ONTARIO HEADER FIXES - COMPLETE
   Replace your previous header CSS with this
   ============================================ */

/* Header background - full width */
.header {
  background-color: #012251 !important;
  padding: 0 !important;
}

/* Header inner - constrained width for content */
.header-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: transparent !important;
}

@media (min-width: 1160px) {
  .header-inner {
    padding: 20px 0;
    width: 90%;
  }
}

/* Remove conflicting full-width CSS */
#global-header {
  width: 100% !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background-color: #012251 !important;
}

/* Logo positioning */
.logo {
  flex-shrink: 0;
}

/* Navigation wrapper */
.nav-wrapper-desktop {
  display: flex;
  align-items: center;
  gap: 20px;
  background-color: transparent !important;
}

.nav-wrapper-mobile {
  background-color: transparent !important;
}

/* User nav list */
.user-nav-list {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nav links styling */
.user-nav-list a {
  color: #FFFFFF !important;
  padding: 10px 15px;
  text-decoration: none;
  font-size: 14px;
}

.user-nav-list a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  text-decoration: none;
}

/* ============================================
   TOPICS DROPDOWN FIXES
   ============================================ */

/* Topics Dropdown Container */
.cat-dropdown {
  position: relative;
  display: inline-block;
}

/* Topics Button */
.cat-dropdown-btn {
  background-color: transparent;
  border: none;
  color: #FFFFFF !important;
  cursor: pointer;
  font-size: 14px;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background-color 0.2s ease;
}

.cat-dropdown-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

/* Dropdown chevron */
.cat-dropdown-btn .dropdown-chevron-icon {
  transition: transform 0.3s ease;
}

.cat-dropdown-btn[aria-expanded="true"] .dropdown-chevron-icon {
  transform: rotate(180deg);
}

/* Dropdown Content - FIXED CONTRAST */
.cat-dropdown-content {
  display: none;
  position: absolute;
  background-color: #FFFFFF !important;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border-radius: 4px;
  z-index: 1000;
  top: 100%;
  left: 0;
  margin-top: 5px;
  border: 1px solid #ddd;
}

.cat-dropdown-content.show {
  display: block;
}

/* Dropdown Links - FIXED CONTRAST */
.cat-dropdown-content a {
  color: #333333 !important; /* Dark text on white background */
  background-color: #FFFFFF !important;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 14px;
  transition: background-color 0.2s ease;
  border: none !important;
}

.cat-dropdown-content a:hover {
  background-color: #f5f5f5 !important;
  color: #0A52A2 !important; /* Ontario blue on hover */
  text-decoration: none;
}

.cat-dropdown-content a:first-child {
  border-radius: 4px 4px 0 0;
}

.cat-dropdown-content a:last-child {
  border-radius: 0 0 4px 4px;
}

/* ============================================
   PROFILE DROPDOWN FIXES
   ============================================ */

/* User info dropdown button */
.user-info .dropdown-toggle {
  color: #FFFFFF !important;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-info .dropdown-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.user-info .dropdown-toggle span {
  color: #FFFFFF !important;
}

.user-info .dropdown-toggle .dropdown-chevron-icon {
  stroke: #FFFFFF;
}

/* Profile dropdown menu - FIXED CONTRAST */
.user-info .dropdown-menu {
  background-color: #FFFFFF !important;
  border: 1px solid #ddd;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border-radius: 4px;
  min-width: 180px;
  margin-top: 5px;
}

.user-info .dropdown-menu a {
  color: #333333 !important; /* Dark text on white background */
  background-color: #FFFFFF !important;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 14px;
  transition: background-color 0.2s ease;
}

.user-info .dropdown-menu a:hover {
  background-color: #f5f5f5 !important;
  color: #0A52A2 !important; /* Ontario blue on hover */
  text-decoration: none;
}

.user-info .dropdown-menu .separator {
  height: 1px;
  background-color: #ddd;
  margin: 8px 0;
}

/* ============================================
   MOBILE MENU
   ============================================ */

.menu-list-mobile {
  background-color: #FFFFFF !important;
}

.menu-list-mobile-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-list-mobile-items .item a {
  color: #333333 !important;
  padding: 12px 20px;
  display: block;
  text-decoration: none;
}

.menu-list-mobile-items .item a:hover {
  background-color: #f5f5f5 !important;
  color: #0A52A2 !important;
  text-decoration: none;
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
  .header {
    background-color: #012251 !important; /* Keep Ontario blue in dark mode */
  }
  
  /* Dropdown menus stay white for contrast */
  .cat-dropdown-content,
  .user-info .dropdown-menu {
    background-color: #FFFFFF !important;
  }
  
  .cat-dropdown-content a,
  .user-info .dropdown-menu a {
    color: #333333 !important;
  }
}


/* ============================================
   PHOSPHOR ICONS CONFIGURATION
   ============================================ */

/* Base icon class */
.ph {
  font-family: 'Phosphor' !important;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Bold variant */
.ph-bold {
  font-family: 'Phosphor-Bold' !important;
  font-weight: 700;
}

/* Fill variant */
.ph-fill {
  font-family: 'Phosphor-Fill' !important;
}

/* Icon sizing */
.ph-sm { font-size: 16px; }
.ph-md { font-size: 20px; }
.ph-lg { font-size: 24px; }
.ph-xl { font-size: 32px; }


/* ============================================
   ONTARIO HERO BACKGROUNDS - CATALYST INSPIRED
   Pick ONE option by uncommenting it
   ============================================ */

/* ============================================
   OPTION 1: DIAGONAL LINES (CATALYST STYLE)
   Most similar to Catalyst screenshot
   ============================================ */
/*
.hero {
  background: linear-gradient(90deg, #050A51 0%, #1F94D3 100%) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden;
}

/* Animated diagonal light streaks */
.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 80px,
    rgba(255, 255, 255, 0.04) 80px,
    rgba(255, 255, 255, 0.04) 160px
  );
  animation: diagonalSlide 40s linear infinite;
  pointer-events: none;
}

@keyframes diagonalSlide {
  0% {
    transform: translateX(0) translateY(0);
  }
  100% {
    transform: translateX(160px) translateY(160px);
  }
}

/* Subtle glow accent */
.hero::after {
  content: '';
  position: absolute;
  top: 20%;
  right: 10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(107, 195, 231, 0.15) 0%, transparent 70%);
  pointer-events: none;
  animation: glowPulse 8s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.2);
  }
}

/* Ensure logo stays on top */
.hero-inner {
  position: relative;
  z-index: 10;
  padding: 40px 20px;
}

/* Make logo larger */
.hero-inner img {
  max-width: 600px !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

/* Responsive sizing */
@media (max-width: 768px) {
  .hero {
    padding: 60px 0 !important;
  }
  
  .hero-inner img {
    max-width: 400px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-inner img {
    max-width: 500px !important;
  }
}
*/

/* ============================================
   OPTION 2: FLOWING DATA WAVES
   More dynamic wave movement
   ============================================ */

/*
.hero {
  background: linear-gradient(90deg, #050A51 0%, #1F94D3 100%) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: 
    repeating-linear-gradient(
      135deg,
      transparent,
      transparent 100px,
      rgba(255, 255, 255, 0.03) 100px,
      rgba(255, 255, 255, 0.03) 200px
    ),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 60px,
      rgba(255, 255, 255, 0.02) 60px,
      rgba(255, 255, 255, 0.02) 120px
    );
  animation: waveFlow 30s linear infinite;
  pointer-events: none;
}

@keyframes waveFlow {
  0% {
    transform: translateX(0) translateY(0);
  }
  100% {
    transform: translateX(200px) translateY(-100px);
  }
}

.hero::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(57, 176, 225, 0.2) 0%, transparent 70%);
  animation: floatGlow 10s ease-in-out infinite;
  pointer-events: none;
}

@keyframes floatGlow {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translate(50px, -30px) scale(1.3);
    opacity: 0.6;
  }
}

.hero-inner {
  position: relative;
  z-index: 10;
  padding: 40px 20px;
}

.hero-inner img {
  max-width: 600px !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

@media (max-width: 768px) {
  .hero {
    padding: 60px 0 !important;
  }
  .hero-inner img {
    max-width: 400px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-inner img {
    max-width: 500px !important;
  }
}
*/


/* ============================================
   OPTION 3: TECH GRID WITH LIGHT BEAMS
   Similar to Catalyst but with grid overlay
   ============================================ */

/*
.hero {
  background: linear-gradient(90deg, #050A51 0%, #1F94D3 100%) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -100%;
  right: -50%;
  width: 200%;
  height: 300%;
  background-image: 
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 100px,
      rgba(255, 255, 255, 0.03) 100px,
      rgba(255, 255, 255, 0.03) 102px
    ),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 100px,
      rgba(255, 255, 255, 0.02) 100px,
      rgba(255, 255, 255, 0.02) 102px
    );
  animation: gridSlide 50s linear infinite;
  pointer-events: none;
}

@keyframes gridSlide {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
  100% {
    transform: translateX(100px) translateY(100px) rotate(2deg);
  }
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse at 30% 40%, rgba(57, 176, 225, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(18, 117, 191, 0.12) 0%, transparent 50%);
  animation: lightShift 12s ease-in-out infinite;
  pointer-events: none;
}

@keyframes lightShift {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

.hero-inner {
  position: relative;
  z-index: 10;
  padding: 40px 20px;
}

.hero-inner img {
  max-width: 600px !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

@media (max-width: 768px) {
  .hero {
    padding: 60px 0 !important;
  }
  .hero-inner img {
    max-width: 400px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-inner img {
    max-width: 500px !important;
  }
}
*/


/* ============================================
   OPTION 4: SPEED LINES (FASTEST MOTION)
   High-energy streaking lines
   ============================================ */


.hero {
  background: linear-gradient(90deg, #050A51 0%, #1F94D3 100%) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 300%;
  height: 100%;
  background: repeating-linear-gradient(
    -30deg,
    transparent,
    transparent 120px,
    rgba(255, 255, 255, 0.05) 120px,
    rgba(255, 255, 255, 0.05) 125px,
    transparent 125px,
    transparent 250px
  );
  animation: speedLines 25s linear infinite;
  pointer-events: none;
}

@keyframes speedLines {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(250px);
  }
}

.hero::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20%;
  width: 600px;
  height: 300px;
  background: linear-gradient(90deg, transparent 0%, rgba(107, 195, 231, 0.1) 50%, transparent 100%);
  transform: translateY(-50%) skewX(-15deg);
  animation: sweepLight 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sweepLight {
  0%, 100% {
    opacity: 0;
    transform: translateY(-50%) translateX(-100px) skewX(-15deg);
  }
  50% {
    opacity: 1;
    transform: translateY(-50%) translateX(100px) skewX(-15deg);
  }
}

.hero-inner {
  position: relative;
  z-index: 10;
  padding: 40px 20px;
}

.hero-inner img {
  max-width: 600px !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

@media (max-width: 768px) {
  .hero {
    padding: 60px 0 !important;
  }
  .hero-inner img {
    max-width: 400px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-inner img {
    max-width: 500px !important;
  }
}

/* ============================================
   ONTARIO COMMUNITY BANNER - FIXED
   No horizontal overflow + Inverted colors
   ============================================ */

/* Hide the default community-image div (Catalyst banner) */
.community-image {
  display: none !important;
}

/* Ensure no horizontal overflow from community section */
.home-section.community {
  text-align: center;
  background: #F5F7FA;
  padding: 60px 40px;
  margin: 40px 0;
  border-radius: 12px;
  position: relative;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(10, 82, 162, 0.1);
  border: 2px solid #E5F4F9;
  max-width: 100%;
  box-sizing: border-box;
}

/* Subtle blue accent gradient on edges */
.home-section.community::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(90deg, rgba(10, 82, 162, 0.03) 0%, transparent 20%, transparent 80%, rgba(57, 176, 225, 0.03) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Decorative accent bar at top */
.home-section.community::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #050A51 0%, #0A52A2 50%, #1F94D3 100%);
  z-index: 0;
}

/* Community content styling */
.home-section.community h2 {
  color: #0A52A2 !important;
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.home-section.community p {
  color: #333333 !important;
  font-size: 18px !important;
  padding: 0 20px 30px 20px !important;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  line-height: 1.6;
}

/* Call-to-action button - Blue gradient */
.community-link {
  display: inline-block;
  background: linear-gradient(135deg, #050A51 0%, #0A52A2 100%);
  color: #FFFFFF !important;
  padding: 14px 32px;
  border-radius: 6px;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(10, 82, 162, 0.25);
}

.community-link:hover {
  background: linear-gradient(135deg, #0A52A2 0%, #1F94D3 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10, 82, 162, 0.35);
  color: #FFFFFF !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .home-section.community {
    padding: 40px 20px;
    margin: 30px 0;
  }
  
  .home-section.community h2 {
    font-size: 24px;
    margin-bottom: 15px;
  }
  
  .home-section.community p {
    font-size: 16px !important;
    padding: 0 10px 20px 10px !important;
  }
  
  .community-link {
    padding: 12px 24px;
    font-size: 15px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .home-section.community h2 {
    font-size: 28px;
  }
}

/* Fix any potential overflow from parent containers */
.container {
  max-width: 100%;
  overflow-x: hidden;
}


/* ============================================
   ALTERNATIVE: WHITE WITH BLUE ACCENTS
   Clean white card style
   ============================================ */

/*
.community-image {
  display: none !important;
}

.home-section.community {
  text-align: center;
  background: #FFFFFF;
  padding: 60px 40px;
  margin: 40px 0;
  border-radius: 12px;
  position: relative;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(10, 82, 162, 0.12);
  border: 3px solid #050A51;
  max-width: 100%;
  box-sizing: border-box;
}

.home-section.community::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  height: 6px;
  background: linear-gradient(90deg, #050A51 0%, #0A52A2 50%, #1F94D3 100%);
  z-index: 0;
}

.home-section.community h2 {
  color: #0A52A2 !important;
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.home-section.community p {
  color: #333333 !important;
  font-size: 18px !important;
  padding: 0 20px 30px 20px !important;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  line-height: 1.6;
}

.community-link {
  display: inline-block;
  background: linear-gradient(135deg, #050A51 0%, #0A52A2 100%);
  color: #FFFFFF !important;
  padding: 14px 32px;
  border-radius: 6px;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(10, 82, 162, 0.25);
}

.community-link:hover {
  background: linear-gradient(135deg, #0A52A2 0%, #1F94D3 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10, 82, 162, 0.35);
}

.container {
  max-width: 100%;
  overflow-x: hidden;
}
*/


/* ============================================
   ALTERNATIVE: SUBTLE PATTERN BACKGROUND
   Light grey with dot pattern
   ============================================ */


.community-image {
  display: none !important;
}

.home-section.community {
  text-align: center;
  background: 
    radial-gradient(circle, rgba(10, 82, 162, 0.05) 1px, transparent 1px);
  background-color: #F8F9FA;
  background-size: 20px 20px;
  padding: 60px 40px;
  margin: 40px 0;
  border-radius: 12px;
  position: relative;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(10, 82, 162, 0.08);
  border-top: 4px solid #050A51;
  border-bottom: 4px solid #1F94D3;
  max-width: 100%;
  box-sizing: border-box;
}

.home-section.community h2 {
  color: #0A52A2 !important;
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.home-section.community p {
  color: #333333 !important;
  font-size: 18px !important;
  padding: 0 20px 30px 20px !important;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  line-height: 1.6;
}

.community-link {
  display: inline-block;
  background: linear-gradient(135deg, #050A51 0%, #0A52A2 100%);
  color: #FFFFFF !important;
  padding: 14px 32px;
  border-radius: 6px;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(10, 82, 162, 0.25);
}

.community-link:hover {
  background: linear-gradient(135deg, #0A52A2 0%, #1F94D3 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10, 82, 162, 0.35);
}

.container {
  max-width: 100%;
  overflow-x: hidden;
}

/* ============================================
   ONTARIO - SECTION PAGE SPACING
   Adds space above article list on section pages
   ============================================ */

/* Add space above article list on section pages only */
.section-content > .article-list {
  margin-top: 40px;
}

/* Ensure cards align at top and have consistent heights */
.section-content .article-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.section-content .article-list-item {
  flex: 1 1 calc(33.333% - 20px);
  min-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Keep homepage sections unaffected */
.knowledge-base .article-list {
  margin-top: 0;
}

/* ============================================
   ONTARIO SITE-WIDE ENHANCEMENTS (FINAL v2)
   Underline animation + Blue buttons + Colored hover backgrounds
   ============================================ */

/* ===== 1. SECTION ICONS (HOMEPAGE ONLY) ===== */

/* Icons now handled by Phosphor Icons in home_page.hbs template */
/* Emoji ::before content removed - white Phosphor icons display instead */

/* Getting Started - Now uses Phosphor ph-rocket-launch */
.knowledge-base .section a[href*="Getting-Started"]::before {
  content: '';
}

/* Project Management - Now uses Phosphor ph-kanban */
.knowledge-base .section a[href*="Project-Management"]::before {
  content: '';
}

/* Files and Folders - Now uses Phosphor ph-folder-open */
.knowledge-base .section a[href*="Files-and-Folders"]::before {
  content: '';
}

/* Tasks and Workflows - Now uses Phosphor ph-list-checks */
.knowledge-base .section a[href*="Tasks-and-Workflows"]::before {
  content: '';
}

/* User Management - Now uses Phosphor ph-users-three */
.knowledge-base .section a[href*="User-Management"]::before {
  content: '';
}

/* Notifications & Help - Now uses Phosphor ph-bell-ringing */
.knowledge-base .section a[href*="Notifications-Help"]::before {
  content: '';
}

/* NO ICONS IN BREADCRUMBS */
.breadcrumbs a::before {
  content: none !important;
}


/* ===== 2. HOMEPAGE CARD STRUCTURE WITH COLORED HOVER BACKGROUNDS ===== */

/* Section cards - white background */
.knowledge-base .section {
  transition: all 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
  background: #414771;
  border: 1px solid rgba(90, 174, 253, 0.3);
}

/* Hover effect - lift, shadow, and colored background */
.knowledge-base .section:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(10, 82, 162, 0.15);
}

/* Unique hover background colors for each section */
.knowledge-base .section:nth-child(1):hover {
  background: rgba(10, 82, 162, 0.05); /* Getting Started - Very light deep blue */
}

.knowledge-base .section:nth-child(2):hover {
  background: rgba(18, 117, 191, 0.05); /* Project Management - Very light medium blue */
}

.knowledge-base .section:nth-child(3):hover {
  background: rgba(57, 176, 225, 0.05); /* Files and Folders - Very light light blue */
}

.knowledge-base .section:nth-child(4):hover {
  background: rgba(31, 148, 211, 0.05); /* Tasks and Workflows - Very light blue-500 */
}

.knowledge-base .section:nth-child(5):hover {
  background: rgba(7, 43, 125, 0.05); /* User Management - Very light blue-800 */
}

.knowledge-base .section:nth-child(6):hover {
  background: rgba(107, 195, 231, 0.05); /* Notifications & Help - Very light bright blue */
}

/* Section header hover effect */
.knowledge-base .section h3 {
  transition: background 0.3s ease;
}

.knowledge-base .section:hover h3 {
  background: linear-gradient(135deg, #0A52A2 0%, #1F94D3 100%);
}


/* ===== 3. SECTION PAGE HEADER STYLING ===== */

/* Section page header bar */
.section-page header,
.category-page header {
  background: #4991D6; /* gradient removed for Smith */
  color: #FFFFFF;
  padding: 30px 40px;
  margin-bottom: 40px;
  border-radius: 8px;
}

.section-page header h1,
.category-page header h1 {
  color: #FFFFFF !important;
  margin: 0;
  font-size: 32px;
}

/* Apply gradient variations to section page headers */
body[class*="section-42679658758925"] header {
  background: #4991D6; /* gradient removed for Smith */ /* Getting Started */
}

body[class*="section-42679681047053"] header {
  background: #4991D6; /* gradient removed for Smith */ /* Project Management */
}

body[class*="section-42679711032589"] header {
  background: #4991D6; /* gradient removed for Smith */ /* Files and Folders */
}

body[class*="section-42679693922189"] header {
  background: #4991D6; /* gradient removed for Smith */ /* Tasks and Workflows */
}

body[class*="section-42679736498573"] header {
  background: #4991D6; /* gradient removed for Smith */ /* User Management */
}

body[class*="section-42679701344781"] header {
  background: #4991D6; /* gradient removed for Smith */ /* Notifications & Help */
}


/* ===== 4. HOMEPAGE SECTION HEADER GRADIENTS ===== */

/* Base gradient for all homepage section headers */
.knowledge-base .section h3 {
  background: linear-gradient(135deg, #050A51 0%, #0A52A2 100%);
  color: #FFFFFF;
  padding: 20px;
  margin: 0;
  border-radius: 8px 8px 0 0;
}

/* Unique gradients for each homepage section */
.knowledge-base .section:nth-child(1) h3 {
  background: linear-gradient(135deg, #050A51 0%, #0A52A2 100%); /* Getting Started */
}

.knowledge-base .section:nth-child(2) h3 {
  background: linear-gradient(135deg, #0A52A2 0%, #1275BF 100%); /* Project Management */
}

.knowledge-base .section:nth-child(3) h3 {
  background: linear-gradient(135deg, #1275BF 0%, #1F94D3 100%); /* Files and Folders */
}

.knowledge-base .section:nth-child(4) h3 {
  background: linear-gradient(135deg, #0A52A2 0%, #1F94D3 100%); /* Tasks and Workflows */
}

.knowledge-base .section:nth-child(5) h3 {
  background: linear-gradient(135deg, #050A51 0%, #1275BF 100%); /* User Management */
}

.knowledge-base .section:nth-child(6) h3 {
  background: linear-gradient(135deg, #1F94D3 0%, #39B0E1 100%); /* Notifications & Help */
}


/* ===== 5. ARTICLE CARD HOVER EFFECTS (SECTION PAGES) ===== */

/* Article cards on section pages */
.section-content .article-list-item {
  transition: all 0.3s ease;
  border-radius: 8px;
  padding: 20px;
  background: #F8F9FA;
  border: 1px solid #E5E5E5;
}

.section-content .article-list-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(10, 82, 162, 0.1);
  background: #FFFFFF;
  border-color: #0A52A2;
}


/* ===== 6. LINK STYLING - UNDERLINE ANIMATION ===== */

/* Article links with animated underline */
.article-list a,
.article-list-link {
  color: #1275BF;
  position: relative;
  display: inline-block;
  text-decoration: none;
}

/* Animated underline */
.article-list a::after,
.article-list-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #050A51;
  transition: width 0.3s ease;
}

.article-list a:hover::after,
.article-list-link:hover::after {
  width: 100%;
}

.article-list a:hover,
.article-list-link:hover {
  color: #0A52A2;
  text-decoration: none;
}

/* Homepage article links */
.knowledge-base .section .article-list a {
  display: block;
  padding: 8px 0;
}


/* ===== 7. BREADCRUMB STYLING ===== */

/* Clean breadcrumbs */
.breadcrumbs {
  margin-bottom: 20px;
  font-size: 14px;
}

.breadcrumbs a {
  color: #1275BF;
  position: relative;
  text-decoration: none;
}

/* Animated underline for breadcrumbs */
.breadcrumbs a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: #050A51;
  transition: width 0.3s ease;
}

.breadcrumbs a:hover::after {
  width: 100%;
}

.breadcrumbs a:hover {
  color: #0A52A2;
}


/* ===== 8. READ MORE BUTTONS - PRIMARY BLUE ===== */

/* Primary blue button with hover effect */
.article-read-more {
  display: inline-block;
  background-color: #050A51; /* Primary deep blue */
  color: #FFFFFF !important;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  margin-top: 10px;
  border: none;
}

.article-read-more:hover {
  background-color: #0A52A2; /* Lighter blue on hover */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(5, 10, 81, 0.3);
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* "See all articles" link */
.see-all-articles {
  color: #0A52A2;
  text-decoration: none;
  font-weight: 600;
  position: relative;
  display: inline-block;
}

/* Animated underline for see all link */
.see-all-articles::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #050A51;
  transition: width 0.3s ease;
}

.see-all-articles:hover::after {
  width: 100%;
}

.see-all-articles:hover {
  color: #050A51;
  text-decoration: none;
}


/* ===== 9. HOMEPAGE SECTION CONTENT STRUCTURE ===== */

/* Homepage section content area */
.knowledge-base .section > div {
  padding: 20px;
}


/* ===== 10. RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 768px) {
  /* Smaller icons on mobile */
  .knowledge-base .section h3 a::before {
    font-size: 16px;
    margin-right: 6px;
  }
  
  /* Less dramatic hovers on mobile */
  .knowledge-base .section:hover {
    transform: translateY(-2px);
  }
  
  .section-content .article-list-item:hover {
    transform: translateY(-1px);
  }
  
  /* Smaller section page headers */
  .section-page header,
  .category-page header {
    padding: 20px;
  }
  
  .section-page header h1,
  .category-page header h1 {
    font-size: 24px;
  }
}


/* ============================================
   FINAL DESIGN FEATURES:
   
   ✅ Animated underline on all links
   ✅ Primary blue (#0A52A2) buttons
   ✅ Colored background on card hover (matches section color)
   ✅ Blue gradient headers (maintained)
   ✅ Icons on homepage sections
   ✅ Card lift + shadow hover effects
   ✅ Clean white cards (not blue overload)
   ✅ Each section has unique visual identity
   
   ⚠️  Dark mode support NOT included yet
   ============================================ */

/* ============================================
   ONTARIO HEADER ALIGNMENT & MOBILE MENU FIX
   Fixes misalignment and mobile breakpoint issues
   ============================================ */

/* ===== FIX 1: HEADER ALIGNMENT ===== */

/* Ensure header container matches Catalyst alignment */
.header {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 71px !important;
}

@media (min-width: 1160px) {
  .header {
    padding: 0 !important;
    width: 90% !important;
  }
}

/* Logo alignment */
.header .logo {
  display: flex;
  align-items: center;
  margin: 0;
}

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

/* Right side navigation alignment */
.header .nav-wrapper-desktop,
.header .nav-wrapper-mobile {
  display: flex;
  align-items: center;
  margin: 0;
}


/* ===== FIX 2: MOBILE MENU BREAKPOINT ===== */

/* Hide mobile menu on desktop (>= 1024px) */
@media (min-width: 1024px) {
  .nav-wrapper-mobile {
    display: none !important;
  }
}

/* Show mobile menu on tablet and mobile (< 1024px) */
@media (max-width: 1023px) {
  .nav-wrapper-desktop {
    display: none !important;
  }
  
  .nav-wrapper-mobile {
    display: inline-block !important;
  }
}

/* Proper mobile menu button styling */
.nav-wrapper-mobile .menu-button-mobile {
  background: none;
  border: 0;
  width: auto;
  min-width: 71px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.nav-wrapper-mobile .menu-button-mobile .icon-menu {
  padding: 7px;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

/* Mobile menu dropdown positioning */
.nav-wrapper-mobile .menu-list-mobile {
  position: absolute;
  background-color: #fff;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 999;
  max-width: 100vw;
}

.nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] {
  display: none;
}

.nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
  display: block;
}


/* ===== FIX 3: DESKTOP NAVIGATION SPACING ===== */

/* Ensure desktop nav items have proper spacing */
@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: flex !important;
    align-items: center;
    gap: 20px;
  }
  
  .nav-wrapper-desktop a,
  .nav-wrapper-desktop button,
  .nav-wrapper-desktop .dropdown {
    margin: 0 10px;
  }
}


/* ===== FIX 4: USER PROFILE ALIGNMENT ===== */

/* Fix user profile dropdown alignment */
.user-nav {
  display: inline-flex;
  align-items: center;
  position: relative;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .user-nav {
    position: relative;
  }
}

/* Profile button */
.user-nav button,
.user-nav .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
}


/* ===== FIX 5: PREVENT HORIZONTAL OVERFLOW ===== */

/* Ensure nothing causes horizontal scroll */
html {
  overflow-x: hidden !important;
}

body {
  overflow-x: hidden !important;
}

.header,
.header * {
  max-width: 100%;
  box-sizing: border-box;
}


/* ===== FIX 6: TOPICS DROPDOWN ALIGNMENT ===== */

/* Fix Topics dropdown if present */
.header .dropdown {
  display: inline-flex;
  align-items: center;
}

.header .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent !important;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.header .dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  min-width: 200px;
  z-index: 1000;
}


/* ===== FIX 7: SUBMIT A REQUEST BUTTON ===== */

/* Ensure "Submit a request" is properly aligned */
.header a[href*="requests"],
.header a[href*="submit"] {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  white-space: nowrap;
}


/* ===== FIX 8: RESPONSIVE HEADER ADJUSTMENTS ===== */

/* Tablet breakpoint adjustments */
@media (max-width: 1023px) {
  .header {
    padding: 0 20px !important;
  }
  
  /* Ensure logo doesn't get too small */
  .header .logo img {
    max-height: 32px;
  }
}

/* Mobile breakpoint adjustments */
@media (max-width: 768px) {
  .header {
    padding: 0 16px !important;
  }
  
  .header .logo img {
    max-height: 28px;
  }
}


/* ===== FIX 9: PREVENT ITEMS FROM SQUASHING ===== */

/* Ensure header items maintain minimum sizes */
.header .nav-wrapper-mobile {
  flex-shrink: 0;
  min-width: 71px;
}

.header .logo {
  flex-shrink: 0;
  min-width: 100px;
}

.header .user-nav {
  flex-shrink: 0;
}


/* ===== FIX 10: Z-INDEX MANAGEMENT ===== */

/* Proper z-index layering */
.header {
  position: relative;
  z-index: 100;
}

.nav-wrapper-mobile .menu-list-mobile {
  z-index: 999;
}

.header .dropdown-menu {
  z-index: 1000;
}


/* ============================================
   ONTARIO PROFILE DROPDOWN - SINGLE SELECTOR FIX
   ============================================ */

/* Ultra-specific selector to override everything */
.user-info.dropdown .dropdown-menu[role="menu"][id] {
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15) !important;
  -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15) !important;
  background: #ffffff !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  padding: 8px 0 !important;
  position: absolute !important;
  right: 0 !important;
  margin-top: 8px !important;
  min-width: 200px !important;
  z-index: 1000 !important;
}

/* Clean menu items */
.user-info.dropdown .dropdown-menu[role="menu"] a {
  display: block !important;
  padding: 10px 20px !important;
  color: #333333 !important;
  text-decoration: none !important;
  background: transparent !important;
}

.user-info.dropdown .dropdown-menu[role="menu"] a:hover {
  background-color: #f5f5f5 !important;
}

/* Separator */
.user-info.dropdown .dropdown-menu .separator {
  border-top: 1px solid #e5e5e5 !important;
  margin: 8px 0 !important;
}


/* ============================================
   ONTARIO DARK MODE FIXES
   Forms, Profile, Articles - NOT header
   ============================================ */


/* ================================================================================
   FORM DROPDOWN (NESTY-PANEL) HOVER STATES
   ================================================================================  */

@media (prefers-color-scheme: dark) {
  
  .nesty-panel {
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  }
  
  .nesty-panel li {
    background-color: #ffffff !important;
    color: #333333 !important;
  }
  
  .nesty-panel li a,
  .nesty-panel a {
    color: #333333 !important;
    background-color: transparent !important;
  }
  
  .nesty-panel li:hover,
  .nesty-panel li:focus,
  .nesty-panel li.is-selected,
  .nesty-panel li[aria-selected="true"] {
    background-color: #f0f0f0 !important;
    color: #000000 !important;
  }
  
  .nesty-panel li:hover a,
  .nesty-panel li:focus a,
  .nesty-panel li.is-selected a {
    color: #000000 !important;
  }
  
  .nesty-panel li.is-current,
  .nesty-panel li.selected,
  .nesty-panel li[data-selected="true"] {
    background-color: #e3f2fd !important;
    color: #0066cc !important;
  }
  
  .nesty-input {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  .nesty-input:focus {
    border-color: #4db8ff !important;
  }
  
  .nesty-input .nesty-current-value,
  .nesty-input span {
    color: #e0e0e0 !important;
  }
}


/* ================================================================================
   PROFILE PAGE ACTIVITY CARDS
   ================================================================================  */

@media (prefers-color-scheme: dark) {
  
  .profile-activity-contribution {
    background-color: #2d3748 !important;
    border-radius: 8px;
    padding: 16px;
  }
  
  .profile-activity-contribution a,
  .profile-contribution-title a,
  .profile-activity-contribution .profile-contribution-title {
    color: #4db8ff !important;
  }
  
  .profile-activity-contribution a:hover {
    color: #6ec6ff !important;
  }
  
  .profile-activity-contribution .meta-data,
  .profile-activity-contribution .meta-group a {
    color: #f59e0b !important;
  }
  
  .profile-activity-contribution p,
  .profile-activity-contribution .profile-contribution-body,
  .profile-contribution-body {
    color: #e0e0e0 !important;
  }
  
  .profile-activity-contribution span,
  .profile-activity-contribution div:not([class]) {
    color: #cbd5e1 !important;
  }
  
  .profile-activity-contribution .meta-group,
  .profile-activity-contribution .meta-data {
    color: #888888 !important;
  }
  
  .profile-contribution {
    border-color: #374151 !important;
  }
  
  .profile-contribution-title {
    color: #ffffff !important;
  }
  
  .profile-activity-description {
    color: #e0e0e0 !important;
  }
  
  .profile-activity-description span:first-child {
    color: #ffffff !important;
  }
  
  .profile-activity-icon {
    background-color: #374151 !important;
  }
  
  .profile-header {
    background-color: #1f2937 !important;
  }
  
  .profile-header .name,
  .profile-header h1 {
    color: #4db8ff !important;
  }
  
  .profile-stats .stat-label {
    color: #9ca3af !important;
  }
  
  .profile-stats .stat-value,
  .profile-stats-activity .stat span:not(.stat-label),
  .profile-stats-counters .stat span:not(.stat-label) {
    color: #e0e0e0 !important;
  }
  
  .profile-nav {
    background-color: #111827 !important;
    border-bottom-color: #374151 !important;
  }
  
  .profile-nav a {
    color: #4db8ff !important;
  }
  
  .profile-nav a:hover,
  .profile-nav a.current {
    color: #ffffff !important;
    border-bottom-color: #4db8ff !important;
  }
  
  .profile-section h2,
  .activity-overview h2 {
    color: #ffffff !important;
  }
  
  .profile-section > p,
  .activity-overview > p {
    color: #9ca3af !important;
  }
  
  .profile-activity-description span:first-child,
  .profile-activity strong {
    color: #ffffff !important;
  }
  
  .profile-activity-description {
    color: #d1d5db !important;
  }
}


/* ================================================================================
   MOBILE RESPONSIVE - ARTICLE CONTENT CARDS
   ================================================================================  */

@media (max-width: 768px) {
  
  .article-body div[style*="display: flex"],
  zd-html-block div[style*="display: flex"] {
    flex-wrap: wrap !important;
  }
  
  .article-body div[style*="min-width: 200px"],
  .article-body div[style*="min-width:200px"],
  zd-html-block div[style*="min-width: 200px"],
  zd-html-block div[style*="min-width:200px"] {
    min-width: 100% !important;
    flex: 1 1 100% !important;
  }
  
  .article-body div[style*="flex: 1"],
  zd-html-block div[style*="flex: 1"] {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }
  
  .article-body zd-html-block,
  .article-body > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }
  
  .article-body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  
  .article-body div[style*="min-width: 200px"],
  zd-html-block div[style*="min-width: 200px"] {
    min-width: 45% !important;
    flex: 1 1 45% !important;
  }
}


/* ================================================================================
   ARTICLE DARK MODE - INLINE STYLES
   ================================================================================  */

@media (prefers-color-scheme: dark) {
  
  /* Target gradient backgrounds */
  zd-html-block div[style*="gradient"][style*="135deg"] {
    background: linear-gradient(135deg, #1e3a5f 0%, #234e78 100%) !important;
  }
  
  [style*="f0f9ff"],
  [style*="e0f2fe"] {
    background: linear-gradient(135deg, #1e3a5f 0%, #234e78 100%) !important;
  }
  
  [style*="e3f2fd"] {
    background: #1e3a5f !important;
  }
  
  [style*="f8fafc"] {
    background: #1e293b !important;
  }
  
  [style*="border: 2px dashed"][style*="f8fafc"] {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
  }
  
  [style*="color: #0c4a6e"],
  [style*="color:#0c4a6e"] {
    color: #7dd3fc !important;
  }
  
  [style*="color: #475569"],
  [style*="color:#475569"] {
    color: #cbd5e1 !important;
  }
  
  [style*="color: #1e293b"],
  [style*="color:#1e293b"] {
    color: #f1f5f9 !important;
  }
  
  [style*="color: #64748b"],
  [style*="color:#64748b"] {
    color: #94a3b8 !important;
  }
  
  [style*="background: white"],
  [style*="background-color: white"],
  [style*="background:#fff"],
  [style*="background-color:#fff"] {
    background: #2d3748 !important;
  }
  
  [style*="border"][style*="#e2e8f0"],
  [style*="border"][style*="#e5e7eb"],
  [style*="border"][style*="#cbd5e1"] {
    border-color: #475569 !important;
  }
  
  zd-html-block p {
    color: #cbd5e1 !important;
  }
  
  zd-html-block li {
    color: #cbd5e1 !important;
  }
  
  zd-html-block h1,
  zd-html-block h2,
  zd-html-block h3,
  zd-html-block h4,
  zd-html-block h5,
  zd-html-block h6 {
    color: #f1f5f9 !important;
  }
  
  zd-html-block h3[style*="#0c4a6e"],
  zd-html-block h4[style*="#0c4a6e"] {
    color: #7dd3fc !important;
  }
}

/* Form submit button - make it distinct */
input[type="submit"],
.form input[type="submit"],
button[type="submit"] {
  background-color: #012251 !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 12px 24px !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

input[type="submit"]:hover,
.form input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: #0A52A2 !important;
}

/* Dark mode submit button */
@media (prefers-color-scheme: dark) {
  input[type="submit"],
  .form input[type="submit"],
  button[type="submit"] {
    background-color: #1F94D3 !important;
    color: #FFFFFF !important;
  }
  
  input[type="submit"]:hover,
  .form input[type="submit"]:hover,
  button[type="submit"]:hover {
    background-color: #39B0E1 !important;
  }
}

/* ================================================================================
   END OF DARK MODE FIXES - HEADER NOT INCLUDED
   ================================================================================  */

/* ============================================
   COMPLETE ARTICLE LIST SECTION
   Located on homepage below section cards
   ============================================ */

/* Main container */
.complete-article-list {
  margin-top: 60px;
  margin-bottom: 60px;
}

/* ===== HERO BANNER ===== */
.article-list-hero {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8c 50%, #4a7ab8 100%);
  border-radius: 16px;
  padding: 50px 40px;
  margin-bottom: 50px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Decorative circle */
.article-list-hero::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  top: -200px;
  right: -100px;
  pointer-events: none;
}

.article-list-hero-content {
  position: relative;
  z-index: 1;
}

.article-list-hero h2 {
  color: #FFFFFF;
  font-size: 38px;
  font-weight: 700;
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
}

.article-list-hero p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  margin: 0;
  font-weight: 400;
}

/* ===== SECTION GROUPS ===== */
.article-section-group {
  margin-bottom: 50px;
  padding-bottom: 40px;
  border-bottom: 1px solid #E5E5E5;
}

.article-section-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Section header with icon */
.article-section-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.section-icon-large {
  font-size: 36px;
  color: #0A52A2;
  flex-shrink: 0;
}

.article-section-header-text h3 {
  margin: 0 0 5px 0;
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
}

.article-section-header-text p.section-description {
  margin: 0;
  font-size: 15px;
  color: #64748b;
  line-height: 1.5;
}

/* ===== ARTICLE GRID ===== */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

/* Article cards */
.article-card {
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  padding: 24px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  position: relative;
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(10, 82, 162, 0.12);
  border-color: #0A52A2;
}

.article-card h4 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.4;
}

.article-card:hover h4 {
  color: #0A52A2;
}

.article-card .article-description {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  flex-grow: 1;
}

.article-card .article-read-more {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #0A52A2;
  margin-top: auto;
}

.article-card:hover .article-read-more {
  gap: 10px;
}

.article-card .article-read-more i {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.article-card:hover .article-read-more i {
  transform: translateX(4px);
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet */
@media (max-width: 1024px) {
  .article-list-hero {
    padding: 40px 30px;
  }
  
  .article-list-hero h2 {
    font-size: 32px;
  }
  
  .article-list-hero p {
    font-size: 16px;
  }
  
  .article-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
  }
  
  .article-section-header-text h3 {
    font-size: 22px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .complete-article-list {
    margin-top: 40px;
    margin-bottom: 40px;
  }
  
  .article-list-hero {
    padding: 30px 20px;
    margin-bottom: 35px;
  }
  
  .article-list-hero h2 {
    font-size: 26px;
  }
  
  .article-list-hero p {
    font-size: 15px;
  }
  
  .article-section-group {
    margin-bottom: 40px;
    padding-bottom: 30px;
  }
  
  .article-section-header {
    gap: 15px;
    margin-bottom: 20px;
  }
  
  .section-icon-large {
    font-size: 28px;
  }
  
  .article-section-header-text h3 {
    font-size: 20px;
  }
  
  .article-section-header-text p.section-description {
    font-size: 14px;
  }
  
  .article-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .article-card {
    padding: 20px;
  }
  
  .article-card h4 {
    font-size: 16px;
  }
  
  .article-card .article-description {
    font-size: 13px;
  }
  
  .article-card:hover {
    transform: translateY(-2px);
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .article-list-hero h2 {
    font-size: 22px;
  }
  
  .article-list-hero p {
    font-size: 14px;
  }
  
  .article-section-header {
    gap: 12px;
  }
  
  .section-icon-large {
    font-size: 24px;
  }
  
  .article-section-header-text h3 {
    font-size: 18px;
  }
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
  /* Main container - dark background */
  .complete-article-list {
    background-color: #1a1a1a;
  }
  
  /* Hero banner - keep gradient but adjust for dark mode */
  .article-list-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #2563eb 100%);
  }
  
  /* Section groups - dark borders */
  .article-section-group {
    border-bottom-color: #333333;
  }
  
  /* Section header text */
  .article-section-header-text h3 {
    color: #ffffff !important;
  }
  
  .article-section-header-text p.section-description {
    color: #a0a0a0 !important;
  }
  
  /* Article cards - dark background */
  .article-card {
    background: #242424;
    border-color: #333333;
  }
  
  .article-card:hover {
    background: #2a2a2a;
    border-color: #4db8ff;
    box-shadow: 0 12px 24px rgba(77, 184, 255, 0.15);
  }
  
  /* Article card titles - WHITE TEXT (this is the fix!) */
  .article-card h4 {
    color: #ffffff !important;
  }
  
  .article-card:hover h4 {
    color: #4db8ff !important;
  }
  
  /* Article descriptions */
  .article-card .article-description {
    color: #a0a0a0 !important;
  }
  
  /* Read more links */
  .article-card .article-read-more {
    color: #4db8ff !important;
  }
  
  /* Icon color in dark mode */
  .section-icon-large {
    color: #4db8ff !important;
  }
}

/* ==== ZENDESK WEB WIDGET CUSTOMIZATIONS ==== */

/* 1. Conversation header bar - white background, medium weight text */
[class*="sc-vrqbdz-0"][class*="enrcyr"],
iframe[title*="Messaging"] [class*="sc-vrqbdz-0"] {
  background-color: #FFFFFF !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
}

/* 2. Bot avatar image - 80% size */
[class*="sc-vrqbdz-2"][class*="ilyblu"] img,
[class*="ilyblu"] img {
  width: 80% !important;
  height: 80% !important;
}

/* 3. Avatar styling - .dysjee class adjustments */
img[class*="dysjee"],
[class*="sc-1p16ygh"] img {
  min-height: 1.75rem !important;
  max-height: 1.75rem !important;
  min-width: 1.75rem !important;
  max-width: 1.75rem !important;
  border-radius: 0.25rem !important;
  object-fit: cover !important;
}

/* 4. Hide "Built with Zendesk" branding */
[class*="sc-"][data-testid*="powered-by"],
a[href*="zendesk.com"][class*="powered"],
[class*="PoweredBy"],
iframe[title*="Messaging"] + div[class*="powered"],
div[class*="sc-"]:has(> a[href*="zendesk.com/messaging"]) {
  display: none !important;
  visibility: hidden !important;
}

/* ============================================
   SMITH AGGRESSIVE COLOR OVERRIDES
   Ensures Smith branding appears correctly
   ============================================ */

/* SECTION CARDS - Force slate background #414771 */
.knowledge-base .section,
.section-tree .section,
section.section {
  background-color: #414771 !important;
  background: #414771 !important;
  background-image: none !important;
  border: 1px solid rgba(90, 174, 253, 0.3) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* SECTION HEADERS - Force teal #05E3E3 */
.knowledge-base .section h3,
.section-tree .section h3,
section.section h3,
.section h3 {
  background: #05E3E3 !important;
  background-color: #05E3E3 !important;
  background-image: none !important;
  color: #ffffff !important;
  padding: 20px 24px !important;
  margin: 0 !important;
  border-radius: 12px 12px 0 0 !important;
  border: none !important;
}

.section h3 a,
.section h3 a:visited,
.section h3 a:hover {
  color: #ffffff !important;
}

/* ARTICLE LIST INSIDE SECTIONS - Force slate background */
.section .article-list,
.section ul.article-list {
  background: #414771 !important;
  background-color: #414771 !important;
  padding: 20px 24px !important;
}

.section .article-list li,
.section .article-list li a {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

.section .article-list li a:hover {
  color: #05E3E3 !important;
}

/* BOTTOM SECTION HEADERS - Force WHITE text */
.article-section-header h3,
.article-section-group h3 {
  color: #ffffff !important;
  background: transparent !important;
  background-color: transparent !important;
}

.article-section-header .section-description,
.article-section-header p {
  color: #ffffff !important;
  opacity: 0.9 !important;
}

/* ARTICLE CARDS AT BOTTOM - Force slate with white text */
.article-card,
a.article-card {
  background: #414771 !important;
  background-color: #414771 !important;
  color: #ffffff !important;
  border: 1px solid rgba(90, 174, 253, 0.3) !important;
}

.article-card h4,
.article-card h4 a {
  color: #ffffff !important;
}

.article-card p,
.article-card .article-description {
  color: #ffffff !important;
  opacity: 0.9 !important;
}

.article-card .article-read-more {
  color: #05E3E3 !important;
  background: none !important;
  background-color: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ============================================
   SMITH HEADER GAP FIX - CRITICAL
   Removes the dark blue gap in header middle
   ============================================ */

/* Force full-width header background */
#global-header {
  width: 100% !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background-color: #01265A !important;
}

.header {
  background-color: #01265A !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Header inner - constrained content width */
.header-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: transparent !important;
}

@media (min-width: 1160px) {
  .header-inner {
    padding: 20px 0;
    width: 90%;
  }
}

/* ============================================
   SMITH VISUAL UPDATES - ADD TO END OF STYLE.CSS
   Hero logo sizing, blue section headers, community fixes
   ============================================ */

/* ===== HERO LOGO SIZING ===== */
.hero-logo {
  max-width: 500px !important;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .hero-logo {
    max-width: 350px !important;
  }
}

@media (max-width: 480px) {
  .hero-logo {
    max-width: 280px !important;
  }
}


/* ===== COMMUNITY SECTION IMPROVEMENTS ===== */
.home-section.community {
  background: linear-gradient(135deg, #414771 0%, #2a2d52 100%) !important;
  padding: 60px 40px;
  margin: 40px 0;
  border-radius: 12px;
  border: 1px solid rgba(73, 145, 214, 0.3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Community heading - white for contrast */
.home-section.community h2 {
  color: #ffffff !important;
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 20px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Community description text - light color for readability */
.home-section.community p {
  color: #e8eef5 !important;
  font-size: 18px !important;
  padding: 0 20px 30px 20px !important;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.home-section.community p strong {
  color: #ffffff !important;
  font-weight: 600;
}

/* Community button - blue with white text */
.community-link {
  display: inline-block;
  background: #4991d6 !important;
  color: #ffffff !important;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(73, 145, 214, 0.3);
  border: 2px solid transparent;
}

.community-link:hover {
  background: #5aa3e8 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(73, 145, 214, 0.4);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff !important;
}

.community-link:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(73, 145, 214, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .home-section.community {
    padding: 40px 20px;
  }
  
  .home-section.community h2 {
    font-size: 28px;
  }
  
  .home-section.community p {
    font-size: 16px !important;
    padding: 0 10px 20px 10px !important;
  }
  
  .community-link {
    padding: 12px 24px;
    font-size: 15px;
  }
}


/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
  /* Keep teal in dark mode */
  .knowledge-base .section h3,
  .knowledge-base .section h3 a,
  .section-tree .section h3,
  .section-tree .section h3 a {
    background: #05E3E3 !important;
    color: #ffffff !important;
  }
  
  /* Article section headers - WHITE TEXT in dark mode */
  .article-section-header-text h3 {
    color: #ffffff !important;
    background: transparent !important;
  }
  
  .section-icon-large {
    color: #05E3E3 !important;
  }
  
  /* Community section maintains its styling in dark mode */
  .home-section.community {
    background: linear-gradient(135deg, #414771 0%, #2a2d52 100%) !important;
    border-color: rgba(73, 145, 214, 0.3);
  }
  
  .home-section.community h2 {
    color: #ffffff !important;
  }
  
  .home-section.community p {
    color: #e8eef5 !important;
  }
  
  .community-link {
    background: #4991d6 !important;
    color: #ffffff !important;
  }
  
  .community-link:hover {
    background: #5aa3e8 !important;
  }
}

/* ============================================
   SMITH FOOTER STYLING
   Slate gray background with light text
   ADD THIS TO END OF STYLE.CSS (after previous additions)
   ============================================ */

/* Footer background - slate gray */
.footer {
  background-color: #414771 !important;
  border-top: 1px solid rgba(90, 174, 253, 0.2);
  padding: 30px 20px;
  margin-top: 60px;
}

.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

/* Footer logo */
.footer-logo {
  flex-shrink: 0;
}

.footer-logo img {
  max-width: 80px;
  height: auto;
  filter: brightness(1.2);
}

/* Footer info text */
.ebm-footer-info {
  flex-grow: 1;
  text-align: right;
}

.ebm-footer-info p {
  color: #e8eef5 !important;
  font-size: 14px;
  line-height: 1.6;
  margin: 5px 0;
}

/* Footer links - Finance Blue */
.ebm-footer-info a {
  color: #5AAEFD !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

.ebm-footer-info a:hover {
  color: #7bc4ff !important;
  text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  
  .footer-logo {
    order: -1;
  }
  
  .ebm-footer-info {
    text-align: center;
  }
  
  .ebm-footer-info p {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .footer {
    padding: 25px 15px;
  }
  
  .ebm-footer-info p {
    font-size: 12px;
    line-height: 1.8;
  }
  
  /* Stack bullets on mobile for better readability */
  .ebm-footer-info p {
    word-break: break-word;
  }
}

/* Dark mode - maintain consistent footer styling */
@media (prefers-color-scheme: dark) {
  .footer {
    background-color: #414771 !important;
    border-top-color: rgba(90, 174, 253, 0.2);
  }
  
  .ebm-footer-info p {
    color: #e8eef5 !important;
  }
  
  .ebm-footer-info a {
    color: #5AAEFD !important;
  }
  
  .ebm-footer-info a:hover {
    color: #7bc4ff !important;
  }
}}

/* ============================================
   SMITH SECTION PAGE OVERRIDES
   Aligns section pages with homepage styling
   ============================================ */

/* --- SECTION HEADER BAR: solid #4991D6 --- */
/* Nuclear override - covers every possible selector that sets a gradient */
.section-header,
.section-page .section-header,
.category-page .section-header,
.category-page .category-header,
section.section-header,
.section-header header,
.section-header .page-header,
.section-page header.page-header,
.section-page .section-header header,
.section-page .section-header .page-header,
.category-page header.page-header,
.category-page .section-header header,
.category-page .section-header .page-header,
body[class*="section-42679658758925"] header,
body[class*="section-42679681047053"] header,
body[class*="section-42679711032589"] header,
body[class*="section-42679693922189"] header,
body[class*="section-42679736498573"] header,
body[class*="section-42679701344781"] header,
body[class*="section-"] header,
body[class*="section-"] .section-header,
body[class*="section-"] .page-header {
  background: #4991D6 !important;
  background-image: none !important;
  background-color: #4991D6 !important;
}

/* Section header container shape */
.section-header {
  padding: 50px 40px !important;
  width: 100% !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}

/* Inner header element should be transparent (not double-layered) */
.section-header header,
.section-header .page-header {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.section-header h1,
.section-header .page-header h1 {
  color: #FFFFFF !important;
  font-weight: 600;
}

/* Follow button on section header */
.section-header .section-subscribe button {
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  color: #FFFFFF !important;
  background: transparent !important;
}

.section-header .section-subscribe button:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: #FFFFFF !important;
}

/* --- SECTION PAGE BACKGROUND: #012251 (matches main page) --- */
.section-container {
  background-color: #012251 !important;
  padding: 40px 20px !important;
}

/* Remove gap between section-header and section-container */
.sub-nav {
  margin-bottom: 20px !important;
}

/* Container divider - subtle on dark backgrounds */
.container-divider {
  border-top-color: rgba(90, 174, 253, 0.15) !important;
}

/* --- ARTICLE CARDS: #414771 with light text --- */
li.article-list-item {
  background: #414771 !important;
  border-radius: 12px !important;
  padding: 26px !important;
  border: 1px solid rgba(90, 174, 253, 0.2) !important;
  transition: all 0.3s ease !important;
}

li.article-list-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
  background: #4d5580 !important;
  border-color: rgba(90, 174, 253, 0.4) !important;
}

/* Article title links - light for dark card background */
.article-list-item a.article-list-link {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 18px !important;
}

.article-list-item a.article-list-link:hover {
  color: #5AAEFD !important;
}

/* Article description text - light on dark card */
.article-list-item .article-list-item-description,
.article-list-item p {
  color: #c8d0e0 !important;
}

/* --- READ MORE BUTTON: #05E3E3 --- */
.article-read-more {
  background: #05E3E3 !important;
  color: #01265A !important;
  padding: 8px 18px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  border: none !important;
}

.article-read-more:hover {
  background: #04c9c9 !important;
  color: #01265A !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(5, 227, 227, 0.3) !important;
  text-decoration: none !important;
}

/* Article list layout */
.section-container ul.article-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
}

/* Promoted article star icon */
li.article-list-item.article-promoted svg {
  color: #5AAEFD !important;
}

/* ============================================
   SMITH ARTICLE PAGE OVERRIDES
   Article header card = #4991D6
   Article body background = #414771
   ============================================ */

/* Article container - the dark card */
.article-container {
  background-color: #414771 !important;
  border-radius: 12px !important;
  padding: 30px !important;
  margin-top: 20px !important;
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Force the parent .container on article pages to not overflow */
.container:has(.article-container) {
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Fallback for browsers without :has() — apply to all .container */
body[class*="article-"] .container {
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Article sidebar - breathing room */
.article-sidebar,
.collapsible-sidebar {
  background-color: transparent !important;
  padding-right: 20px !important;
}

@media (min-width: 1024px) {
  .article-sidebar {
    flex: 0 0 20% !important;
    max-width: 20% !important;
    border-right: 1px solid rgba(90, 174, 253, 0.15) !important;
    margin-right: 20px !important;
  }
}

.sidenav-title,
.collapsible-sidebar-title {
  color: #FFFFFF !important;
}

.sidenav-item {
  color: #c8d0e0 !important;
}

.sidenav-item:hover,
.sidenav-item.current-article {
  color: #5AAEFD !important;
}

/* Article header card - #4991D6 */
.article-header {
  background: #4991D6 !important;
  padding: 30px !important;
  border-radius: 12px !important;
  margin-bottom: 30px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Article title */
.article-title,
h1.article-title {
  color: #FFFFFF !important;
}

.meta-data:not(:last-child)::after {
  content: "•";
  margin: 0 8px;
  opacity: 0.6;
}

/* Follow button on article page */
.article-header .article-subscribe button,
.article [role=button] {
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  color: #FFFFFF !important;
  background: transparent !important;
}

.article-header .article-subscribe button:hover,
.article [role=button]:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Main article area - prevent overflow */
.article {
  padding: 0 20px 0 0 !important;
  background-color: transparent !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  min-width: 0 !important; /* flex item shrink fix */
  flex: 1 1 0% !important; /* allow shrinking */
}

@media (min-width: 1024px) {
  .article {
    max-width: calc(80% - 50px) !important; /* sidebar is 20% + margins */
  }
}

/* Article body */
.article-body {
  background-color: transparent !important;
  color: #e8eef5 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Constrain all children inside article body */
.article-body > * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Article body text */
.article-body p,
.article-body li,
.article-body td,
.article-body th {
  color: #e8eef5 !important;
}

.article-body strong,
.article-body b {
  color: #FFFFFF !important;
}

.article-body h2,
.article-body h3,
.article-body h4 {
  color: #FFFFFF !important;
}

/* Article links */
.article-body a {
  color: #5AAEFD !important;
}

.article-body a:hover {
  color: #7bc4ff !important;
}

/* ============================================
   DARK BACKGROUND PROTECTION FOR ARTICLE HTML
   Overrides all inline light backgrounds and
   dark text colors from article templates
   ============================================ */

/* --- LIGHT BACKGROUND OVERRIDES --- */
/* Target every common light bg used in article HTML templates */
.article-body div[style*="background-color: #f0f7ff"],
.article-body div[style*="background-color: #f8fafc"],
.article-body div[style*="background-color: #e0f2fe"],
.article-body div[style*="background-color: #e3f2fd"],
.article-body div[style*="background-color: #f0f9ff"],
.article-body div[style*="background-color: #dbeafe"],
.article-body div[style*="background-color: #dcfce7"],
.article-body div[style*="background-color: #fef3c7"],
.article-body div[style*="background-color: #f3e8ff"],
.article-body div[style*="background-color: #fff"],
.article-body div[style*="background-color: white"],
.article-body div[style*="background: #f8fafc"],
.article-body div[style*="background: #dbeafe"],
.article-body div[style*="background: #dcfce7"],
.article-body div[style*="background: #fef3c7"],
.article-body div[style*="background: #f3e8ff"],
.article-body div[style*="background: white"] {
  background-color: rgba(255, 255, 255, 0.06) !important;
  background-image: none !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(90, 174, 253, 0.2) !important;
}

/* Gradient light backgrounds (timeline, step flow sections) */
.article-body div[style*="linear-gradient(135deg, #f0f9ff"],
.article-body div[style*="linear-gradient(135deg, #f0f7ff"] {
  background: rgba(90, 174, 253, 0.08) !important;
  border: 1px solid rgba(90, 174, 253, 0.2) !important;
}

/* Intro note / "In This Article" box */
.article-body .intro-note,
.article-body div[style*="background-color: #e0f2fe"] {
  background-color: rgba(90, 174, 253, 0.1) !important;
  border-left-color: #5AAEFD !important;
}

/* White background cards (role cards, essential reading cards) */
.article-body div[style*="background: white"],
.article-body div[style*="background-color: white"] {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(90, 174, 253, 0.2) !important;
}

/* Screenshot placeholder boxes */
.article-body div[style*="border: 2px dashed"] {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(90, 174, 253, 0.25) !important;
}

/* --- DARK TEXT COLOR OVERRIDES --- */
/* These target inline text colors that are unreadable on #414771 */

/* Near-black text: #0c4a6e, #1e293b, #1e40af */
.article-body div[style*="color: #0c4a6e"] *,
.article-body div[style*="color: #0c4a6e"],
.article-body h3[style*="color: #0c4a6e"],
.article-body h4[style*="color: #0c4a6e"],
.article-body p[style*="color: #0c4a6e"] {
  color: #FFFFFF !important;
}

.article-body div[style*="color: #1e293b"] *,
.article-body div[style*="color: #1e293b"],
.article-body h3[style*="color: #1e293b"],
.article-body h4[style*="color: #1e293b"],
.article-body p[style*="color: #1e293b"] {
  color: #FFFFFF !important;
}

/* Medium-dark text: #475569, #64748b, #666 */
.article-body p[style*="color: #475569"],
.article-body li[style*="color: #475569"],
.article-body div[style*="color: #475569"],
.article-body ul[style*="color: #475569"],
.article-body ul[style*="color: #475569"] li {
  color: #c8d0e0 !important;
}

.article-body p[style*="color: #64748b"],
.article-body div[style*="color: #64748b"] {
  color: #9fadc0 !important;
}

.article-body p[style*="color: #666"] {
  color: #9fadc0 !important;
}

/* Colored badge text (these are on colored pill backgrounds, leave them) */
/* #1e40af on #dbeafe, #15803d on #dcfce7, #92400e on #fef3c7, #6b21a8 on #f3e8ff */
/* These badge spans keep their colors since their bg pills are small and readable */
.article-body span[style*="background: #dbeafe"],
.article-body span[style*="background: #dcfce7"],
.article-body span[style*="background: #fef3c7"],
.article-body span[style*="background: #f3e8ff"] {
  /* Keep badge pill backgrounds — they're small and have good contrast */
}

/* Card heading colors in role grid */
.article-body h3[style*="color: #1e293b"] {
  color: #FFFFFF !important;
}

/* --- BLOCKQUOTE STYLING --- */
/* The note/info blockquotes that show as yellow/green */
.article-body blockquote,
.article-body blockquote.note,
.article-body blockquote.info {
  background-color: rgba(90, 174, 253, 0.08) !important;
  border-left: 4px solid #5AAEFD !important;
  color: #e8eef5 !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
}

.article-body blockquote p,
.article-body blockquote li {
  color: #e8eef5 !important;
}

/* --- HR DIVIDERS --- */
.article-body hr,
.article hr,
.article-relatives {
  border-color: rgba(90, 174, 253, 0.15) !important;
}

/* --- BUTTON / CTA LINKS --- */
.article-body a[style*="background-color: #2d5a8c"] {
  background-color: #5AAEFD !important;
  color: #01265A !important;
}

/* Social sharing icons */
.share a,
.article-body ~ div a {
  color: #c8d0e0 !important;
}

/* Article vote section */
.article-vote,
.article-vote-controls {
  color: #e8eef5 !important;
}

.article-vote-controls button {
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #e8eef5 !important;
  background: transparent !important;
}

.article-vote-controls button:hover {
  border-color: #5AAEFD !important;
  color: #5AAEFD !important;
}

/* --- TABLE OF CONTENTS --- */
.toc-container {
  background: rgba(255, 255, 255, 0.06) !important;
  border-left: 3px solid #5AAEFD !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

.toc-container .toc-heading-label {
  color: #FFFFFF !important;
}

.toc-h2 a,
.toc-container a {
  color: #5AAEFD !important;
}

.toc-container a.active {
  color: #FFFFFF !important;
}

/* ============================================
   SMITH HEADER BAR: #012251
   ============================================ */
.header,
.header-wrapper,
#global-header {
  background-color: #012251 !important;
  background: #012251 !important;
}

.header-inner {
  background-color: transparent !important;
}

/* ============================================
   SMITH HOMEPAGE SECTION TITLE COLOR + 
   SECTION-TREE READ MORE VISIBILITY
   ============================================ */

/* Homepage section card titles + icons - #012681 on teal bg */
.knowledge-base .section h3,
.knowledge-base .section h3 a {
  color: #012681 !important;
}

.knowledge-base .section h3 .section-icon,
.knowledge-base .section h3 i {
  color: #012681 !important;
}

.knowledge-base .section h3 a:hover {
  color: #FFFFFF !important;
}

/* Section-tree "See all articles" button - visible on dark bg */
.section-tree .see-all-articles,
a.see-all-articles {
  background: #05E3E3 !important;
  color: #01265A !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
  padding: 10px 20px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.section-tree .see-all-articles:hover,
a.see-all-articles:hover {
  background: #04c9c9 !important;
  color: #01265A !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(5, 227, 227, 0.3) !important;
}

/* Section-tree article links */
.section-tree .section ul a,
.section-tree .article-list a,
.section-tree .article-promoted a {
  color: #c8d0e0 !important;
}

.section-tree .section ul a:hover,
.section-tree .article-list a:hover,
.section-tree .article-promoted a:hover {
  color: #5AAEFD !important;
}

.article-header .article-author a,
.article-header .article-author-name {
  color: #FFFFFF !important;
}

/* ============================================
   REQUEST FORM CLEANUP
   Styling for the Submit a Support Request page
   ============================================ */

/* Top teal header box - centered */
div.form-info-header {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background-color: #05e3e3 !important;
  color: #01265A !important;
  padding: 40px !important;
}

.form-info-title {
  color: #01265A !important;
  font-weight: 600 !important;
}

.form-info-description {
  color: #01265A !important;
}

/* Cyan instructional box - centered */
div#inline-note.request-note {
  background-color: #05e3e3 !important;
  padding: 20px 40px !important;
  margin: 20px auto 40px auto !important;
  max-width: 1200px !important;
  border-radius: 0 !important;
}

div#inline-note.request-note p {
  color: #01265A !important;
  margin: 0 !important;
}

div#inline-note.request-note a {
  color: #01265A !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

/* Main form container - centered */
div#main-content.form {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Form itself - centered within container */
form#new_request.request-form {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ALL form fields - #414771 background with white text */
form#new_request input[type="text"],
form#new_request input[type="email"],
form#new_request input[type="url"],
form#new_request select,
form#new_request textarea,
form#new_request .nesty-input {
  background-color: #414771 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Dropdown arrow color */
form#new_request select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
}

/* Submit button - Finance Blue default */
form#new_request input[type="submit"],
form#new_request button[type="submit"] {
  background-color: #5AAEFD !important;
  color: #01265A !important;
  border: none !important;
  padding: 12px 32px !important;
  font-family: 'Actor', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

/* Submit button hover - Electric Blue */
form#new_request input[type="submit"]:hover,
form#new_request button[type="submit"]:hover {
  background-color: #05FCFC !important;
  color: #01265A !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(5, 252, 252, 0.3) !important;
}

/* ========================================
   CC EMAIL CHIPS FIX - SMITH COLORS
   Use #414771 background instead of black
   ======================================== */

/* Email pills - #414771 background with white text */
li[data-hc-pill="true"],
[data-hc-pill="true"],
span[data-hc-pill="true"] {
  background-color: #414771 !important;
  border: 1px solid #5AAEFD !important; /* Finance Blue border */
  color: #ffffff !important;
}

/* Email text inside pill - force white */
li[data-hc-pill="true"] span,
[data-hc-pill="true"] span,
li[data-hc-pill="true"] > span {
  color: #ffffff !important;
  background-color: transparent !important;
}

/* Pills container background - also #414771 */
ul[data-hc-pills-container="true"],
[data-hc-pills-container="true"],
ul[data-hc-pills-container] {
  background-color: #414771 !important;
  border-color: #5AAEFD !important;
}

/* Input field inside pills container - #414771 background */
ul[data-hc-pills-container] input[type="text"],
[data-hc-pills-container] input[type="text"] {
  background-color: #414771 !important;
  color: #ffffff !important;
  border: none !important;
}

/* Placeholder text */
ul[data-hc-pills-container] input[type="text"]::placeholder,
[data-hc-pills-container] input[type="text"]::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Close button (X) on pills */
li[data-hc-pill="true"] span[aria-label="Close"],
[data-hc-pill="true"] span[aria-label="Close"] {
  color: #ffffff !important;
  opacity: 0.7;
}

li[data-hc-pill="true"] span[aria-label="Close"]:hover,
[data-hc-pill="true"] span[aria-label="Close"]:hover {
  opacity: 1;
}

/* ========================================
   HOMEPAGE SECTION CARDS - VISITED LINK FIX
   Prevent visited links from staying white
   ======================================== */

/* Reset visited state to match unvisited for section cards */
.blocks-item-link:visited {
  color: inherit !important;
}

.blocks-item-link:visited .blocks-item-title {
  color: inherit !important;
}

/* Ensure hover still works for visited links */
.blocks-item:hover .blocks-item-link:visited,
.blocks-item:hover .blocks-item-link:visited * {
  color: #ffffff !important;
}

/* ========================================
   SEARCH SIDEBAR - BACKGROUND FIX
   Fix light backgrounds in search sidebar
   ======================================== */

/* Brand color background for sidebar */
.search-results-sidebar {
  background-color: #414771 !important;
}

/* Darker shade for hover and current items */
.search-results-sidebar .sidenav-item:hover,
.search-results-sidebar .sidenav-item.current {
  background-color: #2d3350 !important;
}

/* Ensure text is visible */
.search-results-sidebar .sidenav-item {
  color: #e0e0e0 !important;
}

.search-results-sidebar .sidenav-item.current {
  color: #ffffff !important;
}

/* ========================================
   SEARCH SIDEBAR - PADDING AND NUMBER FIXES
   Add spacing and improve readability
   ======================================== */

/* Add padding to sidebar sections */
.search-results-sidebar {
  background-color: #414771 !important;
  padding: 20px !important;
}

/* Add padding to section titles */
.search-results-sidebar .collapsible-sidebar-title,
.search-results-sidebar h3 {
  padding-left: 0 !important;
  margin-top: 0 !important;
}

/* Lighter color for document counts in parentheses */
.search-results-sidebar .doc-count,
.search-results-sidebar .sidenav-subitem .doc-count {
  color: #b0b0b0 !important;
}

/* Also target the count if it's in the filter name */
.search-results-sidebar .filter-name span {
  color: #b0b0b0 !important;
}

/* ========================================
   SEARCH NO RESULTS - TEXT VISIBILITY FIX
   Fix dark text on dark background
   ======================================== */

/* No results message */
.search-results .no-results,
.no-results,
.search-results .no-results .headline,
.no-results .headline {
  color: #ffffff !important;
}

/* No results subheading/description */
.search-results .no-results p,
.no-results p,
.search-results .no-results .action-prompt,
.no-results .action-prompt {
  color: #e0e0e0 !important;
}

/* No results links */
.search-results .no-results a,
.no-results a {
  color: #5AAEFD !important;
}

.search-results .no-results a:hover,
.no-results a:hover {
  color: #05e3e3 !important;
}

/* ========================================
   VISITED LINK CONTRAST FIX - SMITH HELP CENTER
   Prevents visited state from washing out section
   card headings and article list links.
   Must remain the LAST rule in the file.
   ======================================== */

/* Section card headings (homepage + category pages) */
.knowledge-base .section h3 a:visited,
.knowledge-base .section h3 a:link,
.section-tree .section h3 a:visited,
.section-tree .section h3 a:link,
.section h3 a:visited,
.section h3 a:link {
  color: #012681 !important; /* Dark navy - readable on teal #05E3E3 header bg */
}

.knowledge-base .section h3 a:hover,
.section-tree .section h3 a:hover,
.section h3 a:hover {
  color: #ffffff !important;
}

/* Article list links inside section cards (homepage + category pages) */
.section .article-list a:visited,
.section .article-list a:link,
.section-tree .section ul a:visited,
.section-tree .section ul a:link {
  color: rgba(255, 255, 255, 0.95) !important; /* Light on #414771 card bg */
}

.section .article-list a:hover,
.section-tree .section ul a:hover {
  color: #05E3E3 !important; /* Electric Blue on hover */
}

/* Article list items on section pages */
.article-list-item a:visited,
.article-list-item a:link,
.article-list-item a.article-list-link:visited,
.article-list-item a.article-list-link:link {
  color: #ffffff !important; /* White on #414771 card bg */
}

.article-list-item a:hover,
.article-list-item a.article-list-link:hover {
  color: #5AAEFD !important; /* Finance Blue on hover */
}

/* Promoted articles on homepage */
.promoted-articles-item a:visited,
.promoted-articles-item a:link {
  color: inherit !important;
}

/* "See all articles" button */
.see-all-articles:visited,
.see-all-articles:link {
  color: #01265A !important; /* Midnight Blue on Electric Blue / teal bg */
}

.see-all-articles:hover {
  color: #01265A !important;
}