:root,
:host,
html {
  --st-dark-green: #003230;
  --st-deep-green: #00211f;
  --st-panel-green: #296664;
  --st-mint: #78ffaf;
  --st-paper: #f7f5f3;
  --st-surface: #fcfcfc;
  --st-grey-100: #f2f2f2;
  --st-grey-200: #dfe1df;
  --st-grey-400: #7d8180;

  --pf-v5-global--primary-color--100: var(--st-dark-green);
  --pf-v5-global--primary-color--200: var(--st-deep-green);
  --pf-v5-global--primary-color--dark-100: var(--st-dark-green);
  --pf-v5-global--primary-color--dark-200: var(--st-deep-green);
  --pf-v5-global--primary-color--light-100: var(--st-panel-green);

  --pf-v5-global--active-color--100: var(--st-dark-green);
  --pf-v5-global--active-color--200: var(--st-mint);
  --pf-v5-global--active-color--300: var(--st-panel-green);
  --pf-v5-global--active-color--400: var(--st-mint);

  --pf-v5-global--link--Color: var(--st-panel-green);
  --pf-v5-global--link--Color--hover: var(--st-dark-green);
  --pf-v5-global--link--Color--dark: var(--st-panel-green);
  --pf-v5-global--link--Color--dark--hover: var(--st-dark-green);

  --pf-v5-global--BackgroundColor--100: var(--st-surface);
  --pf-v5-global--BackgroundColor--150: var(--st-paper);
  --pf-v5-global--BackgroundColor--200: var(--st-grey-100);

  --pf-v5-global--BorderColor--100: var(--st-grey-200);
  --pf-v5-global--BorderRadius--sm: 6px;
  --pf-v5-global--BorderRadius--lg: 10px;

  --pf-v5-global--FontFamily--text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pf-v5-global--FontFamily--heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pf-v5-global--FontFamily--sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body {
  font-family: var(--pf-v5-global--FontFamily--text);
}

.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--st-dark-green);
  --pf-v5-c-masthead--PaddingLeft: 24px;
  --pf-v5-c-masthead--PaddingRight: 24px;
  color: var(--st-paper);
  border-bottom: 1px solid var(--st-deep-green);
}

.pf-v5-c-masthead a,
.pf-v5-c-masthead button,
.pf-v5-c-masthead__content {
  color: var(--st-paper);
}

.pf-v5-c-masthead__brand img {
  max-height: 28px;
  width: auto;
}

.pf-v5-c-button {
  --pf-v5-c-button--BorderRadius: 100px;
  --pf-v5-c-button--PaddingLeft: 18px;
  --pf-v5-c-button--PaddingRight: 18px;
  --pf-v5-c-button--FontWeight: 500;
  letter-spacing: 0.2px;
}

.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--st-dark-green);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--st-deep-green);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--st-deep-green);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--st-deep-green);
}

.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--Color: var(--st-dark-green);
  --pf-v5-c-button--m-secondary--BorderColor: var(--st-dark-green);
  --pf-v5-c-button--m-secondary--hover--Color: var(--st-deep-green);
  --pf-v5-c-button--m-secondary--hover--BorderColor: var(--st-deep-green);
}

.pf-v5-c-button.pf-m-link {
  --pf-v5-c-button--m-link--Color: var(--st-panel-green);
  --pf-v5-c-button--m-link--hover--Color: var(--st-dark-green);
}

.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__link[aria-current="page"] {
  --pf-v5-c-nav__link--m-current--Color: var(--st-dark-green);
  --pf-v5-c-nav__link--m-current--BackgroundColor: rgba(120, 255, 175, 0.18);
  --pf-v5-c-nav__link--before--BorderLeftColor: var(--st-dark-green);
  --pf-v5-c-nav__link--before--BorderLeftWidth: 3px;
  font-weight: 600;
}

.pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: var(--st-paper);
  --pf-v5-c-page__sidebar--Color: var(--st-dark-green);
  border-right: 1px solid var(--st-grey-200);
  color: var(--st-dark-green);
}

.pf-v5-c-page__sidebar .pf-v5-c-nav,
.pf-v5-c-page__sidebar .pf-v5-c-nav__list,
.pf-v5-c-page__sidebar .pf-v5-c-nav__link {
  --pf-v5-c-nav__link--Color: var(--st-dark-green);
  --pf-v5-c-nav__link--hover--Color: var(--st-deep-green);
  --pf-v5-c-nav__link--hover--BackgroundColor: rgba(0, 50, 48, 0.06);
  --pf-v5-c-nav__link--focus--Color: var(--st-deep-green);
  --pf-v5-c-nav__link--focus--BackgroundColor: rgba(0, 50, 48, 0.06);
  --pf-v5-c-nav__link--active--Color: var(--st-deep-green);
  --pf-v5-c-nav__link--active--BackgroundColor: rgba(0, 50, 48, 0.08);
  color: var(--st-dark-green);
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__section-title,
.pf-v5-c-page__sidebar .pf-v5-c-nav__subnav-title {
  --pf-v5-c-nav__section-title--Color: var(--st-grey-400);
  color: var(--st-grey-400);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-size: 11px;
}

.pf-v5-c-page__sidebar .pf-v5-c-select__toggle,
.pf-v5-c-page__sidebar .pf-v5-c-menu-toggle {
  --pf-v5-c-select__toggle--Color: var(--st-dark-green);
  --pf-v5-c-menu-toggle--Color: var(--st-dark-green);
  color: var(--st-dark-green);
}

.pf-v5-c-page__main {
  --pf-v5-c-page__main--BackgroundColor: var(--st-surface);
}

.pf-v5-c-card,
.pf-v5-c-panel {
  --pf-v5-c-card--BorderRadius: 12px;
  --pf-v5-c-card--BoxShadow: 0 1px 2px rgba(0, 33, 31, 0.04), 0 0 0 1px var(--st-grey-200);
  border-radius: 12px;
}

.pf-v5-c-form-control,
.pf-v5-c-form__field-group,
.pf-v5-c-text-input-group {
  --pf-v5-c-form-control--BorderRadius: 8px;
  --pf-v5-c-form-control--BorderColor: var(--st-grey-200);
  --pf-v5-c-form-control--focus--BorderBottomColor: var(--st-dark-green);
}

.pf-v5-c-form-control:focus-within,
.pf-v5-c-form-control:focus {
  box-shadow: 0 0 0 3px rgba(120, 255, 175, 0.3);
  border-color: var(--st-dark-green);
}

.pf-v5-c-tabs__link {
  --pf-v5-c-tabs__link--Color: var(--st-grey-400);
}

.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link {
  --pf-v5-c-tabs__link--Color: var(--st-dark-green);
  --pf-v5-c-tabs__item--m-current__link--after--BorderColor: var(--st-dark-green);
  font-weight: 600;
}

.pf-v5-c-badge.pf-m-read {
  --pf-v5-c-badge--m-read--BackgroundColor: var(--st-grey-100);
  --pf-v5-c-badge--m-read--Color: var(--st-dark-green);
}

.pf-v5-c-badge.pf-m-unread {
  --pf-v5-c-badge--m-unread--BackgroundColor: var(--st-dark-green);
}

.pf-v5-c-switch__toggle {
  --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--st-dark-green);
}

.pf-v5-c-alert.pf-m-success {
  --pf-v5-c-alert--m-success__title--Color: var(--st-dark-green);
}

a {
  color: var(--st-panel-green);
}

a:hover {
  color: var(--st-dark-green);
}

::selection {
  background: rgba(120, 255, 175, 0.4);
  color: var(--st-dark-green);
}