/*
 * SourceFlo theme: colors, buttons, forms and header for every layout.
 * Loaded after Bootstrap and style.css.
 *
 * Design rules:
 * - One color family: every dark, grey and tint below is a shade of the logo's star teal.
 * - Solid color is for the main action in an area. Table rows and badges use soft tints.
 * - No gradients or decorative lines; hierarchy comes from spacing and type.
 */
:root {
  --app-star: #05c2af;

  --app-accent: #0a7f73;
  --app-accent-dark: #08695f;
  --app-accent-soft: #e3f5f2;
  --app-accent-border: #b5e3dc;

  --app-brand: #0d2b30;
  --app-brand-dark: #0a2226;

  --app-page: #f5f7f7;
  --app-border: #e3e9e9;
  --app-border-strong: #cfd8d9;
  --app-text: #16292d;
  --app-text-soft: #3c5055;
  --app-muted: #5f7277;
  --app-faint: #93a3a6;
  --app-hover: #eef2f2;

  --app-danger: #bf3a33;
  --app-danger-soft: #fbeceb;
  --app-success: #1b7f5c;
  --app-success-soft: #e5f4ee;
  --app-warning-text: #8a5a00;
  --app-warning-soft: #fdf3dc;

  /* Bootstrap's own palette, so its utilities and components follow the same family. */
  --bs-body-color: #16292d;
  --bs-body-color-rgb: 22, 41, 45;
  --bs-emphasis-color: #0d2b30;
  --bs-emphasis-color-rgb: 13, 43, 48;
  --bs-tertiary-color: #5f7277;
  --bs-tertiary-color-rgb: 95, 114, 119;
  --bs-primary: #0a7f73;
  --bs-primary-rgb: 10, 127, 115;
  --bs-primary-text-emphasis: #08695f;
  --bs-primary-bg-subtle: #e3f5f2;
  --bs-primary-border-subtle: #b5e3dc;
  --bs-info: #0a7f73;
  --bs-info-rgb: 10, 127, 115;
  --bs-info-text-emphasis: #08695f;
  --bs-info-bg-subtle: #e3f5f2;
  --bs-info-border-subtle: #b5e3dc;
  --bs-success: #1b7f5c;
  --bs-success-rgb: 27, 127, 92;
  --bs-danger: #bf3a33;
  --bs-danger-rgb: 191, 58, 51;
  --bs-warning: #c98a00;
  --bs-warning-rgb: 201, 138, 0;
  --bs-secondary-color: #5f7277;
  --bs-secondary-rgb: 95, 114, 119;
  --bs-border-color: #e3e9e9;
  --bs-link-color: #08695f;
  --bs-link-color-rgb: 8, 105, 95;
  --bs-link-hover-color: #0d2b30;
  --bs-link-hover-color-rgb: 13, 43, 48;
  --bs-code-color: #08695f;
  --bs-focus-ring-color: rgba(10, 127, 115, .25);
  --bs-border-radius: 6px;
  --bs-border-radius-sm: 5px;
  --bs-border-radius-lg: 8px;
  --bs-border-radius-xl: 8px;
  --bs-border-radius-xxl: 8px;
  accent-color: var(--app-accent);
}

body {
  background-color: var(--app-page);
  color: var(--app-text);
}
h1.fs-2 {
  color: var(--app-brand);
  font-size: 1.5rem !important;
  font-weight: 650;
  letter-spacing: -.01em;
}

/* Links: buttons and menus keep their own colors */
a {
  color: var(--app-accent-dark);
  transition: color .12s ease;
}
a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):hover {
  color: var(--app-brand);
}

/* Buttons */
.btn {
  border-radius: 6px;
  font-weight: 500;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
  --bs-btn-focus-shadow-rgb: 10, 127, 115;
}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--app-accent);
  --bs-btn-border-color: var(--app-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--app-accent-dark);
  --bs-btn-hover-border-color: var(--app-accent-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--app-accent-dark);
  --bs-btn-active-border-color: var(--app-accent-dark);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #8cc4bd;
  --bs-btn-disabled-border-color: #8cc4bd;
}
.btn-secondary {
  --bs-btn-color: var(--app-text);
  --bs-btn-bg: var(--app-border);
  --bs-btn-border-color: var(--app-border);
  --bs-btn-hover-color: var(--app-text);
  --bs-btn-hover-bg: var(--app-border-strong);
  --bs-btn-hover-border-color: var(--app-border-strong);
  --bs-btn-active-color: var(--app-text);
  --bs-btn-active-bg: var(--app-border-strong);
  --bs-btn-active-border-color: var(--app-border-strong);
  --bs-btn-disabled-color: var(--app-faint);
  --bs-btn-disabled-bg: var(--app-hover);
  --bs-btn-disabled-border-color: var(--app-hover);
}
.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--app-brand);
  --bs-btn-border-color: var(--app-brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--app-text-soft);
  --bs-btn-hover-border-color: var(--app-text-soft);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--app-text-soft);
  --bs-btn-active-border-color: var(--app-text-soft);
}
.btn-success {
  --bs-btn-bg: var(--app-success);
  --bs-btn-border-color: var(--app-success);
  --bs-btn-hover-bg: #166a4d;
  --bs-btn-hover-border-color: #166a4d;
  --bs-btn-active-bg: #166a4d;
  --bs-btn-active-border-color: #166a4d;
}
.btn-danger {
  --bs-btn-bg: var(--app-danger);
  --bs-btn-border-color: var(--app-danger);
  --bs-btn-hover-bg: #a2302a;
  --bs-btn-hover-border-color: #a2302a;
  --bs-btn-active-bg: #a2302a;
  --bs-btn-active-border-color: #a2302a;
}
.btn-warning {
  --bs-btn-color: var(--app-warning-text);
  --bs-btn-bg: var(--app-warning-soft);
  --bs-btn-border-color: #f1dca8;
  --bs-btn-hover-color: var(--app-warning-text);
  --bs-btn-hover-bg: #fae9c0;
  --bs-btn-hover-border-color: #ebcf8c;
  --bs-btn-active-color: var(--app-warning-text);
  --bs-btn-active-bg: #fae9c0;
  --bs-btn-active-border-color: #ebcf8c;
}
.btn-info {
  --bs-btn-color: var(--app-accent-dark);
  --bs-btn-bg: var(--app-accent-soft);
  --bs-btn-border-color: var(--app-accent-border);
  --bs-btn-hover-color: var(--app-accent-dark);
  --bs-btn-hover-bg: #d2efea;
  --bs-btn-hover-border-color: #9dd9d0;
  --bs-btn-active-color: var(--app-accent-dark);
  --bs-btn-active-bg: #d2efea;
  --bs-btn-active-border-color: #9dd9d0;
}
.btn-light,
.btn-default,
.btn-outline-secondary {
  --bs-btn-color: var(--app-text-soft);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--app-border-strong);
  --bs-btn-hover-color: var(--app-brand);
  --bs-btn-hover-bg: var(--app-hover);
  --bs-btn-hover-border-color: var(--app-faint);
  --bs-btn-active-color: var(--app-brand);
  --bs-btn-active-bg: var(--app-border);
  --bs-btn-active-border-color: var(--app-faint);
  --bs-btn-disabled-color: var(--app-faint);
  --bs-btn-disabled-bg: #fff;
  --bs-btn-disabled-border-color: var(--app-border);
}
.btn-outline-primary,
.btn-outline-info {
  --bs-btn-color: var(--app-accent-dark);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--app-accent-border);
  --bs-btn-hover-color: var(--app-accent-dark);
  --bs-btn-hover-bg: var(--app-accent-soft);
  --bs-btn-hover-border-color: var(--app-accent);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--app-accent);
  --bs-btn-active-border-color: var(--app-accent);
  --bs-btn-disabled-color: #8cc4bd;
  --bs-btn-disabled-border-color: var(--app-border);
}
.btn-outline-success {
  --bs-btn-color: var(--app-success);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #bfe0d3;
  --bs-btn-hover-color: var(--app-success);
  --bs-btn-hover-bg: var(--app-success-soft);
  --bs-btn-hover-border-color: var(--app-success);
  --bs-btn-active-bg: var(--app-success);
  --bs-btn-active-border-color: var(--app-success);
  --bs-btn-disabled-color: var(--app-faint);
  --bs-btn-disabled-border-color: var(--app-border);
}
.btn-outline-danger {
  --bs-btn-color: var(--app-danger);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #efc9c6;
  --bs-btn-hover-color: var(--app-danger);
  --bs-btn-hover-bg: var(--app-danger-soft);
  --bs-btn-hover-border-color: var(--app-danger);
  --bs-btn-active-bg: var(--app-danger);
  --bs-btn-active-border-color: var(--app-danger);
  --bs-btn-disabled-color: var(--app-faint);
  --bs-btn-disabled-border-color: var(--app-border);
}
.btn-link {
  --bs-btn-color: var(--app-accent-dark);
  --bs-btn-hover-color: var(--app-brand);
}

/* Row actions repeat on every line, so they stay quiet until hovered */
.table .btn-primary {
  --bs-btn-color: var(--app-accent-dark);
  --bs-btn-bg: var(--app-accent-soft);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--app-accent);
  --bs-btn-hover-border-color: var(--app-accent);
}
.table .btn-danger {
  --bs-btn-color: var(--app-danger);
  --bs-btn-bg: var(--app-danger-soft);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--app-danger);
  --bs-btn-hover-border-color: var(--app-danger);
}

.table .btn-success {
  --bs-btn-color: var(--app-success);
  --bs-btn-bg: var(--app-success-soft);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--app-success);
  --bs-btn-hover-border-color: var(--app-success);
}

/* Inputs and selects */
.form-control,
.form-select {
  border-color: var(--app-border-strong);
  border-radius: 6px;
  color: var(--app-text);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus) {
  border-color: var(--app-faint);
}
.form-control::placeholder {
  color: var(--app-faint);
}
.form-control:disabled,
.form-select:disabled {
  background-color: var(--app-hover);
  color: var(--app-muted);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px rgba(10, 127, 115, .14);
}
.form-label,
form label {
  color: var(--app-text-soft);
}
.input-group-text {
  background-color: var(--app-hover);
  border-color: var(--app-border-strong);
  color: var(--app-muted);
}
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--app-border-strong) !important;
  border-radius: 6px;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--app-accent) !important;
  box-shadow: 0 0 0 3px rgba(10, 127, 115, .14);
}

/* Checkboxes and radios */
.form-check-input {
  border-color: var(--app-faint);
  cursor: pointer;
}
.form-check-input[type="checkbox"] {
  border-radius: 4px;
}
.form-check-input:hover:not(:disabled) {
  border-color: var(--app-accent);
}
.form-check-input:focus {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px rgba(10, 127, 115, .14);
}
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--app-accent);
  border-color: var(--app-accent);
}
.form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230a7f73'/%3e%3c/svg%3e");
}

/* style.css narrows every .form-check, which lets switches overlap the text before them */
.form-check.form-switch {
  padding-left: 2.5em;
}

/* Dropdown menus, including bootstrap-select */
.dropdown-menu {
  --bs-dropdown-link-hover-bg: var(--app-hover);
  --bs-dropdown-link-active-bg: var(--app-accent-soft);
  --bs-dropdown-link-active-color: var(--app-accent-dark);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(13, 43, 48, .12);
  padding: .3rem;
}
.dropdown-item {
  border-radius: 5px;
}
/* The wrapper can carry form-control classes; the toggle inside draws the only border */
.bootstrap-select.form-control {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0;
}
.bootstrap-select > .dropdown-toggle {
  background-color: #fff;
  border: 1px solid var(--app-border-strong) !important;
  border-radius: 6px;
  color: var(--app-text);
}
.bootstrap-select > .dropdown-toggle:hover {
  background-color: #fff;
  border-color: var(--app-faint) !important;
}
.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select.show > .dropdown-toggle {
  border-color: var(--app-accent) !important;
  box-shadow: 0 0 0 3px rgba(10, 127, 115, .14);
  outline: 0 !important;
}
.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover {
  color: var(--app-faint);
}
.bootstrap-select .dropdown-item.selected {
  background-color: var(--app-accent-soft);
  color: var(--app-accent-dark);
}
.bootstrap-select .dropdown-item.active {
  background-color: var(--app-hover);
  color: var(--app-text);
}
.bootstrap-select .bs-ok-default::after {
  border-color: var(--app-accent-dark);
}

/* Header: flat and dark so the logo is the only color in it */
.app-navbar,
.distributor-navbar {
  background-color: var(--app-brand);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.distributor-navbar {
  z-index: 1050;
}
.navbar-brand {
  flex-shrink: 0;
}
.app-navbar .navbar-brand img,
.distributor-navbar .navbar-brand img {
  width: 150px;
}
.navbar-nav .nav-link {
  margin: 0 1px !important;
}
.app-navbar .navbar-nav > .nav-item > .nav-link,
.app-navbar .app-user-menu .dropdown > .nav-link {
  border-radius: 6px;
  color: #b4c4c6;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .12s ease, color .12s ease;
}
.app-navbar .navbar-nav > .nav-item > .nav-link:hover,
.app-navbar .navbar-nav > .nav-item > .nav-link.show,
.app-navbar .app-user-menu .dropdown > .nav-link:hover,
.distributor-navbar .navbar-nav .nav-link:hover {
  background-color: rgba(255, 255, 255, .07);
  color: #fff;
}
.app-navbar .navbar-nav > .nav-item > .nav-link.active {
  background-color: rgba(5, 194, 175, .14);
  color: #fff;
}
.app-navbar .app-user-menu {
  border-color: rgba(255, 255, 255, .14) !important;
  margin-left: .35rem;
  padding-left: .35rem;
}
.user-avatar {
  background: var(--app-star);
  box-shadow: none;
  color: var(--app-brand);
}
.navbar-nav .dropdown-menu .nav-link {
  border-radius: 5px;
  color: var(--app-text-soft);
  margin: 0 !important;
}
.navbar-nav .dropdown-menu .nav-link:hover {
  background-color: var(--app-hover);
  color: var(--app-brand);
}
.navbar-nav .dropdown-menu .nav-link.text-primary {
  background-color: var(--app-accent-soft);
}
/* Keeps every header link on one line between the lg and xl breakpoints */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .app-navbar .navbar-brand img,
  .distributor-navbar .navbar-brand img {
    width: 120px;
  }
  .navbar-nav .nav-link {
    font-size: .8rem;
    padding: 6px 7px !important;
  }
  .app-navbar .navbar-brand {
    margin-right: .5rem;
  }
}

/* Surfaces */
/* Cards sit flat with a hairline. Shadow is saved for things that float: menus, popups and hovered links. */
.card {
  --bs-card-border-color: var(--app-border);
  --bs-card-border-radius: 8px;
  --bs-card-inner-border-radius: 7px;
  box-shadow: none;
}
.card.shadow,
.card.shadow-sm {
  box-shadow: none !important;
}
.modal {
  --bs-modal-border-radius: 10px;
  --bs-modal-border-color: var(--app-border);
}
.card-header {
  border-bottom-color: var(--app-border);
  color: var(--app-brand);
}
.alert {
  border-radius: 8px;
}
.footer {
  border-top-color: var(--app-border) !important;
}

/*
 * Tables. A border is kept only where it does a job:
 * - Rows are separated by a hairline; vertical lines add noise, so data tables have none.
 * - A table standing directly on the page gets an outer edge. Inside a card, the card is the edge.
 * - Price grids keep their grid, because columns of numbers are compared across rows.
 */
td,
th {
  border-color: var(--app-border);
}
table:not(.table) tr:nth-child(even) {
  background-color: transparent;
}
table:not(.table) td,
table:not(.table) th {
  border-left: 0;
  border-right: 0;
}
.table {
  --bs-table-border-color: var(--app-border);
  --bs-table-hover-bg: #f3f7f7;
  --bs-table-striped-bg: #fff;
  --bs-table-color: var(--app-text);
  background-color: #fff;
}
.table > :not(caption) > * > * {
  border-left: 0;
  border-right: 0;
}
.table.border,
.table.border-top {
  border: 0 !important;
}
.table:not(.card .table, .configBox_wrapper .table, .modal .table, .dash-panel .table) {
  box-shadow: 0 0 0 1px var(--app-border);
}
.table.priceGrid > :not(caption) > * > * {
  border: 1px solid var(--app-border);
}
.table > thead > tr > th {
  background-color: #f1f4f4;
  border-bottom-color: var(--app-border-strong);
  color: var(--app-muted);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* DataTables paints its own grey stripes and hover over Bootstrap's */
table.dataTable.table-striped > tbody > tr.odd > *,
table.dataTable.table-striped > tbody > tr.even > * {
  box-shadow: none;
}
table.dataTable.table-hover > tbody > tr:hover > * {
  box-shadow: inset 0 0 0 9999px #f3f7f7;
}
.caret::before {
  color: var(--app-faint);
}

/* Category labels from the older markup */
.label-primary,
.label-default {
  background-color: var(--app-hover);
  border-radius: 5px;
  color: var(--app-text-soft);
  font-size: .75rem;
  font-weight: 500;
  padding: .15rem .45rem;
}
.label-primary {
  background-color: var(--app-accent-soft);
  color: var(--app-accent-dark);
}

/* Badges: tinted so a table full of statuses stays readable */
.badge.bg-secondary,
.badge.text-bg-secondary {
  background-color: var(--app-hover) !important;
  color: var(--app-muted) !important;
}
.badge.bg-success,
.badge.text-bg-success {
  background-color: var(--app-success-soft) !important;
  color: var(--app-success) !important;
}
.badge.bg-danger,
.badge.text-bg-danger {
  background-color: var(--app-danger-soft) !important;
  color: var(--app-danger) !important;
}
.badge.bg-warning,
.badge.text-bg-warning {
  background-color: var(--app-warning-soft) !important;
  color: var(--app-warning-text) !important;
}
.badge.bg-info,
.badge.text-bg-info,
.badge.bg-primary,
.badge.text-bg-primary {
  background-color: var(--app-accent-soft) !important;
  color: var(--app-accent-dark) !important;
}
.badge {
  border-radius: 5px;
  font-weight: 500;
}

/* Bootstrap components that hard-code their own blue */
.pagination {
  --bs-pagination-color: var(--app-accent-dark);
  --bs-pagination-hover-color: var(--app-brand);
  --bs-pagination-focus-color: var(--app-brand);
  --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(10, 127, 115, .2);
  --bs-pagination-active-bg: var(--app-accent);
  --bs-pagination-active-border-color: var(--app-accent);
}
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--app-accent-soft);
  --bs-nav-pills-link-active-color: var(--app-accent-dark);
}
.nav-tabs {
  --bs-nav-tabs-link-active-color: var(--app-accent-dark);
}
.list-group {
  --bs-list-group-active-bg: var(--app-accent);
  --bs-list-group-active-border-color: var(--app-accent);
}
.progress {
  --bs-progress-bar-bg: var(--app-accent);
}
.accordion {
  --bs-accordion-active-color: var(--app-brand);
  --bs-accordion-active-bg: #fff;
  --bs-accordion-btn-focus-border-color: var(--app-accent);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(10, 127, 115, .14);
}
.form-range::-webkit-slider-thumb {
  background-color: var(--app-accent);
}
.form-range::-moz-range-thumb {
  background-color: var(--app-accent);
}

/* SweetAlert sets its colors inline from each call, so these need !important */
.swal2-styled.swal2-confirm {
  background-color: var(--app-accent) !important;
  border-radius: 6px !important;
}
.swal2-styled.swal2-cancel {
  background-color: #fff !important;
  border: 1px solid var(--app-border-strong) !important;
  border-radius: 6px !important;
  color: var(--app-text-soft) !important;
}
.swal2-styled:focus {
  box-shadow: 0 0 0 3px rgba(10, 127, 115, .25) !important;
}

/* Login and account pages (Tailwind layout) */
.app-auth-page {
  background: var(--app-page);
}
.app-auth-card {
  border: 1px solid var(--app-border);
  border-radius: 8px;
  box-shadow: none;
}
.app-auth-page input[type="checkbox"] {
  color: var(--app-accent);
}
.app-auth-input:focus {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px rgba(10, 127, 115, .14);
}
.app-auth-btn {
  background-color: var(--app-accent);
  border-radius: 6px;
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.app-auth-btn:hover,
.app-auth-btn:focus,
.app-auth-btn:active {
  background-color: var(--app-accent-dark);
  color: #fff;
}
.app-auth-btn:focus {
  box-shadow: 0 0 0 3px rgba(10, 127, 115, .3);
}

/*
 * Motion: short and quiet. It confirms what you are pointing at and never moves the layout.
 */
@keyframes app-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.dropdown-menu.show {
  animation: app-fade-in .12s ease;
}
#toolTabs + .tab-content > .tab-pane.active,
#jobTabs + .tab-content > .tab-pane.active,
#productEditTabs + .tab-content > .tab-pane.active {
  animation: app-fade-in .15s ease;
}
.btn {
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform .08s ease;
}
.btn:active:not(:disabled):not(.disabled) {
  transform: scale(.98);
}
.table > tbody > tr > * {
  transition: background-color .12s ease, box-shadow .12s ease;
}
.table a:not(.btn):hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-check-input {
  transition: background-color .12s ease, border-color .12s ease;
}
.accordion-button:hover {
  background-color: var(--app-page);
}
a.text-black {
  transition: color .12s ease;
}
a.text-black:hover {
  color: var(--app-accent-dark) !important;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--app-accent) !important;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}