/* Customize fonts */
body, label, input, button, select {
/*  font-family: Roboto, sans-serif;*/
  font-family: din-2014, Arial, sans-serif;
  font-weight: 400;
  color: #323F4B;
}

label {
  font-weight: 500;
  color: #52606D;
}

html, body {
  height: 100%;
  margin: 0;
  font-size: 16px;
}

body {
  /* Margin bottom by footer height */
/*  margin-bottom: 50px; */
  font-family: din-2014, Arial, sans-serif;
}

.content {
  min-height: 100%;

  /* Equal to height of footer */
  /* But also accounting for potential margin-bottom of last child */
  margin-bottom: -50px;
}

.skip-link {
  position: absolute;
  top: -1000px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

.main-content {
  padding: 0 50px;
  max-width: 1728px;
  margin-left: auto;
  margin-right: auto;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  font-family: din-2014, 'Arial Narrow', Arial, sans-serif;
  color: #3E4C59;
  margin-top: 20px;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 28px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

section {
  background-color: #F5F7FA88;
  border: 1px solid #E4E7EB;
}

section.section-report-studio {
  padding: 30px 30px 15px;
  margin: 20px 0;
}

section.section-report-studio h4 {
  margin-top: 0;
}

section.section-report-studio label {
  font-weight: 600;
}

figcaption {
  text-align: right;
  font-style: italic;
  font-size: 10px;
  margin: 10px 50px 35px 0;
}

.content-embed figcaption {
  margin: 10px 25px 10px 0;
}

input[type="number"] {
  max-width: 80%;
}

input::placeholder {
  color: #696969;
  font-style: italic;
}

dt {
  font-size: 16px;
  margin-top: 30px;
}

em {
  color: #7B8794;
}

nav.navbar + div.container-fluid {
/*  display: block;
  float: left;
  clear: both; */
/*  min-height: calc(100vh - 90px); */
}

/* Footer     ---------------------------- */
footer {
    background-color: #3E4C59;
    /*height: 120px;*/
    color: #E4E7EB;
    padding-right: 15px;
    padding-left: 15px;
}

.push {
  height: 140px;
}

.request-dataset {
  background-color: #52606D;
  padding: 20px 0 45px;
  text-align: center;
}

footer h4, footer label {
  color: #E4E7EB;
}

footer ul {
  list-style: none;
  display: inline-block;
  margin: 0 0 20px;
  padding: 0;
}

footer li {
  /*display: inline;*/
  margin: 0;
  line-height: 25px;
}

footer li a {
  font-size: 14px;
}

footer li a.website-links {
  font-weight: 700;
  color: #F5F7FA;
}

footer .footer-links-container {
  padding: 20px 0;
}

footer .powered-by {
  background-color: #323F4B;
  color: #E4E7EB;
  padding: 20px 0 4rem;
  text-align: center;
  font-size: 14px;
  font-family: "din-2014", Arial, sans-serif;
  margin-right: -15px;
  margin-left: -15px;
}

footer .powered-by a, footer .powered-by a:link, footer .powered-by a:visited {
    color: #A8BFB7;
}

footer .powered-by a:hover {
    text-decoration: underline;
}

footer .spacer {
  font-size: 18px;
  font-weight: 700;
  margin: 0 10px;
}

footer a, footer a:link, footer a:visited {
  color: #E4E7EB;
}

footer a:hover, footer a:active, footer a:focus {
  color: #ffffff;
}

footer .footer-logo {
  margin: 0 5px;
}

a {
  color: #175777;
  text-decoration: none;
}

p a {
  text-decoration: underline;
}

ul.inline li a:link, nav ul.inline li a:visited {
    color: red;
    display: block;
    text-align: center;
}

/* Navigation ---------------------------- */
.navbar-expand-xl {
  background-color: #ffffff;
  border: none;
  border-bottom: 1px solid #CBD2D9;
  padding: 0;
  margin-bottom: 15px;
  position: relative;
  z-index: 2000;
}

.navbar-expand-xl .navbar-collapse, .navbar-expand-xl .navbar-form {
  justify-content: flex-end !important;
}

.navbar-expand-xl .navbar-collapse, .navbar-expand-xl .navbar-form {
  border-color: #E4E7EB;
}

.navbar-expand-xl .navbar-brand {
  color: #3E4C59;
  font-weight: 700;
  padding: 0;
  display: flex;
  align-items: center;
}

.navbar-expand-xl .navbar-brand:focus, .navbar-expand-xl .navbar-brand:hover {
  color: #616E7C;
}

.brand-text {
  margin-left: 25px;
}

.nav>li>a {
  padding-right: 20px;
  padding-left: 20px;
}

.nav>li>a i {
  color: #52606D;
}

.nav>li.active>a i {
  color: #3994C1;
}

.navbar-expand-xl .navbar-nav>li>a {
  color: #3994C1;
}

.navbar-expand-xl .navbar-nav>li>a:focus, .navbar-expand-xl .navbar-nav>li>a:hover {
  color: #0B4F71;
  background-color: #E4E7EB;
}

.navbar-expand-xl .navbar-nav>.active>a, .navbar-expand-xl .navbar-nav>.active>a:focus, .navbar-expand-xl .navbar-nav>.active>a:hover {
  color: #0B4F71;
  /*outline: none !important;*/
  box-shadow: none !important;
  border: none;
  background-color: #CBD2D9;
}

.navbar-expand-xl .navbar-nav>.open>a, .navbar-expand-xl .navbar-nav>.open>a:focus, .navbar-expand-xl .navbar-nav>.open>a:hover {
  color: #EBF8FF;
  border: none;
  /*outline: none !important;*/
  box-shadow: none !important;
  background-color: #2D83AE;
}

.nav .open>a, .nav .open>a:focus, .nav .open>a:hover,
.nav a.show, .nav a.show:focus, .nav a.show:hover, :focus-visible {
  border: none;
  /*outline: none !important;*/
  box-shadow: none !important;
}

.form-control:focus, .form-control:focus-visible {
  border-width: 1px;
  border-style: solid;
  border-color: #8D959E !important;
}

.navbar-expand-xl .dropdown-menu {
  background-color: #D9E2EC;
  z-index: 1500;
  border-radius: 0;
}

.navbar-expand-xl .dropdown-menu>li>a {
  color: #243B53;
}

.navbar-expand-xl .dropdown-menu>li>a:focus, .navbar-expand-xl .dropdown-menu>li>a:hover {
  background-color: #BCCCDC;
}

.navbar-expand-xl .dropdown-menu>.active>a, .navbar-expand-xl .dropdown-menu>.active>a:focus, .navbar-expand-xl .dropdown-menu>.active>a:hover {
  color: #243B53;
  background-color: #9FB3C8;
}

/* Tabset panel */
#ei_manage {
  margin-bottom: 25px;
}

.margin-top-10 {
  margin-top: 10px;
}

/* Sidebar Navigation */
.content .nav.nav-pills.nav-stacked {
  margin-top: 85px;
}

.nav-pills > li > a {
  color: #323F4B;
  border-radius: 4px;
}

.nav-pills > li > a:focus,
.nav-pills > li > a:hover {
  background-color: #F5F7FA88;
  color: #323F4B;
}

.nav-pills > li.active > a,
.nav-pills > li > a.active,
.nav-pills > li > a.active:focus,
.nav-pills > li > a.active:hover,
.nav-pills .nav-link.active, .nav-pills .nav-tabs>li>a.active, .nav-pills>li>a.active, .nav-pills ul.nav.navbar-nav>li>a.active, .nav-pills .show>.nav-link, .nav-pills .in>.nav-link, .nav-pills .nav-tabs>li.show>a, .nav-pills .nav-tabs>li.in>a, .nav-pills>li.show>a, .nav-pills>li.in>a, .nav-pills ul.nav.navbar-nav>li.show>a, .nav-pills ul.nav.navbar-nav>li.in>a
{
  color: #323F4B;
  background-color: #E4E7EB88;
}

/* Navbar media query customizations */
@media (min-width: 768px) {
  .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
    margin-left: 0;
  }
}
/*
@media (max-width: 1150px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
        margin-top: 20px;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}
*/
.navbar-expand-xl .navbar-toggle .icon-bar {
  background-color: #3E4C59;
  height: 4px;
  border-radius: 2px;
}

.not-found-wrapper   {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /*font-family:"Inter",system-ui,sans-serif;*/
  color: #3f4750;
  background: #F5F7FA;
  text-align: center;
}
.not-found-logo {
  max-width: 240px;
  margin-bottom: 32px;
}
.not-found-headline {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.not-found-subtitle {
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 24px;
}
.not-found-link a {
  color: #1B7CD6;
  text-decoration: none;
  font-weight: 500;
}
.not-found-link a:hover {
  text-decoration:underline;
}


/* Home page ---------------------------- */
div.outer {
  position: fixed;
  top: 41px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  padding: 0;
}

#bizkit-home-about {
  font-size: 16px;
}

.highlights {
  background-color: #3E4C59;
  padding: 20px;
  color: #F5F7FA;
  border-radius: 10px;
}

.highlights h4 {
  margin-top: 0;
  color: #CBD2D9;
}

.highlights h4 i {
  font-size: 45px;
  margin-right: 15px;
  margin-bottom: 15px;
}

.highlights a {
  color: #F5F7FA;
  font-weight: 700;
  text-decoration: underline;
}

.news {
  background-color: #A7D8F0;
  padding: 20px;
  color: #3E4C59;
}

.news h5 {
  margin-top: 0;
  color: #52606D;
}

.homepage_cards {
  /* Appearance */
  background-color: #E4E7EB;
  padding: 0 20px 20px 20px;
  cursor: move;
  /* Fade out while not hovering */
  opacity: 0.85;
  zoom: 0.9;
  transition: opacity 500ms 1s;
}

.homepage_cards:hover {
  /* Fade in while hovering */
  opacity: 0.95;
  transition-delay: 0;
}

/* Position and style citation */
cite {
  font-size: 12px;
}

/* If not using map tiles, show a white background */
#homepage-map_census-bizkit_map {
  z-index: 100;
}

.leaflet-container {
  background-color: white !important;
	font: 12px/1.5 Roboto, sans-serif;
	border-radius: 5px;
}

.leaflet-container .legend i {
  border: 0.5px solid #000;
}

.awesome-marker i.explore-map-icon {
  color: #ffffff;
}

.marker-cluster-small {
	background-color: rgba(255, 158, 0, 0.3) !important;
}
.marker-cluster-small div {
	background-color: rgba(255, 158, 0, 0.6) !important;
}

.marker-cluster-medium {
	background-color: rgba(255, 158, 0, 0.3) !important;
}
.marker-cluster-medium div {
	background-color: rgba(255, 158, 0, 0.6) !important;
}

.marker-cluster-large {
	background-color: rgba(255, 158, 0, 0.3) !important;
}
.marker-cluster-large div {
	background-color: rgba(255, 158, 0, 0.6) !important;
}

.explore-label-title {
  font-size: 14px;
  color: #3E4C59;
  margin-top: 10px;
  font-weight: 400;
  text-align: center;
}

.explore-label-subtitle {
  font-size: 18px;
  color: #3E4C59;
  margin-top: 10px;
  font-weight: 500;
  text-align: center;
}

.explore-label-value {
  font-size: 28px;
  font-weight: 700;
  color: #3E4C59;
  text-align: center;
}

#da_data {
  margin: 20px 0 5px 25px;
}

#da_data h5 {
  border-bottom: 1px solid #616E7C;
}

.explore-table {
  width: 100%;
}

.explore-table caption {
  caption-side:bottom;
  text-align: right;
  font-size: 11px;
  color: #7B8794;
  font-style: italic;
}

.explore-table tr {
  border-bottom: 1px solid #E4E7EB;
}

.explore-table tr.even {
  background-color: #FFFFFF;
}

.explore-table tr.odd {
  background-color: #F5F7FA;
}

.explore-table tr th, .explore-table tr td {
  padding: 3px 7px;
}

#mpi_custom_tbl {
  margin-top: 2rem;
}

/* EI Grid */
.grid {
  display: grid;
  /* min() so the track can never exceed the container — see .resources-grid */
  grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
  grid-gap: 1rem;
}

.ei-grid-item,
.grid > div.ei-grid-item {
  background: #fff;
  padding: 0;
  /*border-radius: 1rem;*/
  border-radius: 10px;
  border: 2px solid #efefef;
}

.grid .subitems {
  display: contents;
}

.ei-grid-item .bizkit-chart-title {
  margin-top: 0;
  font-size: 16px;
  display: none;
}

.ei-grid-item figcaption {
  margin-bottom: 20px;
}

/* Bizkit components */
.homepage_cards {
  background-color: #F5F7FA;
}

.flex {
  display: flex;
}

/* Overview page Quick Facts */
.quick-facts-col {
  background-color: #d2d2d2;
  border-radius: 5px;
  font-family: din-2014, sans-serif;
  padding-bottom: 25px;
  padding-top: 25px;
  margin-top: 25px;
}

.quick-facts-col h5 {
  color: #ffffff;
  font-family: din-2014, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  padding-top: 25px;
  padding-bottom: 25px;
}

.quick-facts-col .quick-fact-icon {
  text-align: center;
  margin-top: 25px;
}

.content .quick-facts-col .card-body .value-box-area:after {
  content: "";
  padding-top: 3px;
  padding-bottom: 3px;
  background: rgba(255, 255, 255, 0.25);
  width: 50%;
  margin: 20px auto 0px auto;
}
/*
.content .quick-facts-col div:first-child .card-body .value-box-area:before {
  background: transparent;
}
*/
.content .quick-facts-col .card-body {
  background: #d2d2d2;
  border-radius: 0;
}

.content .quick-facts-col .bslib-value-box .value-box-area {
  padding: 0.5rem 2rem;
}

.content .quick-facts-col .bslib-value-box .value-box-area,
.content .quick-facts-col .bslib-value-box .value-box-area>:first-child,
.content .quick-facts-col .bslib-value-box .value-box-area>:nth-child(2),
.content .quick-facts-col .bslib-value-box .value-box-area * {
  color: #000;
  text-align: center;
}

.content .quick-facts-col .bslib-value-box .value-box-area>:first-child {
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 12px;
}

.content .quick-facts-col .bslib-value-box .value-box-area>:nth-child(2) {
  font-size: 21px;
  margin: 0 0 2px;
}

.content .quick-facts-col .bslib-value-box .value-box-area * {
  font-size: 14px;
}

.quick-facts-col hr {
  padding: 0;
  width: 40%;
  margin: 20px auto;
  background: #ffffff;
  border: 4px solid #ffffff;
}

.quick-facts-col .bslib-mb-spacing {
  margin-bottom: 0;
}

/* Overview */
.overview {
  padding: 0 50px;
}

.overview h3 {
  padding-top: 17px;
  font-weight: 600;
  font-size: 32px;
}

/* Overview transportation */
.overview-transportation h5 {
  padding-top: 21px;
  padding-bottom: 8px;
  margin-bottom: 0;
  text-transform: uppercase;
  text-align: left;
  font-weight: 600;
}



/* Value box */
.bizkit-valuebox {
  /*box-shadow: 0 5px 15px 0 hsla(0, 0%, 0%, 0.25);*/
  border: 3px solid #E4E7EB;
  border-radius: 4px;
  margin: 25px 0;
  padding: 20px 25px;
  background-color: transparent;
}

.bizkit-valuebox.population {
  background-color: #E4E7EB88;
}

.bizkit-valuebox.work {
  background-color: #E4E7EB88;
}

.bizkit-valuebox.housing {
  background-color: #E4E7EB88;
}

.bizkit-valuebox.realty {
  background-color: #E4E7EB88;
}

.bizkit-valuebox.neutral {
  background-color: #E4E7EB88;
}

.bizkit-valuebox-title {
  font-size: 16px;
  color: #323F4B;
  margin-top: 10px;
  font-weight: 500;
}

.bizkit-valuebox-value {
  font-size: 36px;
  font-weight: 500;
  color: #3E4C59;
}

.value-box-value .pp {
  font-size: 14px;
  font-weight: 400;
}

.bizkit-valuebox-subtitle {
  font-size: 13px;
  color: #616E7C;
  margin-top: 6px;
}

.bizkit-valuebox-footer {
  background-color: #E4E7EB;
  /*padding: 12px 0;*/
  margin-top: 15px;
  color: #1F2933;
}

/* === Reusable data-interpretation module components (cv-*) === */

/* Section wrapper with consistent spacing */
.cv-section { margin-bottom: 35px; }

/* Callout box (executive summary, key insight) */
.cv-callout {
  padding: 15px;
  background-color: #f8f9fa;
  border-left: 4px solid #893448;
  border-radius: 4px;
  margin-bottom: 15px;
}
.cv-callout-secondary {
  padding: 15px;
  background-color: #f8f9fa;
  border-left: 4px solid #d95850;
  border-radius: 4px;
  margin-bottom: 15px;
}
.cv-callout p, .cv-callout-secondary p {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 12px;
}
.cv-callout p:last-child, .cv-callout-secondary p:last-child {
  margin-bottom: 0;
}

/* Narrative text block */
.cv-narrative {
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 4px;
  margin-top: 15px;
}
.cv-narrative p {
  font-size: 14px;
  line-height: 1.7;
  color: #3E4C59;
  margin: 0;
}

/* Methodology / data sources block */
.cv-methodology {
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 4px;
  margin-bottom: 25px;
}
.cv-methodology h4 {
  color: #893448;
  margin-top: 0;
  margin-bottom: 15px;
}
.cv-methodology p {
  font-size: 13px;
  margin-bottom: 10px;
}
.cv-methodology p:last-child { margin-bottom: 0; }

/* Investment case / feature highlight box */
.cv-highlight-box {
  padding: 25px;
  background-color: #f8f9fa;
  border-left: 5px solid #d95850;
  border-radius: 4px;
  margin-bottom: 35px;
}

/* Page title with accent border */
.cv-page-title {
  color: #893448;
  margin-bottom: 5px;
  font-size: 28px;
  border-bottom: 3px solid #893448;
  padding-bottom: 10px;
}

/* Subtitle text */
.cv-subtitle {
  font-size: 14px;
  color: #616E7C;
  margin-bottom: 25px;
}

/* Footer with top border */
.cv-footer {
  padding-top: 20px;
  border-top: 1px solid #ddd;
}

aside.chart-filters {
  margin: 15px 25px;
  padding: 10px;
  background-color: #F5F7FA;
  border: 1px solid #E4E7EB;
}

.bizkit-chart-title-area {
  font-family: Roboto, sans-serif;
  color: #3E4C59;
  margin: 0 0 5px 25px;
}

.bizkit-chart-title {
  font-size: 18px;
  font-weight: 500;
  margin-top: 35px;
  margin-bottom: 0;
}

.bizkit-chart-subtitle {
  font-size: 13px;
}
/*
.explore-selector-container {
  margin-left: 25px;
}
*/
.explore-selector-container h1,
.explore-selector-container h2,
.explore-selector-container h3,
.explore-selector-container h4,
.explore-selector-container h5,
.explore-selector-container h6 {
  text-align: left;
}

.explore-selector-container h1:after,
.explore-selector-container h2:after,
.explore-selector-container h3:after,
.explore-selector-container h4:after,
.explore-selector-container h5:after,
.explore-selector-container h6:after {
  display: none;
}

.explore-selector-container label {
  font-size: 14px;
  font-weight: 400;
}

/* Leaflet map container */
.content .explore-map-container {
  min-height: calc(100vh - 120px);
}

.leaflet-popup-content-wrapper {
  box-shadow: 3px 3px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

/* Leaflet fix for NA in legend for continous variables */
div.info.legend.leaflet-control br {
  clear: both;
}

.leaflet-top, .leaflet-bottom {
  z-index: 400;
}

/* Spacelist container */
.content #spacelist-engine-wrapper iframe {
  height: calc(100vh - 220px);
  min-height: calc(100vh - 220px);
  max-height: calc(100vh - 220px);
}

.content-embed #spacelist-engine-wrapper iframe {
  height: 750px;
  min-height: 750px;
  max-height: 750px;
}

/* Economin Indicators  */
#ei-report-download-modal {
  font-size: 15px;
}

#ei-report-download-modal label, .radio label, .checkbox label {
  font-weight: 400;
  margin-top: 10px;
}

#ei-report-download-modal label i, .radio label i, .checkbox label i {
  margin: 0 1px 0 5px;
}

/* Accordion */
.accordion {
  margin-bottom: 20px;
}

/* Numeric range sliders */

.irs.irs--shiny .irs-bar, .content-embed .irs.irs--shiny .irs-bar {
  border-top: 1px solid #323F4B;
  border-bottom: 1px solid #323F4B;
  background-color: #7B8794;
  top: 26px;
  height: 6px;
}

.irs.irs--shiny .irs-handle, .content-embed .irs.irs--shiny .irs-handle {
  top: 22px;
  width: 16px;
  height: 16px;
  border-radius: 16px;
}

.irs--shiny .irs-from, .irs--shiny .irs-to, .irs--shiny .irs-single,
.content-embed .irs--shiny .irs-from, .content-embed .irs--shiny .irs-to, .content-embed .irs--shiny .irs-single {
  color: #fff;
  background-color: #52606D;
}

/* Admin area */
.password-reset-link {
  margin-top: 20px;
}

/* Maintenance Panel */
.maintenance-panel {
  text-align: center;
  padding-top: 150px;
  background: url('img/maintenance.png') top center no-repeat;
}

.maintenance-panel h1, .maintenance-panel h2 {
  color: #3E4C59;
}

/* Download data link */
.download-data-link {
  margin-left: 20px;
  color: #1D6F98);
}

/* gt table */
.gt_table td.gt_row {
  font-size: 14px;
  color: #323F4B;
}

.gt_table th.gt_col_heading {
  font-size: 15px;
  color: #616E7C;
}

/* reactable */
.reactable {
  margin-top: 25px;
  margin-bottom: 25px;
}

/* Helper classes */
.hspacer {
  margin: 0 10px;
}

.how_to_admin_container {
  margin-top: 20px;
}

/* Buttons ------- */

.btn.btn-cityviz {
  background-color: #FFFFFF;
  border-color: #9AA5B1;
  color: #334155;
  font-weight: 700;
}

/* Default */

.btn-default {
  background-color: #52606D;
  color: #F5F7FA;
  border-color: #52606D;
}

.btn-default:hover,
.btn-default:focus {
  background-color: #3E4C59;
  color: #F5F7FA;
  border-color: #3E4C59;
}

/* Inverse */

.btn-inverse {
  background-color: #F5F7FA;
  color: #334155;
  border-color: #CBD2D9;
}

.btn-inverse:hover {
  background-color: #E4E7EB;
  color: #1F2933;
  border-color: #9AA5B1;
}

/* Info */

.btn-info {
  background-color: #D9EEF7;
  color: #0F4C6B;
  border-color: #7CC1E4;
}

.btn-info:hover {
  background-color: #BFE4F3;
  color: #083B53;
  border-color: #4AA3D1;
}

/* Success */

.btn-success {
  background-color: #9FD9A1;
  color: #0B4D13;
  border-color: #4E9F53;
}

.btn-success:hover {
  background-color: #7FCF83;
  color: #08380F;
  border-color: #2F7D35;
}

/* Warning */

.btn-warning {
  background-color: #F9E2A6;
  color: #5A4305;
  border-color: #E9C46A;
}

.btn-warning:hover {
  background-color: #F5D78A;
  color: #3F2F03;
  border-color: #D9A441;
}

/* Danger */

.btn-danger {
  background-color: #F5B7B7;
  color: #6B0D0D;
  border-color: #D64545;
}

.btn-danger:hover {
  background-color: #EC9A9A;
  color: #4E0606;
  border-color: #B02A2A;
}

/* Primary */

.btn-primary {
  background-color: #2E86B5;
  color: #F0F9FF;
  border-color: #1F6F98;
}

.btn-primary:hover {
  background-color: #246F95;
  color: #E0F2FE;
  border-color: #165574;
}

/* FontAwesome brands */
.fa-youtube {
  color: #ea3323;
}

.vembedr {
    box-shadow: 1px 5px 15px 1px hsl(0deg 0% 0% / 45%);
}

.file-icon {
  font-size: 16px;
  margin-right: 5px;
}

.colour-pdf {
  color: #BA2525;
}

.colour-xlsx {
  color: #3F9142;
}

.colour-docx {
  color: #1D6F98;
}

.colour-pptx {
  color: #D35230  ;
}

/* Resources */
.resources-grid {
  margin-top: 25px;
  margin-bottom: 25px;
  display: grid;
  /* min() so the track can never exceed the container — a bare 480px floor
     overflows every phone. Identical rendering at desktop widths. */
  grid-template-columns: repeat(auto-fill, minmax(min(480px, 100%), 1fr));
  grid-gap: 4rem;
}

.resources-grid .media-left {
  padding-right: 25px;
}

.resources-grid .media-left img {
  border: 1px solid #9AA5B1;
  border-radius: 3px;
}

/* Ticker */
* {
  box-sizing: border-box;
}

@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@keyframes ticker {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
.ticker-wrap {
  position: fixed;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  height: 4rem;
  background-color: #1F2933;
  padding-left: 100%;
  box-sizing: content-box;
  z-index: 10000;
  display: flex;
}

.ticker-wrap:hover .ticker {
    animation-play-state: paused;
}

.ticker-wrap .ticker {
  display: inline-block;
  display: flex;
  height: 4rem;
  line-height: 1.3rem;
  white-space: nowrap;
  padding-right: 100%;
  box-sizing: content-box;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 30s;
  animation-duration: 30s;
}
.ticker-wrap .ticker-item {
  display: inline-block;
  padding: 0.75rem 3rem;
  font-size: 1rem;
  color: white;
  color: #F5F7FA;
}
.ticker-wrap .ticker-item .ticker-value {
  display: inline-block;
  padding: 0;
  padding: 0 1rem;
/*  font-size: 1.3rem;*/
}

.ticker-wrap .ticker-item .ticker-change {
  font-size: 1rem;
}

.ticker-item h3, .ticker-item h5, .ticker-item span, .ticker-item p {
  /*color: #F5F7FA;*/
}

.ticker-item p {
  font-size: 0.875rem;
  margin-bottom: 0;
}

.ticker-item .green {
  color: #A3D9A5;
}

.ticker-item .yellow {
  color: #F8E3A3;
}

.ticker-item .red {
  color: #F29B9B;
}


/* Footnotes ---- */
.footnotes {
  background-color: #F5F7FA;
  border: 10px solid #ffffff;
  padding: 20px 40px;
  margin: 0 0 20px;
}

/*
body {
  padding-bottom: 5rem;
}

h1, h2, p {
  padding: 0 5%;
}
*/


/* Jumbotron */
.jumbotron {
  background: rgb(207,198,201);
  background: linear-gradient(0deg, rgba(230, 192, 179, 0.8) 0%, rgba(207, 198, 201, 0.8) 100%);
}

.jumbotron p {
  font-size: 18px;
}

.jumbotron.jumbo-construction {
  /*background: url('img/jumbo/construction/a0BEHFMKqTE.jpg') 0 0 no-repeat;*/
}


#request-custom-cityviz-reports {
  font-size: 1.1em;
}


/* Reactable twitter followers */
.title {
  margin: 18px 0;
  font-size: 16px;
}

.title h2 {
  font-size: 20px;
  font-weight: 500;
}

.followers-tbl {
  font-size: 14px;
  line-height: 18px;
}

.followers-tbl a {
  color: inherit;
}

.header {
  border-bottom: 2px solid #555;
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
}

.header:hover {
  background-color: #eee;
}

.bar-cell {
  display: flex;
  align-items: center;
}

.number {
  /* font-family: "Fira Mono", Consolas, Monaco, monospace; */
  font-size: 13.5px;
  white-space: pre;
}

.bar-chart {
  flex-grow: 1;
  margin-left: 6px;
  height: 14px;
}

.bar {
  height: 100%;
}

.bar-chart-right .bar {
  float: right;
}


/**** MISC ****/
.tab-pane h3, .content-panel h3 {
  text-align: left;
  padding-top: 1rem;
  padding-bottom: 1.5rem;
}

/**** Cityviz 2.0 ****/
#search {
  /*background-image: url("img/search/1.jpg");
  min-height: 80vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 5vh 0 0;*/
}

.content.content-search {
  margin-bottom: 0;
  padding: 0;
}

.content-search {
  background-color: #F5F7FA;
}
/*
.content-search .navbar.navbar-expand-xl {
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 10001;
  border-bottom: 1px solid #CBD2D9;
}
*/
.content-search h2,
.content-search h4
{
  color: #323F4B;
  font-family: Roboto, sans-serif;
  text-align: center;
  margin-bottom: 1em;
}

.content-search h2 {
}

.content-search .dataset-list-container h4 {
  text-align: left;
  padding-left: 20px;
}

.content-search #search-container {
  padding: 5em;
  /* margin-top: 15vh;
  background-color: rgba(255, 255, 255, 0.7); */
  background-color: #F5F7FA;
}

/* DATASET SEARCH ***************/
.content-embed #search-intro {
  margin-top: 50px;
}

.content-embed #search-form {
  margin: 2rem 0;
}

.content-embed #search-form .form-group {
  margin-bottom: 0;
}

.selectize-input.focus {
  border-color: #ccc;
  box-shadow: none;
}

.content-search #search-panel .selectize-input {
  /*
  border-top-left-radius: 2em !important;
  border-bottom-left-radius: 2em !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  */
  line-height: 48px;
  font-size: 18px;
  padding-left: 1.5em;
}

.selectize-control.multi .selectize-input>div {
  border-radius: 20px;
  margin: 0 8px 3px 0;
  padding: 4px 10px;
  background: #454545;
  color: #ffffff;
}

.selectize-control.plugin-remove_button .item .remove {
  margin: 0px 3px 0px 5px;
  padding: 1px 5px;
  color: rgba(255, 255, 255, 0.8);
  border-left: 1px solid rgba(255, 255, 255, 0.7) !important;
  font-size: 20px;
}

.content-embed #search-panel .selectize-input {
  line-height: 34px;
  font-size: 1rem;
  padding-left: 1.5em;
}

.content-search #search-panel .btn {
  font-weight: 700;
  line-height: 50px;
  font-size: 1rem;
  width: 100%;
}

.content-embed #search-panel .btn {
  font-weight: 500;
  line-height: 24x;
  font-size: 1rem;
}

.content-search #search-panel .dataset-item,
.content-embed #search-panel .dataset-item {
  padding: 15px 20px;
}

.content-search #search-panel span,
.content-embed #search-panel span {
  display: inline-block;
  margin-bottom: 5px;
}

.content-search #search-panel .dataset-label,
.content-embed #search-panel .dataset-label {
  font-weight: 700;
  font-size: 16px;
  padding: 5px 0;
}

.content-search #search-panel .dataset-description,
.content-embed #search-panel .dataset-description {

}

.content-search #search-panel .dataset-pill,
.content-embed #search-panel .dataset-pill {
  padding: 5px 10px;
  background-color: #CBD2D9;
  border-radius: 5px;
}

.content-search #search-panel .dataset-update,
.content-embed #search-panel .dataset-update {
  font-size: 12px;
  color: #52606D;
  padding: 5px 0;
}

/* POPULAR SEARCHES ***************/
.content-search #search-panel .popular-search-list,
.content-embed #search-panel .popular-search-list {
  margin-top: 2em;
}

.content-search #search-panel .search-list,
.content-embed #search-panel .search-list {
  list-style: none;
  padding-inline-start: 0px;
}

.content-search #search-panel .search-list li,
.content-embed #search-panel .search-list li {
  display: inline;
  margin: 0 7px;
  padding: 5px 0;
  line-height: 40px;
  white-space: nowrap;
}

.content-search #search-panel .search-list .dataset-pill,
.content-embed #search-panel .search-list .dataset-pill {
  padding: 5px 10px;
  background-color: #ffffff;
  border-radius: 5px;
}

/* POPULAR ACTIONS AND RECENT UPDATES ***************/
#search-section {
  background-color: #ffffff;
  padding-top: 40px;
}

.content-embed #search-section {
  padding-top: 20px;
  margin-bottom: 50px;
  background-color: transparent;
}

#search-section h4 {
  text-align: left;
}

#search-section h4:after {
  margin-left: 0;
}

/* POPULAR ACTIONS ***************/
.content-search .action-list,
.content-search .dataset-list,
.content-embed .action-list,
.content-embed .dataset-list {
  list-style: none;
  padding-inline-start: 0px;
  padding: 20px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.8);
}

.content-embed .action-list,
.content-embed .dataset-list {
  padding: 20px 20px 0;
  margin-bottom: 0;
}

.content-search .action-list li,
.content-search .dataset-list li,
.content-embed .action-list li,
.content-embed .dataset-list li {
  margin-bottom: 20px;
}

.content-search .action-list .action,
.content-search .dataset-list .dataset,
.content-embed .action-list .action,
.content-embed .dataset-list .dataset {
  margin-bottom: 20px;
}

.content-search .action-list .action-icon,
.content-embed .action-list .action-icon {
  text-align: center;
  font-size: 24px;
}

.content-search .dataset-link .dataset-icon,
.content-embed .dataset-link .dataset-icon {
  margin-right: 7px;
}

.content-search .action-list .action-link,
.content-search .dataset-list .dataset-link,
.content-embed .action-list .action-link,
.content-embed .dataset-list .dataset-link {
  font-size: 18px;
  font-weight: 500;
  padding: 5px 0;
  color: #2D83AE;
}

.content-embed .action-list .action-link,
.content-embed .dataset-list .dataset-link {
  font-size: 14px;
}

.content-search .action-list .action-link .fa,
.content-embed .action-list .action-link .fa {
  margin-right: 7px;
}

.content-search .action-list .action-link a,
.content-search .action-list .action-link a:visited,
.content-search .dataset-list .dataset-link a,
.content-search .dataset-list .dataset-link a:visited,
.content-embed .action-list .action-link a,
.content-embed .action-list .action-link a:visited,
.content-embed .dataset-list .dataset-link a,
.content-embed .dataset-list .dataset-link a:visited {
  text-decoration: underline;
}

.content-search .action-list .action-link a:hover,
.content-search .action-list .action-link a:active,
.content-search .dataset-list .dataset-link a:hover,
.content-search .dataset-list .dataset-link a:active,
.content-embed .action-list .action-link a:hover,
.content-embed .action-list .action-link a:active,
.content-embed .dataset-list .dataset-link a:hover,
.content-embed .dataset-list .dataset-link a:active {
  color: #166086;
  text-decoration: underline;
}

.content-search .action-list .action-link-description,
.content-search .dataset-list .dataset-description,
.content-embed .action-list .action-link-description,
.content-embed .dataset-list .dataset-description {
  font-size: 16px;
  font-weight: 300;
  color: #323F4B;
  padding: 0;
}

.content-embed .action-list .action-link-description,
.content-embed .dataset-list .dataset-description {
  font-size: 14px;
}

.content-search .dataset-list .dataset-link-last_update_date,
.content-embed .dataset-list .dataset-link-last_update_date {
  font-style: italic;
  color: #616E7C;
}

/* EMBEDDED WIDGETS */
.content-embed {
  max-width: 1200px;
  padding: 10px;
  background-color: transparent;
  border: none;
  border-radius: 22px;

  --cv-sidebar-bg-color: var(--bs-gray-600);
  --cv-sidebar-color: var(--bs-gray-100);
  --cv-sidebar-active-bg-color: var(--bs-gray-100);
  --cv-sidebar-active-color: var(--bs-gray-900);
  --cv-link-color: #FF7676;
  --cv-link-hover-color: #2158a6;

  --cv-card-nav-tabs-border-radius: 10px;

  --bslib-spacer: 1rem 2rem;
}

.widget-tiles-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
    height: 850px;
}

.widget-tiles-grid-container .tile {
  background-color: #454545;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  font-size: 2rem;
  text-align: center;
  padding: 20px;
  cursor: pointer;
  border: 1px solid #efeded;
}

.widget-tiles-grid-container .tile:hover {
  border: 1px solid #969696;
}

.widget-tiles-grid-container .tile h3 {
  color: #ffffff;
  font-size: 24px;
  text-transform: none;
  margin: 0;
}

.widget-tiles-grid-container .tile p {
  margin-bottom: 0;
  font-size: 1rem;
}

/* Specific tile sizes */
.widget-tiles-grid-container .tile-1 {
  grid-column: 1 / span 1;
  grid-row: 1 / span 2;
}

.widget-tiles-grid-container .tile-2 {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
  background: #6c6c6c;
}

.widget-tiles-grid-container .tile-3 {
  grid-column: 3 / span 2;
  grid-row: 1 / span 1;
  background: #b1b1b1;
  color: #333;
}

.widget-tiles-grid-container .tile-4 {
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
  background: #b1b1b1;
  color: #333;
}

.widget-tiles-grid-container .tile-5 {
  grid-column: 3 / span 1;
  grid-row: 2 / span 2;
  background: #b1b1b1;
  color: #333;
}

.widget-tiles-grid-container .tile-6 {
  grid-column: 4 / span 1;
  grid-row: 2 / span 1;
}

.widget-tiles-grid-container .tile-7 {
  grid-column: 1 / span 2;
  grid-row: 3 / span 1;
  background: #6c6c6c;
}

.widget-tiles-grid-container .tile-8 {
  grid-column: 1 / span 1;
  grid-row: 4 / span 1;
  background: #b1b1b1;
  color: #333;
}

.widget-tiles-grid-container .tile-9 {
  grid-column: 2 / span 2;
  grid-row: 4 / span 1;
}

.widget-tiles-grid-container .tile-10 {
  grid-column: 4 / span 1;
  grid-row: 3 / span 2;
  background: #6c6c6c;
}

.widget-tiles-grid-container .tile-3 h3,
.widget-tiles-grid-container .tile-4 h3,
.widget-tiles-grid-container .tile-5 h3,
.widget-tiles-grid-container .tile-8 h3 {
  color: #333;
}

@media only screen and (max-width: 768px) {
  .widget-tiles-grid-container .tile-1,
  .widget-tiles-grid-container .tile-2,
  .widget-tiles-grid-container .tile-3,
  .widget-tiles-grid-container .tile-4,
  .widget-tiles-grid-container .tile-5,
  .widget-tiles-grid-container .tile-6,
  .widget-tiles-grid-container .tile-7,
  .widget-tiles-grid-container .tile-7,
  .widget-tiles-grid-container .tile-8,
  .widget-tiles-grid-container .tile-9,
  .widget-tiles-grid-container .tile-10 {
    grid-column: 1 / span 4;
    grid-row: span 1;
  }
}

.popup {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: white;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow: hidden;
}

.popup iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.popup .close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
  z-index: 1001;
}


/* NAVSET PILLS LIST */
.content-embed #cityviz-widget-charts {
  display: block;
}

.content-embed #cityviz-widget-charts-panel {
  display: none;
}

.content-embed #cityviz-widget-links {
  display: none;
}

.content-embed .nav {
  border-bottom: 1px solid #e6e6e6;
}

.content-embed .well {
  padding: 0;
  border: none;
  border-radius: 0.67rem;
  background-color: var(--cv-sidebar-bg-color);
}

.content-embed .well.col-sm-1 {
  width: 80px;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
}

.content-embed .well ~ .col-sm-11 {
  margin-left: 100px;
  width: calc(100% - 110px)
}

.content-embed .nav-pills>li>a {
  color: var(--cv-sidebar-color);
  padding: 12px 2px;
  font-weight: var(--bs-nav-link-font-weight);
  text-align: center;
  border-radius: 0;
  font-size: 11px;
}

.content-embed .nav-pills>li.active>a {
  background-color: var(--cv-sidebar-active-bg-color);
  color: var(--cv-sidebar-active-color);
}

.content-embed .nav-pills>li:first-of-type>a {
  border-top-right-radius: 0.67rem;
  border-top-left-radius: 0.67rem;
}

.content-embed .nav-pills>li>a>div {
  font-size: var(--bs-nav-link-icon-size);
}

.content-embed ul.cityviz-widget-links-list li  {
    font-size: 16px;
    padding: 20px;
  }

.content-embed ul.cityviz-widget-links-list li a {
    font-size: 16px;
    line-height: 20px;
    color: var(--cv-link-color);
    padding-left: 15px;
  }

.content-embed ul.cityviz-widget-links-list li a:hover {
    font-size: 16px;
    line-height: 20px;
    color: var(--cv-link-hover-color);
  }



/* Media Queries */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .content-embed #cityviz-widget-charts {
    display: none;
  }

  .content-embed #cityviz-widget-charts-panel {
    display: block;
  }

  .content-embed #cityviz-widget-links {
    display: block;
  }

  .content-embed ul.cityviz-widget-links-list {
      list-style: none;
    }

  .content-embed .well.col-sm-1 {
    width: 50px;
  }
  .content-embed .well ~ .col-sm-11 {
    margin-left: 60px;
    width: calc(100% - 70px);
  }
  .content-embed .card-header li>a {
    font-size: 10px;
  }

  .content-embed .nav-pills>li>a {
    padding: 12px 0px;
    font-size: 10px;
  }

  .content-embed #cityviz-widget-charts-transportation.nav-pills>li>a {
    font-size: 0;
  }

  .content-embed .nav-pills>li>a>div {
    font-size: 1rem;
  }
  .transportation-routes-legend {
    display: none;
  }
}

/* Small devices (portrait tablets and large phones, 600px to 768px) */
@media only screen and (min-width: 601px) and (max-width: 768px) {
  .content-embed .well.col-sm-1 {
    width: 60px;
  }
  .content-embed .well ~ .col-sm-11 {
    margin-left: 70px;
    width: calc(100% - 80px);
  }
  .content-embed .card-header li>a {
    font-size: 11px;
  }
  .content-embed .nav-pills>li>a {
    padding: 12px 2px;
    font-size: 10px;
  }
  .content-embed .nav-pills>li>a>div {
    font-size: 1.125rem;
  }
  .transportation-routes-legend {
    display: none;
  }
}

/* Medium devices (landscape tablets, 768px to 992px) */
@media only screen and (min-width: 769px) and (max-width: 992px) {
  .content-embed .well.col-sm-1 {
    width: 70px;
  }
  .content-embed .well ~ .col-sm-11 {
    margin-left: 80px;
    width: calc(100% - 90px);
  }
  .content-embed .card-header li>a {
    font-size: 12px;
  }
  .content-embed .nav-pills>li>a {
    padding: 12px 2px;
    font-size: 11px;
  }
  .content-embed .nav-pills>li>a>div {
    font-size: 1.5rem;
  }
  .transportation-routes-legend {
    display: none;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 993px) {
  /* No changes needed for larger screens as the default styles apply */
}

/* CARDS */
.content .card,
.content-embed .card {
  border: none;
  border-radius: 5px;
  background-color: #f6f6f6;
}

.content .card-body {
  background: #efefef;
  /*border: 2px solid #efefef;
  border-radius: 10px;*/
}

.content .ei-grid-item .card, .content-embed .ei-grid-item .card {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.content .card-header,
.content-embed .card-header {
  padding-bottom: 0;
  font-weight: bold;
  border: none;
  background-color: transparent !important;
  padding-left: 7.5px;
  padding-bottom: 1.25rem;
  text-transform: uppercase;
}

.content .card-header li>a,
.content-embed .card-header li>a {
  font-weight: normal;
  padding-left: 10px;
  padding-right: 10px;
}
.content-embed .card-header li>a {
  font-weight: 700;
  font-size: 16px;
}

.content .card-header li.active>a,
.content .card-header li>a:hover,
.content .card-header li>a:focus {
  background-color: var(--cv-sidebar-bg-color);
  color: var(--cv-sidebar-color);
  font-weight: normal;
  border-top-left-radius: var(--cv-card-nav-tabs-border-radius);
  border-top-right-radius: var(--cv-card-nav-tabs-border-radius);
  border-bottom-left-radius: var(--cv-card-nav-tabs-border-radius);
  border-bottom-right-radius: var(--cv-card-nav-tabs-border-radius);
}
.content-embed .card-header li.active>a,
.content-embed .card-header li>a:hover,
.content-embed .card-header li>a:focus  {
  /*background-color: var(--cv-sidebar-bg-color);
  color: var(--cv-sidebar-color);
  */
  color: #000000;
  background-color: transparent !important;
  font-weight: 700;
  border-top-left-radius: var(--cv-card-nav-tabs-border-radius);
  border-top-right-radius: var(--cv-card-nav-tabs-border-radius);
  /*border-bottom-left-radius: var(--cv-card-nav-tabs-border-radius);
  border-bottom-right-radius: var(--cv-card-nav-tabs-border-radius);*/

  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.content .card-header li>a:hover,
.content .card-header li>a:focus,
.content-embed .card-header li>a:hover,
.content-embed .card-header li>a:focus  {
  opacity: 0.75;
}

.content .bslib-card .bslib-navs-card-title,
.content-embed .bslib-card .bslib-navs-card-title {
  justify-content: flex-start;
}

.content .bslib-card,
.content-embed .bslib-card {
  box-shadow: none;
}

.content .bslib-card .card-header-tabs,
.content-embed .bslib-card .card-header-tabs {
  justify-content: flex-start;
}

.content .bslib-card[data-full-screen="true"] .card-header-tabs,
.content-embed .bslib-card[data-full-screen="true"] .card-header-tabs {
  margin-left: 0;
}

.content .bslib-card .bslib-navs-card-title .nav,
.content-embed .bslib-card .bslib-navs-card-title .nav {
  margin-left: 0;
}

.content .card-body,
.content-embed .card-body {
  --bs-card-spacer-x: 0.25rem;
  --bs-card-spacer-y: 0.25rem;
  color: #000000;
}

.content .card .tab-content,
.content-embed .card .tab-content {
  background-color: #ffffff;
  border-radius: 10px;
}

/* SUPPLY CHAIN INTAKE FORM (wizard widget, /embed?widget=supply-chain-intake)
   ---------------------------------------------------------------------------
   Design tokens live on :root (all --sc- prefixed) so the wizard and the
   summary rows it shares with the admin moderation panel
   (R/mod_page_admin_supply_chain_review.R) resolve to one palette.

   Deliberately NOT built on Bootstrap's .card / .card-header / .row+.col:
   the `.content .card` and `.content-embed .card` rules above are two-class
   selectors that outrank any single-class rule written here, and .card-header
   force-uppercases its text. Every wizard surface therefore has a dedicated
   sc-* class, which is also what lets R/mod_supply_chain_intake.R carry no
   inline styles at all. */

:root {
  /* Deliberately NOT chained to --bs-primary. On the /embed route
     cityviz_container_headless() sets bs_theme(primary = ...) from
     config.yml's style$charts$palette[1] — a *chart* colour (#7eb0cc for this
     client), which gives white-on-primary a 2.3:1 contrast ratio and would
     make the Continue button fail WCAG AA. #1563a6 is 6.2:1; clients who want
     the wizard on-brand set --cv-primary-color to a UI-grade colour. */
  --sc-primary: var(--cv-primary-color, #1563a6);
  --sc-primary-dark: var(--cv-primary-dark-color, #0f4972);
  --sc-primary-tint: var(--cv-primary-tint-color, #eaf2f9);
  --sc-primary-tint-strong: var(--cv-primary-tint-strong-color, #d7e7f3);

  --sc-ink: #16283f;
  --sc-body: #3e4c59;
  --sc-muted: #6b7684;
  --sc-border: #dde3ea;
  --sc-border-strong: #c3ccd7;
  --sc-surface: #ffffff;
  --sc-surface-alt: #f7f9fb;

  --sc-private-bg: #fff8ef;
  --sc-private-border: #f6dcbc;
  --sc-private-ink: #a4530c;

  --sc-success-bg: #e3f6e9;
  --sc-success-ink: #1c7a45;

  --sc-radius-sm: 8px;
  --sc-radius: 12px;
  --sc-radius-lg: 18px;

  --sc-gap-x: 24px;
  --sc-gap-y: 20px;
}

/* --- Shell ---------------------------------------------------------------- */

.sc-intake-wizard {
  padding: 40px 44px 36px;
  background: var(--sc-surface);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-lg);
  box-shadow: 0 10px 34px rgba(22, 40, 63, 0.06);
  color: var(--sc-body);
}

.sc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Off-screen rather than display:none — some scrapers skip hidden fields.
   Keep in sync with the honeypot comment in R/mod_supply_chain_intake.R. */
.sc-intake-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.sc-intake-honeypot input {
  opacity: 0;
}

/* --- Stepper -------------------------------------------------------------- */

.sc-stepper {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
}

.sc-step {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
}

.sc-step:last-child {
  flex: 0 0 auto;
}

.sc-step-dot {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  background: var(--sc-surface);
  border: 1px solid var(--sc-border-strong);
  color: var(--sc-muted);
}

.sc-step.is-current .sc-step-dot,
.sc-step.is-done .sc-step-dot {
  background: var(--sc-primary);
  border-color: var(--sc-primary);
  color: #ffffff;
}

.sc-step-line {
  flex: 1 1 auto;
  height: 1px;
  margin: 0 10px;
  background: var(--sc-border-strong);
}

.sc-step.is-done .sc-step-line {
  background: var(--sc-primary);
  height: 2px;
}

/* --- Headings ------------------------------------------------------------- */

.sc-intake-wizard h3 {
  margin: 0 0 8px;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--sc-ink);
}

.sc-intake-lede {
  max-width: 74ch;
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--sc-muted);
}

/* --- Field grid ----------------------------------------------------------- */

/* Shiny ships `.shiny-input-container:not(.shiny-input-container-inline)
   { width: 300px }`, which would pin every control to 300px inside the
   wizard's 433px grid columns. Released here so the grid alone decides
   widths; the `:not()` mirrors Shiny's own selector so genuinely inline
   containers keep their behaviour. */
.sc-intake-wizard .shiny-input-container:not(.shiny-input-container-inline) {
  width: 100%;
  max-width: 100%;
}

.sc-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sc-gap-y) var(--sc-gap-x);
  align-items: start;
}

/* The `> .sc-* > .form-group` halves of these rules exist because Shiny gives
   a *visible* conditionalPanel `display: contents`: the wrapper drops out of
   the box tree and its child becomes the grid item, so placement set on the
   wrapper is silently ignored. Targeting both covers a plain control (class
   sits on the .form-group itself, inner selector matches nothing) and a
   wrapped one. */
.sc-field-grid > .sc-span-2,
.sc-field-grid > .sc-span-2 > .form-group {
  grid-column: 1 / -1;
}

/* Reserves a whole row but keeps the control at one column's width — used for
   descriptions and the HS6 pickers, which need their own row (so the next
   field doesn't flow into the empty cell beside them) without becoming
   uncomfortably wide input targets. Needs the .sc-intake-wizard prefix to
   outrank the max-width: 100% released above. */
.sc-intake-wizard .sc-field-grid > .sc-field-half,
.sc-intake-wizard .sc-field-grid > .sc-field-half > .form-group {
  grid-column: 1 / -1;
  max-width: calc(50% - (var(--sc-gap-x) / 2));
}

/* `gap` owns all spacing inside the grid, so zero out Bootstrap's per-control
   bottom margin (including controls nested in a conditionalPanel wrapper). */
.sc-field-grid > .form-group,
.sc-field-grid > * > .form-group,
.sc-intake-wizard .sc-field-grid .form-group {
  margin-bottom: 0;
}

/* --- Controls ------------------------------------------------------------- */

.sc-intake-wizard .control-label {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sc-ink);
}

/* The red asterisk from with_red_star() is appended straight onto the label
   text; give it breathing room without touching that app-wide helper. */
.sc-intake-wizard .control-label span span,
.sc-intake-wizard .sc-consent-title span span {
  margin-left: 4px;
}

.sc-intake-wizard .shiny-label-null {
  display: none;
}

/* Bare `select` is listed alongside .form-control because Shiny only tags
   *some* selects with it (a single-choice selectInput renders as plain
   `.shiny-input-select`). Selectize normally replaces these at runtime, so
   this is what the control looks like before/without that JS. */
.sc-intake-wizard select {
  display: block;
  width: 100%;
}

.sc-intake-wizard select,
.sc-intake-wizard .form-control,
.sc-intake-wizard .form-select,
.sc-intake-wizard .selectize-input {
  min-height: 46px;
  padding: 11px 14px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--sc-ink);
  background: var(--sc-surface);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-sm);
  box-shadow: none;
}

.sc-intake-wizard textarea.form-control {
  min-height: 92px;
  resize: vertical;
}

.sc-intake-wizard select[multiple] {
  min-height: 96px;
}

.sc-intake-wizard .form-control::placeholder,
.sc-intake-wizard .selectize-input > input::placeholder,
.sc-intake-wizard .selectize-control.single .selectize-input.has-placeholder > input {
  color: #9aa5b1;
  font-style: normal;
}

.sc-intake-wizard select:focus,
.sc-intake-wizard .form-control:focus,
.sc-intake-wizard .form-control:focus-visible,
.sc-intake-wizard .selectize-input.focus {
  border-color: var(--sc-primary) !important;
  box-shadow: 0 0 0 3px var(--sc-primary-tint);
  outline: none;
}

/* Selectize: re-skin the globally dark multi-select pills (see
   `.selectize-control.multi .selectize-input>div` above) as the light chips
   the wizard uses.

   Deliberately NOT `display: flex` on .selectize-input, tempting as it is for
   chip spacing: selectize sizes its typing <input> with an inline pixel width
   derived from a measurement span and assumes the default inline-block flow.
   Under flex that input collapses to ~4px, so what the user types is
   invisible. Chip spacing uses margins instead. */

/* HS6 labels run long ("350220 — Milk Albumin, Including Concentrates of Two
   or More Whey Proteins"); let the selected item wrap instead of overflowing
   its half-width control. */
.sc-intake-wizard .selectize-control.single .selectize-input > .item {
  max-width: 100%;
  white-space: normal;
}

.sc-intake-wizard .selectize-control.multi .selectize-input > div {
  margin: 0 6px 4px 0;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  background: var(--sc-primary-tint);
  color: var(--sc-primary-dark);
}

.sc-intake-wizard .selectize-control.plugin-remove_button .item .remove {
  margin: 0 8px;
  padding: 0 4px 0 8px;
  font-size: 15px;
  color: var(--sc-primary-dark);
  border-left: 1px solid var(--sc-primary-tint-strong) !important;
}

.sc-intake-wizard .selectize-dropdown {
  border-color: var(--sc-border);
  border-radius: var(--sc-radius-sm);
  box-shadow: 0 8px 20px rgba(22, 40, 63, 0.12);
}

/* Inline checkbox rows (service toggle, consent list) */
.sc-intake-wizard .checkbox,
.sc-intake-wizard .radio {
  margin: 0;
}

.sc-intake-wizard .checkbox label,
.sc-intake-wizard .radio label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--sc-body);
}

.sc-intake-wizard input[type="checkbox"],
.sc-intake-wizard input[type="radio"] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--sc-primary);
}

/* --- Consent list --------------------------------------------------------- */

.sc-consent-block {
  grid-column: 1 / -1;
  padding-top: 22px;
  border-top: 1px solid var(--sc-border);
}

.sc-consent-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sc-ink);
}

.sc-consent-help {
  margin: 0 0 16px;
  font-size: 13.5px;
  color: var(--sc-muted);
}

.sc-consent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px var(--sc-gap-x);
}

.sc-consent-grid .form-group {
  margin-bottom: 0;
}

.sc-consent-note {
  color: var(--sc-muted);
}

/* --- Icon choice grids (business type, geographic markets) ----------------- */

.sc-choice-grid .shiny-options-group {
  display: grid;
  /* 128px floor keeps all six geographic markets on one row at the wizard's
     980px max-width, and still leaves the five business types comfortable. */
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 12px;
}

.sc-intake-wizard .sc-choice-grid .radio label,
.sc-intake-wizard .sc-choice-grid .checkbox label {
  position: relative;
  display: block;
  height: 100%;
  padding: 18px 12px 16px;
  text-align: center;
  cursor: pointer;
  background: var(--sc-surface);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sc-intake-wizard .sc-choice-grid .radio label:hover,
.sc-intake-wizard .sc-choice-grid .checkbox label:hover {
  border-color: var(--sc-border-strong);
  background: var(--sc-surface-alt);
}

.sc-intake-wizard .sc-choice-grid input[type="radio"],
.sc-intake-wizard .sc-choice-grid input[type="checkbox"] {
  position: absolute;
  top: 12px;
  left: 12px;
  margin: 0;
}

/* Shiny wraps each choiceNames value in its own <span> — make that wrapper a
   block so the icon and label inside it stack. */
.sc-intake-wizard .sc-choice-grid label > span {
  display: block;
}

.sc-intake-wizard .sc-choice-grid label:has(input:checked) {
  border-color: var(--sc-primary);
  background: var(--sc-primary-tint);
  box-shadow: inset 0 0 0 1px var(--sc-primary);
}

.sc-intake-wizard .sc-choice-grid label:focus-within {
  box-shadow: 0 0 0 3px var(--sc-primary-tint);
}

.sc-choice-icon {
  display: block;
  margin-bottom: 10px;
  font-size: 22px;
  color: var(--sc-primary);
}

.sc-choice-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--sc-ink);
}

/* --- "Kept private" callout ----------------------------------------------- */

.sc-intake-private-box {
  grid-column: 1 / -1;
  padding: 18px 20px;
  background: var(--sc-private-bg);
  border: 1px solid var(--sc-private-border);
  border-radius: var(--sc-radius);
}

.sc-intake-private-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sc-private-ink);
}

/* --- Repeatable product / input cards -------------------------------------- */

.sc-intake-repeat-card {
  padding: 24px 26px 26px;
  margin-bottom: 18px;
  background: var(--sc-surface-alt);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
}

.sc-intake-repeat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.sc-intake-repeat-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sc-primary);
}

.sc-intake-remove-link,
.sc-intake-remove-link:hover,
.sc-intake-remove-link:focus {
  font-size: 13px;
  font-weight: 600;
  color: #b3261e;
  text-decoration: none;
}

.sc-intake-remove-link:hover {
  text-decoration: underline;
}

.btn.sc-intake-add-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-bottom: 4px;
  padding: 15px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sc-primary);
  background: var(--sc-primary-tint);
  border: 1.5px dashed var(--sc-primary);
  border-radius: var(--sc-radius);
}

.btn.sc-intake-add-card:hover,
.btn.sc-intake-add-card:focus {
  color: var(--sc-primary-dark);
  background: var(--sc-primary-tint-strong);
  border-color: var(--sc-primary-dark);
}

/* --- Footer / navigation buttons ------------------------------------------ */

.sc-intake-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--sc-border);
}

.btn.sc-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--sc-radius-sm);
}

.btn.sc-btn-primary,
.btn.sc-btn-primary:visited {
  color: #ffffff;
  background: var(--sc-primary);
  border-color: var(--sc-primary);
}

.btn.sc-btn-primary:hover,
.btn.sc-btn-primary:focus {
  color: #ffffff;
  background: var(--sc-primary-dark);
  border-color: var(--sc-primary-dark);
}

.btn.sc-btn-ghost,
.btn.sc-btn-ghost:visited {
  color: var(--sc-ink);
  background: var(--sc-surface);
  border-color: var(--sc-border-strong);
}

.btn.sc-btn-ghost:hover,
.btn.sc-btn-ghost:focus {
  color: var(--sc-ink);
  background: var(--sc-surface-alt);
  border-color: var(--sc-muted);
}

.btn.sc-btn:disabled,
.btn.sc-btn[disabled] {
  opacity: 0.6;
}

/* --- Review step ---------------------------------------------------------- */

.sc-summary-list {
  margin-bottom: 22px;
}

.sc-summary-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  margin-bottom: 12px;
  background: var(--sc-surface);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
}

.sc-summary-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--sc-primary);
  background: var(--sc-primary-tint);
  border-radius: 50%;
}

.sc-summary-title {
  flex: 0 0 200px;
  font-size: 16px;
  font-weight: 700;
  color: var(--sc-ink);
}

.sc-summary-body {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sc-body);
  overflow-wrap: anywhere;
}

.sc-summary-body p {
  margin: 0;
}

.sc-summary-body p + p {
  margin-top: 2px;
}

.sc-summary-empty {
  color: var(--sc-muted);
}

.sc-summary-edit,
.sc-summary-edit:visited {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sc-primary);
  text-decoration: none;
}

.sc-summary-edit:hover,
.sc-summary-edit:focus {
  color: var(--sc-primary-dark);
  text-decoration: underline;
}

.sc-intake-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #33506e;
  background: var(--sc-primary-tint);
  border: 1px solid var(--sc-primary-tint-strong);
  border-radius: var(--sc-radius-sm);
}

.sc-intake-note i {
  margin-top: 2px;
  color: var(--sc-primary);
}

/* --- Confirmation --------------------------------------------------------- */

.sc-intake-success {
  padding: 52px 20px 210px;
  text-align: center;
  background: url('img/supply-chain-skyline.svg') no-repeat center bottom;
  background-size: 100% auto;
}

.sc-intake-success-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: var(--sc-success-ink);
  background: var(--sc-success-bg);
  border-radius: 50%;
}

.sc-intake-success .sc-intake-lede {
  margin: 0 auto;
  max-width: 46ch;
}

/* --- Form footer ----------------------------------------------------------
   Sits outside .sc-intake-wizard (see mod_supply_chain_intake_ui), so it is
   rendered once and survives every step change rather than being re-emitted
   by each step's UI. cityviz_powered_by_without_logo() supplies the credit
   paragraph; the `p` reset below covers both it and the contact line. */

.sc-intake-form-footer {
  margin: 18px auto 0;
  padding: 14px 12px 4px;
  border-top: 1px solid var(--sc-border);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  color: var(--sc-muted);
}

.sc-intake-form-footer p {
  margin: 0 0 4px;
}

.sc-intake-form-footer a,
.sc-intake-form-footer a:link,
.sc-intake-form-footer a:visited {
  color: var(--sc-primary);
  text-decoration: underline;
}

.sc-intake-form-footer a:hover,
.sc-intake-form-footer a:focus {
  color: var(--sc-primary-dark);
}

/* --- Admin moderation queue (shares .sc-summary-card) ---------------------- */

.sc-status-badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
}

.sc-status-pending { background: #fff3df; color: #b86b00; }
.sc-status-approved { background: #e6f3ec; color: #2e8b57; }
.sc-status-rejected { background: #fdebea; color: #c0392b; }
.sc-status-needs_info { background: #eef2f6; color: #4d5a68; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 860px) {
  .sc-intake-wizard {
    margin: 0;
    padding: 26px 18px 28px;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .sc-intake-wizard h3 {
    font-size: 24px;
  }

  .sc-field-grid,
  .sc-consent-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-intake-wizard .sc-field-grid > .sc-field-half,
  .sc-intake-wizard .sc-field-grid > .sc-field-half > .form-group {
    max-width: 100%;
  }

  .sc-intake-repeat-card {
    padding: 18px 16px 20px;
  }

  .sc-step-dot {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .sc-step-line {
    margin: 0 5px;
  }

  .sc-summary-card {
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  .sc-summary-title {
    flex: 1 1 auto;
  }

  .sc-summary-body {
    flex: 1 1 100%;
    order: 3;
  }

  .sc-intake-success {
    padding-bottom: 150px;
  }
}

@media (max-width: 560px) {
  .sc-intake-footer {
    gap: 10px;
  }

  .btn.sc-btn {
    padding: 12px 16px;
  }
}

/* VALUE BOXES */
.content .bslib-value-box.bg-primary,
.content-embed .bslib-value-box.bg-primary {
  background-color: #ffffff;
}

.content .bslib-value-box .value-box-area,
.content-embed .bslib-value-box .value-box-area {
  padding: 0.5rem 1rem;
  font-weight: 300;
}

.content .bslib-value-box .value-box-title,
.content-embed .bslib-value-box .value-box-title {
  margin-bottom: 0;
}

.content .bslib-value-box .value-box-area>:nth-child(2),
.content-embed .bslib-value-box .value-box-area>:nth-child(2) {
  /*font-size: calc(1.325rem + .9vw);*/
  font-size: 1.325rem;
  margin-bottom: 0.5rem;
  margin-top: 0.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--bs-heading-color);
  color: inherit;
}

.content .value-box-showcase,
.content-embed .value-box-showcase {
  background-color: #ffb249;
  font-weight: 700;
  font-size: 1.2rem;
  border-radius: 0.67rem;
}

.content-embed footer {
  background-color: transparent;
  color: #3E4C59;
  padding: 7px 0 0;
  text-align: right;
  font-size: 0.75rem;
}

.content-embed footer a {
  color: var(--cv-link-color);
  font-weight: 700;
}

.content-embed footer a:hover {
  color: var(--cv-link-hover-color);
}

/* REFERENCES */
.references {
  padding: 1rem 0;
  font-size: 1rem;
}

.references p {
  margin-bottom: 0.4rem;
}

/* BROADBAND */
.broadband-popup-container {
  width: 250px;
}

.broadband-popup-container h3 {
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  text-transform: none;
  font-family: Roboto, sans-serif;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #3E4C59;
}

.broadband-popup-container tr {
  border-bottom: 1px solid #CBD2D9;
  text-align: center;
}

.broadband-popup-container tr td {
  padding: 10px 0 0;
}

.leaflet-popup-content .broadband-popup-container p {
  margin: 5px 0;
  padding: 0 5px;
  font-weight: 400;
}

.broadband-popup-container li {
  list-style-type: none;
  text-align: left;
}

.broadband-popup-container table.broadband-popup img {
  width: 20px;
}

/* Rounded corners */
div.js-plotly-plot > div > div > svg > g.infolayer > g.legend,
div.js-plotly-plot > div > div > svg > g.cartesianlayer > g > g.plot > g.barlayer > g > g > path,
div.js-plotly-plot > div > div > svg > g.cartesianlayer > g > g.plot > g.scatterlayer > g > g.lines > path,
div.js-plotly-plot > div > div > svg > g.cartesianlayer > g > g.plot > g.barlayer > g > g > g > path,
div.js-plotly-plot > div > div > svg > g.cartesianlayer > g > g.plot > g.waterfalllayer > g > g > g > path,
div.js-plotly-plot > div > div > svg > g.treemaplayer > g > g > path,
div.js-plotly-plot > div > div > svg > g.indicatorlayer > g > g.bullet > g > rect,
div.js-plotly-plot > div > div > svg > g.sankey > g.sankey-node-set > g.sankey-node rect {
  clip-path: inset(1px 1px 1px 1px round 4px);
}

div.js-plotly-plot > div > div > svg > g.infolayer > g.legend g.scrollbox > g > g > g > g > g > path {
  clip-path: inset(1px 1px 1px 1px round 2px);
}

div.js-plotly-plot > div > div > svg > g.hoverlayer > g.hovertext > path {
  clip-path: inset(0% 0% 0% 0% round 4px);
}

.bslib-sidebar-layout {
  border: none;
}

.bslib-sidebar-layout>.main {
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0;
}

.bslib-sidebar-layout > .sidebar {
  height: calc(100vh - 200px);
  overflow-y: auto;
}

.bslib-sidebar-layout>.collapse-toggle {
  bottom: calc(100vh - 220px);
}

/* MAP PANELS */
.widget .row.explore-widget {
  margin-left: 0;
  margin-right: 0;
}

.panel-controls {
  z-index: 1450;
/*  width: auto;
  max-width: 500px;*/
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  font-family: din-2014, Arial, sans-serif;
  font-size: 14px;
}

#panel-explore {
  font-family: din-2014, Arial, sans-serif;
  position: relative;
  z-index: 3;
}

.panel-controls.dropdown-open {
  max-height: none !important;
  overflow-y: visible !important;
}

.panel-controls .selectize-dropdown-content {
  max-height: none;
  overflow-y: visible;
}

/* Dynamic positioning for widget vs page context */
.panel-controls-widget {
  top: 10px;
}

.panel-controls-page {
  /* Position below the navbar - uses calc to account for navbar height */
  top: calc(var(--navbar-height, 120px) + 10px);
}

/* Fallback for when navbar height is not set */
@supports not (top: calc(var(--navbar-height) + 10px)) {
  .panel-controls-page {
    top: 130px;
  }
}

#panel-filters {
  min-width: 250px;
  max-width: 305px;
  padding: 10px 0 10px 20px;
}

#panel-explore h1, #panel-explore h2, #panel-explore h3, #panel-explore h4, #panel-explore h5, #panel-explore h6 {
  font-family: din-2014, Arial, sans-serif;
  margin-bottom: 0;
}

#panel-filters label.control-label {
  font-size: 14px;
  margin-top: 0;
}

#panel-filters .shiny-input-container {
  margin-bottom: 2px;
}

#panel-filters .shiny-input-checkboxgroup {
  margin-bottom: 0;
}

#panel-filters p {
  font-size: 0.75rem;
  margin-bottom: 0.875rem;
  margin-left: 1.5rem;
}

#panel-filters hr {
  margin: 10px 0;
}

#panel-filters .filters-toggle {
  text-align: center;
  padding: 4px 0;
}

#panel-filters .filters-toggle a {
  font-size: 13px;
  color: #52606D;
  text-decoration: none;
  cursor: pointer;
}

#panel-filters .filters-toggle a:hover {
  color: #1F2933;
  text-decoration: underline;
}

#panel-filters .filters-toggle a + a {
  margin-left: 12px;
}

.panel-controls label.control-label {
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 0;
  font-family: din-2014, Arial, sans-serif;
  margin-top: 7px;
}

.panel-controls a.btn::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 15px;
  display: inline-block;
  width: 0;
  height: 0;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--bs-btn-color);
  border-bottom: 0 dotted;
  border-left: 7px solid transparent;
}

.panel-controls a.btn.collapsed::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 12px;
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-left: 7px solid var(--bs-btn-color);
  border-right: 0 dotted;
  border-bottom: 7px solid transparent;
}

/* Tighten layer toggle spacing in map sidebars */
.panel-controls .shiny-input-container {
  margin-bottom: 0;
}
.panel-controls .pretty {
  margin-bottom: 0;
}
.panel-controls .radio label,
.panel-controls .shiny-input-radiogroup .radio {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 1px;
  padding-bottom: 1px;
  font-family: din-2014, Arial, sans-serif;
  font-size: 14px;
}
.panel-controls .selectize-input {
  font-size: 14px;
  font-weight: 700;
  padding: 4px 8px;
  min-height: unset;
}

.panel-chart {
  z-index: 1500;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

.panel-chart h4, .panel-chart h5 {
  /*margin-left: 50px;*/
}

#panel-chart {
  padding: 0 20px 20px;
}

.panel-footer {
  margin-left: auto;
  margin-right: auto;
  border: none;
  padding-bottom: 0;
  font-size: 12px;
  padding: 5px 0 0;
  background-color: #efeded;
  text-align: center;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  transform: translateX(-50%);
  z-index: 1000;
}

.panel-footer .row.powered-by {
  margin-left: 0;
  margin-right: 0;
}

.panel-footer .powered-by p, p.powered-by-no-logo {
  margin-bottom: 0px;
}

a.cityviz-logo-text {
  color: #FF7676;
  font-size: 14px;
  font-family: din-2014, sans-serif;
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.5px;
}

#panel-filters .options {
  padding-left: 20px;
  margin-top: -10px;
}

#panel-filters .pretty .state label {
  font-weight: 500;
}

.pretty.p-bigger label {
  text-indent: 2em;
}

.pretty.p-icon input:checked~.state .icon {
  opacity: 1;
  /*
  border: none;
  font-size: 22px;
  top: -4px;
  left: -2px;
  */
}

.content-embed .pretty.p-round.p-icon .state .icon:before {
  -webkit-transform: scale(.6);
  -ms-transform: scale(.6);
  transform: scale(.6);
}

#panel-filters #chart-driving_times .pretty input,
#panel-filters #chart-driving_times .pretty i {
  color: #377eb8;
}

#panel-filters #chart-flights .pretty input,
#panel-filters #chart-flights .pretty i {
  color: #984ea3;
}

#panel-filters #chart-railway .pretty input,
#panel-filters #chart-railway .pretty i {
  color: #e41a1c;
}

#panel-filters #chart-ports .pretty input,
#panel-filters #chart-ports .pretty i {
  color: #ff7f00;
}

#chart-toggle_animation {
  font-size: 0.875rem;
}

.leaflet .info {
  padding: 20px 20px 10px;
  font: 11px/18px Arial, sans-serif;
  color: #333;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

.leaflet .legend svg text {
  fill: #121212;
}

.leaflet-control label {
  font-size: 12px;
  font-weight: 400;
  color: #121212;
  margin-left: 3px;
}

.legend i {
  margin-bottom: 10px;
  border-radius: 10px;
}

hr {
  margin-bottom: 10px;
}

.edd-tooltip {
  font-size: 18px;
}

table.dataTable.edd-table thead th {
  font-weight: 400;
  font-size: 14px;
}

table.dataTable.edd-table>thead>tr>th, table.dataTable>thead>tr>td {
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
}

table.dataTable.edd-table td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.edd-calculator .well {
  margin-bottom: 15px;
}

.edd-calculator h3 {
  margin-top: 5px;
  padding-top: 0;
  padding-bottom: 0;
}

.edd-economic-strategy .selectize-input>*, .edd-calculator .selectize-input>*, .edd-calculator input[type=number] {
  font-weight: 700;
}

.edd-economic-strategy .accordion-button {
  font-weight: 700;
  border-bottom: 1px solid #ccc;
}

.edd-economic-strategy .accordion-button.collapsed {
  background-color: #e6e6e6;
}

.dataTable td {
  font-size: 0.875rem;
}

.tabbable .nav-link {
  background-color: #e6e6e6;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

.tabbable .nav-link.active {
  background-color: #ffffff;
}

/* STORYTELLING ********************* */

.story-key-insights h4 {
  margin-top: 25px;
}

.story-key-insights ul {
  list-style-type: none;
  display: flex;
  gap: 25px;
  padding: 1rem 4rem 0 0;
}

.story-key-insights ul li {
  background-color: #f6f9fc;
  padding: 2rem;
  border-radius: 10px;
}

.scrolly-graph {
  padding-top: 75px;
  padding-left: 50px;
  position: sticky;
  top: 75px;
  align-self: flex-start;
}

.scrolly-graph figcaption {
  margin-bottom: 50px;
}

.scrolly-sections {
  padding-top: 75px;
}

.scrolly-sections h4 {
  margin-bottom: 20px;
  font-weight: 700;
  line-height: 2rem;
}

.scrolly-sections .section:last-child,
.scrolly-sections > div:last-child,
.scrolly-sections > *:last-child {
  padding-bottom: 50vh !important;
  min-height: 40vh !important;
}

.scrolly-container {
  margin-bottom: 150px;
  padding-bottom: 50px;
}

.scrolly-container::after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.story-widget .nav>li {
  border-bottom: 1px solid #e6e6e6;
}
.story-widget .nav>li {
  border: 1px solid #d4d4d4;
  border-bottom: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.story-widget .nav>li>a {
  font-size: 15px;
  font-weight: 400;
  padding-right: 15px;
  padding-left: 15px;
}

.story-chart {
  padding-top: 50px;
}

.story-text {
  padding: 30px 50px 0;
}

.story-text h4 {
  margin-bottom: 20px;
  font-weight: 700;
  line-height: 2rem;
}

.scroll-container .section h2 {
  font-size: 1.5rem;
  line-height: 1.5;
}

#local-employment-map .nav-link,
#scrolly-map-nav .nav-link {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #696969;
}

/* Mapbox maps */
.mapbox-light {
  border: 1px solid #d2d2d2;
  border-radius: 5px;
}

.tour-map {
  color: #e9eff2;
}

.tour-map h1,
.tour-map h2,
.tour-map h3,
.tour-map h4,
.tour-map h5,
.tour-map h6 {
  color: #ffffff;
}

.tour-map h2,
.tour-map h3.slide-title {
  font-weight: 700;
  text-align: center;
  margin-top: -5px;
  margin-bottom: 25px;
  color: #b8cdd4;
}

.tour-map .slide-description {
  margin-bottom: 15px;
}

.tour-map .slide-meta {
  margin-bottom: 0;
}

.tour-map .section-panel ul li {
  margin-bottom: 15px;
}

.tour-map .section-panel img {
  padding-bottom: 20px;
}

.tour-map .section-panel a {
  color: #dde7ea;
  text-decoration: underline;
}

.tour-map .section-panel a:hover {
  color: #c4d5db;
}

.tour-map .section-panel span.p-icon {
  margin-right: 5px;
  font-size: 19px;
}

.tour-map .logo {
  background: rgba(255, 255, 255, 0.5);
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 5px;
}

.map-panel-footer {
  margin-left: auto;
  margin-right: auto;
  transform: translate(-50%, 0);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: 1px solid #c6c6c6;
  border-bottom: none;
  padding-bottom: 0;
  font-size: 12px;
  padding: 10px 15px 0;
  background-color: rgba(255, 255, 255, 0.5);
  border-top: 1px solid #ddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  text-align: center;
  /*opacity: 75%;*/
  min-width: 360px;
}

.map-panel-footer .row.powered-by {
  margin-left: 20px;
  margin-right: 20px;
}

.map-panel-footer .powered-by p {
  margin-bottom: 7px;
  color: #024873;
  font-size: 14px;
  font-weight: 400;
}

.map-panel-footer .powered-by p a {
  margin-bottom: 7px;
  color: #FF7676;
  font-weight: 700;
}

/*
.scroll-top {
  position: fixed;
  bottom: 20px;
  right: 50%;
  z-index: 1000;
  cursor: pointer;
  background: rgba(255,255,255,0.5);
  padding: 10px 15px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  font-size: 13px;
}
*/

.modal-dialog {
  margin-top: 100px;
}

.modal-header {
  padding-top: 0;
  padding-bottom: 0;
}

.modal-footer {
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  padding-top: 0;
}

/* Announcement Modal Styles */
.announcement-modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.announcement-modal-intro {
  margin-bottom: 20px;
}

.announcement-modal-intro p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.announcement-modal-content-box {
  background: #f8f9fa;
  border-left: 4px solid #0d6efd;
  padding: 16px 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.announcement-modal-content-box ul {
  margin: 0;
  padding-left: 20px;
  line-height: 1.8;
}
/*
.announcement-modal-tip {
  display: flex;
  align-items: center;
  gap: 8px;
}
*/

/* Data sources collapsible section */
.data-sources-caret {
  margin-right: 6px;
  transition: transform 0.2s ease;
}

/* Rotate caret when expanded */
a[aria-expanded="true"] .data-sources-caret {
  transform: rotate(90deg);
}

/* ============================================================
   Retail Grocery Widget — Scrollspy TOC Sidebar
   ============================================================ */

.retail-grocery-toc {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 8px 0;
}

.retail-grocery-toc-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6c757d;
  padding: 0 12px 8px;
  margin: 0;
}

.retail-grocery-toc .nav-link {
  font-size: 13px;
  color: #495057;
  padding: 4px 12px;
  border-radius: 4px;
  line-height: 1.4;
  white-space: normal;
}

.retail-grocery-toc .nav-link:hover {
  color: #893448;
  background-color: transparent;
}

.retail-grocery-toc .nav-link.active {
  color: #893448;
  background-color: rgba(137, 52, 72, 0.08);
  font-weight: 600;
}

/* ============================================================
   Business Directory — Search Feature
   ============================================================ */

.bd-or-divider {
  text-align: center;
  font-size: 0.8rem;
  color: #9aa5b1;
  margin: 8px 0;
  letter-spacing: 0.05em;
}

.bd-result-summary {
  font-size: 0.875rem;
  color: #495057;
  margin-top: 8px;
  margin-bottom: 4px;
}

.bd-no-results {
  font-size: 0.875rem;
  color: #6c757d;
  margin-top: 8px;
  font-style: italic;
}

.bd-result-list {
  max-height: 300px;
  overflow-y: auto;
  margin-top: 8px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}

.bd-result-item {
  cursor: pointer;
  padding: 8px 12px;
  border-bottom: 1px solid #E4E7EB;
  font-size: 0.875rem;
  line-height: 1.4;
}

.bd-result-item:last-child {
  border-bottom: none;
}

.bd-result-item:hover {
  background-color: #f5f7fa;
}

/* Commercial listings panel on custom map widget */
.cm-listings-panel {
  background: rgba(255, 255, 255, 0.96) !important;
}
.cm-listings-item:hover {
  background-color: #f5f7fa;
}

/* Custom map widget — flex row with listings sidebar */
.cm-map-wrapper {
  position: relative;
}
.cm-listings-sidebar {
  width: 340px;
  flex-shrink: 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}
.cm-listings-sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.cm-listings-header {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fafbfc;
}
.cm-listings-filters {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  background: #fafbfc;
}
.cm-listings-filters .form-group {
  margin-bottom: 8px;
}
.cm-listings-filters label {
  font-size: 13px;
  font-weight: 600;
  color: #555;
  margin-bottom: 2px;
}
.cm-listings-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 6px;
}
.cm-listings-detail-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #893448;
  text-decoration: none;
}
.cm-listings-detail-link:hover {
  text-decoration: underline;
}

/* Map popup — remove default Mapbox/Maplibre container chrome */
.mapboxgl-popup-content,
.maplibregl-popup-content {
  padding: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  border-radius: 8px;
}

.mapboxgl-popup,
.maplibregl-popup {
  z-index: 10 !important;
}

.mapboxgl-popup-close-button,
.maplibregl-popup-close-button {
  right: 6px !important;
  top: 6px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.28) !important;
  color: #fff !important;
  font-size: 15px !important;
  line-height: 22px !important;
  text-align: center !important;
  padding: 0 !important;
  z-index: 10;
  border: none !important;
}

.mapboxgl-popup-close-button:hover,
.maplibregl-popup-close-button:hover {
  background: rgba(0, 0, 0, 0.50) !important;
  color: #fff !important;
}

/* Shared popup card */
.cv-popup {
  border-radius: 8px;
  overflow: hidden;
  min-width: 200px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  background: #ffffff;
}

.cv-popup-header {
  padding: 10px 32px 10px 12px;
  display: flex;
  align-items: center;
}

.cv-popup-icon {
  font-size: 18px;
  margin-right: 10px;
  flex-shrink: 0;
}

.cv-popup-title {
  font-size: 15px;
}

.cv-popup-body {
  padding: 10px 12px;
  background: #ffffff;
  color: #333333;
  font-size: 13px;
}

.cv-popup-body-scroll {
  max-height: 300px;
  overflow-y: auto;
}

.cv-popup-field {
  margin-bottom: 4px;
}

.cv-popup-footer {
  margin-top: 8px;
  font-size: 11px;
  color: #7B8794;
  font-style: italic;
}

.cv-popup-card {
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 8px;
  background: #ffffff;
}

.cv-popup-card:last-child {
  margin-bottom: 0;
}

.cv-popup-card-title {
  font-weight: bold;
  margin-bottom: 4px;
}

.cv-popup-origin {
  padding: 10px 32px 10px 12px;
  border-radius: 8px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: bold;
  text-align: center;
}

/* ==========================================================================
   Supply Chain Map — redesigned filter accordion + floating profile card
   ========================================================================== */

/* Accordion group titles: bold label with a muted one-line summary below. */
.sc-filters-accordion .accordion-button { flex-wrap: wrap; }
.sc-acc-title { display: flex; flex-direction: column; line-height: 1.25; }
.sc-acc-title-label { font-weight: 600; }
.sc-acc-title-summary,
.sc-acc-summary-text { font-size: 11px; color: #8a8a8a; font-weight: 400; }
.sc-help { font-size: 11px; color: #999; margin: -8px 0 10px; }

/* Active-filter chips */
.sc-active-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0;
}
.sc-active-filters-label {
  font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: .03em;
}
.sc-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #eef2f5; border: 1px solid #dde3e8; border-radius: 14px;
  padding: 2px 8px; font-size: 12px; color: #334455;
}
.sc-chip-x { color: #8899aa; text-decoration: none; font-size: 14px; line-height: 1; }
.sc-chip-x:hover { color: #c0392b; text-decoration: none; }
.sc-filter-actions {
  display: flex; justify-content: space-between; align-items: center; margin-top: 8px;
}

/* Map container + floating profile card overlay */
.sc-map-wrap { position: relative; height: calc(100vh - 300px); }
.sc-profile-overlay {
  position: absolute; top: 12px; right: 12px;
  width: 340px; max-width: calc(100% - 24px); z-index: 5;
  pointer-events: none;                 /* transparent to map drags when empty */
}
.sc-profile-card {
  pointer-events: auto; position: relative;
  background: #fff; border: 1px solid #e2e2e2; border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  padding: 14px 16px 12px; max-height: calc(100vh - 340px); overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.sc-profile-close {
  position: absolute; top: 8px; right: 10px; border: 0; background: transparent;
  font-size: 20px; line-height: 1; color: #999; cursor: pointer; padding: 0;
}
.sc-profile-close:hover { color: #333; }
.sc-profile-head {
  display: flex; align-items: center; gap: 8px; padding-right: 22px; flex-wrap: wrap;
}
.sc-profile-loc,
.sc-profile-industry { color: #666; font-size: 13px; margin: 4px 0; }
.sc-profile-loc i,
.sc-profile-industry i { color: #99a3ad; }
.sc-links-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.sc-links-sep { color: #ccc; }
.sc-shortlist-btn { text-decoration: none; }

/* Role badge */
.sc-role-badge {
  display: inline-block; border-radius: 12px; padding: 2px 10px;
  font-size: 12px; font-weight: 600;
}
.sc-role-supplier { background: #eaf6ef; color: #2E8B57; }
.sc-role-customer { background: #e8f1fb; color: #2E6DA4; }
.sc-role-both     { background: #eef0f2; color: #556; }

/* Local-content gauge scorecard */
.sc-scorecard { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.sc-gauge { flex-shrink: 0; }
.sc-scorecard-label { font-size: 12px; color: #666; }
.sc-scorecard-sub { font-size: 12px; color: #666; }

/* Sole-source risk badge */
.sc-risk-badge {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 14px;
  padding: 3px 10px; font-size: 12px; font-weight: 600; margin: 2px 0 10px;
}
.sc-risk-low      { background: #eaf6ef; color: #2E8B57; }
.sc-risk-moderate { background: #fff7e6; color: #E07A30; }
.sc-risk-high     { background: #fdecea; color: #C0392B; }
.sc-risk-count { font-weight: 400; color: #666; }

/* External evidence pills */
.sc-evidence-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.sc-evidence-pill {
  display: inline-block; background: #eef2f5; border-radius: 12px;
  padding: 3px 9px; font-size: 11px; color: #334455;
}
.sc-view-all { font-size: 12px; }

/* Empty-state map hint (bottom-right) */
.sc-map-hint {
  position: absolute; bottom: 14px; right: 14px; z-index: 4; max-width: 280px;
  background: rgba(255, 255, 255, .96); border: 1px solid #e2e2e2;
  border-radius: 8px; padding: 8px 12px; font-size: 12px; color: #555;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.sc-map-hint i { color: #99a3ad; }

/* Key Insights tab — dashboard card system. Height-matched to .sc-map-wrap
   (calc(100vh - 300px)) with internal scroll so the tab never reports a
   different height than the Map tab to the embed iframe-resizer. */
.sc-insights-wrap {
  height: calc(100vh - 300px);
  overflow-y: auto;
  padding-right: 4px;
}

/* Directory tab — height-matched to .sc-map-wrap / .sc-insights-wrap so the
   tab never reports a different height than Map/Key Insights to the embed
   iframe-resizer. */
.sc-directory-wrap {
  height: calc(100vh - 300px);
  overflow-y: auto;
  padding-right: 4px;
}
.sc-insights-card {
  border: 1px solid #e6e6e6; border-radius: 10px;
  padding: 16px 18px; background: #fff; height: 100%;
}
.sc-insights-card h5 { font-size: 13px; font-weight: 600; color: #1d2733; margin-bottom: 10px; margin-top: 0; }
.sc-insights-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: #e5f1fb; color: #2E86AB; font-size: 16px;
}

/* Headline summary card */
.sc-insights-headline { display: flex; gap: 14px; align-items: flex-start; }
.sc-insights-headline-title { font-weight: 600; font-size: 14px; color: #1d2733; margin-bottom: 4px; }
.sc-insights-headline-text { font-size: 13px; color: #555; line-height: 1.45; }

/* Trade exposure card */
.sc-insights-trade-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14px; color: #1d2733; margin-bottom: 10px;
}
.sc-insights-trade-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.sc-insights-pill {
  flex: 1; min-width: 110px; background: #f4f6f8; border-radius: 20px;
  padding: 8px 14px; display: flex; align-items: baseline; justify-content: center; gap: 6px;
}
.sc-insights-pill-label { font-size: 12px; color: #555; }
.sc-insights-pill-value { font-size: 14px; font-weight: 700; color: #1d2733; }
.sc-insights-trade-caption { font-size: 11px; color: #888; margin: 0; }

/* KPI tile row */
.sc-insights-kpi-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 18px; }
.sc-insights-kpi {
  flex: 1; min-width: 160px; border: 1px solid #e6e6e6; border-radius: 10px;
  padding: 12px 14px; display: flex; align-items: center; gap: 10px; background: #fff;
}
.sc-insights-kpi-value { font-size: 22px; font-weight: 700; color: #1d2733; line-height: 1.1; }
.sc-insights-kpi-label { font-size: 11px; color: #657386; margin-top: 2px; }

/* Chart panels (Significant clusters / NAICS subsector / Top industries served) */
.sc-insights-chart-split { display: flex; gap: 10px; align-items: stretch; }
.sc-insights-chart-area { flex: 1 1 62%; min-width: 0; }
.sc-insights-callout {
  flex: 1 1 34%; border: 1px solid #eef2f5; border-radius: 8px; background: #f8fafb;
  padding: 12px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
}
.sc-insights-callout i { color: #2E86AB; font-size: 16px; margin-bottom: 6px; }
.sc-insights-callout-label { font-size: 11px; color: #657386; margin-bottom: 4px; }
.sc-insights-callout-name { font-weight: 600; font-size: 12px; color: #1d2733; margin-bottom: 2px; }
.sc-insights-callout-value { font-size: 20px; font-weight: 700; color: #2E86AB; line-height: 1.1; }
.sc-insights-callout-unit { font-size: 11px; color: #888; }
.sc-insights-callout-sub { font-size: 11px; color: #888; margin-top: 4px; }

/* Sub-region stat grid */
.sc-insights-subregion-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sc-insights-subregion-card {
  border-left: 4px solid #2E86AB; background: #f8f8f8; border-radius: 6px; padding: 12px 14px;
}
.sc-insights-subregion-value { font-size: 22px; font-weight: 700; color: #2E86AB; }
.sc-insights-subregion-label { font-size: 12px; color: #555; margin-top: 2px; }

/* Stakeholder cards */
.sc-insights-stake-row { display: flex; flex-wrap: wrap; gap: 10px; }
.sc-insights-stake-card {
  flex: 1; min-width: 150px; border: 1px solid #eee; border-radius: 8px;
  padding: 12px 14px; background: #fff;
}
.sc-insights-stake-title { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.sc-insights-stake-title i { color: #2E86AB; }
.sc-insights-stake-card ul { margin: 0; padding-left: 16px; font-size: 12px; color: #444; }

.sc-insights-footer { font-size: 11px; color: #999; margin-top: 14px; text-align: center; }

/* Supply Gaps & Opportunities — redesigned KPI row, chart/callout row,
   opportunity table, and right-anchored material drawer. */

.sc-gap-kpi-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 18px; }
.sc-gap-kpi {
  flex: 1; min-width: 190px; border: 1px solid #e6e6e6; border-radius: 10px;
  padding: 14px 16px; background: #fff; display: flex; flex-direction: column;
}
.sc-gap-kpi-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.sc-gap-kpi-header { font-size: 12px; font-weight: 600; color: #4d5a68; line-height: 1.3; }
.sc-gap-kpi-icon { color: #2E86AB; font-size: 15px; flex-shrink: 0; }
.sc-gap-kpi-value { font-size: 22px; font-weight: 700; color: #1d2733; margin-top: 8px; line-height: 1.1; }
.sc-gap-kpi-unit { font-size: 11px; color: #657386; margin-top: 2px; }
.sc-gap-kpi-sub { font-size: 12px; color: #657386; margin-top: 4px; }
.sc-gap-kpi-action { padding-left: 0; margin-top: 6px; align-self: flex-start; }

.sc-gap-callout-col { flex: 1 1 34%; min-width: 260px; }
.sc-gap-checklist { list-style: none; margin: 0 0 10px; padding: 0; font-size: 12px; color: #444; }
.sc-gap-checklist li { position: relative; padding-left: 20px; margin-bottom: 8px; line-height: 1.4; }
.sc-gap-checklist li::before {
  content: "\2713"; position: absolute; left: 0; top: 0; color: #1f77b4; font-weight: 700;
}
.sc-gap-callout-note {
  font-size: 12px; color: #1d2733; background: #eaf3fb; border-radius: 8px;
  padding: 10px 12px;
}
.sc-gap-callout-note i { color: #2E86AB; margin-right: 4px; }

.sc-gap-table-card {
  border: 1px solid #e6e6e6; border-radius: 10px; padding: 14px 16px 6px; background: #fff;
}
.sc-gap-table-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-bottom: 10px; }
.sc-gap-table-toolbar .dataTables_filter input {
  border: 1px solid #dde3e8; border-radius: 6px; padding: 4px 8px; font-size: 13px;
}
.sc-gap-table-toolbar .dataTables_length select {
  border: 1px solid #dde3e8; border-radius: 6px; padding: 2px 6px; font-size: 13px;
}
.sc-gap-table-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-top: 8px; }
.sc-gap-table-footer .dataTables_paginate .paginate_button {
  border-radius: 6px; padding: 3px 9px;
}
.sc-gap-table-hint {
  margin-top: 4px; padding: 10px 12px; background: #f4f9fd; border-left: 4px solid #1f77b4;
  font-size: 12px; color: #4d5a68;
}
.sc-gap-table-hint i { color: #2E86AB; margin-right: 4px; }
.sc-star-cell { cursor: pointer; font-size: 15px; color: #c7cdd4; }
.sc-star-cell.is-starred { color: #f0a500; }

.sc-gap-drawer {
  position: fixed; right: 0; width: 420px; max-width: 92vw;
  top: var(--navbar-height, 120px);
  height: calc(100vh - var(--navbar-height, 120px));
  background: #fff; box-shadow: -4px 0 24px rgba(0, 0, 0, .18); z-index: 1040;
  overflow-y: auto; padding: 20px 22px 16px;
}
/* Fallback for when navbar height is not set */
@supports not (top: var(--navbar-height, 120px)) {
  .sc-gap-drawer { top: 130px; height: calc(100vh - 130px); }
}
.sc-gap-drawer-close {
  position: absolute; top: 10px; right: 12px; border: 0; background: transparent;
  font-size: 20px; line-height: 1; color: #999; cursor: pointer; padding: 0;
}
.sc-gap-drawer-close:hover { color: #333; }
.sc-gap-drawer-footer {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid #eee;
}

/* User menu dropdown — hide Bootstrap caret */
.user-menu-toggle::after {
  display: none;
}