/* Auto-generated at Thu, 11 Jun 26 22:44:32 +0000. */

/* Board message styling */
frontend-root fe-board-message {
  background: linear-gradient(to right, #fa4e47 0%, #fa5479 50%, #e945ac 100%);
}

frontend-root fe-board-message fe-card-content .card-content {
  color: #fff; 
}

frontend-root footer .powered-by {
  display: none;
}

/* Footer layout at/above nav breakpoint (frontend + login) */
@media (min-width: $nav-mobile-breakpoint) {
  frontend-root footer,
  login footer {
    position: relative;
  }

  frontend-root footer .footer,
  login footer .footer {
    padding-top: 20px;
    justify-content: flex-start;
  }

  frontend-root footer .footer .footer-items,
  login footer .footer .footer-items {
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    width: 800px;
  }

  frontend-root footer .footer .footer-items li,
  login footer .footer .footer-items li {
    width: 200px;
  }

  frontend-root footer .footer .footer-items li:first-child,
  login footer .footer .footer-items li:first-child {
    position: relative;
  }

  frontend-root footer .footer .footer-items li:first-child::before,
  login footer .footer .footer-items li:first-child::before {
    content: 'Powered by';
    color: white;
    position: absolute;
    transform: translateY(-160%);
    top: 0;
    left: 0;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
  }
}

/* Banner heading */
body.frontend widget-banner .widget-banner .widget-banner-inner h2 {
  font-size: 18px;
  font-weight: normal;
}

/* Material badge */
body.frontend .mat-badge-content {
  color: white;
}

/* Icon fills */
body.frontend fe-input-addon .input-addon .btn.btn-icon svg,
body.backend fe-input-addon .input-addon .btn.btn-icon svg {
  fill: white;
}

body.backend .btn.btn-icon svg {
  fill: white;
}

/* Force dropdown background to white */
.frontend .cdk-overlay-pane.navigation-dropdown,
.backend .cdk-overlay-pane.navigation-dropdown {
  background-color: #fff !important;
}

/* Tab row container (the white bar behind the tabs) */
.frontend inn-toolbox-tab-bar .tab-bar.frontend {
  background: transparent !important;
  background-color: transparent !important;
}

/* Use Space Grotesk for headings in content areas */
.frontend dynamic-content h1,
.frontend dynamic-content h2,
.frontend dynamic-content h3,
.frontend dynamic-content h4,
.frontend dynamic-content h5,
.frontend dynamic-content h6 {
  font-family: var(--font-family-headline), "Space Grotesk", Arial, sans-serif !important;
}

/* Hero H1: use the headline family (Space Grotesk) */
.frontend fe-topic-hero-default .topic-context h1 {
  font-family: var(--font-family-headline), "Space Grotesk", Arial, sans-serif !important;
}

/* Hide lottery tab in user profile*/
.frontend {
    .profile-settings-nav>a[href='/profile/lottery'] {
        display:none;
    }
}
/* Small custom card: Mostly used on landing pages) */
.cv-small-card {
  position: relative;
  border-radius: 12px;              /* matches inline radius */
  transition: box-shadow 0.25s ease;
}

.cv-small-card-link {
  color:#003336; 
  font-family:'Space Grotesk',sans-serif; 
  font-size:clamp(1.3rem, 4vw, 1.75rem); 
  margin-bottom:0; 
  margin-left:0; 
  margin-right:0; 
  margin-top:0;
}

.cv-small-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* Community Button Color Override */
/* Base State — light background, dark text/icon */
[button-item-type="JoinCommunity"] button,
[button-item-type="JoinCommunity"] .btn {
  background-color: #FCFCFA !important;
  border-color: #FCFCFA !important;
  color: #003336 !important;           /* dark text */
}

[button-item-type="JoinCommunity"] button svg path,
[button-item-type="JoinCommunity"] .btn svg path {
  fill: #003336 !important;            /* dark icon */
}

/* Hover State */
[button-item-type="JoinCommunity"] button:hover,
[button-item-type="JoinCommunity"] .btn:hover {
  background-color: #1C1F22 !important;
  border-color: #1C1F22 !important;
  color: #fff !important;            
}


[button-item-type="JoinCommunity"] button:hover svg path,
[button-item-type="JoinCommunity"] .btn:hover svg path {
  fill: #fff !important;             
}

/* ----- DSIP Reports Demo CSS ----- */
.reports-toolbar {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin: 16px 0;
  font-family: Inter, Arial, sans-serif;
}

.reports-pill {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #d0d4d8;
  background: #ffffff;
  font-size: 14px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  text-decoration: none;
  color: #111827;
}

.reports-pill:hover {
  background: #f7f8fa;
}

/* dropdown container */
.reports-dropdown {
  position: relative;
  display: inline-block;
}

/* dropdown panel (hidden by default) */
.reports-dropdown-menu {
  position: absolute;
  right: 0;
  margin-top: 6px;
  min-width: 260px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #d0d4d8;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  display: none;
  z-index: 1000;
}

/* show on hover */
.reports-dropdown:hover .reports-dropdown-menu,
.reports-dropdown-menu:hover {
  display: block;
}

.reports-dropdown-menu a {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  color: #111827;
  text-decoration: none;
  white-space: nowrap;
}

.reports-dropdown-menu a:hover {
  background: #f3f4f6;
}

/* Hover-safe dropdown — expands hover hit area without changing visuals */
.reports-dropdown {
  position: relative;
}

.reports-dropdown::before {
  content: "";
  position: absolute;
  top: 100%;          /* sits below the pill */
  left: 0;
  width: 100%;
  height: 12px;       /* invisible "bridge" */
  background: transparent;
}


/* ================================
   SECTION 2 — DSIP REPORTS DEMO
   Layout: Arc + Legend (row 1)
           Map + Scale + Top States (row 2)
   ================================ */

.reports-section-2 {
  font-family: Inter, Arial, sans-serif;
  padding: 20px;
  color: #003336;
}

/* ---- Top summary text ---- */
.summary-title {
  font-weight: 600;
  margin-bottom: 2px;
}

.summary-value {
  margin-bottom: 16px;
  font-size: 16px;
  color: #444;
}

/* ============================================================
   ROW 1 — ARC (LEFT) + PHASE LEGEND (RIGHT)
   ============================================================ */
.funding-row-arc {
  display: flex;
  align-items: center;   /* Vertically align arc + legend */
  gap: 40px;
  margin-top: 24px;
}

.funding-arc {
  flex: 0 0 55%;         /* Arc takes more space than legend */
}

.funding-arc-img {
  width: 100%;
  max-width: 380px;
  display: block;
}

.funding-legend {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  font-size: 14px;
  line-height: 14px;
}

.legend-dot-light {
  background: #7fa3a4;  /* lighter tint of #003336 */
}

.legend-dot-dark {
  background: #003336;
}

/* ============================================================
   ROW 2 — MAP + SCALE LEGEND (LEFT) + TOP STATES (RIGHT)
   ============================================================ */
.funding-row-map {
  display: flex;
  align-items: center;   /* Centers map block with list */
  gap: 40px;
  margin-top: 32px;
}

.funding-map-and-scale {
  flex: 0 0 60%;         /* Map gets more horizontal width */
}

.funding-map-img {
  width: 100%;
  max-width: 420px;
  display: block;
}

/* ---- Map scale legend ---- */
.funding-scale-legend {
  display: flex;
  gap: 24px;
  margin-top: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.scale-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #555;
}

.scale-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
}

.scale-dot-1 { background: #e4e7e7; }
.scale-dot-2 { background: #c4cdcd; }
.scale-dot-3 { background: #7fa3a4; }
.scale-dot-4 { background: #003336; }

/* ---- Top States ---- */
.top-states-title {
  font-weight: 600;
  margin-bottom: 6px;
}

.funding-top-states ol {
  margin: 0;
  padding-left: 20px;
}

/* ============================================================
   RESPONSIVE — stack rows vertically on small screens
   ============================================================ */
@media (max-width: 700px) {

  .funding-row-arc,
  .funding-row-map {
    flex-direction: column;
    align-items: flex-start;
  }

  .funding-arc,
  .funding-map-and-scale,
  .funding-top-states {
    flex: 1 1 auto;
  }
}

/* ================================
   SECTION 3 — Horizontal bar chart
   ================================ */

.reports-section-3 {
  font-family: Inter, Arial, sans-serif;
  padding: 20px;
  color: #003336;
}

/* List of bar rows */
.bars-list {
  margin-bottom: 4px;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}

/* Left labels (Air Force, Army, etc.) */
.bar-label {
  width: 80px;              /* adjust if labels clip */
  font-size: 14px;
  color: #555;
}

/* Bar track + segments */
.bar-track {
  flex: 1 1 auto;
  display: flex;
  height: 20px;
  background: #f7f7f7;
}

.bar-seg {
  height: 100%;
}

/* Color scheme: green/gray tints of #003336 */
.bar-phase1 {
  background: #7fa3a4;      /* light teal */
}

.bar-phase2 {
  background: #003336;      /* dark teal */
}

.bar-remaining {
  background: #e4e7e7;      /* light gray */
}

/* ----- Axis at bottom, aligned with bar starts ----- */
.bars-axis {
  margin-top: 0;
  margin-left: 96px;      /* 80px label width + 16px gap */
}

.axis-line {
  border-top: 1px solid #d0d4d8;
  width: 100%;            /* same width as bars */
}

/* ticks laid out below the line */
.axis-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 48px;       /* <-- space between line and labels */
}

.axis-tick {
  height: 40px;           /* vertical space for rotated label */
}

.axis-tick span {
  display: inline-block;
  font-size: 11px;
  color: #777;
  transform: rotate(-55deg);
  transform-origin: top left;
  white-space: nowrap;
}

/* Responsive adjustments */
@media (max-width: 700px) {
  .bar-label {
    width: 70px;
    font-size: 13px;
  }

  .axis-tick {
    height: 48px;
  }

  .axis-tick span {
    font-size: 10px;
  }
}

/* ========================================
   SECTION 4 — Month mini bar chart (CLEAN)
   ======================================== */

.reports-section-4 {
  font-family: Inter, Arial, sans-serif;
  width: 100%;
  padding: 20px 0 40px;
}

/* Bars row */
.reports-month-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;                 /* very small gap so bars almost touch */
  padding: 0 40px;
}

/* Each bar fills one month slot horizontally */
.month-bar {
  flex: 1 1 0;
  background: #003336;
  border-radius: 2px 2px 0 0;
}

/* Line between bars and labels */
.month-axis {
  border-top: 1px solid #d0d4d8;
  margin: 0 40px;
  margin-top: -1px;         /* overlaps bottom of bars so they "sit" on the line */
}

/* Labels */
.reports-month-labels {
  display: flex;
  justify-content: space-between;
  padding: 6px 40px 0;
  font-size: 12px;
  color: #555;
}

/* Mobile tweaks */
@media (max-width: 700px) {
  .reports-month-bars {
    padding: 0 20px;
  }
  .month-axis {
    margin: 0 20px;
    margin-top: -1px;
  }
  .reports-month-labels {
    padding: 6px 20px 0;
    font-size: 10px;
  }
}

/* ============================
   Demo Awards Table (DSIP)
   ============================ */

.reports-awards-table-wrapper {
  font-family: Inter, Arial, sans-serif;
  padding: 20px 0;
}

.reports-awards-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: #003336;
}

/* Header */
.reports-awards-table thead th {
  text-align: left;
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 1px solid #d0d4d8;
  background: #f3f4f6;
  white-space: nowrap;
}

.reports-awards-table th .sort-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;       /* shrink clickable area */
  height: 12px;
  margin-left: 4px;
}

.reports-awards-table th .sort-icon img {
  width: 12px;        /* actual icon size */
  height: 12px;
  opacity: 0.75;     /* softer visual weight */
  display: block;    /* remove baseline alignment issues */
}

/* Body rows */
.reports-awards-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
  color: #111827;
}

/* Alternating row background */
.reports-awards-table tbody tr:nth-child(even) {
  background-color: #f7f8f8;
}

/* Column sizing:
   1 = Topic #, 2 = Title, 3 = Solicitation, 4 = Component, 5 = Business Name, 6 = Award Amount
*/
.reports-awards-table thead th:nth-child(2),
.reports-awards-table tbody td:nth-child(2) {
  width: 40%;           /* let title wrap a bit */
  white-space: normal;  /* allow wrapping in title column */
}

/* Keep these columns from wrapping so numbers look clean */
.reports-awards-table thead th:nth-child(1),
.reports-awards-table thead th:nth-child(3),
.reports-awards-table thead th:nth-child(4),
.reports-awards-table thead th:nth-child(6),
.reports-awards-table tbody td:nth-child(1),
.reports-awards-table tbody td:nth-child(3),
.reports-awards-table tbody td:nth-child(4),
.reports-awards-table tbody td:nth-child(6) {
  white-space: nowrap;
}

/* Right-align award amounts */
.reports-awards-table tbody td:nth-child(6) {
  text-align: right;
}

/* ============================
   Fake Pagination
   ============================ */

.reports-awards-pagination {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 13px;
  color: #4b5563;
  gap: 12px;
}

.reports-awards-pagination .page-info {
  opacity: 0.85;
}

.reports-awards-pagination .page-controls {
  display: flex;
  gap: 4px;
}

.reports-awards-pagination .page-btn {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  cursor: default; /* demo only */
}

.reports-awards-pagination .page-btn--active {
  background: #003336;
  color: #ffffff;
  border-color: #003336;
}

.reports-awards-pagination .page-btn--ghost {
  border-color: transparent;
  background: transparent;
  color: #9ca3af;
}

/* Row hover highlight */
.reports-awards-table tbody tr:hover {
  background-color: #e3f0f0;  /* subtle teal-tinted highlight */
}

/* ============================
   Top nav tabs (reports)
   ============================ */

.reports-tabs {
  font-family: Inter, Arial, sans-serif;
  display: flex;
  gap: 40px;                     /* space between items */
  border-bottom: 1px solid #e5e7eb;
  margin: 0;
  padding: 0;                    /* no padding below the underline */
}

.reports-tab {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #111827;
  font-size: 18px;
  font-weight: 400;
  padding: 14px 0 10px;          /* vertical spacing only */
  white-space: nowrap;
}

.reports-tab:hover {
  color: #003336;                /* optional hover color */
}

/* Active tab */
.reports-tab--active {
  color: #003336;                /* blue for active text */
  font-weight: 600;
}

/* Blue underline for active tab */
.reports-tab--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;                  /* sits right on the section border */
  height: 3px;
  background: #003336;
}

/* Force badge background + text color */
.mat-badge-content,
.mat-badge-content.mat-badge-active {
  background-color: #CC004C !important; /* your magenta */
  color: #ffffff !important;           /* keep text readable */
}

/* Optional outer wrapper if you use it */
.doc-circle-wrap {
  text-align: center;          /* keeps rows centered */
}

/* This is code for NASA circle buttons */
.circle-row {
  display: flex;               /* puts circles side by side */
  justify-content: center;
  gap: 7rem;                   /* spacing between circles */
  flex-wrap: wrap;             /* allows wrapping on smaller screens */
}

/* Stacked version on small screens */
@media (max-width: 600px) {
  .circle-row {
    flex-direction: column;
    align-items: center;
    gap: 2rem;             /* smaller vertical spacing on mobile */
  }
}

/* The actual circular buttons */
.doc-circle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: clamp(110px, 14vw, 190px);
  aspect-ratio: 1 / 1;         /* keeps the element perfectly round */
  border-radius: 50%;
  background: #000000;

  color: #FFFFFF !important;   /* override theme link color */
  text-decoration: none;

  font-weight: 700;
  text-transform: uppercase;
  text-align: center;

  padding: 0.75rem;            /* lets longer labels wrap */
  line-height: 1.2 !important;
  letter-spacing: 0.04em;
  font-size: clamp(12px, 1.1vw + 0.4rem, 20px);

  cursor: pointer;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 0 0 rgba(0,0,0,0.3);
}

.doc-circle:hover,
.doc-circle:focus-visible {
  transform: scale(1.04);
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}

/* Style to target speciic tab bar */
.frontend inn-toolbox-tabs[id="4431e13d-11d8-4873-b6f5-18fe40bcba1e"] inn-toolbox-tab-label .tab-label.filled {
  background-color: transparent !important; /* default (idle) */
  color: #8c8c8c !important;
}

/* Hover (non-active) */
.frontend inn-toolbox-tabs[id="4431e13d-11d8-4873-b6f5-18fe40bcba1e"] inn-toolbox-tab-label .tab-label.filled:hover:not(.active) {
  background-color: #cacaca !important;   /* dark gray example */
  color: #8c8c8c !important;
}

/* Active tab */
.frontend inn-toolbox-tabs[id="4431e13d-11d8-4873-b6f5-18fe40bcba1e"] inn-toolbox-tab-label .tab-label.filled.active {
  background-color: #3691d9 !important;   /* green example */
  color: #ffffff !important;
}

/* Submit Feedback button — scoped to this exact container */
#eb4a05c7-6529-4742-a190-fe7bb4a13e46 button.btn-outline {
  color: #fff;
  border-color: #fff;
}

/* START (Jason McConnell) - Override CSS for specific Outline Button 
using inn-toolbox-button-item ID */
/* Force base text color via variables (non-hover) */
#eb4a05c7-6529-4742-a190-fe7bb4a13e46 {
  --body-color: #fff;
  --bs-body-color: #fff;
}

/* Hover state override */
#eb4a05c7-6529-4742-a190-fe7bb4a13e46 button.btn-outline:hover {
  background-color: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

/* Ensure inner text flips to black on hover */
#eb4a05c7-6529-4742-a190-fe7bb4a13e46 button.btn-outline:hover .btn-text {
  color: #000000;
}
/* END - Override CSS for specific Outline Button using inn-toolbox-button-item ID */

/* Hide "My Challenges" page navigation on User Profile */
a[href="/profile/mychallenges"] {
  display: none !important;
}
/* END - Hide "My Challenges" page navigation on User Profile */

/* Hide the "My Challenges" content panel on User Profile Overview Page*/
fe-panel:has(.card-badge):has(a.more-link[href="/profile/mychallenges"]) {
  display: none !important;
}
/* END - Hide the "My Challenges" content panel on User Profile Overview Page*/

/* Hide Achievements panel on User Profile Overview Page */
fe-panel:has([data-test-id="profile-statistics"]) {
  display: none !important;
}

nav.profile-settings-nav {
  display: flex;
  flex-direction: column;
}
/* END - Hide Achievements panel on User Profile Overview Page */

/* Reorder User Profile Page Navigation */
nav.profile-settings-nav a[href="/profile/about"] { order: 1 !important; }
nav.profile-settings-nav a[href="/profile/settings/general"] { order: 2 !important; }
nav.profile-settings-nav a[href="/profile/myideas"] { order: 3 !important; }
nav.profile-settings-nav a[href="/profile/following"] { order: 4 !important; }
nav.profile-settings-nav a[href="/profile/communities"] { order: 5 !important; }
nav.profile-settings-nav a[href="/profile/settings/security"] { order: 6 !important; }
nav.profile-settings-nav a[href="/profile/settings/notifications"] { order: 7 !important; }
nav.profile-settings-nav a[href="/profile/mychallenges"] { order: 8 !important; }
nav.profile-settings-nav a[href="/profile/lottery"] { order: 9 !important; }
/* END - Reorder User Profile Page Navigation */

/* SpaceWERX Homepage Hero Width Adjustment  */
inn-toolbox-row#f2850889-d6ed-4d01-8fb0-4d722662dda6 {
  max-width: 1460px !important;   /* or min(1600px, 96vw) */
}

#b8fedbe5-4b91-4a9b-a083-7c36a8ce1119 {
  max-width: 1460px !important;
}
/* END - SpaceWERX Homepage Hero Width Adjustment  */

.frontend featured-content .featured-content-card .card-corner {
  display: none !important;
}

profile-settings-general profile-settings-details .profile-settings > fe-title + inn-survey {
  display: block !important;
  padding-top: 24px !important;
}