:root {
  --default-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  --bg-secondary: #f5f5f5;
  --theme-foreground-focus: oklch(0.712564 0.257662 265.758);
  --sans-serif: -apple-system, BlinkMacSystemFont, "avenir next", avenir, helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
  --theme-background-gradient: radial-gradient(circle at 0% -10%, #7277fd22 10%, transparent 73.05%), radial-gradient(circle at 115% 123%, #ff4d4d29 20%, transparent 51.05%);
  --animation-time: 0.1s;
  --animation-easing: ease-in;
  --animations: var(--animation-time) var(--animation-easing);
  --gradient-1-bg: linear-gradient(to right, #556270 0%, #FF6B6B 51%, #556270 100%);
  --gradient-1-fg: white;
  --gradient-2-bg: linear-gradient(to right, #314755 0%, #26a0da 51%, #314755 100%);
  --gradient-2-fg: white;
  --gradient-3-bg: linear-gradient(to right, #314755 0%, #16d19f 51%, #314755 100%);
  --gradient-3-fg: white;
  --gradient-4-bg: linear-gradient(to right, #314755 0%, #caa42f 51%, #314755 100%);
  --gradient-4-fg: white;
  --active-tab-border-bottom-size: 0.3rem;
  --active-tab-border-bottom-style: solid #3498db; }

* {
  font-family: var(--sans-serif); }

html,
body {
  min-height: 100vh;
  overflow: visible;
  position: relative;
  display: block; }

body {
  font-family: var(--sans-serif);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image: var(--theme-background-gradient);
  background-size: cover;
  background-repeat: no-repeat;
  /* color: var(--theme-foreground); */
  /* background: none; */ }

nav.navbar {
  background-color: var(--bs-body-bg) !important;
  /* box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; */
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
  /* box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; */
  padding: 0.6rem; }

.navbar-nav {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  justify-items: center; }

.hero h1 {
  padding: 0.1rem 0;
  max-width: none;
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(30deg, var(--theme-foreground-focus), currentColor);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; }

#app-container {
  position: relative;
  display: block; }

#main-container {
  position: relative;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: row;
  background: transparent;
  padding: 1rem 0.5rem 10rem 0.5rem;
  /* background-color: var(--bg-secondary); */
  /* background-image: var(--theme-background-gradient); */ }

#filters-container {
  position: relative;
  max-width: 50rem;
  flex: 0 1 35%;
  display: flex;
  flex-direction: column;
  min-width: 25rem;
  gap: 1rem;
  padding: 1rem;
  /* background-color: var(--bs-body-bg) !important; */ }

#dashboard-content {
  padding: 1rem;
  position: relative;
  flex: 1 0 70%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.2rem;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: flex-start;
  justify-items: flex-start; }
  #dashboard-content > * {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    justify-items: flex-start;
    flex-direction: column;
    /* height: 100% */ }
  #dashboard-content .active-filters-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; }
  #dashboard-content .filtered-info {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    justify-items: flex-start;
    font-size: 0.8rem;
    /* font-weight: 600; */
    color: var(--bs-primary-text-emphasis); }
    #dashboard-content .filtered-info .filtered-count {
      font-weight: 700;
      color: var(--bs-secondary-text-emphasis); }
  #dashboard-content .active-filters {
    display: flex;
    width: 100%;
    position: relative;
    flex-direction: row !important;
    gap: 0.5rem;
    align-items: center;
    height: 2rem;
    transition: height 0.25s ease-in; }
    #dashboard-content .active-filters:not(:has(.active)) {
      height: 0rem; }
    #dashboard-content .active-filters .filter-badge {
      height: 100%;
      position: relative;
      display: flex;
      flex-direction: row;
      gap: 0.5rem;
      justify-content: center;
      align-content: center;
      justify-items: center;
      align-items: center;
      line-height: 1rem;
      font-size: 0.85rem;
      transition: opacity 0.25s ease-in; }
      #dashboard-content .active-filters .filter-badge.inactive {
        display: none; }
      #dashboard-content .active-filters .filter-badge::after {
        content: ' ';
        position: absolute;
        left: 11%;
        right: 90%;
        height: 1.25px;
        background-color: var(--bg-secondary);
        transition: right 0.25s ease-in; }
      #dashboard-content .active-filters .filter-badge .badge-action {
        position: relative;
        width: 1.1rem;
        height: 1.1rem; }
        #dashboard-content .active-filters .filter-badge .badge-action > * {
          display: flex;
          width: 100%;
          height: 100%;
          justify-content: center;
          align-content: center;
          justify-items: center;
          align-items: center; }
          #dashboard-content .active-filters .filter-badge .badge-action > *:first-child {
            display: none; }
      #dashboard-content .active-filters .filter-badge .badge-name {
        font-weight: 600; }
      #dashboard-content .active-filters .filter-badge .badge-value {
        position: relative;
        max-width: 3rem;
        text-overflow: ellipsis;
        overflow: hidden;
        text-wrap: nowrap;
        font-size: 0.9em;
        vertical-align: middle; }
      #dashboard-content .active-filters .filter-badge .badge {
        top: 0; }
      #dashboard-content .active-filters .filter-badge:hover {
        opacity: 0.6;
        transition: opacity 0.25s ease-in; }
        #dashboard-content .active-filters .filter-badge:hover::after {
          left: 10%;
          right: 10%;
          transition: right 0.25s ease-in; }
        #dashboard-content .active-filters .filter-badge:hover .badge-action > * {
          display: none; }
          #dashboard-content .active-filters .filter-badge:hover .badge-action > *:first-child {
            display: flex; }

.dash-graph {
  border: 0px;
  box-shadow: var(--default-shadow);
  min-width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden; }

.graphs-container {
  width: 100%;
  max-width: 100%;
  /* height: 30rem; */ }
  .graphs-container *:first-child {
    padding-top: 0; }
  .graphs-container .plot-container {
    width: 100%; }

.tab-content {
  width: 100%;
  height: 100%;
  min-height: 80vh;
  background-color: var(--bs-body-bg);
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  z-index: 6;
  border-top: 1px solid var(--bs-border-color);
  box-shadow: rgba(0, 0, 0, 0.16) 1px 2px 4px; }
  .tab-content .tab-description {
    padding: 1.2rem;
    line-height: 1.1rem;
    font-size: 11.5pt; }
  .tab-content .dash-graph {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-shadow: none;
    min-width: unset;
    max-width: 70rem;
    width: 100%; }

.tab-pane {
  width: 100%;
  height: 100%; }

.map-container {
  position: relative;
  flex: 0 0 35%;
  max-height: 30rem;
  width: 100%; }
  .map-container * {
    padding: 0px;
    margin: 0px; }
  .map-container .js-plotly-plot::after {
    content: "Business locations";
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 10pt;
    padding: 0.1rem 0.45rem; }

.card, .box, .accordion {
  border: 0px;
  box-shadow: var(--default-shadow); }

.form-label,
.Select-placeholder {
  font-size: 0.97rem; }

.custom-accordion .accordion-body {
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center; }

.custom-accordion .accordion-button {
  font-size: 1rem;
  padding: 1.2rem; }
  .custom-accordion .accordion-button::after {
    content: "\f106";
    font-family: 'Font Awesome 6 Free';
    font-size: 1.1rem;
    font-weight: 900;
    background: none;
    background-image: none;
    transform-origin: 25%; }
  .custom-accordion .accordion-button:not(.collapsed) {
    box-shadow: none; }
    .custom-accordion .accordion-button:not(.collapsed)::after {
      transform-origin: 25%;
      transform: rotate(-180deg); }

.custom-accordion > .accordion-header .accordion-button {
  display: flex;
  gap: 1rem;
  transition: all .3s ease-in; }
  .custom-accordion > .accordion-header .accordion-button:not(.collapsed), .custom-accordion > .accordion-header .accordion-button:hover {
    background-position: right center; }

.custom-accordion > .accordion-header .accordion-title {
  display: flex;
  gap: 1rem;
  align-content: center !important;
  align-items: center;
  vertical-align: middle;
  font-weight: 500; }
  .custom-accordion > .accordion-header .accordion-title i {
    font-size: 0.95rem; }

.gradient-1.filter-badge, .gradient-1.custom-accordion .accordion-button {
  background-image: var(--gradient-1-bg);
  color: var(--gradient-1-fg);
  background-size: 200% auto; }

.gradient-1.filter-badge {
  border: 0;
  background-size: 250% auto; }

.gradient-2.filter-badge, .gradient-2.custom-accordion .accordion-button {
  background-image: var(--gradient-2-bg);
  color: var(--gradient-2-fg);
  background-size: 200% auto; }

.gradient-2.filter-badge {
  border: 0;
  background-size: 250% auto; }

.gradient-3.filter-badge, .gradient-3.custom-accordion .accordion-button {
  background-image: var(--gradient-3-bg);
  color: var(--gradient-3-fg);
  background-size: 200% auto; }

.gradient-3.filter-badge {
  border: 0;
  background-size: 250% auto; }

.gradient-4.filter-badge, .gradient-4.custom-accordion .accordion-button {
  background-image: var(--gradient-4-bg);
  color: var(--gradient-4-fg);
  background-size: 200% auto; }

.gradient-4.filter-badge {
  border: 0;
  background-size: 250% auto; }

.card .filter-category {
  background-color: var(--bs-secondary-bg-subtle); }

.filter-category {
  border: 0px;
  /* background-color: var(--bs-secondary-bg-subtle); */
  /* background-color: var(--bg-secondary); */
  border-radius: 4px;
  /* overflow: hidden; */ }

.filter-controls {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-grow: 1;
  width: 100%;
  vertical-align: middle;
  align-items: center;
  gap: 0.5rem; }
  .filter-controls > div {
    flex: 2 1 0; }
  .filter-controls > label {
    flex: 1 1 0; }

hr {
  border-top: none;
  height: 1px; }
  hr.light {
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0)); }
  hr.dark {
    background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4), transparent); }
  hr.gray-light {
    background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent); }
  hr.vertical {
    position: absolute;
    background-color: transparent;
    height: 100%;
    right: 0;
    top: 0;
    width: 1px; }
  hr.horizontal {
    background-color: transparent; }

.js-plotly-plot {
  box-shadow: var(--default-shadow); }

.Select-menu > * {
  font-size: 0.9rem;
  line-height: 1rem;
  /* padding: 0.1rem; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-items: center;
  align-content: center;
  /* align-items: center; */
  word-break: keep-all;
  line-break: loose;
  flex-wrap: nowrap;
  word-wrap: unset; }

.VirtualizedSelectOption {
  white-space: nowrap; }

.nav-tabs {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  overflow: visible;
  flex-direction: row;
  border-bottom: 1px solid var(--bs-secondary-bg);
  background: none;
  width: 100%;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0.4em; }
  .nav-tabs .nav-item {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    overflow: visible;
    text-wrap: nowrap;
    transition: all 0.12s ease-in; }
    .nav-tabs .nav-item .nav-link {
      overflow: visible;
      z-index: 5;
      position: relative;
      transition: all 0.12s ease-in;
      color: var(--bs-success-text-emphasis);
      padding: 0.4rem 1.1rem;
      background-color: var(--bs-body-bg);
      border-top-left-radius: 0.4em;
      border-top-right-radius: 0.4em;
      border-width: 1px;
      border-color: #AAAAAA44; }
      .nav-tabs .nav-item .nav-link::after {
        content: "";
        transition: all 0.12s ease-in;
        opacity: 1;
        overflow: hidden;
        position: absolute;
        height: 104%;
        top: 0px;
        right: 0px;
        left: 0px;
        background-color: var(--bs-body-bg);
        border-radius: 0.4em 0.4em 1px 1px;
        z-index: -1; }
      .nav-tabs .nav-item .nav-link.active {
        transition: all 0.12s ease-in;
        /* border-top: var(--active-tab-border-bottom-size) var(--active-tab-border-bottom-style); */
        color: var(--bs-secondary-text);
        background-color: #a1cdea;
        font-weight: 500;
        border-bottom: 0;
        padding: 0.6rem 1rem;
        z-index: 10; }
        .nav-tabs .nav-item .nav-link.active::after {
          opacity: 1;
          top: 1px;
          left: 1px;
          right: 1px; }
    .nav-tabs .nav-item:not(.active):hover .nav-link {
      background-color: #a1cdea; }
      .nav-tabs .nav-item:not(.active):hover .nav-link::after {
        top: 0.5px;
        right: 0.5px;
        left: 0.5px;
        opacity: 1; }

.data-explorer-container {
  height: 85vh;
  width: 100%; }
  .data-explorer-container .data-explorer-top-row {
    width: 100%;
    padding: 0.4rem 0.5rem;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start;
    justify-items: flex-start; }
    .data-explorer-container .data-explorer-top-row .de-filter {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      justify-items: flex-start; }
    .data-explorer-container .data-explorer-top-row .de-filter-info {
      display: flex;
      flex-direction: column;
      text-align: center; }

.footer-wrapper {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  justify-items: center;
  z-index: 990;
  -webkit-font-smoothing: antialiased;
  font-size: 8.5pt; }
  .footer-wrapper .footer {
    background-color: white;
    display: flex;
    align-self: center;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    gap: 1pt;
    padding: 0.3rem 1.5rem;
    border-radius: 0px 5px 0px 0px;
    transform: translateY(2px);
    box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 2px, rgba(0, 0, 0, 0.12) 0px 0px 3px; }
    .footer-wrapper .footer p, .footer-wrapper .footer a {
      margin: 0;
      padding: 0;
      opacity: 0.7; }
    .footer-wrapper .footer a {
      color: #010f45; }

.theme-switcher-container {
  display: flex;
  flex-direction: row;
  gap: 0.2rem;
  justify-content: center;
  justify-items: center;
  align-items: center; }
  .theme-switcher-container .theme-mode-icon {
    font-size: 1.1rem;
    text-align: center;
    width: 2rem;
    padding: 0;
    margin: 0;
    color: var(--bs-primary); }
  .theme-switcher-container .theme-switch-input {
    align-self: center;
    margin: 0 !important;
    margin-bottom: 0.25rem !important; }
    .theme-switcher-container .theme-switch-input input {
      width: 2.45rem;
      height: 1.2rem; }

.instructions-container {
  padding: 0rem 1rem;
  display: flex;
  align-items: center;
  font-size: 10pt;
  gap: 0.6rem; }

#instructions-icon {
  cursor: pointer;
  font-weight: 500;
  font-size: 16pt; }
