* { box-sizing: border-box; }
body {
  margin:0;
  font-family: system-ui, -apple-system, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);   /* soft scientific grey-blue */
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color:#0b57d0; text-decoration:none; }
a:hover { text-decoration:underline; }

.container { width: 100%;
            max-width: none;
            margin: 0 auto; 
            padding: 0 24px;
            box-sizing: border-box;
            }
.site-header { border-bottom: 1.2px solid var(--border); background:#fafafa; }
.brand-title { font-weight: 700; font-size: 34px;letter-spacing: 4.0px;line-height:1.0; }
.brand-subtitle { color: #555555; font-size: 12px; margin-top: 3px; }

.nav { margin-top: 12px; display:flex; gap:14px; flex-wrap:wrap; }
.nav a { padding:6px 10px; border:1px solid var(--border); border-radius:8px; background:#fff; }

.site-footer { border-top: 1px solid var(--border); margin-top: 28px; padding: 14px 0; color: var(--muted); background:#f9fafb; }


.grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: 36px; }
.col-6 { grid-column: span 6; }
.col-12 { grid-column: span 12; }
@media (max-width: 900px){ .col-6 { grid-column: span 12; } }

input[type="text"]{
width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px;
 }
button{
  padding:10px 14px; border:1px solid var(--border); border-radius:10px; background:#111; color:#fff; cursor:pointer;
 }
 button:hover{ opacity:0.9; }

table { border-collapse: collapse; width:100%; }
th, td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
}
 th { background:#f5f5f5; }
.small { color: var(--muted); font-size: 13px; }


 /* =========================================================
   Autoimmune_DB UI polish (tables + typography + buttons)
   Keep ONE copy of these rules (avoid duplicates)
   ========================================================= */

  :root{
  --text:#0b1220;
  --muted:#475569;

  --bg:#f8fafc;
  --panel:#ffffff;
  --panel-soft:#f3f6fb;

  --border:#b6c2d1;
  --border-strong:#7f8fa6;

  --head-bg:#eaf1fb;
  --row-alt:#f8fbff;
  --row-hover:#eef4ff;

  --link:#1d4ed8;
  --link-hover:#1e40af;

  --btn-bg:#003366;
  --btn-bg-hover:#004c99;
  --btn-border:#003366;
  --btn-text:#ffffff;
}
/* ===== Buttons ===== */

.btn {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

/* Primary button (Search, Download, etc.) */
.btn-primary {
  background: #003366;
  color: #fff;
  border-color: 003366;
}

.btn-primary:hover {
  background: #1e40af;   /* darker blue */
  border-color: #1e40af;
}

/* Secondary (Clear) */
.btn-secondary {
  background: #f3f6fb;
  color: var(--text);
}

.btn-secondary:hover {
  background: #e6edf7;
}
/* Base typography */
body{
  margin:0;
  color: var(--text);
  background: var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ color: var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }

.small{ color: var(--muted); font-size: 13px; }

.site-header{
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header .header-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Brand */
.brand{
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-title{
  font-weight: 700;
  font-size: 50px;
  letter-spacing: 4.0 px;
  color: #1F4E79;
}

.brand-subtitle{
  font-size: 11px;
  color: #555555;
}

/* Nav */
.nav{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.nav a{
  height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: all 0.15s ease-in-out;
}

.nav a:hover{
  background: var(--panel-soft);
  border-color: var(--border-strong);
  color: var(--text);
  text-decoration: none;
}

.nav a.active{
  background: var(--link);
  color: #fff;
  border-color: var(--link);
}
.nav a:hover{
  background:#e8f0fe;
  border-color:#0b57d0;
}

/* Mobile layout */
@media (max-width: 720px){
  .site-header .container{
    grid-template-columns: 1fr;
  }
  .nav{
    justify-content: flex-start;
  }
}

/* Brand with logo */
.brand{
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo{
  height: 80px;     /* adjust if needed */
  width: auto;
}

.brand-text{
  display: flex;
  flex-direction: column;
}

/* Section divider line (use in any page) */
.section-divider{
  height: 0;
  border-top: 2px solid var(--border-strong, #c0cad8);
  margin: 14px 0;
}

/* Inputs */
input[type="text"], select{
  width:100%;
  padding:10px 12px;
  border:1.2px solid var(--border-strong);
  border-radius:10px;
  font-size:14px;
}
input[type="text"]:focus, select:focus{
  outline:none;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
  border-color: rgba(29, 78, 216, 0.45);
}

/* Buttons (consistent across pages) */
button, .btn, .btn-secondary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid var(--border-strong);
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  line-height:1;
}
button, .btn{
  background:#64748b;
  color:#fff;
  border-color:#111827;
}
.btn-secondary, a.btn-secondary{
  background:#0b57d0;
  color:#fff;
  border-color:#111827;
}
button:hover, .btn:hover, .btn-secondary:hover{
  filter: brightness(0.96);
}

/* =========================================================
   TABLES: readable, strong grid lines, no “Reference” splitting
   ========================================================= */

/* Wrap wide tables to avoid squeezing/distortion on small screens */
.table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  border:1px solid var(--border-strong);
  border-radius:12px;
}

/* Table itself */
table{
  width:100%;
  border-collapse: separate;
  border-spacing:0;
  table-layout:auto;          /* important: prevents tiny squeezed columns */
  background: var(--bg);
}

/* Header cells */
th{
  background: var(--head-bg);
  font-weight:700;
  font-size:13px;
  padding:10px 12px;
  text-align:left;
  vertical-align:middle;
  white-space: nowrap;        /* prevents ugly header wrapping */
  border-bottom:1px solid var(--border-strong);
  border-right:1px solid var(--border);
}
/* Make table header sort links always visible */
th a,
table th a {
  color: #111827;      /* dark text */
  font-weight: 700;
  text-decoration: none;
}

th a:hover,
table th a:hover {
  color: #0b57d0;      /* blue on hover */
  text-decoration: none;
}
/* Body cells */
td{
  padding:10px 12px;
  vertical-align:top;
  line-height:1.35;
  border-bottom:1px solid var(--border);
  border-right:1px solid var(--border);

  white-space: normal;        /* normal text wrapping */
  word-break: normal;         /* DO NOT break “Reference” into pieces */
  overflow-wrap: anywhere;    /* but allow very long strings (HGVS) to wrap */
}

th:last-child, td:last-child{ border-right:none; }

/* Zebra + hover */
tbody tr:nth-child(even) td{ background: var(--row-alt); }
tbody tr:hover td{ background: var(--row-hover); }

/* Optional: sticky header when inside .table-wrap */
.table-wrap thead th{
  position: sticky;
  top: 0;
  z-index: 2;
}

/* For columns where you WANT wrapping (e.g. Studies text) */
td.wrap{ white-space: normal; }

/* --- Study table: prevent wrapping in Year / PMID --- */
.col-year, .col-pmid{
  white-space: nowrap;     /* never split digits */
  word-break: normal;
  overflow-wrap: normal;
}

/* Keep them reasonably narrow */
th.col-year, td.col-year { width: 70px; }
th.col-pmid, td.col-pmid { width: 110px; }

/* Optional: center numbers looks cleaner */
td.col-year, td.col-pmid { text-align: center; }

/* Keep short symbols like KMT2D, CARD11 on one line */
td.col-gene, th.col-gene {
  white-space: nowrap;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Optional: make the gene column a bit narrower and consistent */
td.col-gene, th.col-gene { width: 90px; }

/* Sortable table headers */
th a {
  color: inherit;          /* inherit header text colour */
  text-decoration: none;
  font-weight: 700;
}

th a:hover {
  text-decoration: underline;
}

/* Keep Year/PMID readable (no weird wrapping) */
th.col-year, td.col-year,
th.col-pmid, td.col-pmid {
  white-space: nowrap;
  width: 1%;
}

/* If you have long Study titles, allow them to wrap nicely */
td.col-study {
  white-space: normal;
}
th a { color: inherit; text-decoration: none; font-weight: 700; }
th a:hover { text-decoration: underline; }
.sort-arrow { font-size: 12px; opacity: 0.75; }

th a { color: inherit; text-decoration: none; font-weight: 700; }
th a:hover { text-decoration: underline; }

.sort-arrow {
  font-size: 12px;
  opacity: 0.75;
  margin-left: 4px;
  display: inline-block;
  line-height: 1;
}

.sort-arrow {
  font-size: 12px;
  margin-left: 2px;
  line-height: 1;
}

.sort-arrow.inactive {
  opacity: 0.35;
}

.sort-arrow.active {
  opacity: 1;
  font-weight: 700;
}

.sort-arrow {
  font-size: 12px;
  margin-left: 2px;
  display: inline-block;
  line-height: 1;
}

.sort-arrow.inactive { opacity: 0.35; }
.sort-arrow.active   { opacity: 1; font-weight: 700; }

.quick-stats-table th,
.quick-stats-table td {
  border: 1px solid #94a3b8;   /* more distinct than default */
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
}

/* Optional: make the label column a bit softer */
.quick-stats-table th {
  background: #f8fafc;
  font-weight: 700;
  width: 65%;
}

/* Optional: keep numbers aligned nicely */
.quick-stats-table td {
  width: 35%;
}

/* Optional: links look consistent */
.quick-stats-table a {
  color: inherit;
  text-decoration: none;
}
.quick-stats-table a:hover {
  text-decoration: underline;
}

/* =========================
   Start here (homepage)
   ========================= */

.start-here-card {
  border: 1.5px solid #94a3b8;        /* strong blue border */
  background: #f8fbff;
}

/* Title emphasis */
.start-here-card h3 {
  font-weight: 700;
  color: #111827;
  margin-bottom: 1rem;
}

/* Inner search forms: lighter boxes */
.start-here-form {
  border: 1px solid #cbd5e1;
  padding: 12px;
  border-radius: 6px;
  background: #ffffff;
}

/* Space between forms */
.start-here-form + .start-here-form {
  margin-top: 12px;
}

/* Inputs fill width nicely */
.start-here-form input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}
/* Gene page: primary search panel */
.gene-page-card {
  border: 1.5px solid #94a3b8;   /* light-dark */
  background: #f8fbff;
}

/* Gene page: secondary section panel */
.gene-page-section {
  border: 1px solid #cbd5e1;     /* lighter than primary */
  background: #ffffff;
}

/* =========================
   Disease page layout
   ========================= */

.disease-page-card {
  border: 1.5px solid #94a3b8;   /* light-dark emphasis */
  background: #f8fbff;
}

.disease-page-form,
.disease-page-section {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  padding: 12px;
  border-radius: 6px;
}

/* =========================
   Study page layout
   ========================= */

.study-page-card {
  border: 1.5px solid #94a3b8;   /* same light-dark emphasis */
  background: #f8fbff;
}

.study-page-form,
.study-page-section {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  padding: 12px;
  border-radius: 6px;
}

/* =========================
   Browse all studies table
   ========================= */

.browse-studies-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #cbd5e1;
}

.browse-studies-table th,
.browse-studies-table td {
  border: 1px solid #cbd5e1;   /* consistent grid lines */
  padding: 10px 12px;
  vertical-align: middle;
}

/* Force the last column (DOI) to have a right border */
.browse-studies-table th:last-child,
.browse-studies-table td:last-child {
  border-right: 1px solid #cbd5e1 !important;
}

.browse-studies-table th,
.browse-studies-table td {
  border-right: 1px solid #cbd5e1 !important;
  border-left:  1px solid #cbd5e1 !important;
  border-top:   1px solid #cbd5e1 !important;
  border-bottom:1px solid #cbd5e1 !important;
}

/* --- Study browse tables: force closed grid including right edge --- */
.browse-studies-table {
  width: 100%;
  border-collapse: collapse;
  border: 1.5px solid #94a3b8;  /* outer frame */
}

.browse-studies-table th,
.browse-studies-table td {
  border: 1px solid #cbd5e1;    /* inner grid */
  padding: 10px 12px;
  vertical-align: middle;
}

/* If any global CSS removes last column border, force it back */
.browse-studies-table th:last-child,
.browse-studies-table td:last-child {
  border-right: 1px solid #cbd5e1 !important;
}
.browse-studies-table th:last-child,
.browse-studies-table td:last-child {
  white-space: nowrap;
}

/* --- Gene browse table: force closed grid including right edge --- */
.browse-genes-table {
  width: 100%;
  border-collapse: collapse;
  border: 1.5px solid #94a3b8;  /* outer frame */
}

.browse-genes-table th,
.browse-genes-table td {
  border: 1px solid #cbd5e1;    /* inner grid */
  padding: 10px 12px;
  vertical-align: middle;
}

/* Force last column right edge to show */
.browse-genes-table th:last-child,
.browse-genes-table td:last-child {
  border-right: 1px solid #cbd5e1 !important;
}

/* --- Variants browse table: force closed grid including right edge --- */

  
  
  




  
  
  





  


  
  

/* Force sharp corners for browse tables */
.browse-diseases-table,
.browse-diseases-table * {
  border-radius: 0 !important;
}

/* Disease browse section: sharp corners */
.disease-page-section {
  border-radius: 0 !important;
}

/* =========================
   Disease browse table
   Match Gene page style
   ========================= */

/* Card stays visible */
.disease-page-section {
  border-radius: 6px;
}

/* Table should NOT have its own outer border */
.browse-diseases-table {
  width: 100%;
  border-collapse: collapse;
  border: none;               /* <-- THIS removes the extra box */
}

/* Keep grid lines only */
.browse-diseases-table th,
.browse-diseases-table td {
  border-bottom: 1px solid #cbd5e1;
  border-right: 1px solid #cbd5e1;
  padding: 10px 12px;
}

/* Remove right border on last column */
.browse-diseases-table th:last-child,
.browse-diseases-table td:last-child {
  border-right: none;
}

/* Header styling consistent with Gene page */
.browse-diseases-table th {
  background: #f8fafc;
  font-weight: 600;
}
/* HARD OVERRIDE: remove any box border around disease browse table */
.disease-page-section .browse-diseases-table {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.disease-page-section .browse-diseases-table th,
.disease-page-section .browse-diseases-table td {
  border-radius: 0 !important;
}

/* If your table is wrapped in something that adds its own border */
.disease-page-section .table-wrap,
.disease-page-section .table-container,
.disease-page-section .table-responsive {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Internal grid only: no outer frame */
.disease-page-section .browse-diseases-table {
  width: 100%;
  border-collapse: collapse !important;
}

/* draw grid */
.disease-page-section .browse-diseases-table th,
.disease-page-section .browse-diseases-table td {
  border: 1px solid #cbd5e1;
  padding: 10px 12px;
}

/* remove outer edges so it doesn't look double-boxed */
.disease-page-section .browse-diseases-table tr:first-child th {
  border-top: none;
}
.disease-page-section .browse-diseases-table tr:last-child td {
  border-bottom: none;
}
.disease-page-section .browse-diseases-table th:first-child,
.disease-page-section .browse-diseases-table td:first-child {
  border-left: none;
}
.disease-page-section .browse-diseases-table th:last-child,
.disease-page-section .browse-diseases-table td:last-child {
  border-right: none;
}
.disease-page-section table.browse-diseases-table,
.disease-page-section table.browse-disease-table {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* Disease browse table: like Gene page */
.browse-disease-table {
  width: 100%;
  border-collapse: collapse;
  border: none;
}

.browse-disease-table th,
.browse-disease-table td {
  border: 1px solid #cbd5e1;
  padding: 10px 12px;
  vertical-align: middle;
}

.browse-disease-table tr:first-child th { border-top: none; }
.browse-disease-table tr:last-child td { border-bottom: none; }
.browse-disease-table th:first-child,
.browse-disease-table td:first-child { border-left: none; }
.browse-disease-table th:last-child,
.browse-disease-table td:last-child { border-right: none; }

/* Make browse sections flat like Gene page */
.card:has(h3:contains("Browse all")) {
  background: transparent;
  border: none;
  padding: 0;
}
/* Disease browse table: show full grid lines including headers */
.browse-disease-table {
  width: 100%;
  border-collapse: collapse;
}

.browse-disease-table th,
.browse-disease-table td {
  border: 1px solid #cbd5e1;   /* vertical + horizontal lines */
  padding: 10px 12px;
  vertical-align: middle;
}

.browse-disease-table th {
  background: #f8fafc;
  font-weight: 600;
}

/* Force grid lines for Browse all diseases table */
.browse-disease-table th,
.browse-disease-table td {
  border: 1px solid var(--border) !important;
}

/* Optional: keep header style consistent */
.browse-disease-table th {
  background: #f5f5f5 !important;
}

/* Force grid lines for Browse all variants table */


  



 


/* === Variants browse table: force borders like Gene/Disease === */
table.browse-variants-table {
  border-collapse: collapse !important;
  width: 100% !important;
}
table.browse-variants-table th {
  border: 1px solid var(--border) !important;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  background: #f5f5f5 !important;
  font-weight: 600;
}

table.browse-variants-table td {
  border: 1px solid var(--border) !important;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =========================
   NAV BUTTONS (uniform)
   ========================= */
.site-header .nav{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

.site-header .nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  padding:0 14px;
  border-radius:10px;

  background:#4b5563;   /* same family as your Search/Download */
  color:#fff;
  border:1px solid #374151;

  font-weight:700;
  text-decoration:none;
  line-height:1;
  white-space:nowrap;
}

.site-header .nav a:hover{
  filter:brightness(0.96);
  text-decoration:none;
}

/* optional: active page highlight */
.site-header .nav a.active{
  background:#111827;
  border-color:#111827;
}


.sort-link {
  white-space: nowrap;
}

.sort-active {
  color: #0b57d0;  /* same blue you like */
  font-weight: 700;
}

.sort-inactive {
  color: #9aa4b2;
}
.sort-link { white-space: nowrap; }

/* =========================================================
   FINAL OVERRIDE: header text MUST be visible
   Put this at the VERY BOTTOM of style.php
   ========================================================= */

table th,
table thead th {
  color: #111827 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

table th a,
table thead th a {
  color: #111827 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
}

table th a:hover,
table thead th a:hover {
  color: #0b57d0 !important;
}

/* make arrows visible too */
.sort-arrow {
  font-size: 11px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.sort-arrow.active { color: #0b57d0 !important; }
.sort-arrow.inactive { color: #9ca3af !important; }

/* =========================================================
   EMERGENCY FIX: force table headers to render
   Put at VERY END of style.php
   ========================================================= */

table thead {
  display: table-header-group !important;
}

table th, table thead th {
  display: table-cell !important;
  font-size: 13px !important;          /* <-- key */
  color: #111827 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

table th *, table thead th *{
  font-size: 13px !important;          /* <-- key */
  opacity: 1 !important;
  visibility: visible !important;
}

table th a, table thead th a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #111827 !important;
  text-decoration: none !important;
}

table th a:hover, table thead th a:hover {
  color: #0b57d0 !important;
}
/* Ensure the label in sortable headers never collapses */
.sort-link { display: inline-flex; align-items: center; gap: 6px; }
.sort-label { flex: 0 0 auto; }        /* <-- prevents shrink-to-zero */

h3 {
  color: #111827;   /* near-black */
}

.start-here h3 {
  color: #111827;
}

CSS (add to style.css)
.search-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.search-type{
  min-width:140px;
  padding:10px 12px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:#fff;
}

.search-input{
  flex:1;
  min-width:240px;
  padding:10px 12px;
  border:1px solid #cbd5e1;
  border-radius:10px;
}

/* Header search */
.header-search {
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:20px;
}

.header-search-type,
.header-search-input {
  height:34px;
  padding:6px 10px;
  border:1px solid #cbd5e1;
  border-radius:8px;
}

.header-search-input {
  width:220px;
}

.header-search-btn {
  height:34px;
  padding:0 12px;
  background:#1e40af;
  color:#fff;
  border:none;
  border-radius:8px;
  cursor:pointer;
}

.header-search-btn:hover {
  background:#1e3a8a;
}

/* NCBI-style search bar inside the Start here card */
.ncbi-search{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 10px;
  flex-wrap: wrap;
}

.ncbi-search__select{
  height: 42px;
  min-width: 140px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-size: 14px;
}

.ncbi-search__input{
  flex: 1 1 260px;
  min-width: 220px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-size: 14px;
  outline: none;
}

.ncbi-search__input:focus,
.ncbi-search__select:focus{
  border-color: var(--link);
  box-shadow: 0 0 0 3px rgba(29,78,216,0.12);
}

.ncbi-search__btn{
  height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-text);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ncbi-search__btn:hover{
  background: var(--btn-bg-hover);
  border-color: var(--btn-border);
}

@media (max-width: 720px){
  .ncbi-search{
    flex-direction: column;
    align-items: stretch;
  }

  .ncbi-search__select,
  .ncbi-search__input,
  .ncbi-search__btn{
    width: 100%;
  }
}
  
/* =========================
   FILTER GRID LAYOUT
========================= */

.filter-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap:12px;
  align-items:start;
}

.filter-grid label{
  display:block;
  font-weight:600;
  margin-bottom:4px;
}

@media (max-width: 820px){
  .filter-grid{
    grid-template-columns: 1fr;
  }
}
/* ============================
   VARIANTS PAGE FULL WIDTH BAND
============================ */

/* Section divider lines */
.section-divider{
  border-top: 2px solid var(--border);
  margin: 14px 0 18px 0;
}
/* Variants page only */
.variants-section .card{
  border: none;
  border-radius: 0;
  background: none;
  padding: 10px 0;
  margin: 14px 0;
}

/* =========================
   Gene page: match Variants
   ========================= */
.gene-section{
  background: #f3f6fb;     /* same as variants */
  padding: 24px 0 36px 0;  /* tighter than before */
}

/* Remove card borders ONLY on Gene page (table keeps borders) */
.gene-section .card{
  border: none;
  border-radius: 0;
  background: none;
  padding: 10px 0;
  margin: 14px 0;
}

/* Divider lines */
.page-divider{
  border: 0;
  border-top: 2px solid var(--border-strong);
  margin: 14px 0;
}
.page-divider--spaced{
  margin: 22px 0 14px 0;
}
/* =========================
   Gene page spacing polish
   ========================= */

/* Increase vertical breathing room */
.gene-section{
  padding: 10px 0 60px 0;
  margin: 20px 0;
}

/* Add inner spacing inside each card area */
.gene-section .card{
  padding: 24px 0;
  margin: 28px 0;
}

/* Add space under section headings */
.gene-section h2{
  margin-bottom: 10px;
}

.gene-section h3{
  margin-top: 8px;
}

/* Improve spacing between input and buttons */
.gene-section form{
  margin-top: 14px;
}

.gene-section form .btn{
  margin-right: 8px;
  margin-top: 12px;
}

/* Add space before table */
.gene-section table{
  margin-top: 14px;
}

/* Tighten top spacing for Gene page */
.gene-section{
  padding-top: 0;   /* reduce section spacing */
}

/* Remove extra top margin from first card */
.gene-section .card:first-child{
  margin-top: 0;
}

/* =========================
   Page sections (Variant/Gene style)
   ========================= */

/* Full-width pale background block */
.page-section{
  background: #f3f6fb;
  padding: 18px 0 28px;   /* tighter so it doesn't look hollow */
}

/* Inside the section, we DO NOT want card borders/boxes */
.page-section .card{
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  margin: 0 0 22px;       /* spacing between blocks */
}

/* Page title + dividers */
.page-title{
  margin: 0;
}
.page-divider{
  border: 0;
  border-top: 2px solid var(--border-strong);
  margin: 12px 0 18px;
}
.section-divider{
  border: 0;
  border-top: 2px solid var(--border-strong);
  margin: 18px 0 14px;
}

/* Form layout: search + consequence side-by-side */
.form-grid-2{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  align-items: end;
}
.form-actions{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Applies to <button> and links styled as buttons */
button,
.btn,
a.btn{
  appearance: none;
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid var(--btn-border);
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

button:hover,
.btn:hover,
a.btn:hover{
  background: var(--btn-bg-hover);
}

button:disabled{
  opacity: 0.55;
  cursor: not-allowed;
}

/* Make header nav buttons use SAME palette (uniformity) */
.site-header .nav a{
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid var(--btn-border);
}
.site-header .nav a:hover{
  background: var(--btn-bg-hover);
}

/* Variants page wrapper: NO full-width background */
.variants-page{
  margin-top: 16px;
}

/* Divider spacing (reduce hollow look) */
.section-divider{
  border-top: 2px solid var(--border-strong);
  margin: 10px 0 14px 0;
}

/* Variants page: remove card boxes, keep only table borders */
.variants-page .card{
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 18px 0 !important;
}

/* Remove the divider bar if you don't want it */
.variants-page .section-divider{
  display: none !important;
}

/* ------------------------------
   Variants page: Gene-like panel + no inner card boxes
   (put at END of style.css)
-------------------------------- */

/* grey panel only around the content (not full width) */
.variants-page{
  background: #f5f7fb;
  padding: 22px;
  border-radius: 14px;
}

/* remove the boxes inside variants page */
.variants-page .card{
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 22px 0 !important;
}

/* keep some breathing room after headings */
.variants-page h2{ margin: 0 0 10px 0; }
.variants-page h3{ margin: 0 0 10px 0; }

/* optional: nicer divider line */
.variants-page .section-divider{
  margin: 10px 0 16px 0;
}

/* Plain section blocks used inside study detail (no card box) */
.panel{
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
}

/* Study page outer wrapper: panel background like Gene page (no card border) */
.study-page-wrap{
  background: #f8fbff;   /* use same as Gene page panel */
  border: 0;
  border-radius: 14px;
  padding: 22px;
  margin: 16px 0;
}
/* Study page: form should not look like a boxed card */
.study-page-form{
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.browse-studies-table{
  background: transparent;
  border: none;
}

.disease-page-wrap{
  background: var(--panel);
  border-radius: 16px;
  padding: 24px;
  margin: 24px auto;
  border: 0;
}

/* Disease page: stop the form looking like a boxed panel */
.disease-page-wrap .disease-page-form{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* If you have a global 'form { ... }' rule, this ensures only disease form is unboxed */
.disease-page-wrap form{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.disease-page-wrap{
  background: var(--panel);
  border-radius: 16px;
  padding: 24px;
  margin: 24px auto;
}
/* Force Disease page to match Study page shaded panel */
.disease-page-wrap{
  background: #f8fbff;
  border-radius: 16px;
  padding: 24px;
  margin: 24px auto;
}
.home-hero{
 width: 100%;
 background: var(--panel);
  border-radius: 16px;
  padding: 24px;
  margin: 24px 0;
}

.home-hero h2 {
  margin-bottom: 8px;
}

.home-hero p {
  margin-bottom: 20px;
}

.card {
  background: #ffffff;
  border-radius: 14px;
  padding: 16px;
  margin: 16px 0;
  border: 1.5px solid var(--border);
  box-shadow: 0 3px 10px rgba(0,0,0,0.04);
}

.quick-stats-table {
  width: 100%;
  border-collapse: collapse;
}

.quick-stats-table th,
.quick-stats-table td {
  padding: 12px 10px;
  text-align: left;
}

.quick-stats-table th {
  color: var(--muted);
  font-weight: 500;
}

.quick-stats-table td {
  font-weight: 600;
  font-size: 18px;
}

.quick-stats-table tr {
  border-bottom: 1px solid var(--border);
}

.quick-stats-table tr:last-child {
  border-bottom: none;
}

.quick-stats-table tr:hover {
  background: var(--row-hover);
}
.quick-stats-table td a {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

/* === Variant detail page polish === */

.variant-main {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px;
  font-weight: 600;
  color: var(--link);
}

.variant-summary-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

.variant-summary-table th,
.variant-summary-table td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.variant-summary-table th {
  width: 220px;
  background: #f8fafc;
  font-weight: 600;
  color: #374151;
}

.variant-summary-table td {
  background: #fff;
}

.evidence-table td:nth-child(3),
.evidence-table th:nth-child(3) {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.evidence-table tbody tr:hover td {
  background: #f8fbff;
}

/* === Gene page polish === */

.gene-results-table td:first-child,
.gene-results-table th:first-child {
  white-space: nowrap;
  font-weight: 600;
}

.gene-results-table td:nth-child(2),
.gene-results-table th:nth-child(2) {
  white-space: nowrap;
}

.gene-results-table tbody tr:hover td,
.browse-genes-table tbody tr:hover td {
  background: #f8fbff;
}

.browse-genes-table td:first-child a {
  font-weight: 700;
}

.gene-section h3 {
  margin-bottom: 12px;
}

/* === Disease page polish === */

.disease-summary-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

.disease-summary-table th,
.disease-summary-table td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.disease-summary-table th {
  width: 220px;
  background: #f8fafc;
  font-weight: 600;
  color: #374151;
}

.disease-summary-table td {
  background: #fff;
}

.disease-mini-table {
  width: 100%;
  border-collapse: collapse;
}

.disease-mini-table th,
.disease-mini-table td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.disease-mini-table th {
  background: #f8fafc;
  font-weight: 600;
}

.disease-mini-table tbody tr:hover td,
.disease-variants-preview tbody tr:hover td,
.browse-disease-table tbody tr:hover td {
  background: #f8fbff;
}

/* === Study page polish === */

.study-mini-table {
  width: 100%;
  border-collapse: collapse;
}

.study-mini-table th,
.study-mini-table td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.study-mini-table th {
  background: #f8fafc;
  font-weight: 600;
}

.study-mini-table tbody tr:hover td,
.study-variants-table tbody tr:hover td,
.browse-studies-table tbody tr:hover td {
  background: #f8fbff;
}

.study-variants-table td:nth-child(1),
.study-variants-table th:nth-child(1) {
  white-space: nowrap;
  font-weight: 600;
}

.study-variants-table td:nth-child(2),
.study-variants-table th:nth-child(2) {
  white-space: nowrap;
}

.study-variants-table td:nth-child(3),
.study-variants-table th:nth-child(3) {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.study-genes-block {
  margin-top: 18px;
}

.study-genes-table {
  width: 100%;
  border-collapse: collapse;
}

.study-genes-table th,
.study-genes-table td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.study-genes-table th {
  background: #f8fafc;
  font-weight: 600;
}

.study-genes-table tbody tr:hover td {
  background: #f8fbff;
}

.study-genes-table td:first-child,
.study-genes-table th:first-child {
  white-space: nowrap;
  font-weight: 600;
}
.study-genes-table tbody tr:hover td {
  background: #f8fbff;
}

.study-genes-table td:first-child,
.study-genes-table th:first-child {
  white-space: nowrap;
  font-weight: 600;
}

.card h4 {
  font-weight: 600;
  margin-bottom: 10px;
}

/* Study page: diseases mini-table */
.study-mini-table td:first-child,
.study-mini-table th:first-child {
  white-space: nowrap;
  width: 180px;
}

.study-page-wrap .panel {
  min-width: 520px;
}

.study-disease-table td {
  white-space: nowrap;
}

/* Allow only Disease column to grow if needed */
.study-disease-table th:first-child,
.study-disease-table td:first-child {
  width: 200px;
}

/* Keep DOID compact */
.study-disease-table th:nth-child(3),
.study-disease-table td:nth-child(3) {
  width: 90px;
}

/* Keep Variants compact */
.study-disease-table th:nth-child(4),
.study-disease-table td:nth-child(4) {
  width: 80px;
  text-align: center;
}

/* =========================
   Study page - diseases table (consistent layout)
   ========================= */

.study-disease-table {
  width: 100%;
  table-layout: fixed;   /* KEY: forces consistent column widths */
}

/* All cells: no ugly wrapping */
.study-disease-table th,
.study-disease-table td {
  padding: 8px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Column widths (fixed for ALL studies) */
.study-disease-table th:nth-child(1),
.study-disease-table td:nth-child(1) {
  width: 45%;   /* Disease */
}

.study-disease-table th:nth-child(2),
.study-disease-table td:nth-child(2) {
  width: 25%;   /* Category */
}

.study-disease-table th:nth-child(3),
.study-disease-table td:nth-child(3) {
  width: 15%;   /* DOID */
}

.study-disease-table th:nth-child(4),
.study-disease-table td:nth-child(4) {
  width: 15%;   /* Variants */
  text-align: center;
}

/* Disease page: recent variants table */
.disease-variants-block {
  margin-top: 20px;
}

.disease-variants-block table {
  width: 100%;
  table-layout: auto;
}

.disease-variants-block th,
.disease-variants-block td {
  white-space: nowrap;
}

/* Allow wrapping only for long text columns */
.disease-variants-block td.wrap {
  white-space: normal;
}

.disease-variants-preview td.study-col,
.disease-variants-preview th.study-col {
  white-space: nowrap;
  min-width: 220px;
}

/* =========================
   Disease page layout polish
   ========================= */

/* Make the two disease detail panels unequal instead of 50/50 */
.disease-page-section .grid {
  grid-template-columns: minmax(0, 2.2fr) minmax(260px, 0.8fr);
  align-items: start;
}

/* Cell types table: use more sensible column widths */
.disease-page-section .browse-diseases-table,
.disease-page-section .disease-mini-table {
  table-layout: auto;
}

.disease-page-section table th,
.disease-page-section table td {
  vertical-align: top;
}

/* Cell types table column sizing */
.disease-page-section table th:nth-child(1),
.disease-page-section table td:nth-child(1) {
  width: 34%;
}

.disease-page-section table th:nth-child(2),
.disease-page-section table td:nth-child(2) {
  width: 22%;
  white-space: nowrap;
}

.disease-page-section table th:nth-child(3),
.disease-page-section table td:nth-child(3),
.disease-page-section table th:nth-child(4),
.disease-page-section table td:nth-child(4) {
  width: 10%;
  white-space: nowrap;
  text-align: center;
}

.disease-page-section table th:nth-child(5),
.disease-page-section table td:nth-child(5) {
  width: 24%;
}

/* Top genes panel: allow a slightly wider usable area */
.disease-page-section .card {
  overflow: hidden;
}

.disease-page-section .disease-mini-table th:first-child,
.disease-page-section .disease-mini-table td:first-child {
  white-space: nowrap;
  font-weight: 600;
}

.disease-page-section .disease-mini-table th:last-child,
.disease-page-section .disease-mini-table td:last-child {
  width: 90px;
  white-space: nowrap;
  text-align: center;
}

/* Mobile: stack cleanly */
@media (max-width: 900px) {
  .disease-page-section .grid {
    grid-template-columns: 1fr;
  }
}

/* Disease page: cell types table */
.disease-celltype-table {
  width: 100%;
  table-layout: auto;
}

.disease-celltype-table th,
.disease-celltype-table td {
  vertical-align: top;
}

.disease-celltype-table th:nth-child(1),
.disease-celltype-table td:nth-child(1) {
  width: 34%;
}

.disease-celltype-table th:nth-child(2),
.disease-celltype-table td:nth-child(2) {
  width: 22%;
  white-space: nowrap;
}

.disease-celltype-table th:nth-child(3),
.disease-celltype-table td:nth-child(3),
.disease-celltype-table th:nth-child(4),
.disease-celltype-table td:nth-child(4) {
  width: 10%;
  white-space: nowrap;
  text-align: center;
}

.disease-celltype-table th:nth-child(5),
.disease-celltype-table td:nth-child(5) {
  width: 24%;
}
/* Card section headings */
.card h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text);
}
.card > *:last-child {
  margin-bottom: 0;
}
.card + .card {
  margin-top: 12px;
}
th {
  background: var(--head-bg);
  font-weight: 600;
  color: var(--text);
}

tr:hover td {
  background: var(--row-hover);
}
/* =========================
   Homepage - stronger borders
   ========================= */

.home-hero {
  border: 1.8px solid var(--border-strong);
}

.home-hero .card {
  border: 1.6px solid var(--border-strong);
}

.quick-stats-table {
  border: 1.6px solid var(--border-strong);
}

.quick-stats-table th,
.quick-stats-table td {
  border: 1.2px solid var(--border-strong);
}

/* Search card controls on homepage */
.home-hero .ncbi-search__select,
.home-hero .ncbi-search__input,
.home-hero .ncbi-search__btn {
  border-width: 1.4px;
}
/* Make selected dropdown text bold */
.home-hero select {
  font-weight: 600;
}

/* =========================
   Homepage search (NCBI-style)
   ========================= */

.home-hero .ncbi-search {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

/* Dropdown */
.home-hero .ncbi-search__select {
  height: 38px;
  padding: 0 10px;
  border: 1.4px solid var(--border-strong);
  border-radius: 8px;
  background: var(--panel);
  font-weight: 600;
  color: var(--text);
}

/* Input */
.home-hero .ncbi-search__input {
  flex: 1;
  height: 38px;
  padding: 0 12px;
  border: 1.4px solid var(--border-strong);
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
}

/* Button */
.home-hero .ncbi-search__btn {
  height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-text);
  font-weight: 600;
  cursor: pointer;
}

/* Hover + focus */
.home-hero .ncbi-search__input:focus,
.home-hero .ncbi-search__select:focus {
  outline: none;
  border-color: var(--link);
  box-shadow: 0 0 0 2px rgba(29,78,216,0.15);
}

.home-hero .ncbi-search__btn:hover {
  background: var(--btn-bg-hover);
}

/* =========================
   Homepage dashboard polish
   ========================= */

/* Stronger homepage section spacing */
.home-hero h2 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #003366;
}

.home-hero p {
  color: var(--muted);
  line-height: 1.6;
}

/* Homepage cards */
.home-hero .card {
  background: var(--panel);
  border: 1.6px solid var(--border-strong);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Quick stats heading */
.quick-stats-table {
  margin-top: 10px;
  border-collapse: collapse;
  width: 100%;
}

.quick-stats-table th,
.quick-stats-table td {
  border: 1.2px solid var(--border-strong);
  padding: 12px 14px;
}

.quick-stats-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text);
  background: var(--head-bg);
}

.quick-stats-table td {
  text-align: right;
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  background: var(--panel);
}

/* Make homepage links cleaner */
.quick-stats-table a {
  color: inherit;
  text-decoration: none;
}

.quick-stats-table a:hover {
  text-decoration: underline;
}

/* Search card */
.start-here-card {
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.variants-filter-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--text);
}
/* Tighten spacing for variants filter section */
.variants-filter-form {
  margin-top: 6px;
}

.variants-filter-form .filter-grid {
  margin-top: 4px;
}
h3 {
  margin-bottom: 8px;
}

/* Fix large gap under "Search & filter" */
.variants-filter-form {
  margin-top: 0 !important;
}

.variants-filter-form .filter-grid {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Reduce spacing from heading */
.variants-filter-form h3,
h3 {
  margin-bottom: 6px !important;
}
/* Align filter fields without showing left label */
.filter-grid > div:first-child::before {
  content: "Search";
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  visibility: hidden;   /* keeps space but hides text */
}
/* Reduce gap before results section */
h3 {
  margin-top: 12px !important;
}

/* Page section wrapper (gene, disease, variants pages) */
.gene-section,
.disease-page-section,
.variants-page {
  background: #f8fafc;
  padding: 16px;
  border-radius: 16px;
}

table {
  background: #ffffff;
}

th {
  background: #eef2f8;
}

tr:nth-child(even) {
  background: #f8fbff;
}

body {
  background: #eef2f7;
}

h2 {
  font-size: 28px;
  font-weight: 700;
  color: #0f172a;
}

h3 {
  font-size: 20px;
  font-weight: 650;
  color: #0f172a;
}

h4 {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
}

table {
  font-size: 14px;
  color: #0f172a;
}

th {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  background: #eaf1fb;
}

td {
  font-size: 14px;
  color: #111827;
}
.small {
  color: #475569;
  font-size: 13px;
}
a {
  color: #1d4ed8;
  text-decoration: none;
  font-weight: 500;
}

a:hover {
  color: #1e40af;
  text-decoration: underline;
}

input,
select,
button {
  font-size: 14px;
  color: #0f172a;
}

/* Improve text readability site-wide */
p,
li,
td,
label {
  color: var(--text);
}

.small {
  color: var(--muted);
  font-size: 13px;
}

/* Tighten Gene page spacing */
.gene-section {
  padding: 8px 12px !important;
}

.gene-section .card {
  margin: 8px 0 !important;
  padding: 12px 14px !important;
}

.gene-section h2 {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

.gene-section h3 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.gene-section form {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.gene-section table {
  margin-top: 8px !important;
}

/* Reduce ONLY top space for Disease & Study pages */

.disease-page-section,
.study-page-section {
  padding-top: 8px !important;
}

.disease-page-section h2,
.study-page-section h2 {
  margin-top: 0 !important;
}

/* Reduce top whitespace on Disease and Study pages */
.disease-page-wrap,
.study-page-wrap {
  padding-top: 6px !important;
}

.disease-page-wrap h2,
.study-page-wrap h2 {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}
.ncbi-search__btn {i
    background: #003366 !important;
    color: #fff; !important;
    border: 1px solid #003366 !important;
}

.ncbi-search__btn:hover {
    background: #004C99;
    border-color: #004C99;
}