/* FIT Express theme layer. Loaded after Bulma on every page.
   Shares the education dashboard's design language: Geist type, hairline borders,
   quiet surfaces, no heavy shadows. Light by default; html[data-theme="dark"] flips the tokens. */

@font-face {
  font-family: "Geist";
  src: url("/education-dashboard/fonts/GeistSans-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --fx-nav-height: 60px;
  --fx-font: "Geist", Inter, "Segoe UI", Arial, sans-serif;
  --fx-radius: 10px;
  --fx-radius-sm: 7px;
  --fx-bg: #f6f6f7;
  --fx-surface: #ffffff;
  --fx-surface-soft: #fafafb;
  --fx-surface-raised: #f2f2f4;
  --fx-line: rgba(20, 20, 30, 0.12);
  --fx-line-strong: rgba(20, 20, 30, 0.22);
  --fx-text: #17171b;
  --fx-text-muted: #6b6b75;
  --fx-text-soft: #8b8b94;
  --fx-accent: #17171b;
  --fx-accent-contrast: #ffffff;
  --fx-brand: #e31b23;
  --fx-link: #1f557e;
  --fx-link-hover: #163f5e;
  --fx-logo-primary: #1f557e;
  --fx-logo-secondary: #17171b;
  --fx-hover: rgba(20, 20, 30, 0.05);
  --fx-shadow: 0 1px 2px rgba(20, 20, 30, 0.05);
  --fx-shadow-pop: 0 12px 32px rgba(20, 20, 30, 0.14);
  color-scheme: light;
}

html[data-theme="dark"] {
  --fx-bg: #060607;
  --fx-surface: #0f0f11;
  --fx-surface-soft: #111113;
  --fx-surface-raised: #17171a;
  --fx-line: rgba(146, 148, 158, 0.22);
  --fx-line-strong: rgba(146, 148, 158, 0.42);
  --fx-text: #f4f4f5;
  --fx-text-muted: #a1a1aa;
  --fx-text-soft: #7c7c85;
  --fx-accent: #f4f4f5;
  --fx-accent-contrast: #0b0b0d;
  --fx-link: #7bc7f4;
  --fx-link-hover: #a5dbfa;
  --fx-logo-primary: #7bc7f4;
  --fx-logo-secondary: #f4f4f5;
  --fx-hover: rgba(255, 255, 255, 0.06);
  --fx-shadow: none;
  --fx-shadow-pop: 0 14px 36px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
html {
  background-color: var(--fx-bg);
}

body {
  font-family: var(--fx-font);
  font-feature-settings: "ss01" 1, "cv02" 1, "cv03" 1;
  color: var(--fx-text);
  background-color: var(--fx-bg);
  -webkit-font-smoothing: antialiased;
}

button,
input,
optgroup,
select,
textarea {
  font-family: var(--fx-font);
}

a {
  color: var(--fx-link);
}

a:hover {
  color: var(--fx-link-hover);
}

strong,
.title,
.subtitle,
.label {
  color: var(--fx-text);
}

.subtitle,
.has-text-grey,
.has-text-grey-dark,
.has-text-grey-light,
.help {
  color: var(--fx-text-muted) !important;
}

hr {
  background-color: var(--fx-line);
}

/* ---------------------------------------------------------------- navbar */
.navbar.has-shadow {
  min-height: var(--fx-nav-height);
  background: color-mix(in srgb, var(--fx-surface) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--fx-line);
  box-shadow: none;
}

.navbar.has-shadow > .container {
  min-height: var(--fx-nav-height);
  align-items: center;
}

.navbar-brand,
.navbar-item,
.navbar-link,
.navbar-end,
.navbar-start {
  align-items: center;
}

.navbar-brand .navbar-item img {
  max-height: 34px;
}

.navbar-item,
.navbar-link {
  color: var(--fx-text);
  font-weight: 500;
  font-size: 0.92rem;
  border-radius: var(--fx-radius-sm);
  padding: 0.45rem 0.8rem;
  transition: background 120ms ease, color 120ms ease;
}

a.navbar-item:hover,
a.navbar-item.is-active,
.navbar-link:hover,
.navbar-item.has-dropdown:hover .navbar-link,
.navbar-item.has-dropdown.is-active .navbar-link {
  background-color: var(--fx-hover);
  color: var(--fx-text);
}

.navbar-item.is-tab {
  border-bottom: 0;
  padding-bottom: 0.45rem;
}

.navbar-item.is-tab:hover,
.navbar-item.is-tab.is-active {
  border-bottom: 0;
  background-color: var(--fx-hover);
}

.navbar-link:not(.is-arrowless)::after {
  border-color: var(--fx-text-muted);
}

.navbar-dropdown {
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
  border-top: 1px solid var(--fx-line);
  border-radius: var(--fx-radius);
  box-shadow: var(--fx-shadow-pop);
  padding: 0.35rem;
  /* No margin here: a gap between the item and its dropdown breaks Bulma's hover-to-open. */
  margin-top: 0;
}

/* The navbar stays pinned while scrolling: the dashboard sidebar is sticky at --fx-nav-height, so a
   scrolling navbar would leave a bare gap above it. Also keeps open dropdowns above page content. */
.navbar.has-shadow {
  position: sticky;
  top: 0;
  z-index: 40;
}

.navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown {
  display: block;
}

.navbar-dropdown a.navbar-item {
  padding-right: 1.2rem;
}

.navbar-dropdown .navbar-item .icon {
  color: var(--fx-text-muted);
}

.navbar-dropdown hr.navbar-divider,
.navbar-menu hr.dropdown-divider {
  background-color: var(--fx-line);
}

.navbar-burger {
  color: var(--fx-text);
  height: var(--fx-nav-height);
}

.navbar-burger:hover {
  background-color: var(--fx-hover);
}

@media screen and (max-width: 1023px) {
  .navbar-menu.is-active {
    background: var(--fx-surface);
    border-top: 1px solid var(--fx-line);
    box-shadow: var(--fx-shadow-pop);
  }
}

/* search in the brand area */
#search_filter {
  display: flex;
  align-items: center;
  align-self: stretch;
  /* A <form> picks up a 1em bottom margin; that margin box, not the field, was being centred. */
  margin: 0 !important;
}

#search_filter #search_bar {
  /* The markup carries m-t-15 from the old layout; centre the field vertically instead. */
  margin: 0 0 0 0.5rem !important;
}
#search_filter #search_bar .control {
  /* The wrapping <p> picks up a paragraph bottom margin that pushed the box 8px above the logo. */
  margin: 0 !important;
}

#search_filter .input {
  min-width: 260px;
  border-radius: 999px;
  background: var(--fx-surface-raised);
  border-color: transparent;
  box-shadow: none;
  color: var(--fx-text);
}

#search_filter .input:focus {
  background: var(--fx-surface);
  border-color: var(--fx-line-strong);
}

#search_filter .icon {
  color: var(--fx-text-muted);
}

#search_results.dropdown-content {
  border: 1px solid var(--fx-line);
  border-radius: var(--fx-radius) !important;
  box-shadow: var(--fx-shadow-pop);
  overflow: auto;
}

/* user menu */
.navbar-item.dropdown .button {
  border-radius: 999px;
  border-color: var(--fx-line);
  background: var(--fx-surface);
  color: var(--fx-text);
  font-weight: 500;
  height: 2.25rem;
}

.navbar-item.dropdown .button:hover {
  border-color: var(--fx-line-strong);
  background: var(--fx-hover);
}

/* theme toggle */
.fx-theme-toggle {
  order: 99;
}

.fx-theme-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--fx-line);
  border-radius: 999px;
  background: var(--fx-surface);
  color: var(--fx-text);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.fx-theme-toggle button:hover {
  background: var(--fx-hover);
  border-color: var(--fx-line-strong);
}

.fx-theme-toggle .fx-theme-icon-dark {
  display: none;
}

html[data-theme="dark"] .fx-theme-toggle .fx-theme-icon-light {
  display: none;
}

html[data-theme="dark"] .fx-theme-toggle .fx-theme-icon-dark {
  display: inline;
}

/* ---------------------------------------------------------------- Bulma components, both themes */
.button {
  border-radius: var(--fx-radius-sm);
  font-weight: 500;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.button:where(:not(.is-primary):not(.is-info):not(.is-success):not(.is-danger):not(.is-warning):not(.is-link):not(.is-dark):not(.is-black):not(.is-text):not(.is-ghost)) {
  background: var(--fx-surface);
  border-color: var(--fx-line);
  color: var(--fx-text);
}

.button:where(:not(.is-primary):not(.is-info):not(.is-success):not(.is-danger):not(.is-warning):not(.is-link):not(.is-dark):not(.is-black):not(.is-text):not(.is-ghost)):hover {
  border-color: var(--fx-line-strong);
  background: var(--fx-hover);
}

.button.is-primary,
.button.is-link {
  background: var(--fx-accent);
  border-color: var(--fx-accent);
  color: var(--fx-accent-contrast);
}

.button.is-primary:hover,
.button.is-link:hover {
  background: color-mix(in srgb, var(--fx-accent) 85%, var(--fx-bg));
  border-color: transparent;
  color: var(--fx-accent-contrast);
}

.input,
.textarea,
.select select {
  border-radius: var(--fx-radius-sm);
  border-color: var(--fx-line);
  background: var(--fx-surface);
  color: var(--fx-text);
  box-shadow: none;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--fx-text-soft);
}

.input:focus,
.textarea:focus,
.select select:focus,
.input.is-focused,
.is-focused.textarea {
  border-color: var(--fx-line-strong);
  box-shadow: 0 0 0 3px var(--fx-hover);
}

.select:not(.is-multiple):not(.is-loading)::after {
  border-color: var(--fx-text-muted);
}

.box,
.card,
.panel,
.message,
.modal-card-body,
.modal-card-head,
.modal-card-foot,
.dropdown-content {
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
  border-radius: var(--fx-radius);
  box-shadow: var(--fx-shadow);
  color: var(--fx-text);
}

.card-header {
  box-shadow: none;
  border-bottom: 1px solid var(--fx-line);
}

.card-header-title,
.panel-heading,
.modal-card-title {
  color: var(--fx-text);
}

.panel-heading {
  background: var(--fx-surface-raised);
  border-radius: var(--fx-radius) var(--fx-radius) 0 0;
}

.panel-block,
.panel-tabs {
  border-color: var(--fx-line);
  color: var(--fx-text);
}

.dropdown-item,
a.dropdown-item {
  color: var(--fx-text);
  border-radius: var(--fx-radius-sm);
}

a.dropdown-item:hover,
button.dropdown-item:hover {
  background: var(--fx-hover);
  color: var(--fx-text);
}

.table {
  background: var(--fx-surface);
  color: var(--fx-text);
  border-radius: var(--fx-radius);
}

.table th {
  color: var(--fx-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-color: var(--fx-line);
}

.table td {
  border-color: var(--fx-line);
  vertical-align: middle;
}

.table.is-striped tbody tr:not(.is-selected):nth-child(even),
.table thead th {
  background-color: var(--fx-surface-soft);
}

.table.is-hoverable tbody tr:not(.is-selected):hover {
  background-color: var(--fx-hover);
}

/* Page-header bands keep their white-on-colour content; the colour becomes a quiet near-black. */
.hero.is-info,
.hero.is-primary,
.hero.is-link {
  background: #15181d;
  color: #f4f4f5;
  border-bottom: 1px solid var(--fx-line);
}

html[data-theme="dark"] .hero.is-info,
html[data-theme="dark"] .hero.is-primary,
html[data-theme="dark"] .hero.is-link {
  background: #101215;
}

.hero.is-info .title,
.hero.is-primary .title,
.hero.is-link .title {
  color: #ffffff;
}

.hero.is-info .subtitle,
.hero.is-primary .subtitle,
.hero.is-link .subtitle {
  color: rgba(255, 255, 255, 0.78) !important;
}

.hero.is-info .subtitle a,
.hero.is-primary .subtitle a,
.hero.is-link .subtitle a {
  color: #9cd3f7;
  opacity: 1;
}

.hero.is-info .label,
.hero.is-primary .label,
.hero.is-link .label {
  color: #ffffff;
}

.hero.is-info .input,
.hero.is-primary .input {
  background: rgba(255, 255, 255, 0.96);
  color: #17171b;
}

/* Buttons inside header bands: translucent pills that stay visible on hover. */
.hero.is-info .button:not(.is-warning):not(.is-danger):not(.is-success):not(.is-inverted),
.hero.is-primary .button:not(.is-warning):not(.is-danger):not(.is-success):not(.is-inverted),
.hero.is-link .button:not(.is-warning):not(.is-danger):not(.is-success):not(.is-inverted) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border-radius: 999px;
  font-weight: 500;
}

.hero.is-info .button:not(.is-warning):not(.is-danger):not(.is-success):not(.is-inverted):hover,
.hero.is-primary .button:not(.is-warning):not(.is-danger):not(.is-success):not(.is-inverted):hover,
.hero.is-link .button:not(.is-warning):not(.is-danger):not(.is-success):not(.is-inverted):hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

/* The first (primary) action in a band is a solid white pill. */
.hero.is-info form > .button.is-light,
.hero.is-info > .hero-body > .container > form:first-of-type .button {
  background: #ffffff;
  border-color: #ffffff;
  color: #15181d;
}

.hero.is-info form > .button.is-light:hover,
.hero.is-info > .hero-body > .container > form:first-of-type .button:hover {
  background: #e8e8ec;
  border-color: #e8e8ec;
  color: #15181d;
}

.hero.is-info .button.is-warning,
.hero.is-primary .button.is-warning {
  background: #f4cd47;
  border-color: #f4cd47;
  color: #1b1b1f;
  border-radius: 999px;
}

.hero.is-info .button.is-warning:hover,
.hero.is-primary .button.is-warning:hover {
  background: #ffd85e;
  border-color: #ffd85e;
  color: #1b1b1f;
}

.hero.is-info .buttons .button,
.hero.is-primary .buttons .button {
  margin-bottom: 0.5rem;
}

/* Segmented controls (Bulma "buttons has-addons") share the pill family. */
.buttons.has-addons {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--fx-line);
  border-radius: 999px;
  background: var(--fx-surface);
  gap: 2px;
}

.buttons.has-addons .button {
  margin: 0 !important;
  border: 0;
  border-radius: 999px !important;
  background: transparent;
  color: var(--fx-text-muted);
  font-weight: 500;
  box-shadow: none;
}

.buttons.has-addons .button:hover {
  background: var(--fx-hover);
  color: var(--fx-text);
}

.buttons.has-addons .button.is-selected,
.buttons.has-addons .button.is-info.is-selected,
.buttons.has-addons .button.is-primary.is-selected {
  background: var(--fx-accent);
  color: var(--fx-accent-contrast);
  z-index: 1;
}

.hero.is-info .buttons.has-addons,
.hero.is-primary .buttons.has-addons {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.hero.is-info .buttons.has-addons .button,
.hero.is-primary .buttons.has-addons .button {
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
}

.hero.is-info .buttons.has-addons .button.is-selected,
.hero.is-primary .buttons.has-addons .button.is-selected {
  background: #ffffff;
  color: #15181d;
}

.hero.is-info .button.is-info.is-inverted,
.hero.is-primary .button.is-primary.is-inverted {
  background: #ffffff;
  color: #15181d;
  border-color: transparent;
}

.hero.is-info .button.is-info.is-inverted.is-outlined,
.hero.is-primary .button.is-primary.is-inverted.is-outlined {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.6);
}

.hero.is-info .button.is-info.is-inverted.is-outlined:hover,
.hero.is-primary .button.is-primary.is-inverted.is-outlined:hover {
  background: #ffffff;
  color: #15181d;
}

.tabs a {
  color: var(--fx-text-muted);
  border-bottom-color: var(--fx-line);
}

.tabs a:hover,
.tabs li.is-active a {
  color: var(--fx-text);
  border-bottom-color: var(--fx-accent);
}

.tabs.is-boxed li.is-active a {
  background: var(--fx-surface);
  border-color: var(--fx-line);
  border-bottom-color: transparent;
}

.tag:not(body) {
  border-radius: 999px;
}

.tag:where(:not(body):not(.is-primary):not(.is-info):not(.is-success):not(.is-danger):not(.is-warning):not(.is-link):not(.is-dark):not(.is-black):not(.is-light)) {
  background: var(--fx-surface-raised);
  color: var(--fx-text);
}

.notification {
  border-radius: var(--fx-radius);
}

.pagination-link,
.pagination-next,
.pagination-previous {
  border-color: var(--fx-line);
  color: var(--fx-text);
  border-radius: var(--fx-radius-sm);
}

.pagination-link.is-current {
  background: var(--fx-accent);
  border-color: var(--fx-accent);
  color: var(--fx-accent-contrast);
}

.modal-background {
  background: rgba(10, 10, 12, 0.55);
}

.modal-card-head,
.modal-card-foot {
  border-radius: 0;
  border-color: var(--fx-line);
}

.modal-card-head {
  border-radius: var(--fx-radius) var(--fx-radius) 0 0;
}

.modal-card-foot {
  border-radius: 0 0 var(--fx-radius) var(--fx-radius);
}

.menu-label {
  color: var(--fx-text-soft);
}

.menu-list a {
  color: var(--fx-text);
  border-radius: var(--fx-radius-sm);
}

.menu-list a:hover {
  background: var(--fx-hover);
}

.menu-list a.is-active {
  background: var(--fx-accent);
  color: var(--fx-accent-contrast);
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5 {
  color: var(--fx-text);
}

.content table td,
.content table th {
  border-color: var(--fx-line);
}

.content table th {
  color: var(--fx-text);
}

/* ---------------------------------------------------------------- dark-only corrections for Bulma utility classes */
html[data-theme="dark"] .has-background-white,
html[data-theme="dark"] .has-background-white-ter,
html[data-theme="dark"] .has-background-white-bis,
html[data-theme="dark"] .has-background-light {
  background-color: var(--fx-surface) !important;
}

html[data-theme="dark"] .has-text-black,
html[data-theme="dark"] .has-text-dark,
html[data-theme="dark"] .has-text-grey-darker {
  color: var(--fx-text) !important;
}

html[data-theme="dark"] .section,
html[data-theme="dark"] .footer {
  background: transparent;
}

html[data-theme="dark"] .hero.is-light,
html[data-theme="dark"] .hero.is-white {
  background: var(--fx-surface);
  color: var(--fx-text);
}

html[data-theme="dark"] .modal-background {
  background: rgba(0, 0, 0, 0.7);
}

html[data-theme="dark"] #modal-loading .modal-background {
  background-color: rgba(6, 6, 7, 0.86) !important;
}

html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .card-footer-item {
  border-color: var(--fx-line);
}

html[data-theme="dark"] .card-footer-item,
html[data-theme="dark"] .panel-block a,
html[data-theme="dark"] .card-content a:not(.button) {
  color: var(--fx-link);
}

html[data-theme="dark"] .select select option {
  background: var(--fx-surface);
  color: var(--fx-text);
}

html[data-theme="dark"] .switch[type="checkbox"] + label::before,
html[data-theme="dark"] .switch[type="checkbox"] + label:before {
  background: var(--fx-surface-raised);
}

html[data-theme="dark"] .side-menu,
html[data-theme="dark"] .management-area {
  background-color: var(--fx-surface);
}

html[data-theme="dark"] img.invert-on-dark {
  filter: invert(1);
}

/* Phones: the brand-area search shrinks to the space beside the logo instead of pushing the page
   wider than the screen (which also mis-centres fixed elements such as modals). */
@media screen and (max-width: 767px) {
  .navbar-brand {
    min-width: 0;
  }
  #search_filter {
    flex: 1 1 auto;
    min-width: 0;
  }
  #search_filter .field,
  #search_filter #search_bar {
    width: 100%;
    min-width: 0;
  }
  #search_filter .input {
    min-width: 0;
    width: 100%;
  }
}

/* ---------------------------------------------------------------- navbar alignment + wordmark */
/* The navbar spans the page and shares the dashboards' gutters, so the logo lines up with the body
   on the left and the menu with it on the right. */
.navbar.has-shadow > .container {
  max-width: none;
  width: 100%;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.navbar > .container .navbar-brand,
.container > .navbar .navbar-brand {
  margin-left: 0;
}
.navbar > .container .navbar-menu,
.container > .navbar .navbar-menu {
  margin-right: 0;
}
.navbar-brand > .navbar-item:first-child {
  padding-left: 0;
}
/* The theme toggle is ordered last (order: 99), so it carries the flush right edge. */
.navbar-end .fx-theme-toggle {
  padding-right: 0;
}
@media screen and (max-width: 767px) {
  .navbar.has-shadow > .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media screen and (min-width: 2200px) {
  .navbar.has-shadow > .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
/* Wordmark: FIT heavy in the theme blue, EXPRESS light in the text colour. */
.fx-logo {
  display: block;
  height: 28px;
  width: auto;
  overflow: visible;
}
.fx-logo text {
  font-family: var(--fx-font);
  font-size: 27px;
  dominant-baseline: auto;
}
.fx-logo__fit {
  font-weight: 800;
  letter-spacing: -0.02em;
  fill: var(--fx-logo-primary);
}
.fx-logo__express {
  font-weight: 300;
  letter-spacing: 0.01em;
  fill: var(--fx-logo-secondary);
}
.navbar-item:hover .fx-logo__fit {
  fill: var(--fx-link-hover);
}

/* Segmented toggle: a radio group drawn as connected buttons (the inputs stay for the form). */
.fx-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: var(--fx-radius);
  background: var(--fx-surface-raised);
  border: 1px solid var(--fx-line, rgba(20, 20, 30, 0.1));
  max-width: 100%;
}
.fx-seg-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.fx-seg-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--fx-radius-sm);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--fx-text-muted);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.fx-seg-option:hover {
  color: var(--fx-text);
}
/* Selected state is a class set by the page script: Chrome does not restyle the option a radio
   group just unselected, so a :checked sibling selector goes stale. */
.fx-seg-option.is-selected {
  background: var(--fx-accent);
  color: var(--fx-accent-contrast);
  box-shadow: var(--fx-shadow);
}
.fx-seg-input:focus-visible + .fx-seg-option {
  box-shadow: 0 0 0 3px var(--fx-line-strong);
}
@media (max-width: 480px) {
  .fx-seg {
    display: flex;
  }
  .fx-seg-option {
    flex: 1 1 100%;
    justify-content: center;
  }
}