/* Map Controls */
.map-controls {
  @apply flex gap-2 mb-2;
}

.map-controls button {
  @apply transition-colors duration-200;
}

/* Map view toggle buttons */
.map-view-btn {
  @apply bg-gray-500 text-white hover:bg-gray-600;
}

.map-view-btn.active {
  @apply bg-maage-primary-400 text-white shadow-sm;
}

/* Map zoom buttons */
.map-zoom-btn {
  @apply bg-gray-500 text-white hover:bg-gray-600;
}

/* Map chart container style */
.genome-list-overview-dashboard .map-chart-container {
  min-height: 500px !important;
  height: 500px !important;
  padding: 20px;
}

/* Metric cards container - handle 6 cards layout */
.metric-cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (min-width: 1280px) {
  .metric-cards-container .metric-card {
    flex: 0 0 calc(16.666% - 0.42rem);
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .metric-cards-container .metric-card {
    flex: 0 0 calc(33.333% - 0.667rem);
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .metric-cards-container .metric-card {
    flex: 0 0 calc(50% - 0.5rem);
  }
}

@media (max-width: 639px) {
  .metric-cards-container .metric-card {
    flex: 0 0 100%;
  }
}

/* Metric list styles for dashboard KPIs */
.metric-list {
  max-height: 100px;
  overflow-y: auto;
  font-size: 0.8125rem;
  line-height: 1.4;
  margin: 0 auto;
  width: 90%;
  max-width: 200px;
  padding-right: 6px; /* Add space for scrollbar */
}

/* Custom scrollbar for metric lists */
.metric-list::-webkit-scrollbar {
  width: 6px;
}

.metric-list::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}

.metric-list::-webkit-scrollbar-thumb {
  background: #e0e0e0;
  border-radius: 3px;
}

.metric-list::-webkit-scrollbar-thumb:hover {
  background: #c0c0c0;
}

.metric-list .metric-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.375rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.metric-list .metric-list-item:last-child {
  border-bottom: none;
}

.metric-list .metric-list-label {
  color: #495057;
  font-weight: 500;
  text-align: left;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 0.75rem;
}

.metric-list .metric-list-value {
  color: #212529;
  font-weight: 600;
  text-align: right;
  min-width: 45px;
  flex-shrink: 0;
}

/* GenomeListSummary widget - Modern Spreadsheet Style with MAAGE Colors */
.genome-list-summary {
  height: 100%;
}

.spreadsheet-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Table Header */
.spreadsheet-header {
  display: flex;
  background-color: var(--maage-primary-50);
  border-bottom: 2px solid var(--maage-primary-200);
}

.spreadsheet-header-cell {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--maage-primary-700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-right: 1px solid var(--maage-primary-200);
}

.spreadsheet-header-cell:last-child {
  border-right: 0;
}

/* Column Widths */
.metric-label-col {
  flex: 1;
}

.value-col {
  width: 120px;
  text-align: right;
}

/* Section Dividers */
.spreadsheet-section-divider {
  background-color: var(--maage-secondary-50);
  border-bottom: 1px solid var(--maage-secondary-200);
  padding: 4px 12px;
}

.spreadsheet-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--maage-secondary-700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Table Rows */
.spreadsheet-row {
  display: flex;
  border-bottom: 1px solid #dee2e6;
  transition: background-color 0.15s ease;
}

.spreadsheet-row.row-even {
  background-color: #ffffff;
}

.spreadsheet-row.row-odd {
  background-color: #f8f9fa;
}

.spreadsheet-row:hover {
  background-color: var(--maage-primary-50) !important;
}

/* Table Cells */
.spreadsheet-cell {
  padding: 8px 12px;
  font-size: 14px;
  border-right: 1px solid #dee2e6;
}

.spreadsheet-cell:last-child {
  border-right: 0;
}

.spreadsheet-cell.metric-label-col {
  color: #495057;
  font-weight: 500;
}

.spreadsheet-cell.value-col {
  color: #212529;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Map placeholder containers */
.chart-section [data-dojo-attach-point="mapLegendNode"],
.chart-section [data-dojo-attach-point="mapStatsNode"] {
  min-height: 165px;
  height: 165px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  border: 1px dashed #dee2e6;
  color: #6c757d;
}

:root {
  /* font families */
  --maage-font-heading: 'Poppins', sans-serif;
  --maage-font-body: 'Inter', sans-serif;
  --maage-font-mono: 'IBM Plex Mono', monospace;

  /* sizing */
  --max-w-maage: 1400px;

  /* primary (muted green) */
  --maage-primary-50: #f9fbfa;
  --maage-primary-100: #ecf3f0;
  --maage-primary-200: #d6e5de;
  --maage-primary-300: #b4d0c3;
  --maage-primary-400: #98bdac;
  --maage-primary-500: #6ea089;
  --maage-primary-600: #57856f;
  --maage-primary-700: #496f5d;
  --maage-primary-800: #3c5d4e;
  --maage-primary-900: #324d41;
  --maage-primary-950: #1c2b24;

  /* secondary (muted blue) */
  --maage-secondary-50: #eef4f7;
  --maage-secondary-100: #dce9ef;
  --maage-secondary-200: #c1d8e1;
  --maage-secondary-300: #a0c1cf;
  --maage-secondary-400: #87afc0;
  --maage-secondary-500: #5f94ab;
  --maage-secondary-600: #467386;
  --maage-secondary-700: #406777;
  --maage-secondary-800: #365663;
  --maage-secondary-900: #2e4a56;
  --maage-secondary-950: #22363f;

  /* tertiary (muted yellow) */
  --maage-tertiary-50: #fdfaf2;
  --maage-tertiary-100: #fbf6e9;
  --maage-tertiary-200: #f8edd8;
  --maage-tertiary-300: #f4e4c2;
  --maage-tertiary-400: #edd5a6;
  --maage-tertiary-500: #e7c788;
  --maage-tertiary-600: #dab46c;
  --maage-tertiary-700: #d29c4b;
  --maage-tertiary-800: #bb8335;
  --maage-tertiary-900: #946729;
  --maage-tertiary-950: #6d461d;

  /* quaternary (muted purple) */
  --maage-quaternary-50: #f6f6f9;
  --maage-quaternary-100: #efeff5;
  --maage-quaternary-200: #dfdfec;
  --maage-quaternary-300: #cbc9de;
  --maage-quaternary-400: #b0aecb;
  --maage-quaternary-500: #9a96bb;
  --maage-quaternary-600: #847ba7;
  --maage-quaternary-700: #6c638c;
  --maage-quaternary-800: #585171;
  --maage-quaternary-900: #48435b;
  --maage-quaternary-950: #2a2839;

  /* quinary (muted red) */
  --maage-quinary-50: #fbf6f5;
  --maage-quinary-100: #f8eceb;
  --maage-quinary-200: #f1dbda;
  --maage-quinary-300: #e6bebb;
  --maage-quinary-400: #d79895;
  --maage-quinary-500: #c56e6e;
  --maage-quinary-600: #ab4e52;
  --maage-quinary-700: #923e44;
  --maage-quinary-800: #7b363d;
  --maage-quinary-900: #6c323a;
  --maage-quinary-950: #491d22;

  /* gray neutral */
  --maage-gray-neutral-50: #f5f5f5;
  --maage-gray-neutral-100: #ededed;
  --maage-gray-neutral-200: #dedede;
  --maage-gray-neutral-300: #c9c9c9;
  --maage-gray-neutral-400: #adadad;
  --maage-gray-neutral-500: #8f8f8f;
  --maage-gray-neutral-600: #757575;
  --maage-gray-neutral-700: #595959;
  --maage-gray-neutral-800: #454545;
  --maage-gray-neutral-900: #333333;
  --maage-gray-neutral-950: #262626;

  /* gray cool */
  --maage-gray-cool-50: #f9fafb;
  --maage-gray-cool-100: #f3f4f6;
  --maage-gray-cool-200: #e5e7eb;
  --maage-gray-cool-300: #d0d5dc;
  --maage-gray-cool-400: #9aa3b1;
  --maage-gray-cool-500: #687182;
  --maage-gray-cool-600: #495465;
  --maage-gray-cool-700: #364153;
  --maage-gray-cool-800: #1e2938;
  --maage-gray-cool-900: #111828;
  --maage-gray-cool-950: #030712;

  /* gray warm */
  --maage-gray-warm-50: #f8f8f7;
  --maage-gray-warm-100: #eeeeec;
  --maage-gray-warm-200: #dfdfdc;
  --maage-gray-warm-300: #ccccc7;
  --maage-gray-warm-400: #b2b1a9;
  --maage-gray-warm-500: #9a988e;
  --maage-gray-warm-600: #838177;
  --maage-gray-warm-700: #6b6961;
  --maage-gray-warm-800: #585650;
  --maage-gray-warm-900: #484742;
  --maage-gray-warm-950: #2b2a27;

  /* background */
  --maage-background: #f8f9fa !important;
  --maage-bg: #f8f9fa !important;
  --maage-bg-default: #f8f9fa !important;
  --maage-bg-faint: #fcfcfd;
  --maage-bg-subtle: #f1f3f5;
  --maage-bg-alt: #f3f4f6;
  --maage-bg-muted: #e9ecef;
  --maage-bg-soft: #eaeef0;
  --maage-bg-strong: #dee2e6;
  --maage-bg-inverse: #ffffff;

  /* surface & borders */
  --maage-surface: #ffffff;
  --maage-border: #dee2e6;

  /* text */
  --maage-text-default: #212529;
  --maage-text-muted: #495057;
  --maage-text-subtle: #6c757d;
  --maage-text-inverse: #f8f9fa;
  --maage-text-link: #447188;
  --maage-text-link-white: f5f5f5;
  --maage-text-white: #fafafa;
  --maage-text-primary: var(--maage-primary-400);
  --maage-text-secondary: var(--maage-secondary-500);
  --maage-text-tertiary: var(--maage-tertiary-500);
  --maage-text-quaternary: var(--maage-quaternary-500);
  --maage-text-quinary: var(--maage-quinary-500);

  /* semantic */
--maage-success-50: #f4f9f6;
--maage-success-100: #e7efe9;
--maage-success-200: #cfe0d4;
--maage-success-300: #afc9b8;
--maage-success-400: #7ba28b;
--maage-success-500: #578e6f;
--maage-success-600: #43785b;
--maage-success-700: #36604a;
--maage-success-800: #2d4d3d;
--maage-success-900: #264033;
--maage-success-950: #14231c;

--maage-warning-50: #fbf8ec;
--maage-warning-100: #f6f0d0;
--maage-warning-200: #efdea1;
--maage-warning-300: #e6c76c;
--maage-warning-400: #dbac3b;
--maage-warning-500: #d29b2d;
--maage-warning-600: #bb7d23;
--maage-warning-700: #965a1e;
--maage-warning-800: #7d4921;
--maage-warning-900: #6b3d21;
--maage-warning-950: #3e1e0f;

--maage-error-50: #fcf3f3;
--maage-error-100: #f8e9e7;
--maage-error-200: #f3d3d2;
--maage-error-300: #e8b1ae;
--maage-error-400: #da8180;
--maage-error-500: #bb4448;
--maage-error-600: #a94348;
--maage-error-700: #863037;
--maage-error-800: #702b33;
--maage-error-900: #61272f;
--maage-error-950: #351216;

--maage-info-50: #f4f8fa;
--maage-info-100: #e2eef2;
--maage-info-200: #c6dee7;
--maage-info-300: #a0c5d5;
--maage-info-400: #609ab4;
--maage-info-500: #4889a8;
--maage-info-600: #407493;
--maage-info-700: #3b6078;
--maage-info-800: #385264;
--maage-info-900: #334757;
--maage-info-950: #1d2c39;
}

.dark {
    --maage-success-dark-50: #0e1814;
    --maage-success-dark-100: #13241b;
    --maage-success-dark-200: #193228;
    --maage-success-dark-300: #204235;
    --maage-success-dark-400: #295646;
    --maage-success-dark-500: #3c6f59;
    --maage-success-dark-600: #5e8d75;
    --maage-success-dark-700: #83a893;
    --maage-success-dark-800: #a8c3b0;
    --maage-success-dark-900: #cfe0d4;

    --maage-warning-dark-50: #2a1e0b;
    --maage-warning-dark-100: #3a2a10;
    --maage-warning-dark-200: #4e3a15;
    --maage-warning-dark-300: #624d1e;
    --maage-warning-dark-400: #7e651f;
    --maage-warning-dark-500: #9f8129;
    --maage-warning-dark-600: #bb9d4e;
    --maage-warning-dark-700: #d5b974;
    --maage-warning-dark-800: #e9d5a3;
    --maage-warning-dark-900: #f6f0d0;

    --maage-error-dark-50: #2a0f10;
    --maage-error-dark-100: #3a1817;
    --maage-error-dark-200: #4f2321;
    --maage-error-dark-300: #662d2a;
    --maage-error-dark-400: #853938;
    --maage-error-dark-500: #a14d4d;
    --maage-error-dark-600: #c36d6c;
    --maage-error-dark-700: #d89995;
    --maage-error-dark-800: #ebc6c3;
    --maage-error-dark-900: #f8e9e7;

    --maage-info-dark-50: #112028;
    --maage-info-dark-100: #162a35;
    --maage-info-dark-200: #1c3746;
    --maage-info-dark-300: #24475a;
    --maage-info-dark-400: #2f5e74;
    --maage-info-dark-500: #3f7c94;
    --maage-info-dark-600: #5899b1;
    --maage-info-dark-700: #85b9ce;
    --maage-info-dark-800: #b4d7e6;
    --maage-info-dark-900: #e2eef2;

    --maage-bg-dark: #0e0f11;
    --maage-bg-muted-dark: #18191b;
    --maage-surface-dark: #1e2023;

    --maage-border-dark: #2c2f33;

    --maage-text-dark: #f5f5f5;
    --maage-text-muted-dark: #d0d0d0;
    --maage-text-subtle-dark: #a0a0a0;
    --maage-text-inverse-dark: #1a1a1a;

    --maage-text-link-dark: #66a2c2;
    --maage-text-link-white-dark: #ffffff;

    --maage-gray-neutral-dark-100: #1a1a1a;
    --maage-gray-neutral-dark-200: #222222;
    --maage-gray-neutral-dark-300: #2a2a2a;
    --maage-gray-neutral-dark-400: #333333;
    --maage-gray-neutral-dark-500: #444444;
}

.dark-1 {
    --maage-bg-dark-50: #0b1116;
    --maage-bg-dark-100: #101820;
    --maage-bg-dark-200: #1a222b;
    --maage-bg-dark-300: #232f3b;
    --maage-bg-dark-400: #2e3c4c;
    --maage-bg-dark-500: #394a5a;
    --maage-bg-dark-600: #47596b;
    --maage-bg-dark-700: #556a7e;
    --maage-bg-dark-800: #6b8092;
    --maage-bg-dark-900: #92a2b4;
}

.dark-2 {
    --maage-bg-dark-50: #0e1013;
    --maage-bg-dark-100: #14171c;
    --maage-bg-dark-200: #1b1f26;
    --maage-bg-dark-300: #232832;
    --maage-bg-dark-400: #2e3440;
    --maage-bg-dark-500: #3b4453;
    --maage-bg-dark-600: #485264;
    --maage-bg-dark-700: #576178;
    --maage-bg-dark-800: #6b768c;
    --maage-bg-dark-900: #8490a8;
}

.dark-3 {
    --maage-bg-dark-50: #0d1216;
    --maage-bg-dark-100: #12181e;
    --maage-bg-dark-200: #1a2128;
    --maage-bg-dark-300: #232b34;
    --maage-bg-dark-400: #2e3742;
    --maage-bg-dark-500: #39434f;
    --maage-bg-dark-600: #455060;
    --maage-bg-dark-700: #526072;
    --maage-bg-dark-800: #617183;
    --maage-bg-dark-900: #7f90a0;
}

.dark-4 {
    --maage-bg-dark-50: #0a0f1a;
    --maage-bg-dark-100: #0e1620;
    --maage-bg-dark-200: #141e2b;
    --maage-bg-dark-300: #1c2938;
    --maage-bg-dark-400: #273647;
    --maage-bg-dark-500: #324357;
    --maage-bg-dark-600: #3f5268;
    --maage-bg-dark-700: #4e637a;
    --maage-bg-dark-800: #5f768e;
    --maage-bg-dark-900: #8298b2;
}

.dark-5 {
    --maage-bg-dark-50: #111111;
    --maage-bg-dark-100: #151515;
    --maage-bg-dark-200: #1b1b1b;
    --maage-bg-dark-300: #222222;
    --maage-bg-dark-400: #2a2a2a;
    --maage-bg-dark-500: #333333;
    --maage-bg-dark-600: #3f3f3f;
    --maage-bg-dark-700: #4c4c4c;
    --maage-bg-dark-800: #5b5b5b;
    --maage-bg-dark-900: #6b6b6b;
}

/* scoped reset */
#maage.scoped-reset,
#maage.scoped-reset * {
  all: unset;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
}

#maage.scoped-reset *,
#maage.scoped-reset *::before,
#maage.scoped-reset *::after {
  box-sizing: inherit;
}

#maage.scoped-reset div,
#maage.scoped-reset section,
#maage.scoped-reset article,
#maage.scoped-reset header,
#maage.scoped-reset footer,
#maage.scoped-reset main,
#maage.scoped-reset nav {
  display: block;
}

#maage.scoped-reset p {
  margin-bottom: 1em;
}

#maage.scoped-reset a {
  color: inherit;
  text-decoration: none;
}

#maage.scoped-reset ul,
#maage.scoped-reset ol {
  list-style: none;
  padding-left: 0;
}

#maage.scoped-reset input,
#maage.scoped-reset textarea,
#maage.scoped-reset select,
#maage.scoped-reset button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  appearance: none;
}

#maage.scoped-reset img,
#maage.scoped-reset video,
#maage.scoped-reset canvas,
#maage.scoped-reset svg {
  max-width: 100%;
  height: auto;
  display: block;
}

#maage.scoped-reset table {
  border-collapse: collapse;
  border-spacing: 0;
}

#maage.scoped-reset strong,
#maage.scoped-reset b {
  font-weight: 600;
}

#maage.scoped-reset em,
#maage.scoped-reset i {
  font-style: italic;
}

/* scoped all: unset - forms */
.maage-base-form input,
.maage-base-form textarea,
.maage-base-form select,
.maage-base-form button {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: inherit;
}

/* text reset utilities */
.text-reset-basic {
  all: unset;
  display: inline;
  font: inherit;
  color: inherit;
}

.text-reset-clean {
  all: unset;
  font-family: sans-serif;
  font-size: 1rem;
  font-weight: normal;
  color: #212529;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

.text-reset-inter {
  all: unset;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #212529;
  font-weight: 400;
}

.body-text-reset-hard {
  all: initial;
  font-family: var(--maage-font-body, sans-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--maage-text-default, #212529);
  text-align: left;
  text-decoration: none;
  text-transform: none;
  white-space: normal;
  word-break: break-word;
  display: initial;
}

.heading-text-reset-hard {
  all: initial;
  font-family: var(--maage-font-heading, sans-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--maage-text-default, #212529);
  text-align: left;
  text-decoration: none;
  text-transform: none;
  white-space: normal;
  word-break: break-word;
  display: initial;
}

/* global styles */
html,
body {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--background);
  color: var(--text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Poppins', sans-serif;
}

code,
pre {
  font-family: 'IBM Plex Mono', monospace;
}

#ApplicationContainer {
  background-color: #f8f9fa;
}

#ApplicationContainer .App {
  background-color: #f8f9fa;
}

#ApplicationContainer .App .appTemplate {
  background-color: #f8f9fa;
}

.fa {
  font-display: block !important;
}

#bv-brc-page-container {
  overflow-y: auto;
  height: 100%;
}

div#bv-brc-home.maage-background {
  background-color: blue !important;
}

div#bv-brc-home.maage-background {
  background-color: var(--maage-bg-default) !important;
  padding-top: 50px;
}

#maage-homepage {
  position: relative;
}

#maage-home {
  background-color: var(--maage-bg-default);
}

#maage-page {
  background-color: var(----maage-bg-default);
}

#maage-page .dot-pattern {
  background-size: 20px 20px;
  background-image: radial-gradient(rgba(166, 201, 184, 0.2) 2px, transparent 2px);
}

#maage-page .section-divider {
  position: relative;
  height: 2px;
  width: 80px;
  background-color: #98bdac;
  margin: 0 auto;
}

#maage-page .section-divider::before,
#maage-page .section-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #98bdac;
}

#maage-page .section-divider::before {
  left: -10px;
}

#maage-page .section-divider::after {
  right: -10px;
}

#maage-page .left.section-divider& {
  margin-left: 0px;
  margin-right: auto;

}

btn-guide-links {
  border: 1px solid var(--maage-gray-200);
  border-radius: 4px;
  color: var(--maage-text-default);
}

div.PerspectiveHeader > i.fa.PerspectiveIcon.icon-selection-Taxonomy {
  speak: none;
  -webkit-font-smoothing: antialiased;
  color: var(--maage-primary-500);
}

span.PerspectiveQuery > a.navigationLink.current {
  color: #436d58;
}

span.PerspectiveQuery > a.navigationLink:nth-child(1) {
  color: #436d58;
}

span.PerspectiveQuery > a.navigationLink:nth-child(2) {
  color: #26292c;
}

span.PerspectiveQuery > a.navigationLink:nth-child(3) {
  color: #26292c;
}

span.PerspectiveQuery > a.navigationLink:nth-child(4) {
  color: #26292c;
}

span.PerspectiveQuery > a.navigationLink:nth-child(5) {
  color: #26292c;
}

span.PerspectiveQuery > a.navigationLink:nth-child(6) {
  color: #26292c;
}

span.PerspectiveQuery > a.navigationLink:nth-child(7) {
  color: #26292c;
}

div.PerspectiveHeader > span.PerspectiveTotalCount {
  color: var(--maage-secondary-500);
}

div#dijit_layout_TabContainer_0_tablist > div.dijitTabInner.dijitTabContent.dijitTab.dijitTabChecked.dijitChecked {
  z-index: 3;
  /* text-wrap-mode: nowrap; */ 
  white-space: nowrap;
  white-space-collapse: collapse;
  border-color: var(--maage-secondary-500) #b5bcc7 #b5bcc7;
  position: relative;
}

div.column-sub > div.section:nth-child(n) > h3.section-title.close {
  background-color: var(--maage-primary-400);
}

div.column-prime > div.section:nth-child(n) > h3.section-title.close {
  background-color: var(--maage-primary-400);
}

div.column-opt > div.section:nth-child(n) > h3.close.section-title {
  background-color: var(--maage-primary-400);
}

div.section:nth-child(3) > h3.section-title.close2x {
  background-color: var(--maage-primary-400);
}

div.column-sub a,
div.column-prime a,
div.column-opt a {
  color: var(--maage-secondary-700);
}

div.column-sub a:hover,
div.column-prime a:hover,
div.column-opt a:hover {
  color: var(--maage-secondary-700);
  opacity: 75%;
}

div.ActionButtonWrapper > div.ActionButton.fa.icon-info-circle.fa-2x {
  color: #fafafa;
  cursor: pointer;
  font-family: icomoon;
  font-size: 2em;
  margin: 2px 5px;
  border-style: initial;
  border-width: 0;
  font-size-adjust: none;
  padding: 0;
  text-align: center;
  visibility: visible;
}

div.ActionButtonWrapper > div.ActionButtonText {
  text-wrap-mode: wrap;
  color: #fafafa;
  font-size: 0.6em;
  margin: 0;
  text-align: center;
}

div.ActionBar.dijitBorderContainerNoGutter-child.dijitBorderContainerNoGutter-ActionBar.dijitBorderContainerNoGutterPane.dijitAlignRight {
  background-color: var(--maage-secondary-500);
}

div.selectedList {
  background-color: #ecc187;
  color: #212529;
  margin: 0 0 2px;
  min-height: 21px;
  text-align: center;
  /* text-wrap-mode: nowrap; */
  white-space: nowrap;
  padding: 0;
}

.ActionBar .ActionButtonWrapper {
  border: none;
}

.ActionButtonText {
  color: #1a1a1a !important;
}

.ActionBar .ActionButtonWrapper .ActionButton {
  color: #ffffff !important;
  font-size: 1.5em !important;
}

.ActionBar .ActionButtonWrapper .ActionButtonText {
  color: #ffffff !important;
  font-size: 10px !important;
}

div.ActionButton.fa-2x {
  color: #ffffff !important;
  z-index: 1000 !important;
  margin-top: 1px !important;
  height: 30px !important;
}

div#maage-page {
  width: 100%;
}

div#uniqName_18_0 > div:nth-child(1) > div.ActionButton.fa.icon-chevron-circle-right.fa-2x {
  height: 30px !important;
  width: 30px !important;
  display: block !important;
  color: red;
  left: 1px !important;
}

#maage-page .about-logo {
  width: 55%;
  height: auto;
}

.topMenuButton .workspace-nav-links {
  color: #344855;
  font-size: 14px;
}

.topMenuButton .workspace-nav-links:hover {
  opacity: 75%;
  text-decoration: underline;
}

div.relative.z-10.space-y-6 > div:nth-child(1) > h1.text-3xl.md/:text-4xl.lg\:text-5xl.font-bold.text-secondary-900.mb-4.font-poppins.leading-tight {
  font-weight: 600 !important;
  color: #212529 !important;
}

div.flex.items-center.mb-6 > h2.text-2xl.font-semibold.text-secondary-800.font-poppins {
  color: #212529;
}

div.flex.items-center > h2.text-2xl.font-semibold.text-[var(--maage-gray-800)].font-poppins {
  color: #212529;
}

div.flex.items-center.mb-5 > h2.text-xl.font-bold.text-gray-800.font-poppins {
  color: #212529;
  font-weight: 600;
}

div.flex.items-center.mb-6 > h2.text-xl.font-bold.text-gray-800.font-poppins {
  color: #212529;
  font-weight: 600;
}

div.flex.items-center.mb-4 > h2.text-xl.font-bold.text-gray-800.font-poppins {
  color: #212529;
  font-size: 1.5rem;
  font-weight: 600;
}

@media (min-width: 1024px) {
  div.relative.z-10.space-y-6 > div:nth-child(1) > h1.text-3xl.md/:text-4xl.lg\:text-5xl.font-bold.text-secondary-900.mb-4.font-poppins.leading-tight {
    color: #212529;
    font-weight: 600;
  }
}

bv-brc-home,
#bv-brc-page {
  font-family: 'Poppins', sans-serif;
}

#bv-brc-header-container {
  height: 100%;
}

#bv-brc-header {
  height: auto;
}

#bv-brc-header-container > div {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#bv-brc-home .bv-brc-info {
  border-bottom: 4px solid var(--maage-primary-800);
}

div#dijit__FocusMixin_1 > table.GStable > tbody.GSbody {
  border-color: #436d5a;
  border-width: 2px;
}

#maage-home div.home-main.home-main-left > div.bv-brc-info.card {
  text-align: left;
  border-color: #e3e3e3;
  background-color: #fcfdfc;
  color: #1c1f21;
  font-weight: 300;
  border-radius: 8px;
  padding: 16px;
}

#maage-home div.bv-brc-info.card > h1 {
  color: #1c1f21;
  font-weight: 500;
  text-align: left;
}

#maage-home div.bv-brc-info.card > p {
  color: #1c1f21;
  text-align: left;
}

@media (min-width: 1024px) {
  div.home-main.home-main-left > div.bv-brc-info.card {
    background-color: var(--maage-primary-800);
  }
}

#maage-home div#analyze-section > div.mid-content-bottom {
  background-color: #f5f5f5;
}

#maage-home #bv-brc-header-container .topMenuButton div.bv-brc-info.card > h1 {
  font-family: Poppins;
  font-weight: normal;
}

span#maage-logo-link {
  font-family: Poppins;
  font-weight: normal;
}

div.nav-logo > a.nav-logo-link {
  font-family: Poppins;
  font-weight: normal;
}

div#bv-brc-header-container > div.nav-logo {
  font-family: Poppins;
  font-weight: normal;
  margin: 0 0 0 1px;
}

div#bv-brc-header {
  background-repeat: repeat;
  font-family: Poppins;
}

div#bv-brc-header-container {
  font-family: Poppins;
  font-weight: normal;
}

div#bv-brc-header-container > div:nth-child(2) > span.dijit.dijitReset.dijitInline.dijitDropDownButton.topMenuButton.showOnLoad:nth-child(1) {
  font-family: Poppins;
  padding: 0 5px;
}

span.dijit.dijitReset.dijitInline.dijitDropDownButton.topMenuButton.showOnLoad:nth-child(1) > span.dijitReset.dijitInline.dijitButtonNode {
  font-family: Poppins;
  font-weight: normal;
  /* white-space-collapse: collapse; */
  /* text-wrap-mode: nowrap; */
  white-space: nowrap;
}

span#dijit_form_DropDownButton_1 {
  font-family: Poppins;
  font-weight: normal;
  /* text-wrap-mode: nowrap; */
  white-space: nowrap;
  background-repeat: repeat-x;
}

div#bv-brc-header-container > div:nth-child(2) > span.dijit.dijitReset.dijitInline.dijitDropDownButton.topMenuButton.showOnLoad:nth-child(3) {
  font-family: Poppins;
  padding: 0 5px;
}

span#dijit_form_DropDownButton_2_label {
  cursor: pointer;
  font-weight: normal;
}

span#dijit_form_DropDownButton_2 > span.dijitReset.dijitInline.dijitArrowButtonChar {
  cursor: pointer;
  font-weight: normal;
}

div#bv-brc-header-container > div:nth-child(2) > span.dijit.dijitReset.dijitInline.dijitDropDownButton.topMenuButton.showOnLoad:nth-child(4) {
  font-family: Poppins;
  font-weight: normal;
  padding: 0 5px;
}

span.dijit.dijitReset.dijitInline.dijitDropDownButton.topMenuButton.showOnLoad:nth-child(4) > span.dijitReset.dijitInline.dijitButtonNode {
  transition: background-color 0.3s;
  /* text-wrap-mode: nowrap; */
  white-space: nowrap;
  white-space-collapse: collapse;
  font-weight: normal;
}

span#dijit_form_DropDownButton_3 {
  font-weight: normal;
  /* text-wrap-mode: nowrap; */
  white-space: nowrap;
  background-repeat: repeat-x;
}

div#bv-brc-header-container > div:nth-child(2) > span.dijit.dijitReset.dijitInline.dijitDropDownButton.topMenuButton.showOnLoad:nth-child(5) {
  font-family: Poppins;
}

span#dijit_form_DropDownButton_4_label {
  cursor: pointer;
  font-weight: normal;
}

#bv-brc-header-container .navigation-intem {
  cursor: pointer !important;
}

div#bv-brc-header-container > div:nth-child(2) > span.dijit.dijitReset.dijitInline.dijitDropDownButton.topMenuButton.showOnLoad:nth-child(6) {
  background-position: inherit;
  border-radius: 4px;
  font-size-adjust: inherit;
  transition: background-color 0.3s;
  text-wrap-mode: nowrap;
  white-space-collapse: collapse;
  line-height: normal;
  text-align: center;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
  background-attachment: inherit;
  background-clip: inherit;
  background-color: inherit;
  background-image: inherit;
  background-origin: inherit;
  background-repeat: repeat;
  background-size: inherit;
  border-style: initial;
  border-width: 0;
  color: #efefef;
  cursor: pointer;
  font-family: Poppins;
  font-size: 16px;
  padding: 0 5px;
}

span#dijit_form_DropDownButton_5 {
  font-weight: normal;
  /* text-wrap-mode: nowrap; */
  white-space: nowrap;
  background-repeat: repeat-x;
}

span#dijit_form_DropDownButton_5_label {
  cursor: pointer;
  font-weight: normal;
}

span#dijit_form_DropDownButton_6 {
  font-weight: normal;
  /* text-wrap-mode: nowrap; */
  white-space: nowrap;
  background-repeat: repeat-x;
}

span#dijit_form_DropDownButton_6_label {
  cursor: pointer;
  font-weight: normal;
}

@media (min-width: 1024px) {
  #maage-home div#bv-brc-header-container > div.HideWithAuth.authLinks.showOnLoad {
    margin-right: 25px;
  }
}

#maage-home div.bv-brc-info.card > p > a:nth-child(2) {
  font-weight: 600;
}

#maage-home div.analyze.bv-brc-mid-content.card > h2 {
  color: #1c1f21;
  font-family: Roboto Slab;
}

#maage-home div.analyze.bv-brc-mid-content.card > p {
  font-family: Poppins;
  font-size: 16px;
}

#maage-home div.mid-content-section:nth-child(1) > div.mid-links {
  color: #436d5a;
}

#maage-home div.mid-content-section:nth-child(3) > div.mid-links {
  color: #436d5a;
  cursor: pointer;
  font-family: 'Poppins';
  font-size: 1.1em;
  line-height: 1.4em;
  text-decoration: inherit;
}

#maage-home div.mid-content-section:nth-child(3) > div.mid-links > a:nth-child(1) {
  color: #436d5a;
  font-family: Poppins;
}

#maage-home div.mid-content-section:nth-child(3) > div.mid-links > a:nth-child(2) {
  color: #436d5a;
  font-family: Poppins;
}

#maage-home div.mid-content-section:nth-child(3) > div.mid-links > a:nth-child(3) {
  color: #436d5a;
  font-family: Poppins;
}

#maage-home div.mid-content-section:nth-child(3) > div.mid-links > a:nth-child(4) {
  color: #436d5a;
  font-family: Poppins;
}

#maage-home div.mid-content-section:nth-child(3) > div.mid-links > a:nth-child(5) {
  color: #436d5a;
  font-family: Poppins;
}

#maage-home div.mid-content-section:nth-child(4) > div.mid-links > a:nth-child(1) {
  color: #436d5a;
  font-family: Poppins;
}

#maage-home div.mid-content-section:nth-child(4) > div.mid-links > a:nth-child(2) {
  color: #436d5a;
  font-family: Poppins;
}

#maage-home div.mid-content-section:nth-child(4) > div.mid-links > a:nth-child(3) {
  color: #436d5a;
  font-family: Poppins;
}

#maage-home div.mid-content-section:nth-child(2) > div.mid-links > a.navigationLink:nth-child(1) {
  color: #436d5a;
  font-family: Poppins;
}

#maage-home div.mid-content-section:nth-child(2) > div.mid-links > a.navigationLink:nth-child(2) {
  color: #436d5a;
  font-family: Poppins;
}

#maage-home div.mid-content-section:nth-child(2) > div.mid-links > a.navigationLink:nth-child(3) {
  color: #436d5a;
  font-family: Poppins;
}

#maage-home div.mid-content-section:nth-child(2) > div.mid-links > a.navigationLink:nth-child(4) {
  color: #436d5a;
  font-family: Poppins;
}

#maage-home div.mid-content-section:nth-child(2) > div.mid-links > a:nth-child(5) {
  color: #436d5a;
  font-family: Poppins;
}

#maage-home div.mid-content-section:nth-child(1) > div.mid-links > a.navigationLink:nth-child(1) {
  color: #436d5a;
  font-family: Poppins;
}

#maage-home div.mid-content-section:nth-child(1) > div.mid-links > a.navigationLink:nth-child(2) {
  color: #436d5a;
  font-family: Poppins;
}

#maage-home div.mid-content-section:nth-child(1) > div.mid-links > a.navigationLink:nth-child(3) {
  color: #436d5a;
  font-family: Poppins;
}

#maage-home div.mid-content-section:nth-child(1) > div.mid-links > a.navigationLink:nth-child(4) {
  color: #436d5a;
  font-family: Poppins;
}

#maage-home div.mid-content-section:nth-child(1) > div.mid-links > a:nth-child(5) {
  color: #436d5a;
  font-family: Poppins;
  border: 0 initial;
  border-color: #67a789;
}

#maage-home span.HideWithAuth > a:nth-child(1) {
  color: #436d5a;
  font-weight: 600;
  text-decoration-style: solid;
}

#maage-home span.HideWithAuth > a:nth-child(2) {
  color: #436d5a;
  font-weight: 600;
}

.gs-input input {
  border: none !important;
  outline: none !important;
  padding: 2px 16px !important;
  font-size: 16px !important;
  background: transparent !important;
}

div.home-search-wrapper > table.GStable {
  height: auto;
  padding: 10px 5px;
  border-radius: 6px;
  border: 1px solid #bfd9cb;
}

div.home-search-wrapper > table.GStable {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

div.dijitTooltipContents.dijitTooltipFocusNode > div > div.authMenuHeader {
  background-color: #d2e5db;
  font-size: 14px;
  border-style: initial;
  border-width: 0;
  box-sizing: border-box;
  color: #3c5867;
  font-family: Poppins, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 2pm;
  margin-top: 6px;
  padding: 6px 12px;
  tab-size: 4;
  visibility: visible;
  margin-right: 8px;
}

div#bv-brc-header-container > div:nth-child(2) {
  flex: 1 1 0;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 400;
  margin: -4px 0 0;
}

div#bv-brc-header {
  background-color: var(--maage-primary-400);
  height: 60px;
  z-index: 1000;
}

div#bv-brc-header a {
  font-family: 'Poppins', sans-serif !important;
  font-size: 16px;
}

div#bv-brc-header-container > div.HideWithAuth.authLinks.showOnLoad {
  margin-right: 10px;
}

div.HideWithAuth.authLinks.showOnLoad > a.LoginButton.navigationLink:nth-child(1) {
  background-color: #f7f4ed;
  border: 1px solid #1c1f21 !important;
  border-radius: 20px;
  color: #1c1f21;
  font-size: 16px;
  font-weight: 500;
  padding: 2px 10px 4px;
}

div.HideWithAuth.authLinks.showOnLoad > a.LoginButton.navigationLink:nth-child(1):visited {
  color: #64939a;
}

div.HideWithAuth.authLinks.showOnLoad > a.LoginButton.navigationLink:nth-child(1):hover {
  background-color: rgba(255, 255, 255, 0.95);
}

div.HideWithAuth.authLinks.showOnLoad > a.LoginButton.navigationLink:nth-child(2) {
  background-color: #f7f4ed;
  border: 1px solid #1c1f21 !important;
  border-radius: 20px;
  border-style: initial;
  color: #1c1f21 !important;
  font-size: 16px;
  font-weight: 500;
  padding: 2px 14px 4px;
}

div.HideWithAuth.authLinks.showOnLoad > a.LoginButton.navigationLink:nth-child(2):visited {
  color: #467599;
}

div.HideWithAuth.authLinks.showOnLoad > a.LoginButton.navigationLink:nth-child(2):hover {
  background-color: rgba(255, 255, 255, 0.95);
}

a.nav-logo-link > span > i {
  color: #1c1f21;
}

div#bv-brc-header-container > div:nth-child(2) > span.dijit.dijitReset.dijitInline.dijitDropDownButton.topMenuButton.showOnLoad:nth-child(1) {
  background-repeat: repeat;
  font-size: 16px;
  padding: 0 4px;
}

span.dijit.dijitReset.dijitInline.dijitDropDownButton.topMenuButton.showOnLoad:nth-child(1) > span.dijitReset.dijitInline.dijitButtonNode {
  transition: background-color 0.3s;
  text-wrap-mode: nowrap;
  white-space-collapse: collapse;
  font-family: 'Poppins', sans-serif;
}

span#dijit_form_DropDownButton_0 {
  color: #26292c;
  cursor: pointer;
  font-weight: 500 !important;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: block;
  text-align: center;
  white-space-collapse: collapse;
  /* text-wrap-mode: nowrap; */
  white-space: nowrap;
  background-repeat: repeat-x;
  border-style: initial;
  border-width: 0;
  font-size-adjust: none;
}

div#bv-brc-header-container {
  font-family: 'Poppins', sans-serif;
  padding: 0 10px;
}

div#dijit_layout_ContentPane_1 {
  border-left-width: 0;
  border-right-width: 0;
  border-top-width: 0;
  font-family: 'Poppins', sans-serif;
}

div#bv-brc-header-container > div:nth-child(2) > span.dijit.dijitReset.dijitInline.topMenuButton.showOnLoad.dijitDropDownButton:nth-child(2) {
  background-repeat: repeat;
  font-size: 16px;
  padding: 0 4px;
}

span#dijit_form_DropDownButton_1 {
  background-repeat: repeat-x;
  /* text-wrap-mode: nowrap; */
  white-space: nowrap;
  color: #26292c;
  font-weight: 500;
  cursor: pointer;
}

div#bv-brc-header-container > div:nth-child(2) > span.dijit.dijitReset.dijitInline.dijitDropDownButton.topMenuButton.showOnLoad:nth-child(3) {
  background-repeat: repeat;
  font-size: 16px;
  padding: 0 4px;
}

span#dijit_form_DropDownButton_2 {
  background-repeat: repeat-x;
  /* text-wrap-mode: nowrap; */
  white-space: nowrap;
  color: #26292c;
  font-weight: 500;
  cursor: pointer;
}

div#bv-brc-header-container > div:nth-child(2) > span.dijit.dijitReset.dijitInline.dijitDropDownButton.topMenuButton.showOnLoad:nth-child(4) {
  background-repeat: repeat;
  font-size: 16px;
  font-weight: 300;
}

span#dijit_form_DropDownButton_3 {
  background-repeat: repeat-x;
  /* text-wrap-mode: nowrap; */
  white-space: nowrap;
  color: #34383c;
  font-weight: 500;
  cursor: pointer;
}

div#bv-brc-header-container > div:nth-child(2) > span.dijit.dijitReset.dijitInline.dijitDropDownButton.topMenuButton.showOnLoad:nth-child(5) {
  background-repeat: repeat;
  font-size: 16px;
  padding: 0 4px;
}

span#dijit_form_DropDownButton_4 {
  background-repeat: repeat-x;
  /* text-wrap-mode: nowrap; */
  white-space: nowrap;
  color: #26292c;
  font-weight: 500;
  cursor: pointer;
}

div#bv-brc-header-container > div:nth-child(2) > span.dijit.dijitReset.dijitInline.dijitDropDownButton.topMenuButton.showOnLoad:nth-child(6) {
  background-repeat: repeat;
  font-size: 16px;
  padding: 0 4px;
}

span#dijit_form_DropDownButton_5 {
  background-repeat: repeat-x;
  /* text-wrap-mode: nowrap; */
  white-space: nowrap;
  color: #26292c;
  font-weight: 500;
  cursor: pointer;
}

span#dijit_form_DropDownButton_5 > span.dijitReset.dijitInline.dijitArrowButtonInner {
  display: none;
  cursor: pointer;
}

span#dijit_form_DropDownButton_4 > span.dijitReset.dijitInline.dijitArrowButtonInner {
  display: none;
  cursor: pointer;
}

span#dijit_form_DropDownButton_3 > span.dijitReset.dijitInline.dijitArrowButtonInner {
  display: none;
  cursor: pointer;
}

span#dijit_form_DropDownButton_2 > span.dijitReset.dijitInline.dijitArrowButtonInner {
  display: none;
  cursor: pointer;
}

span#dijit_form_DropDownButton_1 > span.dijitReset.dijitInline.dijitArrowButtonInner {
  display: none;
  cursor: pointer;
}

span#dijit_form_DropDownButton_0 > span.dijitReset.dijitInline.dijitArrowButtonInner {
  display: none;
  cursor: pointer;
}

.maage-login div#dijit__WidgetsInTemplateMixin_0 > div:nth-child(1) {
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 150ms ease;
}

.maage-login .dijitTextBox {
  border-radius: 4px !important;
  border: 1px solid #dedede !important;
  transition: all 150ms ease;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.maage-login .dijitTextBox:hover {
  border-color: #b3d0db !important;
}

.maage-login .dijitTextBox:focus-within {
  border-color: #3f7da6 !important;
  box-shadow: 0 0 0 3px rgba(63, 125, 166, 0.15);
}

.maage-login .dijitButton {
  background-color: #3f7da6 !important;
  border-radius: 4px !important;
  transition: all 150ms ease;
}

.maage-login .dijitButton:hover:not(.dijitButtonDisabled) {
  background-color: #346c83 !important;
  transform: translateY(-1px);
}

.maage-login .dijitButtonText {
  color: white !important;
  font-weight: 500 !important;
}

.maage-login .loginForm > form > div {
  margin-bottom: 15px;
}

.ViewerApp {
  margin-top: 10px !important;
}

.BrowserHeader div.ActionButton.fa.icon-rocket.fa-2x {
  color: var(--maage-secondary-800);
}

.PerspectiveHeader i.fa.PerspectiveIcon {
  color: var(--maage-primary-500) !important;
}

.patric .PerspectiveHeader div.PerspectiveType {
  font-size: 17px !important;
  font-weight: 500 !important;
}

.PerspectiveHeader span.queryModel {
  color: var(--maage-primary-500) !important;
}

.PerspectiveHeader span.searchValue {
  background-color: var(--maage-tertiary-400) !important;
  padding: 1px !important;
}

.PerspectiveHeader span.PerspectiveQuery a.navigationLink {
  color: var(--maage-secondary-700);
  font-size: 1em !important;
  font-family: 'Inter', sans-serif !important;
}

.PerspectiveHeader span.PerspectiveQuery a.navigationLink.current {
  color: var(--maage-primary-500);
  font-size: 1.1em !important;
  font-family: 'Inter', sans-serif !important;
}

.PerspectiveHeader .PerspectiveTotalCount {
  color: var(--maage-secondary-700) !important;
}

div.dijitTabInner.dijitTabContent.dijitTab.dijitTabChecked.dijitChecked {
  border-color: var(--maage-primary-500) #b5bcc7 #b5bcc7;
}

div.ActionButtonWrapper:nth-child(1) > div.ActionButton.fa.icon-chevron-circle-right.fa-2x {
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  font-size: 1.25em;
}

.ItemDetailPanel .noItemSelection .fa {
  color: var(--maage-tertiary-400);
}

div.flex.items-start.gap-3.p-3.rounded-lg.bg-primary-50.border.border-primary-100 > div.flex-shrink-0.w-10.h-10.bg-primary-200.rounded-lg.flex.items-center.justify-center.text-primary-700 {
  color: #365668;
  background-color: #f2f8f5;
}

div.flex.items-start.gap-3.p-3.rounded-lg.hover/:bg-gray-50.transition-colors:nth-child(2) > div.flex-shrink-0.w-10.h-10.bg-primary-100.rounded-lg.flex.items-center.justify-center.text-primary-700 {
  color: #365668;
  background-color: #ffffff;
}

div.flex-shrink-0.w-10.h-10.bg-primary-100.rounded-lg.flex.items-center.justify-center.text-primary-700 > div.text-center.leading-none > div.text-lg.font-bold {
  color: #334a57;
}

div.flex.items-start.gap-3.p-3.rounded-lg.hover/:bg-gray-50.transition-colors:nth-child(3) > div.flex-shrink-0.w-10.h-10.bg-primary-100.rounded-lg.flex.items-center.justify-center.text-primary-700 > div.text-center.leading-none {
  color: #334a57;
}

div.flex.items-start.gap-3.p-3.rounded-lg.hover/:bg-gray-50.transition-colors:nth-child(3) > div.flex-shrink-0.w-10.h-10.bg-primary-100.rounded-lg.flex.items-center.justify-center.text-primary-700 {
  color: #334a57;
  background-color: #ffffff;
}

div.space-y-4 > div.flex.items-start.gap-3.p-3.rounded-lg.bg-primary-50.border.border-primary-100 {
  background-color: #f2f8f5;
}

.maage-background {
  background-color: #f8f9fa !important;
}

.maage-home .home-card {
  box-shadow: 0 3px 10px rgb(0, 0, 0, 0.15);
}

.maage-navbar [data-dojo-type='p3/widget/TooltipDialog'] {
  background-color: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  padding: 4px 0 !important;
  font-family:
    'Segoe UI',
    -apple-system,
    BlinkMacSystemFont,
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Open Sans',
    'Helvetica Neue',
    sans-serif !important;
  animation: menuAppear 0.2s ease-out forwards !important;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}

@keyframes menuAppear {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.maage-navbar .menuHeader {
  background-color: #689f86 !important;
  color: white !important;
  font-weight: 600 !important;
  text-align: left !important;
  padding: 6px 12px !important;
  margin-top: 6px !important;
  margin-bottom: 2px !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  border-left: 3px solid #4d7d65 !important;
  display: flex !important;
  align-items: center !important;
}

.maage-navbar .menuHeader::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.9;
}

.maage-navbar .menuItems > div,
.maage-navbar [data-dojo-type='p3/widget/TooltipDialog'] > div:not(.menuHeader):not([style*='display:inline-block']):not([style*='display: inline-block']) {
  margin: 1px 0 !important;
  padding: 0 6px !important;
}

.maage-navbar .navigationLink,
.maage-navbar .TopMenuLink,
.maage-navbar .DialogButton,
.maage-navbar .loginLink {
  display: block !important;
  padding: 5px 10px !important;
  color: #2c2c2c !important;
  text-decoration: none !important;
  font-size: 13px !important;
  border-radius: 4px !important;
  transition: all 0.2s ease-in-out !important;
  position: relative !important;
  cursor: pointer !important;
}

.maage-navbar .navigationLink:hover,
.maage-navbar .TopMenuLink:hover,
.maage-navbar .DialogButton:hover,
.maage-navbar .loginLink:hover {
  background-color: #c0dacc !important;
  color: #2c2c2c !important;
  transform: translateX(2px) !important;
}

.maage-navbar .navigationLink:active,
.maage-navbar .TopMenuLink:active,
.maage-navbar .DialogButton:active,
.maage-navbar .loginLink:active {
  background-color: #aecfbc !important;
}

.maage-navbar .navigationLink[href='/Bacteria'],
.maage-navbar .navigationLink[href='/Virus2'],
.maage-navbar .navigationLink[href^='/view/Taxonomy/10244'][href$='overview']:contains('All Metagenomes'),
.maage-navbar .navigationLink[href='/job/'],
.maage-navbar .navigationLink[href='/workspace/public']:contains('Public Workspaces') {
  color: #4d7d65 !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
  margin-bottom: 6px !important;
}

.maage-navbar .navigationLink[href='/Bacteria']::after,
.maage-navbar .navigationLink[href='/Virus2']::after,
.maage-navbar .navigationLink[href^='/view/Taxonomy/10244'][href$='overview']:contains('All Metagenomes'

)::after,
.maage-navbar .navigationLink[href='/job/']::after,
.maage-navbar .navigationLink[href='/workspace/public']:contains('Public Workspaces')::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath fill='%23689f86' d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  opacity: 0;
  transition:
    opacity 0.2s ease-in-out,
    transform 0.2s ease-in-out;
}

.maage-navbar .navigationLink[href='/Bacteria']:hover::after,
.maage-navbar .navigationLink[href='/Virus2']:hover::after,
.maage-navbar .navigationLink[href^='/view/Taxonomy/10244'][href$='overview']:contains('All Metagenomes'

):hover::after,
.maage-navbar .navigationLink[href='/job/']:hover::after,
.maage-navbar .navigationLink[href='/workspace/public']:contains('Public Workspaces'):hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(3px);
}

.maage-navbar .navigationLinkOut::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='12' height='12'%3E%3Cpath fill='%23689f86' d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  vertical-align: middle;
}

.maage-navbar .navigationLink:focus,
.maage-navbar .TopMenuLink:focus,
.maage-navbar .DialogButton:focus,
.maage-navbar .loginLink:focus {
  outline: 2px solid #689f86 !important;
  outline-offset: 1px !important;
}

.maage-navbar [data-dojo-type='p3/widget/TooltipDialog'] > div > div[style*='display:inline-block'],
.maage-navbar [data-dojo-type='p3/widget/TooltipDialog'] > div > div[style*='display: inline-block'] {
  vertical-align: top !important;
  padding: 0 8px !important;
}

.maage-navbar .navigationLink[href^='/outbreaks/'] {
  position: relative !important;
}

.maage-navbar .navigationLink[href^='/outbreaks/']::before {
  margin-right: 5px;
  font-size: 12px;
}

.maage-navbar [data-dojo-type='p3/widget/TooltipDialog'] p {
  margin: 0 !important;
  padding: 0 !important;
}

.maage-navbar [data-dojo-type='p3/widget/TooltipDialog'] hr {
  border: 0 !important;
  height: 1px !important;
  background-color: #e2e8f0 !important;
  margin: 6px 8px !important;
}

.maage-navbar [data-dojo-type='dijit/form/DropDownButton'] > span:contains('Tools') + [data-dojo-type='p3/widget/TooltipDialog'] {
  min-width: 520px !important;
}

.maage-navbar [data-dojo-type='dijit/form/DropDownButton'] > span:contains('Organisms') + [data-dojo-type='p3/widget/TooltipDialog'] {
  min-width: 280px !important;
}

.maage-navbar [data-dojo-type='dijit/form/DropDownButton'] > span:contains('Tools') + [data-dojo-type='p3/widget/TooltipDialog'] > div > div[style*='width:250px'] {
  width: 240px !important;
}

.maage-navbar [data-dojo-type='dijit/form/DropDownButton'] > span:contains('Resources') + [data-dojo-type='p3/widget/TooltipDialog'] {
  min-width: 280px !important;
}

.maage-navbar .fa {
  margin-right: 5px !important;
}

.maage-navbar .TopMenuLink[href='/dev']:empty::after {
  content: 'Coming Soon';
  font-style: italic;
  color: #999;
}

.maage-navbar .workspaceMenuLink {
  color: #4d7d65 !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
  margin-bottom: 6px !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--maage-dark-text);
}

body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  color: var(--maage-dark-text);
  background-color: var(--maage-bg);
}

#maage-navbar .topMenuButton .topMenuLink {
  font-family: inter;
  font-size: 15px;
  font-weight: normal;
  color: var(--maage-dark-text);
}

#maage-navbar .topMenuButton .topMenuLink:hover {
  opacity: 0.75;
  text-decoration: underline;
}

#maage-navbar navigationLink .menuItems navbar-menu-link {
  font-size: 15px !important;
  font-family: 'Inter', 'Noto Sans', sans-serif;
  font-weight: 400;
  color: var(--maage-dark-text);
}

#maage-navbar navigationLink .menuItems navbar-menu-link:visited {
  color: var(--maage-dark-text);
}

#maage-navbar navbar-menu-link:hover {
  opacity: 75%;
  text-decoration: underline;
}

.ActionBar {
  background-color: var(--maage-secondary-500) !important;
}

.ActionBar .ActionButtonText {
  color: var(--maage-light-text) !important;
}

.DataItemHeader,
.DataItemHeader .fa {
  color: var(--maage-secondary-500);
}

.maage-nav-menu .dijitTooltipContainer {
  background-color: #fff !important;
  background-image: none !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  padding: 0 !important;
  transition: box-shadow 0.2s ease-in-out;
  width: 280px;
}

.maage-nav-menu .dijitTooltipContents {
  padding: 4px 0 !important;
  font-family:
    'Poppins',
    'Segoe UI',
    -apple-system,
    BlinkMacSystemFont,
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Open Sans',
    'Helvetica Neue',
    sans-serif !important;
}

#maage-navbar .navigation-item {
  color: #334a57 !important;
  font-weight: 500 !important;
  font-family: 'Poppins', sans-serif !important;
}

#maage-navbar .fa-chevron-down {
  color: #334a57 !important;
}

.menuHeader {
  background-color: var(--maage-primary-500) !important;
  color: white !important;
  font-weight: 500 !important;
  text-align: left !important;
  padding: 6px 12px !important;
  margin-top: 6px !important;
  margin-bottom: 2px !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  display: flex !important;
  align-items: center !important;
}

.menuItemWrapper {
  margin: 1px 0 !important;
  padding: 0 6px !important;
}

.maage-nav-link {
  display: block !important;
  padding: 5px 10px !important;
  color: #365668 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  border-radius: 4px !important;
  transition: all 0.2s ease-in-out !important;
  position: relative !important;
  font-weight: 400 !important;
  font-family: 'Poppins', sans-serif !important;
}

.maage-nav-link:hover {
  background-color: #deede4 !important;
  color: #365668 !important;
  transform: translateX(2px) !important;
}

.maage-nav-link:active {
  background-color: #deede4 !important;
}

.viewAll .maage-nav-link {
  color: #365668 !important;
  font-weight: 400 !important;
  margin-top: 2px !important;
  margin-bottom: 6px !important;
}

.viewAll .maage-nav-link::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  opacity: 0;
  transition:
    opacity 0.2s ease-in-out,
    transform 0.2s ease-in-out;
}

.viewAll .maage-nav-link:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(3px);
}

@keyframes menuAppear {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dijitTooltipContainer {
  animation: menuAppear 0.2s ease-out forwards !important;
}

maage-navbar .topMenuButton .topMenuLink {
  font-family: inter;
  font-size: 15px;
  font-weight: normal;
  color: var(--maage-dark-text);
}

#maage-navbar .topMenuButton .topMenuLink:hover {
  opacity: 0.75;
  text-decoration: underline;
}

#maage-navbar navigationLink .menuItems navbar-menu-link {
  font-size: 15px !important;
  font-family: 'Inter', 'Noto Sans', sans-serif;
  font-weight: 400;
  color: var(--maage-dark-text);
}

#maage-navbar navigationLink .menuItems navbar-menu-link:visited {
  color: var(--maage-dark-text);
}

#maage-navbar navbar-menu-link:hover {
  opacity: 75%;
  text-decoration: underline;
}

.ActionBar {
  background-color: var(--maage-secondary-500) !important;
}

.ActionBar .ActionButtonText {
  color: var(--maage-light-text) !important;
}

.DataItemHeader,
.DataItemHeader .fa {
  color: var(--maage-secondary-500);
}

#maage-homepage .search .claro .dijitSelect .dijitArrowButton {
  background-color: green !important;
}

#maage-homepage div.search-wrapper > div.search {
  border: 2px solid #4d85a2;
  border-radius: 6px;
  box-sizing: border-box;
  color: #212529;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-size-adjust: none;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 2px;
  padding-right: 2px;
  tab-size: 4;
}

.form-select.dijitSelect {
  appearance: none;
  background-color: white;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  font-size: 0.875rem;
  background-image: url('');
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
}

.login-btn,
.register-btn {
  text-decoration: none;
  padding: 8px;
  border-radius: 4px;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  min-width: 120px;
  text-align: center;
}

#bv-brc-header #bv-brc-header-container .login-btn {
  background-color: var(--maage-background);
  color: var(--maage-secondary-700);
  font-weight: 400;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.login-btn:hover {
  background-color: #dddddd!important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.register-btn {
  color: #fafafa !important;
  background-color: var(--maage-secondary-500);
  margin-right: 10px;
  font-weight: 400;
}

.register-btn:hover {
  background-color: var(--maage-secondary-600);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

div#bv-brc-home {
  background: #f8f9fa !important;
  background-color: #f8f9fa !important;
}

div#maage-homepage {
  background-color: #f8f9fa !important;
}

.footer-wrapper {
  box-sizing: border-box;
  font-family: Inter, sans-serif;
}

.footer-wrapper * {
  box-sizing: border-box;
}

.footer-wrapper .footer {
  background-color: rgb(60, 103, 126);
  padding-top: 43.2px;
  min-height: 300px;
  border: 0;
  margin: 0;
}

.footer-wrapper .footer-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 14.4px;
  padding-right: 14.4px;
  width: 100%;
  margin: 0 43px;
  border: 0;
}

.footer-wrapper .footer-grid {
  display: grid;
  grid-template-columns: repeat(5, 227.203px);
  gap: 28.8px;
  margin: 20px 0;
  padding: 0;
  border: 0;
}

.footer-wrapper .footer-logo-section {
  grid-column: span 2 / span 2;
  border: 0;
  margin: 0;
  padding: 0;
}

.footer-wrapper .footer-logo-container {
  display: flex;
  align-items: center;
  border: 0;
}

.footer-wrapper .footer-logo-link {
  color: rgb(44, 44, 44);
  gap: 7.2px;
  display: flex;
  text-decoration: none;
  align-items: center;
  border: 0;
  font-family: Inter, sans-serif;
  transition-duration: 0.3s;
  transition-property:
    color,
    background-color,
    border-color,
    text-decoration-color,
    fill,
    stroke,
    opacity,
    box-shadow,
    transform,
    filter,
    backdrop-filter,
    -webkit-text-decoration-color,
    -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0;
  padding: 0;
}

.footer-wrapper .footer-logo {
  display: block;
  height: 50.3984px;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  margin: 0;
  padding: 0;
}

.footer-wrapper .footer-logo-text {
  border: 0;
  margin: 0;
  padding: 0;
}

.footer-wrapper .logo-first {
  font-size: 43.2px;
  line-height: 43.2px;
  color: rgb(113, 163, 183);
  font-weight: 600;
  border: 0;
  margin: 0;
  padding: 0;
}

.footer-wrapper .logo-last {
  font-size: 43.2px;
  line-height: 43.2px;
  color: rgb(194, 217, 224);
  font-weight: 300;
  margin-left: -3px;
  border: 0;
  padding: 0;
}

.footer-wrapper .divider {
  background-color: rgb(166, 201, 184);
  width: 50px;
  height: 4px;
  margin-bottom: 25px;
  border: 0;
}

.footer-wrapper .footer-nav-section {
  grid-column: span 1 / span 1;
  border: 0;
  margin: 0;
  padding: 0;
}

.footer-wrapper .footer-heading {
  font-weight: 600;
  font-family: Poppins, sans-serif;
  font-size: 14.4px;
  margin: 0;
  padding: 0;
  color: rgb(194, 217, 224);
  line-height: 25.2px;
  border: 0;
}

.footer-wrapper .section-divider {
  background-color: rgb(166, 201, 184);
  height: 4px;
  margin: 6px 0;
  border: 0;
}

.footer-wrapper .divider-maage {
  width: 55px;
}

.footer-wrapper .divider-resources {
  width: 95px;
}

.footer-wrapper .divider-policies {
  width: 70px;
}

.footer-wrapper .footer-nav-list {
  margin: 0;
  padding: 0;
  list-style-position: inside;
  list-style: none;
  border: 0;
}

.footer-wrapper .footer-cap {
  display: block;
  background-color: rgb(49, 70, 84);
  z-index: 1026;
  color: rgb(255, 255, 255);
  padding: 14.4px;
  text-align: center;
  border: 0;
  margin: 0;
}

.footer-wrapper .footer-cap-content {
  display: flex;
  margin: 0;
  padding: 0;
  font-weight: 300;
  gap: 10.8px;
  margin-right: auto;
  margin-left: auto;
  border: 0;
  justify-content: start;
}

.footer-wrapper .footer-cap-text {
  margin: 0;
  padding: 0;
  border: 0;
}

.footer-wrapper .footer-cap-divider {
  margin: 0;
  padding: 0;
  border: 0;
}

.footer-wrapper .footer-cap-link {
  font-size: 12.6px;
  line-height: 18px;
  font-family: Inter, sans-serif;
  margin: 0;
  padding: 0;
  transition-duration: 0.3s;
  transition-property:
    color,
    background-color,
    border-color,
    text-decoration-color,
    fill,
    stroke,
    opacity,
    box-shadow,
    transform,
    filter,
    backdrop-filter,
    -webkit-text-decoration-color,
    -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  color: rgb(250, 250, 250);
  font-weight: 300;
  text-decoration: none;
  border: 0;
}

div.searchResultsContainer .searchResult .resultHead a,
div.searchResultsContainer .searchResult .resultHead a:visited {
  color: var(--maage-secondary-600);
  font-family: Poppins;
  font-size: 1.1rem;
  font-weight: 600;
}

div.searchResultsContainer .searchResult .resultHead a:hover {
  opacity: 0.75;
  text-decoration: underline;
}

.maage-search-results-container div.searchResultsContainer > td > a.navigationLink,
.maage-search-results-container div.searchResultsContainer > td > a.navigationLink:visited {
  color: var(--maage-secondary-600) !important;
  font-family: Poppins !important;
  font-weight: 600 !important;
}

.maage-search-results-container div.searchResultsContainer > td > a.navigationLink:hover {
  opacity: 0.75 !important;
  text-decoration: underline !important;
}

#bv-brc-page .page-content {
  padding: 20px 40px;
  background: var(--white-bg);
  flex-basis: 100%;
}

#bv-brc-page .page-content h1 {
  color: var(--maage-text-default) !important;
  font-family: 'Poppins', sans-serif;
  font-size: 1.75rem;
  font-weight: semibold;
}

#bv-brc-page .page-content h3 {
  color: var(--maage-secondary-600) !important;
  font-family: 'Poppins', sans-serif;
  font-size: 1.5rem;
  font-weight: medium;
}

#bv-brc-page .page-content a {
  font-weight: 300;
  color: var(--maage-secondary-500);
}

#bv-brc-page .page-content a.maage-btn {
  font-weight: 400;
  color: #f5f5f5;
  border: 2px solid var(--maage-secondary-600);
}

#bv-brc-page .page-content a.maage-btn:hover {
  font-weight: 400;
  color: var(--maage-secondary-600);
  border: 2px solid var(--maage-secondary-600);
}

.maage-fixed-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 40px;
  width: 100vw;
  z-index: 100;
  background: inherit;
}

.maage-content .tab-trigger {
  cursor: pointer;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  transition: all 0.2s;
}

.maage-content .tab-trigger.team.active {
  background-color: var(--maage-primary-100);
  color: var(--maage-primary-700);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.maage-content .tab-trigger.advisory-board.active {
  background-color: var(--maage-secondary-50);
  color: var(--maage-secondary-700);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.maage-content .tab-trigger.about.active {
  background-color: var(--maage-primary-100);
  color: var(--maage-primary-700);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.maage-content .tab-content {
  display: none;
}

.maage-content .tab-content.active {
  display: block;
}

.about-scrollspy .tab-trigger.active {
  background-color: var(--maage-primary-100);
  color: var(--maage-primary-700);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

div#bv-brc-page-container > div.page-content {
  background-color: var(--maage-bg) !important;
}

      /* Base dashboard styles */
      .genome-list-overview-dashboard {
        min-height: 100vh;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      }

      /* Metric Cards */
      .metric-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        min-height: 140px;
        position: relative;
      }

      .metric-card:hover {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
      }

      .metric-header {
        font-size: 0.75rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #6b7280;
        margin-bottom: 8px;
      }

      .metric-value {
        font-size: 2rem;
        font-weight: 700;
        color: #1f2937;
        line-height: 1;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .metric-label {
        font-size: 0.875rem;
        color: #6b7280;
        margin-top: auto;
        padding-top: 12px;
      }

      /* Ensure metric-list takes similar space as metric-value */
      .metric-card .metric-list {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      /* Chart Sections */
      .chart-section {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }

      .chart-title {
        font-size: 0.875rem;
        font-weight: 500;
        padding: 16px 20px;
        background-color: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
        margin: 0;
        color: #374151;
      }

      .chart-container {
        flex: 1;
        min-height: 300px;
        padding: 20px;
      }

      /* Map Placeholder */
      .map-placeholder {
        min-height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        border-top: 1px solid #e5e7eb;
      }

      .placeholder-text {
        color: #9ca3af;
        font-style: italic;
        font-size: 1rem;
      }

      /* EChart specific styling */
      .genome-list-overview-dashboard [data-dojo-attach-point*="ChartNode"] {
        width: 100%;
        height: 100%;
        min-height: 300px;
      }

      /* AMR Chart specific - taller for better readability */
      .genome-list-overview-dashboard [data-dojo-attach-point="amrChartNode"] {
        min-height: 400px;
      }

      /* Responsive adjustments */
      @media (max-width: 1024px) {
        .metric-value {
          font-size: 1.5rem;
        }
        
        .chart-container {
          min-height: 250px;
        }
      }

      /* Tailwind utilities for grid system */
      .grid {
        display: grid;
      }
      
      .grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
      }
      
      /* Fix for analyze data grid */
      .analyze-data-grid {
        display: grid !important;
      }
      
      @media (min-width: 640px) {
        .analyze-data-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
      }
      
      @media (min-width: 1024px) {
        .analyze-data-grid {
          grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        }
      }
      
      /* Fix for active outbreaks grid */
      .active-outbreaks-grid {
        display: grid !important;
      }
      
      @media (min-width: 640px) {
        .active-outbreaks-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
      }
      
      @media (min-width: 1024px) {
        .active-outbreaks-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        }
      }

      /* MAAGE Home Page Enhancements */
      #maage-home {
        position: relative;
        background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
      }

      /* Subtle background pattern */
      #maage-home::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 600px;
        background-image: 
          radial-gradient(circle at 20% 80%, rgba(152, 189, 172, 0.03) 0%, transparent 50%),
          radial-gradient(circle at 80% 20%, rgba(95, 148, 171, 0.03) 0%, transparent 50%),
          radial-gradient(circle at 40% 40%, rgba(231, 199, 136, 0.02) 0%, transparent 50%);
        pointer-events: none;
        z-index: 0;
      }

      #maage-home > div {
        position: relative;
        z-index: 1;
      }

      /* Hero Section Enhancements */
      #maage-home .bg-maage-surface {
        background: rgba(255, 255, 255, 0.95);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(152, 189, 172, 0.1);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.06);
        transition: all 0.3s ease;
      }

      #maage-home .bg-maage-surface:hover {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.06);
      }

      /* Search Box Enhancement */
      .maage-global-search {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
        border: 1px solid rgba(152, 189, 172, 0.2) !important;
        transition: all 0.3s ease;
      }

      .maage-global-search:hover {
        border-color: rgba(152, 189, 172, 0.4) !important;
        box-shadow: 0 2px 8px rgba(152, 189, 172, 0.1) !important;
      }

      /* Hero Search Section Gradient Background */
      #maage-home section:first-child {
        position: relative;
        overflow: hidden;
      }

      #maage-home section:first-child::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(ellipse at center, rgba(152, 189, 172, 0.08) 0%, transparent 70%);
        animation: subtleRotate 30s linear infinite;
        pointer-events: none;
      }

      #maage-home section:first-child::after {
        content: '';
        position: absolute;
        bottom: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(ellipse at center, rgba(95, 148, 171, 0.06) 0%, transparent 70%);
        animation: subtleRotate 40s linear infinite reverse;
        pointer-events: none;
      }

      @keyframes subtleRotate {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      /* Search container within hero */
      #maage-home section:first-child > * {
        position: relative;
        z-index: 1;
      }

      /* Enhanced search container background */
      #maage-home section:first-child .backdrop-blur-sm {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 249, 250, 0.95) 100%) !important;
        border: 1px solid rgba(152, 189, 172, 0.15) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 2px rgba(255, 255, 255, 0.9) !important;
      }

      /* Card Hover Effects for Analyze Data */
      .analyze-data-grid > div {
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
      }

      .analyze-data-grid > div::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #98bdac 0%, #5f94ab 50%, #e7c788 100%);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
      }

      .analyze-data-grid > div:hover::before {
        transform: translateX(0);
      }

      .analyze-data-grid > div:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        border-color: rgba(152, 189, 172, 0.3);
      }

      /* Icon Enhancements */
      .analyze-data-grid i {
        transition: all 0.3s ease;
      }

      .analyze-data-grid > div:hover i {
        transform: scale(1.1);
      }

      /* Link Hover Animations */
      .analyze-data-grid a {
        position: relative;
        display: inline-block;
        transition: all 0.2s ease;
      }

      .analyze-data-grid a::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 0;
        height: 1px;
        background-color: currentColor;
        transition: width 0.3s ease;
      }

      .analyze-data-grid a:hover::after {
        width: 100%;
      }

      /* Button Enhancements */
      #maage-home a.bg-maage-primary-400 {
        background: linear-gradient(135deg, #98bdac 0%, #88ad9c 100%);
        box-shadow: 0 2px 4px rgba(152, 189, 172, 0.3);
        transition: all 0.3s ease;
      }

      #maage-home a.bg-maage-primary-400:hover {
        background: linear-gradient(135deg, #88ad9c 0%, #789d8c 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(152, 189, 172, 0.4);
      }

      #maage-home a.bg-white {
        background: rgba(255, 255, 255, 0.9);
        transition: all 0.3s ease;
      }

      #maage-home a.bg-white:hover {
        background: rgba(255, 255, 255, 1);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      }

      /* Active Outbreaks Card Enhancements */
      .active-outbreaks-grid > div {
        transition: all 0.3s ease;
        background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
      }

      .active-outbreaks-grid > div:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
      }

      /* Progress Bar Animations */
      .active-outbreaks-grid .bg-maage-bg-muted {
        position: relative;
        overflow: hidden;
      }

      .active-outbreaks-grid .bg-maage-bg-muted::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
        animation: shimmer 2s infinite;
      }

      @keyframes shimmer {
        to {
          left: 100%;
        }
      }

      /* Sidebar Component Enhancements */
      #maage-home aside > div {
        transition: all 0.3s ease;
        border: 1px solid rgba(152, 189, 172, 0.1);
      }

      #maage-home aside > div:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
        border-color: rgba(152, 189, 172, 0.2);
      }

      /* Typography Enhancements */
      #maage-home h1 {
        background: linear-gradient(135deg, #364144 0%, #495057 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      #maage-home h2 {
        position: relative;
        display: inline-block;
      }

      #maage-home h2::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 40px;
        height: 2px;
        background: linear-gradient(90deg, #98bdac 0%, transparent 100%);
      }

      /* Smooth Scroll Behavior */
      #maage-home * {
        scroll-behavior: smooth;
      }

      /* Focus States */
      #maage-home a:focus,
      #maage-home button:focus {
        outline: 2px solid rgba(152, 189, 172, 0.5);
        outline-offset: 2px;
      }

      /* Loading Animation for Future Use */
      @keyframes pulse {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 0.5;
        }
        100% {
          opacity: 1;
        }
      }

      .loading-pulse {
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
      
      @media (min-width: 768px) {
        .md\\:grid-cols-2 {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      
      @media (min-width: 1024px) {
        .lg\\:grid-cols-2 {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        
        .lg\\:grid-cols-3 {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        
        .lg\\:grid-cols-4 {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }
      }
      
      .gap-4 {
        gap: 1rem;
      }
      
      .gap-6 {
        gap: 1.5rem;
      }
      
      .mb-6 {
        margin-bottom: 1.5rem;
      }
      
      .p-6 {
        padding: 1.5rem;
      }

      /* Map control button styles */
      .map-view-btn {
        @apply text-gray-700 hover:text-gray-900 hover:bg-gray-200;
      }
      
      .map-view-btn.active {
        @apply bg-primary text-white hover:bg-primary hover:text-white;
      }
      
      .map-zoom-btn {
        @apply text-gray-700 hover:text-gray-900 hover:bg-gray-200;
      }
      
      .map-zoom-btn:hover {
        @apply bg-gray-200;
      }

      /* Genome List Summary styles */
      .genome-list-summary {
        @apply h-full;
      }
      
      .summary-container {
        @apply h-full min-h-[300px];
      }
      
      .summary-section {
        @apply border-b border-gray-200 pb-3 last:border-b-0;
      }
      
      .summary-item {
        @apply flex justify-between items-center py-1;
      }
      
      .summary-label {
        @apply text-sm text-gray-600;
      }
      
      .summary-value {
        @apply text-sm font-semibold text-gray-900;
      }