html {
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 14px;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body.compare-maps #compare-maps-button {
  display: none;
}

body.compare-maps .site-header {
  display: none;
}

body.compare-maps #export-options{
  display: none;
}

body.compare-maps #reporting-panel{
  display: none;
}

body.compare-maps fcc-footer{
  display: none;
}

body.compare-maps .help-drawer-button{
  display: none;
}

@media screen and (min-width: 768px) {
  .desktop-view {
    display: initial;
  }

  .mobile-view {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .desktop-view {
    display: none;
  }
  body.compare-maps .desktop-view{
    display: initial;
  }

  .mobile-view {
    display: initial;
  }
  body.compare-maps .mobile-view { /* Disable mobile view in compare maps mode. */
    display: none;
  }

  .mobile-view > #mobile-content {
    text-align: center;
    margin: 0 15%;
    margin-top: 5%;
  }
}

.geocoder {
  position: absolute;
  z-index: 1;
  width: 50%;
  left: 50%;
  margin-left: -25%;
  top: 10px;
}

.mapboxgl-ctrl-geocoder {
  min-width: 100%;
}

.mapboxgl-ctrl-top-right {
    z-index: 1000;
}

.mapboxgl-ctrl-zoom-in, .mapboxgl-ctrl-zoom-out {
  height: unset !important;
}

.col-3-adjusted {
  min-width: 290px;
  max-width: 290px;
  width: 290px;
  margin-right: 10px;
}

#control-panel {
  position: inherit;
  text-align: left;
  z-index: 1;
  font-size: 12px;
  top: 10px;
  left: 0;
  margin-top: 33px;
  overflow: visible;
  box-shadow: 2px 2px 5px grey;
}

#control-panel.expanded {
  width: 400px;
}

bh-control-panel #main-controls {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

bh-control-panel #secondary-controls {
  display: flex;
  gap: 10px;
  flex: 0 1 auto;
}

/* When #secondary-controls has two or more children */
bh-control-panel #secondary-controls:has(.dropdown-slider-container:nth-child(2)) {
  flex: 1; /* Apply flex: 1 when there are two or more children */
}

#controls-row-divider {
  display: none;
}

@media screen and (max-width: 1024px) {
  .context-controls-container {
    display: unset !important;
  }

  #control-panel-divider {
    display: none;
  }

  #controls-row-divider {
    display: block;
    background-color: darkgrey; 
    height: 1px; 
    margin-top: 3%;
  }

  bh-control-panel #main-controls {
    margin-right: unset !important;
    justify-content: unset !important;
  }

  bh-control-panel .dropdown-slider-container {
    min-width: 100px !important;
  }
}

#overview_broadband_controls, #overview_maternalHealth_controls {
  padding-bottom: 1rem;
}

.noUi-value{
  white-space: unset !important;
  inline-size: 15%;
}

/* The pip marker element is followed directly by the text. 
This selector selects the marker that is just before the median text. */
.noUi-marker-horizontal.noUi-marker-large:has(+ .noUi-value.pip-median) {
  height: 10px;
  width: 10px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  z-index: 1;
}

#data-download-container {
  padding-top: 10px;
}

hr {
  background-color: darkgrey;
  margin: 10px -10px;
}

nav ul {
  list-style: none;
  height: 100%;
  padding-left: 1%;
  width: 100%;
}

nav li {
  float: left;
  margin-right: 20px;
  cursor: pointer;
  height: 100%;
  display: flex;
  align-items: center;
  border-bottom: 3px solid #005B94;
}

nav li .title {
  margin-right: 30px;
  color: white;
  font-size: 20px;
}

nav li:hover {
  opacity: 0.75;
}

i {
  margin-right: 5px;
}

/* Remove blue background when accordion is expanded */
#control-panel-container .accordion-button[aria-expanded="true"] {
  background-color: transparent; /* Set background to transparent */
  color: inherit; /* Ensure text color remains consistent */
  box-shadow: none; /* Remove any shadow effects */
  border: none; /* Remove border if present */
}

/* Restore true h4 text size for accordion header */
#control-panel-container .accordion-header h4 {
  font-size: 1.5rem; /* Default h4 font size (24px) */
  font-weight: 500; /* Default h4 font weight */
  line-height: 1.2; /* Default line height for headings */
  margin: 0; /* Remove extra margin if Bootstrap adds any */
}

/* Ensure the button inside the header doesn't override the h4 styles */
#control-panel-container .accordion-header .accordion-button {
  font-size: inherit; /* Inherit font size from the h4 */
  font-weight: inherit; /* Inherit font weight from the h4 */
  padding: 4px 15px; /* Adjust padding if needed */
  border: none; /* Remove border styles if interfering */
  border-radius: 0; /* Remove rounded corners */
}

/* Remove rounded borders from accordion collapse sections */
#control-panel-container .accordion-collapse {
  border: none; /* Remove the border */
  border-radius: 0; /* Remove rounded corners */
}

/* Add padding to the top of the accordion body */
#control-panel-container .accordion-body {
  padding-top: 10px;
  display: flex;
}

/* Remove extra padding around control panel component */
.accordion-body #bh-control-panel-root {
  padding: 0;
}

/* Remove rounded borders from accordion items */
#control-panel-container .accordion-item {
  border: none; /* Remove the border */
  border-radius: 0; /* Remove rounded corners */
  width: 100%; /* Use width of container */
}

/* Position the tooltip-enabled arrow on top of the existing arrow */
#control-panel-container .accordion-arrow-tooltip {
  position: absolute; /* Position relative to the button */
  top: 50%; /* Center vertically */
  right: 1rem; /* Align with the default Bootstrap arrow */
  transform: translateY(-50%) rotate(0deg); /* Default rotation */
  font-size: 1rem; /* Match the size of the default arrow */
  color: inherit; /* Match the color of the accordion header text */
  cursor: pointer; /* Indicate interactivity */
  transition: transform 0.3s ease; /* Smooth rotation animation */
}

/* Tooltip-enabled arrow styling */
#control-panel-container .accordion-arrow-tooltip::before {
  font-family: FontAwesome;
  content: '\f077'; /* Font Awesome chevron pointing up */
  display: inline-block;
}

/* Arrow pointing down when collapsed */
#control-panel-container .accordion-button.collapsed .accordion-arrow-tooltip {
  transform: translateY(-50%) rotate(180deg); /* Rotate arrow to point down */
}

/* Optional: Change arrow color on hover */
#control-panel-container .accordion-arrow-tooltip:hover {
  color: #007bff; /* Bootstrap primary color */
}

/* Ensure the default Bootstrap arrow remains hidden */
#control-panel-container .accordion-button::after {
  display: none; /* Hide the default arrow */
}

/* Make the insight maps accordion fill the width of page */
#first-accordion-header, #second-accordion-header, #third-accordion-header {
  width: -webkit-fill-available;
  margin: 10px 0;
}

/* Make the insight maps accordion button a flex container */
#first-accordion-header button, #second-accordion-header button, #third-accordion-header button {
  background-color: transparent; /* Remove background color */
  border: none; /* Remove border */
  box-shadow: none; /* Remove shadow */
  display: flex; /* Use flexbox */
  justify-content: space-between; /* Space out content */
  align-items: center; /* Center items vertically */
}

#categorization_metrics_header, .population_metric, .county_count_metric{
  text-align: left;
}

.table-bubble {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 7px;
  border: 1px solid black;
  transform: scale(1.2);
}

.modal-background {
  background-color: rgb(111 111 111 / 26.2%);
}

#map canvas {
  cursor: crosshair;
}

#main-container {
  overflow-y: hidden;
  overflow-x: hidden;
  min-width: 744px;
  border: 2px solid #B0BBD0;
  display: flex;
  flex-direction: row;
}

#control-panel-container.accordion-button:not(.collapsed) {
  background-color: transparent !important;
  color: inherit;
}

#control-panel-container.accordion-button:focus{
  box-shadow: inherit;
}

#main-panel {
  flex: 1;
  background: white;
  z-index: 1000;
  overflow: hidden;
}

#below-map {
  height: auto;
  /* padding-right: 20px; */
  padding-top: 20px;
  padding-bottom: 20px;
}

.mapbox-improve-map, .mapboxgl-ctrl-bottom-right .mapboxgl-compact {
  display: none !important;
  background: transparent;
}

.val_text{
  width: 15% !important;
  display: inline-block !important;
  margin: 0 0 7px 3px;
  min-width: 60px;
  cursor: pointer !important;
}


.noUi-handle {
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #FFF;
  cursor: default;
  box-shadow: inset 0 0 1px #FFF;
}
.noUi-handle:after {
  content: "Some words here"; /* Add something like this */
}

.noUi-horizontal .noUi-handle{
  height: 15px;
  width: 15px;
  border-radius: 50%;
  border: 1px solid black;
  background: radial-gradient(black, white);
  text-align: center;
  top: 1px;
  transform: translate(-9px, 0px);
}

.noUi-handle::before, .noUi-handle::after{
  display: none !important;
}

.noUi-horizontal{
  height: 7px !important;
}

.noUi-base {
  background-color: #d1dbe6;
  border: 1px solid #919191;
  z-index: unset !important;
}

.noUi-connect{
  background: #137cbd !important;
  height: 8px !important;
}

#url-box{
  z-index: 1001;
  text-align: start; 
  position: absolute; 
  width: 370px; 
  border: 1px black solid; 
  padding: 10px; 
  border-radius: 10px; 
  background-color: white; 
  display: none; 
  flex-direction: column;
}

#control-panel-header {
  margin-right: 0;
  z-index: 10;
}

#first-maps{
  width: 100%;
}
#first-maps #first {
  overflow: visible; /* Allow popover to overflow. */
}

#second-maps{
  margin-left: 5px;
}

#first-sub1, #second-sub1 {
  border: 2px solid #B0BBD0;
  bottom: 240px;
  left: 20px;
}

#first-sub2, #second-sub2 {
  border: 2px solid #B0BBD0;
  bottom: 20px;
  /* left: 20px */
}

bh-submap {
  z-index: 9999 /* Prevent popover from going under geocoder. */
}

bh-submap.outer-container{
  position: absolute;
  margin-left: 10px;
  margin-top: 10px;
  width: 100%;
}

bh-submap.outer-container:has(.submap-maximize-state) {
  margin-top: 0;
}

.map-subcontainer{
  height: 100%;
  width: 90%;
  z-index: 1000;
  position: absolute;
  border-radius: 15px;
}

.map-subcontainer-div{
  height: 100%;
  overflow: visible;
}

.outer-submap-container{
  height: 140px;
  max-width: 170px;
  width: 26%;
  z-index: 1000;
  position: absolute;
}

.mapboxgl-canvas{
  border: 2px solid #B0BBD0;
  border-left: none;
  border-right: none;  
}

bh-submap .mapboxgl-canvas {
  border-radius: 15px;
  border: 1px solid black;
  box-shadow: 7px 7px 10px rgb(0 0 0 / 30%);
  background-color: white;
}

bh-submap .submap-maximize-state .mapboxgl-canvas {
  border: none;
  border-radius: 0;
}

.submap-top-section{
  position: relative;
  z-index: 2000;
  top: -140px;
}

.outer-submap-container-minimized{
  width: 0px;
  height: 0px !important;
}

.minimized-state {
  width: 90px;
  border-radius: 10px;
  background-color: #ffffff;
}

.minimized-state[disabled="disabled"] {
  background-color: #eeeaea;
}.minimized-state[disabled="disabled"] img {
  opacity: 0.5;
}

.minimized-state-label {
  padding-left: 3px;
}

.map-subcontainer-title{
  width: 200px;
}

.submap-minimize-button{
  border: none;
  border-radius: 10px;
  background-color: unset;
}

.submap-maximize-state{
  position: relative;
  /*top:33px;*/
  border: none;
  box-shadow: none;
  width: inherit !important;
  max-width: none;
}

.submap-maximize-state .mapboxgl-ctrl-group {
  top: 35px;
  position:relative;
}
.state-minimize{
  width: 30px;
  height: 30px;
}

#reset_selections{
  cursor: pointer;
  font-size: 20px;
  margin-top: 10px;
  color: #137cbd;
  background-color: transparent;
  border:none;
  padding:0;
}

#reset_selections:hover{
  color: #81A1CD;
  outline: 1px dotted #000;
}

.pattern_filled{
  fill-opacity: 0.2;
}


#secondary_link{
  cursor: pointer;
  font-size: 12px;
  margin-top: 10px;
  color: #137cbd;
  background-color: transparent;
  border:none;
  padding:0;
}

#secondary_link:hover{
  color: #81A1CD;
  outline: 1px dotted #000;
}

#more-options-button {
  top: 55px;
  margin-top: 10px;
}

#isolated-geography-button {
  top: 120px;
  z-index: 1000;
  border-width: 2px;
  border: 0;
}

#geography-button {
  border: 0;
}

.btn-side-buttons {
  height: 100%;
  width: 100%;
  border-radius: 4px;
  opacity: unset !important;
}

.group-button-selected{
  background-color: black !important;
  color: white !important;
}

.suggestions-wrapper {
  z-index:1001;
}

.suggestions-wrapper .suggestions {
  max-height: calc(55vh - 20px);;
  overflow-y: auto;
}

#layer-group {
  position: absolute;
  left: calc(100% - 70px);
  top: 55px;
  z-index: 1000;
  width: 62px;
  background-color: var(--bs-gray-200);
  border-radius: 15px;
}

.map-tile {
  background-color: var(--bs-gray-200);
  color: black;
  width: 42px;
  height: 42px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .1);
  border-radius: 4px;
  box-sizing: border-box;
  z-index: 900;
  margin-bottom: 7px;
  margin-left: 10px;
}

/* gaps of 65px each */
#button-group-filter {
  top: 185px;
}

#region-layer-filter {
  top: 250px;
}

#cd-layer-filter {
  top: 315px;
  margin-bottom: 10px;
}

#button-group-filter button {
  border: 0;
}

.map-tile-text {
  font-size: 8px;
  text-align: center;
  margin-top: -20px;
}

.layer-group {
  font-size: 15px;
  margin-right: 0px;
  margin-bottom: 10px;
}

.line-container {
  display: flex;
  width: 85%;
  margin: 10px auto;
  align-items: center;
}

.line-right {
  flex-grow: 1;
  height: 1px;
  background: black;
  position: relative;
  margin-top: 4px;
}

.line-up {
  flex-grow: 1;
  height: 53%;
  width: 1px;
  top: 13%;
  background: black;
  position: absolute !important;
  margin-right: 0;
  margin-left: 18%;
}

.line-right.arrow-right:after {
  position: absolute;
  content: '';
  bottom: -4px;
  right: 0;
  width: 0;
  height: 0;
  left:100%;
  border-top: 3px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 9px solid black;
}

.line-right.arrow-left:after {
  position: absolute;
    content: '';
    bottom: -4px;
    right: 100%;
    width: 0;
    height: 0;
    top: -19px;
    border-top: 3px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 9px solid black;
    margin-top: 16px; 
}

.line-up.arrow-up:after {
  position: absolute;
  content: '';
  top: -10px;
  left: -3px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid black;
  transform: rotate(90deg);
}

.line-up.arrow-down:after {
  position: absolute;
  content: '';
  top: 44px;
  left: -3px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid black;
  transform: rotate(-90deg);
}

#legendcontainer {
  visibility: hidden;
  background-color: rgb(255, 255, 255);
  border-radius: 4px;
  bottom: 23px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
  font: 11px/14px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  padding: 10px;
  position: absolute;
  right: 10px;
  width: 358px;
  height: fit-content;
  min-width:180px;
  z-index: 1000;
  border: 2px solid black;
  cursor: move;
  padding-bottom: 25px;
}

#legendcontainer::before {
  border: 2px solid black;
}

#legendcontainer:has(bh-legend.minimized) {
  width: fit-content;
  min-width: unset;
  padding: 0;
  border:none;
  /* override dragged positioning */
  left: unset !important;
  top: unset !important;
}

bh-legend .legend-img {
  border: 1px solid #000000; 
  float: left;
  display: inline;
  transform: scale(1.2);
}

.legendcategory {
  margin-bottom:5px;
  height: 15px;
}
.legendcircle {
  width: 12px;
  height: 12px;
  border: 1.5px solid black;  
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

#smallkey {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding:5px;
}


.nobullets-categories {
    list-style-type: none;
    margin-left: -5px;
    font-size: 10px;
    position:absolute;
}

.nobullets-single {
  list-style-type: none;
  margin-left: -20px;
  font-size: 10px;
  position:absolute;
}
.line-container .y-axis-min {
  top:20px; 
  width:5px;
  position:absolute;
  right:140px;
  height:60%;
}

.line-container .y-axis-min-unit {
  top:20px; 
  width:6px;
  position:absolute;
  left: 40px;
}

.line-container .y-axis-max {
  right:142px;
  position:absolute;
  bottom:42px; 
  width: 5px;
}

.line-container .y-axis-max-unit{
  font-size: 8px;
  bottom:42px; 
  left: 40px;
  position:absolute;
}

.primaryonlymax {
  float:right;
  position:relative;
  bottom:28px;
  right:8px;
}

.x-axis-max {
  float:right;
  position:relative;
  bottom:23px;
  right:-2px;
}

.x-axis-min {
  margin-top: -10px;
  position: relative;
  bottom: -3px;
  left: 8px;
}

#bivariate .x-axis-name {
  bottom: -20px;
  top: unset;
}

.x-axis-name {
  text-align: center;
  line-height: 100%;
  position:absolute;
  width:100%;
  padding-top: 10px;
}

bh-legend .simplify-icon {
  position: absolute;
  top: -9px;
  left: -7px;
  z-index: 9;
  font-size: medium;
  padding: 10px;
  transform: rotate(0.10turn);
}

bh-legend .caret-up-icon {
  position: absolute;
  top: -8px;
  left: -7px;
  z-index: 9;
  font-size: medium;
  padding: 10px;
  transform: rotate(0.15turn);
}

bh-legend .maximize-icon {
  position: absolute;
  top: -2px;
  left: 6px;
  z-index: 9;  
  font-size: medium;
  padding: 4px;
  transform: rotate(0.62turn);
}

.simplify-button {
  position: absolute;
  top: 14px;
  left: 4%;
  z-index: 9;
  font-size: medium;
  padding: 9px;
  border-radius:3px;
  background:white;
}


.maximize-button {
  height: 24px;
  width: 42px;
  bottom:-3px;
  right: -3px;
  position:absolute;
  border-radius: 10px;
  background-color: #ffffff;
}

bh-legend .minimize-button {
  position: absolute;
  top: 15px;
  left: 90%;
  z-index: 9;
  font-size: medium;
  background: white;
  padding: 1px;
  width: 21px;
  height: 21px;
}


bh-legend .caret-up-button {
  width: 20px;
  height: 20px;
  font-size: medium;
  border: 2px solid black;
  position: absolute;
  top: 14px;
  left: 4%;
  z-index: 9;
  padding: 9px;
  border-radius:3px;
  background:white;
}


bh-legend .rectangle {
    width:8px;
    height:8px;
    background:blue;
    padding:2px;
}

bh-legend .legend-single {
  position: relative;
  display: flex;
  width: inherit;
  background-color:white;
  padding: 6px 0; 
  margin-top:30px;
}

.largekey {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 1.5px solid black;
  padding:5px;
}

.legend-single h4 {
  margin: 0 0 10px;
}

.legend-single div span {
  border-radius: 50%;
  display: inline-block;
  height: 10px;
  margin-right: 5px;
  width: 10px;
}

bh-legend .legend {
  position: relative;
  /* float:right; */
  display: flex;
  width: inherit;
  background-color:white;
  padding: 6px 0; 
}

.legend h4 {
  margin: 0 0 10px;
}

.legend div span {
  border-radius: 50%;
  display: inline-block;
  height: 10px;
  margin-right: 5px;
  width: 10px;
}


bh-legend .threshold-line {
  background-color: black;
  position: absolute;
  top: 0;
  left: 0;
}

bh-legend .threshold-line.vertical {
  width: 3px;
  height: 100%;
}

bh-legend .threshold-line.horizontal {
  width: 100%;
  height: 3px;
  top: 30%;
}

bh-legend .median-line {
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
}

bh-legend .median-line.vertical {
  width: 2px;
  height: 100%;
  position:absolute;
}

bh-legend .median-line.horizontal {
  width: 100%;
  height: 2px;
  position:absolute;
}

bh-legend #smallkey li {
  margin-bottom:5px;
  margin-top:3px;
  list-style-type: none;  
}

.median-label {
  position: relative;
  font-size: 8px;
  color: red;
}

.threshold-label {
  position: relative;
  font-size: 8px;
}

.median-label.vertical, .threshold-label.vertical {
  top: -13px;
  right: 2px;
}

.median-label.horizontal, .threshold-label.horizontal {
  top: -6px;
  left: 106px;
}

bh-legend {
  margin: 10px 10px 10px 0px;
}

bh-legend .quadrant-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none; /* Allow mouse hover to activate the tooltips in the quadrants beneath the overlay. */
}

bh-legend .quadrant-overlay .quadrant {
  width: 50%;
  height: 50%;
  background-color: #000;
  opacity: 0.5;
  position: absolute;
}

.quadrant.nw {
  top: 0;
  left: 0;
}
.quadrant.ne {
  top: 0;
  left: 50%;
}
.quadrant.sw {
  top: 50%;
  left: 0;
}
.quadrant.se {
  top: 50%;
  left: 50%;
}

.modal-background {
  background-color: rgb(111 111 111 / 26.2%);
}

.selected{
  border: 2px solid #5291FF;
}

.variable-header {
  padding: 7px 0;
  margin: 0 14px;
  border-bottom: 1px solid #e8eef5;
  font-size: 1.5em;
}

.variable-subtext {
  font-size: small;
  line-height: 5px;
  color: #737373;
  padding: 5px 0;
  pointer-events: none; /* Disable clicking so the user can click through to the parent. */
}

.variable-subtext.radio {
  margin-left: 20px;
}  

.control-section-header {
  display: inline-block;
}

.control-section-label {
  margin-bottom: 0.5rem;
}

.filters-heading {
  padding-top: 10px;
  color: #0D418E;
  border-top: 1px solid #8198B7;
}

.filters-section {
  margin-left: 10px;
}

.filters-subheading i[data-bs-toggle="tooltip"] {
  font-size: medium;
}

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

#whole-split-all{
  text-align: end;
}

.map-div{
  height: 60vh;
}

#maps-container {
  padding: 0;
  overflow: visible; /* Allow popover to overflow. */
}

.map-container {
  height: 60vh;
}

body.compare-maps .map-container, body.compare-maps .map-div  {
  max-height: 700px;
}

.variable-expanded {
  padding: 10px 15px;
  margin: 0 14px;
  background: #EEF5FE
}

#landing-popup {
  background-color: rgb(255 255 255 / 75%);
  border: 1px solid rgb(151 151 151 / 55%);
  border-radius: 6px;
  box-shadow: 0 0 4px rgb(0 0 0 / 25%);
  max-width: 680px;
  padding: 20px 20px 40px;
}

#landing-background {
  height: calc(100vh - 164px);
  background-image: url("../img/landing_background.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin: 12px;
}

.landing-option-container {
  background: #FFF;
  border-radius: 6px;
  box-shadow: 0 0 4px rgb(0 0 0 / 41%);
  border: 1px solid rgb(0 0 0 / 0%); /* prevents container changing size on hover */
  height: 100%;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.landing-option-container:hover {
  background: rgb(255 204 68 / 22%);
  border: 1px solid #FC4;
  box-shadow: 0 0 4px 0 rgb(116 85 1 / 84%);
}

.landing-popup-header {
  font-weight: 700;
  color: #555;
  font-size: 24px;
  letter-spacing: 0;
}

.landing-popup-intro {
  font-size: 14px;
  color: #6f6f6f;
  letter-spacing: 0;
}

.landing-explore-option {
  flex: 1;
  margin: 0;
  text-align: center;
  padding-top: 24px;
  padding-bottom: 24px;
}

.landing-explore-option img, .landing-maternal-option img {
  margin-bottom: 12px;
}

.landing-explore-option figcaption, .landing-maternal-option figcaption {
  font-size: 12px;
  color: #6d7278;
  letter-spacing: -0.2px;
}

.landing-maternal-option {
  text-align: center;
  flex: 1;
  margin: 0;
}

.separator {
  border: 1px solid rgba(19, 58, 127, 0.21);
  margin-bottom: 10px;
}

.plot-stats-container {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1201px) {
  .plot-stats-container {
    flex-direction: row;
  }
  
}
#stats-section, #plot-section {
  /* border: 2px solid #B0BBD0; */
  margin: 0;
  /* margin-bottom: 20px; */
}

#stats-table-container {
  border: 2px solid #B0BBD0;
  padding: 0px 20px;
}

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

#stats-table-headers-container {
  text-align: left;
}

.stats-table-row {
  border-top: 1px solid darkgrey;
}

.stats-table-row td {
  padding: 10px 0;
}

.lg-size-height {
  height: 500px !important;
}

.sm-size-height {
  height: 700px !important;
}

#introduction-container {
  padding: 0 20px;
  height: auto;
}

#introduction-text {
  font-size: 13px;
  padding-top: 4px;
  padding-bottom: 8px;
  /* text-align: justify; */
}

#introduction-text a {
  text-decoration: none;
}

abbr[title].faqs {
  border-bottom: none;
  text-decoration: none;
}

/* #data-notes {
  text-align: justify;
} */

#data-notes a {
  text-decoration: none;
}

#data-download-container {
  padding: 0 20px;
}

#data-download-dropdown {
  padding: 10px;
  z-index: 1001;
}

#data-download-dropdown > li:hover {
  color: #1360bd;
}

#bh-control-panel-root {
  padding: 7px 14px;
}
#bh-control-panel-root hr {
  margin: 12px 0; 
  background-color: darkgrey;
  opacity: 0.4;
}
bh-control-panel .context-buttons-container {
  width: 100%;
  display: flex;
  border: 1px solid #0D6EFD;
  border-radius: 4px;
  margin-top: 2px;
  margin-bottom: 12px;
}

bh-control-panel .context-buttons-container label {
  flex: 1;
  text-align: center;
  cursor: pointer;
  padding: 5px;
  color: #0D6EFD;
}

bh-control-panel .context-buttons-container label input {
  display: none;
}

bh-control-panel .context-buttons-container label:nth-child(2) {
  border-left: 1px solid #0D6EFD;
  border-right: 1px solid #0D6EFD;
}

bh-control-panel .context-buttons-container label:has(input:checked) {
  background-color: #0D6EFD;
  color: white;
}

.variable-selection-area {
  padding-bottom: 10px;
}

ul.opioids-bulleted-list li {
  margin-bottom: 8px;
}

ul li:last-of-type {
  margin-bottom: 0px;
}

ol li {
  margin-bottom: 8px;
}

ol li:last-of-type {
  margin-bottom: 0px;
}

bh-control-panel .context-controls-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bh-dropdown-root .dropdown {
  display: flex;
  border-radius: 7px;
  border: 1px solid black;
  background: white;
}

bh-control-panel .dropdown-slider-container {
  min-width: 200px;
  width: 100%;
}

bh-tailored-download-button .tailored-download-button-default {
  background: none;
  border: none;
  padding: 0;
}

.dropdown-slider-adjustment {
  min-width: 100px !important;
}

.bh-dropdown-root .button-text {
  width: 90%;
  display: inline-block;
  /* overflow: hidden; */
  white-space: normal;
  /* text-overflow: ellipsis; */
  vertical-align: top; /* https://stackoverflow.com/a/10612455 */
}

bh-multiselect .bh-dropdown-root .button-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* https://moderncss.dev/pure-css-custom-checkbox-style/ */
bh-multiselect[exclusive-groups] .option-group-checkbox {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  /* Not removed via appearance */
  margin: 0;
 
  padding: 0;
  width: 1rem;
  height: 1rem;
  min-width: 1rem; /* prevent squishing the circle into an oval */
  min-height: 1rem;
  border: 1px solid darkgrey;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

bh-multiselect[exclusive-groups] .option-group-checkbox::before {
  position: absolute;
  /* center */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  content: "";
  width: .6rem;
  height: .6rem;
  background-color: #0D6EFD;
  border-radius: 50%;
  visibility: hidden;
}bh-multiselect[exclusive-groups] .option-group-checkbox:checked::before {
  visibility: visible;
}

.bh-dropdown-root .dropdown.disabled {
  border: 1px solid lightgrey;
}

.bh-dropdown-root .dropdown-toggle {
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 5px;
}

.bh-dropdown-root .dropdown-toggle.disabled {
  color: lightgrey;
  cursor: auto;
}

.bh-dropdown-root .option-group-button, .option-subgroup-button {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-top: 1px solid black;
  padding: 7px 5px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}

bh-multiselect .bh-dropdown-root .option-group-button {
  border-top: none;
}

.bh-dropdown-root .option-subgroup {
  width: 100%;
  text-align: left;
  background: #f2f0f0;
}

.bh-dropdown-root .dropdown-menu {
  border: 1px solid black;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 200px;
}

.bh-dropdown-root .dropdown-item {
  background: #f2f0f0;
  border-top: 1px solid black;
}

bh-multiselect .dropdown-item {
  max-width: 250px;
}

.bh-dropdown-root .loose-item {
  background: white;
  border-top: 1px solid black;
  padding-left: 5px;
}

.bh-dropdown-root .subgroup-item {
  background: #D0D0D0;
  padding-left: 25px;
}

.bh-dropdown-root .sub-button {
  width: 30%;
  font-size: 12px;
  margin-left: 70%;
  padding: 0px 10px;
}

.bh-dropdown-root .dropdown-item:hover {
  color: white;
  background: #629ef9;
}

.bh-dropdown-root .grouped-item:hover {
  background: #f2f0f0;
  color: black;
}

.bh-dropdown-root i.group-expand {
  pointer-events: none;
  float: right;
  line-height: 20px;
  vertical-align: top;
  margin: 0 0 0 5px;
}

.bh-dropdown-root .collapsible.collapsed {
  display: none;
}.bh-dropdown-root .option-group-button:has(+ .collapsible.collapsed) i,
.bh-dropdown-root .option-subgroup-button:has(+ .collapsible.collapsed) i {
  transform: rotate(180deg);
}

bh-multiselect .option-group-header:has(+ .collapsible.collapsed) .option-group-button i.group-expand {
  transform: rotate(180deg);
}

.health_toggle_filter {
  padding-top: 10px;
}

.health_toggle_label {
  display: inline-flex !important;
  cursor: pointer;
  font-size: 10px;
}

.rural-pop-dropdown, .maternal-age-filter-dropdown, .race-ethnicity-dropdown{
  margin-bottom: 10px;
}

.expandStates{
  text-align: center;
}

.expandCategorizationsEl {
  overflow-y: scroll; 
  background-color: #fcfbfb;
}

.expandCounties {
  overflow-y: scroll; 
  height: 100px; 
  margin-bottom: 10px;
  background-color: #f0edee;
}

.expandCountiesEl {
  padding: 2px;
  border-bottom: 1px solid black;
}

.first-map-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 10px;
  z-index: 1;
}
    
.first-map-overlay .first-map-overlay-inner {
  background-color: #fff;
  float: right;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  padding: 10px;
  margin: -10px 20px 10px 0px;
  width: 90px;
  height: 60px;
}

.first-map-overlay input {
  float: left;
  width: auto;
  height: auto;
  vertical-align: middle;
  margin-top: 4px;
  margin-right: 3px;
  cursor: pointer;
}

.second-map-overlay {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  left: 50%;
  padding: 10px;
  z-index: 1;
}
    
.second-map-overlay .second-map-overlay-inner {
  background-color: #fff;
  float: right;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  padding: 10px;
  margin: 140px 20px 10px 0px;
  width: 85px;
  height: 60px;
}

.second-map-overlay input {
  float: left;
  width: auto;
  height: auto;
  vertical-align: middle;
  margin-top: 4px;
  margin-right: 3px;
  cursor: pointer;
}

.btn-primary-outline, .btn-primary-outline:hover {
  background-color: transparent;
  border-color: #ccc;
  width: 100%;
  text-align: left;
}

/* Remove outline on the splash screen close button on page load/focus */
.btn-close:focus,
.btn-close:active:focus,
.btn-close.active:focus,
.btn-close.focus,
.btn-close:active.focus,
.btn-close.active.focus {
    outline: none!important;
    box-shadow: none;
}

.btn-map-button, .btn-map-button:hover {
  background-color: white;
  border-color: #ccc;
  width: 100%;
  height: 100%;
}

.btn-filter-button, .btn-filter-button:hover {
  background-color: white;
  border-color: #ccc;
  width: 100%;
  border-radius:4px;
  border-width: 2px;
}

.filterradio {  
  position: relative;
  left: 20%;
}

.filter-button-label {
  width:96px;
  font-size:10px;
  line-height:10px;
  background-color:white;
  height:31px;
  text-align:center;
  vertical-align: middle;
  color:black;
  /* border:1px solid #ccc; */
  border-radius:0;
  cursor: pointer;
}

#layers-button {
  background-color: white;
  border-color: #ccc;
  width: 100%;
  height: 100%;
}

#region-button, #cd-button {
  border: 0;
  height: 100%;
}

.layer-selection-img {
  width: 15px; 
  height: 15px;
  margin-bottom: 10px;
}

.hide-map-tile {
  display: none !important;
}

#map-button-group {
  position: absolute;
  top: 68px;
  left: calc(100% - 155px);
  height: 30px;
  width: 30px;
  z-index: 900;
}

.expanded-button-group {
  left: calc(100% - 565px);
  height: 30px;
  width: 500px;
  position:absolute;
  z-index: 900;
}

#filter-button-group {
  top: 118px;
}

.layer-selection-button-group {
  left: calc(100% - 300px) !important;
  width: 230px !important;
}

.button-clicked {
  background-color: black !important;
  color: white !important;
  border-radius: 4px;
}

#region-button-group {
  top: 165px;
}

#cd-button-group {
  top: 212px;
}

.filter-btn-box{
  display: flex;
  margin-left: -3%;
}

.priority {
  z-index: 1500;
}

#doubleburden-label, #singleburden-label, #opportunity-label, #milestone-label, #showall-label{
  border: solid 2px #000000;
  border-radius: 5px;
  display: inline-block;
  text-align: center;
  line-height: 90%;
  padding-top: 5%;
}

#opportunity-label{
  line-height: 160%;
  padding-left: 13%;
}

#milestone-label, #showall-label{
  line-height: 160%;
}

#doubleburden-label:hover, #singleburden-label:hover, #opportunity-label:hover, #milestone-label:hover, #showall-label:hover{
  border: solid 2px #000000;
  background-color: var(--bs-gray-200);
}

input#doubleburden:checked + #doubleburden-label, input#singleburden:checked + #singleburden-label, input#opportunity:checked + #opportunity-label, input#milestone:checked + #milestone-label, input#showall:checked + #showall-label{
  border: solid 2px #000000;
  background-color: var(--bs-gray-200);
}

#show-data img, #show-borders img, #hide-borders img {
  width: 26px;
  right: 8.5px;
  bottom: 3px;
  position: inherit;
}

#broadband-dropdown, #health-dropdown {
  padding-bottom: 10px;
}

.mh-county-select {
  display: block; 
  /*max-width: 500px; 
  /* background-color: #eeeaea; */
  /* margin-top: 10px;
  margin-bottom: 10px; */
  /* padding: 10px; */
  /* padding-top: 10px;
  padding-bottom: 10px; */
  /* border: 2px groove #eeeaea; */
}

.mh-county-dropdown {
  display: block; 
  max-width: 200px;
  min-width: 100px; 
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border: 1px solid black;
  /* background-color: #eeeaea; */
  /* margin-top: 10px; */
  /* padding: 10px; */
}
/* testing css for autocomplete */
.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}
input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 12px;
}
/* Geocoder styling */
input[type=text].mapboxgl-ctrl-geocoder--input {
  background-color: unset;
  width: 100%;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 1px solid black;
}
input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}
input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}
.stack-item {
  z-index: 1001;
}
.form-select {
  background-image: url('/node_modules/@fortawesome/fontawesome-free/svgs/solid/caret-down.svg');
}

.selected-option {
  background-color: rgba(211,225,253,0.93);
}

.slider-input-container {
  margin: 3px 18px 15px 18px;
  position: relative;
}

.slider-input-container .median-marker {
  transform: translateX(-5px);
  position: absolute;
  width: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}.slider-input-container .median-marker .median-dot {
  background-color: #e90000;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}.slider-input-container .median-marker .median-text {
  color: #e90000;
  font-weight: bold;
}

.slider-input-container input[type="text"] {
  position: absolute;
  width: 50px;
  /* font-size: 0.8rem; */
  padding: 0;
  transform: translate(-13px, 0px);
  background-color: white;
  top: 10px;
  border: 1px solid black;
  border-radius: 3px;
  text-align: center;
}

.slider-input-container input[type="text"]:focus {
  border-color: #4391FE;
}

.slider-container .noUi-pips-horizontal {
  padding: 0;
  height: 10px;
  left: 0;
  width: 100%;
}


.percent-label {
  align-self: center;
  margin: 0 3px;
}

.reset-median-button {
  display: block;
  margin-left: auto;
  border: none;
  background: none;
  color: #0D418E;
}

.binaryCheckBtns{
  font-size: 12px;
  padding: 0 0 0 0px;
  margin: 5px 1px 0px 0px;
  min-width: 110px;
  text-align: center; 
  height: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  flex: 1;
}

.binaryCheckBtns-circles{
  background-color: black;
  border-radius: 50%;
  display: inline-flex;
}


.quintileCheckBtns{
  font-size: 7px;
  padding: 0px;
  margin-left: 1px;
  flex: 1;
  min-height: 20px;
}

.mcdCheckBtns{
  font-size: 12px;
  padding: 0px;
  margin: 5px 1px 0px 0px;
}

.quintileCheckBtns-circles{
  background-color: black;
  border-radius: 50%;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
  display: inline-flex;
}

.control-descriptor {
  display: inline-block;
  font-size: medium;
  margin: 10px 0 0 10px;
}

.control-descriptor.subtext {
  font-size: small;
  margin-left: 5px;
}

.race-ethnicity-title {
  font-size: medium;
}

#selected-county-state {
  font-weight: normal;
}

.detail-description{
  font-size: x-small;
}

.detail-label{
  padding: 6px 2px;
}

.detail-value{
  text-align: center;
  padding: 6px 2px;
  margin: auto;
}

.col-12.row.demographics.detail-grid {
  height: auto;
  margin: 0;
  display: flex;
  align-items: center;
}

.col-12.row.demographics.detail-grid:nth-child(even) {
  background: #eaeaea96;
}

.key-label {
  padding-left: 0px;
  padding-top: 4px;
  margin-bottom: 4px;
}

.detail-value-outline {
  text-align: center;
  border: 1px solid black;
  border-bottom-width: 1px;
  margin-bottom: 5px;
}

.detail-insight, #outcome-detail-value {
	font-size: 10px;
}
.detail-insight {
  font-style: italic;
}

#outcome-detail{
	position: relative;
}

.stats-table-border {
  border-right:1px solid grey;
}

.btn-primary-outline:focus {
  color: #212529;
  background-color: #fff;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.mh-county-button:focus {
  outline:2px solid #000 !important;
}

/* icons inside Plot chart */
.modebar-btn svg.icon path {
  fill:#757575 !important;
}

.modebar-btn:focus svg.icon path,
.modebar-btn:hover svg.icon path {
  fill:#0d6efd !important;
}

.modebar-btn.active svg.icon path {
  fill:#000 !important;
}

.modebar-btn.active {
  border-bottom: 2px dotted #0d6efd !important;
}

#reporting-panel {
  position: relative;
  padding: 15px;
  border-right: 2px solid #B0BBD0;
  padding-top: 0px;
  width: 450px;
  min-width: 24%;
  max-width: 35%;
}

#reporting-panel bh-drag-bar {
  width: 10px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  user-select: none; /* Prevent highlighting stuff while dragging. */
}

bh-drag-bar .drag-bar-root {
  cursor: ew-resize;
  height: 100%;
  padding: 1px;
}
bh-drag-bar .grip-handle {
  width: 3px;
  height: 80px;
  background-color: #B0BBD0;
  margin: 40vh auto 0 auto;
}

.tooltip.bs-tooltip-auto {
  opacity: 1;
}
.tooltip-inner {
  background-color: white;
  color: black;
  box-shadow: 0px 0px 4px black;
}


.tooltip-inner .double-burden-tooltip, .double-burden-text{
  color: #9144ab;
}

.tooltip-inner .opportunity-tooltip, .opportunity-text{
  color: #006aa8;
}

.tooltip-inner .single-burden-tooltip, .single-burden-text{
  color: #ad4400;
}

.tooltip-inner .milestone-tooltip, .milestone-text{
  color: #337300;
}

.radiocontainer {
  display: block;
  position: relative;
  margin-right: 5px;
  margin-top: 10px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.radiocontainer-label {
  display: block;
  margin-top: 25px;
  font-size: smaller;
}

/* Hide the browser's default radio button */
.radiocontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.radiocontainer:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radiocontainer input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radiocontainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radiocontainer .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

#id_demographic_panel {
  padding: 15px;
  padding-left: 0px;
  padding-right: 0px;
}

.popup-area {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(30, 60, 90, 0.4);
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
}

.popup-area .popup-modal {
  background-color: white;
  margin: auto;
  border: 2px solid dodgerblue;
  box-shadow: 0 0 5px black;
}

bh-stats-table-details .popup-modal {
  width: 90%;
  height: 90%;
  max-height: 90%;
  overflow-x: hidden;
  position: fixed;
  color: #1e4284;
}

bh-stats-table-details button[name="x"] {
  position: absolute;
  right: 0;
  top: 0;
  background: none;
  border: none;
  font-size: large;
  margin: 10px;
}

bh-stats-table-details button[name="x"] i {
  margin: 0;
}

bh-stats-table-details .instructions {
  position: absolute;
  top: 0;
  padding-top: 10px;
  margin-top: 120px;
  width: 100%;
  text-align: center;
  z-index: 9998;
}
bh-stats-table-details .download-info {
  position: absolute;
  top: 0;
  padding-top: 10px;
  margin-top: 145px;
  width: 100%;
  text-align: center;
  z-index: 9998;
}

bh-stats-table-details .toolbox-buttons {
  position: absolute;
  z-index: 9999;
  top: 0;
  width: 99%;
  margin-top: 110px;
  padding-right: 10px;
  text-align: right;
}

button.uswds-outline {
  background: none;
  border: 1px solid black;
  border-radius: 5px;
  transition: all .4s ease;
  -webkit-transition: all .4s ease;
}

button.uswds-outline:hover {
  background-color: black;
  color: white;
  border: 1px solid black;
  border-radius: 5px;
  transition: all .4s ease;
  -webkit-transition: all .4s ease;
}

button.uswds-outline i {
  margin: 0;
}

.no-scroll{
  overflow-y: hidden;
}

bh-export-preview .popup-modal {
  display: flex;
  width: 80%;
  position: fixed;
  color: #1e4284;
  max-height: 90%;
}

bh-export-preview .popup-modal button[name="x"] {
  position: absolute;
  top: 0;
  right: 10px;
  margin: 10px;
  background: none;
  border: none;
  font-size: large;
  color: inherit;
  z-index: 99;
}

bh-export-preview .loading-screen {
  background-color: rgba(255,255,255,0.7);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}

bh-export-preview .loading-screen.hidden {
  display: none;
}

/* https://css-loaders.com/spinner/ */
.loading-spinner {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: dodgerblue;
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}


bh-export-preview .preview-area {
  flex: 1;
  background-color: lightgrey;
  /* max-height: 70vh; */
  overflow-y: auto;
  padding: 5px;
}

bh-export-preview .preview-area .page {
  width: 100%;
  aspect-ratio: 8.5/11;
  background-color: white;
  margin-bottom: 5px;
  overflow: hidden;
  padding: 5%;
  position: relative;
}bh-export-preview .preview-area.landscape .page {
  aspect-ratio: 11/8.5;
}

bh-export-preview .side-panel {
  border-right: 1px solid grey;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

bh-export-preview .side-panel > div {
  padding: 20px;
}

bh-export-preview .side-panel > div:nth-child(2) {
  border-top: 1px solid grey;
  border-bottom: 1px solid grey;
  flex: 1;
}

bh-export-preview .side-panel > div:nth-child(3) {
  display: flex;
}

bh-export-preview .side-panel > div:nth-child(3) button{
  display: flex;
  margin: 10px;
  padding: 5px;
  flex: 1;
  justify-content: center;
  border-radius: 5px;
  font-size: medium;
}

bh-export-preview .side-panel > div:nth-child(3) button:hover{
  display: flex;
  margin: 10px;
  padding: 5px;
  flex: 1;
  justify-content: center;
  border-radius: 5px;
  font-size: medium;
}

button[name="export"]:hover {
  background-color: white;
  color: black;
}

bh-export-preview fieldset {
  margin-bottom: 10px;
}

bh-export-preview fieldset label{
  margin-bottom: 15px;
  font-size: medium;
}

bh-export-preview fieldset input{
  margin-right: 5px;
}

.color-bar .color-boxes-container {
  display:flex;
  margin: 5px;
  margin-bottom: 0;
  height: 15px;
  padding: 0 3px
}

.color-bar .color-boxes-container .color-box {
  flex: 1;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  height: 18px; 
  text-align: end;
  padding: 0;
  color: white
}

.color-bar .color-boxes-container .color-box:last-child {
  border-right: 1px solid black;
}

.color-bar .bucket-labels-container {
  display: grid;
  grid-template-columns: repeat(6, 1px);
  justify-content: space-between;
  padding: 0 5px;
}

.color-bar .bucket-labels-container span {
  font-size: small;
  /* https://stackoverflow.com/a/28233945 */
  margin-left: -50px;
  margin-right: -50px;
  text-align: center;
}

bh-title .bh-title-root {
  border: 2px solid #B0BBD0;
  border-bottom: none;
  padding: 15px;
  height: 90px;
  display: flex;
}

bh-help-drawer {
  width: 350px;
}

bh-help-drawer .help-drawer-root {
  position: fixed;
  width: 300px;
  right: 0;
  top: 23vh;
  height: 70vh;
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
  box-shadow: 0px 5px 10px black;
  display: flex;
  flex-direction: column;
  z-index: 9;
}
bh-help-drawer .expanded-content {
  flex: 1;
  background: #e3e3e3;
  border: 1px solid black;
  border-bottom-left-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
bh-help-drawer .expanded-content .page-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
bh-help-drawer .help-drawer-button {
  border-top-left-radius: 20px;
  border: 1px solid black;
  border-bottom: none;
  font-size: large;
  background: #256AD0;
  color: white;
  padding: 20px;
  width: 100%;
  vertical-align: top; /* https://stackoverflow.com/a/10612455 */
}

bh-help-drawer .help-drawer-button i {
  margin: 0;
  font-size: larger;
  float: left;
}

bh-help-drawer.collapsed {
  width: 2%;
}
bh-help-drawer.collapsed .help-drawer-root {
  width: 60px;
  height: unset;
}
bh-help-drawer.collapsed .help-drawer-button {
  border-bottom: 1px solid black;
  border-bottom-left-radius: 20px;
}
bh-help-drawer.collapsed .help-drawer-button-text {
  writing-mode: vertical-lr;
  text-orientation: mixed;
  transform: rotate(180deg);
}
bh-help-drawer.collapsed .help-drawer-button i {
  float: none;
  margin-bottom: 20px;
}
bh-help-drawer.collapsed .expanded-content {
  display:none;
}
bh-help-drawer .back-button, bh-help-drawer .next-button {
  background: none;
  border: none;
}
bh-help-drawer .next-button {
  float: right;
}
bh-help-drawer .toc-link {
   text-decoration: underline;
   color: #005ae9;
}
bh-help-drawer .toc-link :hover {
  cursor: pointer;
}
bh-help-drawer .hidden {
  display: none;
}
bh-splash-modal .splash-modal-root::backdrop {
  background: rgba(30, 60, 90, 0.4);
  
}

bh-splash-modal .splash-modal-root {
  padding: 0;
  border: 0;
  background: 0;
  overflow: visible;
}

bh-splash-modal .splash-modal-content {
  background: white;
  width: 1000px;
  max-height: 90vh;
  border: none;
  box-shadow: 0 0 5px black;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

bh-splash-modal .scrollable-content {
  flex: 1;
  overflow: auto;
  padding: 0 50px;
  margin-bottom: 40px;

  /* Uncomment CSS for background if splash screen needs is scrollable - currently not enough content to need scrolling
      This background is leaving a line at the bottom of the page */
  /* https://lea.verou.me/blog/2012/04/background-attachment-local/ */
	/* background: */
		/* Shadow covers */
		/* linear-gradient(white 30%, rgba(255,255,255,0)),
		linear-gradient(rgba(255,255,255,0), white 70%) 0 100%, */
		
		/* Shadows */
		/* radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
		radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
	background-repeat: no-repeat;
	background-color: white;
	background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px; */
	
	/* Opera doesn't support this in the shorthand */
	/* background-attachment: local, local, scroll, scroll; */
}

bh-splash-modal button[name="close"] {
  border: none;
  background: none;
  position: absolute;
  top: 10px;
  right: 15px;
}bh-splash-modal button[name="close"]:focus-visible {
  outline: none;
}bh-splash-modal button[name="close"] i {
  margin: 0;
  font-size: x-large;
  vertical-align: text-top;
}

bh-splash-modal .logo-title-container {
  display: flex;
  margin: 30px auto;
  max-width: 650px;
}bh-splash-modal .logo-title-container .fcc-logo {
  background: url("../img/fcc-logo-lg.png") 0 0 no-repeat;
  width: 175px;
  height: 38px;
  display: block;
}

bh-splash-modal .query-cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
  row-gap: 20px;
}

bh-splash-modal .query-card {
  border: 2px solid #E6E6E6;
  border-radius: 5px;
  height: 241px;
  padding: 15px;
  position: relative;
}
bh-splash-modal .query-card h6 {
  font-weight: bold;
}
bh-splash-modal .query-card p {
  font-size: x-small;
}
bh-splash-modal .query-card-bubbles-container {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 15px 15px 10px 15px;
}
bh-splash-modal .query-card-bubble {
  padding: 5px 10px;
  margin-right: 5px;
  border-radius: 15px;
  background-color: lightgrey;
  display: inline-block;
  font-size: small;
}

bh-splash-modal .query-card-bubble > a {
  text-decoration: none;
}

bh-splash-modal div[name="section-1"], bh-splash-modal div[name="section-2"] {
  display: flex;
  margin-bottom: 20px;
}

bh-splash-modal .backdrop-click-interceptor {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

@media screen and (max-width: 600px) {
  bh-splash-modal div[name="section-1"], bh-splash-modal div[name="section-2"] {
    flex-direction: column;
  }

  bh-splash-modal .scrollable-content {
    padding: 0;
  }

  bh-splash-modal .query-cards-container {
    grid-template-columns: 1fr;
  }
}

bh-categories-tooltip i {
  font-size: 14px;
}bh-categories-tooltip .tooltip-inner, .focus-area-tooltip .tooltip-inner {
  text-align: left;
}

.cards_anchor {
  color: black;
  text-decoration: none;
}

.cards_anchor:hover {
  color: black;
  background-color: #eee;
}

bh-insight-maps-gallery .insight-map-card {
  /* padding: 15px; */
  position: relative;
  text-align: left;
}

bh-insight-maps-gallery .insight-map-card h6 {
  font-weight: bold;
}

/* help drawer */

.help-drawer-root .page-content > p {
    font-size: 0.9rem;
}

.help-drawer-root .page-content > .header {
    font-size: 1rem;
    font-weight: bold;
}

.help-drawer-root .page-content > img {
    width: -webkit-fill-available
}

/*
A class "inside-export-preview" is added dynamically to certain components when the export preview is opened.
This class can be customized on those components here. This allows the appearance of the components to be
different in the export preview than in the actual platform.
*/

.bh-title-root.inside-export-preview h4 {
  font-size: xx-large;
}

.inside-export-preview #stats-view-details,
.inside-export-preview #map-reset,
.inside-export-preview .carousel-control-next,
.inside-export-preview .carousel-control-prev,
.inside-export-preview .mapboxgl-ctrl-zoom-out,
.inside-export-preview .mapboxgl-ctrl-zoom-in,
.inside-export-preview #isolated-geography-button,
.inside-export-preview #map-button-group,
.inside-export-preview #button-group-filter,
.inside-export-preview #minimized-state-Alaska,
.inside-export-preview #minimized-state-Hawaii,
.inside-export-preview #region-layer-filter,
.inside-export-preview #cd-layer-filter
 {
  display: none;
  visibility: hidden;
}
.inside-export-preview bh-layer-toggle #dropdown { /* Hide the select dropdown arrow. */
  background: none;
  background-color: white;
}
.inside-export-preview .fa-info-circle,
.inside-export-preview .submap-minimize-button {
  visibility: hidden;
}

#exportable-demographic-charts {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
  pointer-events: none;
  visibility: hidden;
}
.inside-export-preview#exportable-demographic-charts {
  visibility: visible;
}

#exportable-demographic-charts .__echarts__ {
  width: 500px;
}

.inside-export-preview#insights-container {
  width: 1100px;
  padding-bottom: 30px; /* Prevent image from being cut off. */
}

.inside-export-preview#bh_radar_component_root {
  padding-right: 10px;
}

.mapboxgl-popup {
  z-index: 9999;
}

.mapboxgl-popup-content {
  box-shadow: 0 5px 15px black;
}

@media print {
  /* Ensure all accordion panels are visible */
  #mapCarousel .accordion .collapse.print-expanded {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
  }

  /* Ensure all carousel items are visible */
  #mapCarousel .carousel-inner .carousel-item.print-visible {
    display: block !important;
    opacity: 1 !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    float: none !important;
    page-break-inside: avoid;
  }

  /* Hide carousel controls during printing */
  #mapCarousel .carousel-control-prev,
  #mapCarousel .carousel-control-next,
  #mapCarousel .carousel-indicators {
    display: none !important;
  }
}

.bh-navbar {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  background: #fff;
  border-radius: 8px;
  border: 2px solid #64b5f6;
  box-shadow: 0 2px 8px rgba(100,181,246,0.05);
  margin: 2em auto 0 auto;
  max-width: 900px;
  flex-direction: row; /* Default: horizontal */
  flex-wrap: wrap;     /* Allow wrapping if needed */
  padding-left: 10px;
  padding-right: 10px;
}

.bh-navbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #64b5f6;
  font-weight: bold;
  min-width: 90px;
  min-height: 80px;
  padding: 0 1em;
  background: transparent;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  overflow: visible;
}

.bh-navbar a::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80px;  /* size of circle */
  height: 80px;
  border-radius: 50%;
  background: #e6f7ff;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: -1;
}

.bh-navbar a:hover::before,
.bh-navbar a.active::before,
.bh-navbar a:focus::before {
  opacity: 1;
}

.bh-navbar a:hover,
.bh-navbar a.active,
.bh-navbar a:focus {
  color: #1976d2;
}

.bh-navbar .chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 30px;
  min-width: 30px;
  margin-left: -8px;
  z-index: 2;
  position: relative;
  pointer-events: none;
  transition: background 0.2s;
}

.bh-navbar .chevron svg {
  display: block;
  height: 100%;
  width: 100%;
}

.bh-navbar a:hover + .chevron svg polyline,
.bh-navbar a.active + .chevron svg polyline,
.bh-navbar a:focus + .chevron svg polyline {
  stroke: #1976d2;
  transition: stroke 0.2s;
}

/* --- Responsive: Stack vertically on small screens --- */
@media (max-width: 700px) {
  .bh-navbar {
    flex-direction: column;
    align-items: stretch;
    max-width: 96vw;
    margin: 1em auto;
  }
  .bh-navbar a, .bh-navbar .chevron {
    min-width: 0;
    width: 100%;
    margin-left: 0;
    min-height: 56px;
    height: 56px;
    padding: 0.5em 1em;
  }
  .bh-navbar .chevron {
    height: 30px;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: 0;
  }
  .bh-navbar .chevron svg {
    height: 100%;
    width: 30px;
    transform: rotate(90deg); /* Make chevron point down */
    margin: 0 auto;
  }
}
.carousel-control-prev {
  background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 16 16'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L6.707 8l4.647 5.646a.5.5 0 0 1-.708.708l-5-6a.5.5 0 0 1 0-.708l5-6a.5.5 0 0 1 .708 0z'/></svg>");
  background-color: transparent; /* ensure no background */
  width: 48px;                  /* optional: adjust size */
  height: 48px;                 /* optional: adjust size */
  top: 50%;
  transform: translateY(-50%);
}
.carousel-control-next {
  background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 16 16'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l5 6a.5.5 0 0 1 0 .708l-5 6a.5.5 0 0 1-.708-.708L9.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
  background-color: transparent;
  width: 48px;                  /* optional: adjust size */
  height: 48px;                 /* optional: adjust size */
  top: 50%;
  transform: translateY(-50%);
}
.carousel-indicators [data-bs-target] {
  background-color: #333 !important;   /* dark gray for inactive */
  opacity: 0.7;
}
.carousel-indicators .active {
  background-color: #007bff !important; /* blue for active */
  opacity: 1;
}

/* Container for the card's image and overlays */
.image-overlay-container {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3; /* Or set a fixed height if you prefer */
  background-size: cover;
  background-position: center;
  border-radius: 1rem;
  overflow: hidden;
  min-height: 220px; /* fallback for browsers that don't support aspect-ratio */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  
}

/* Overlay text base style */
.overlay-text {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  max-width: 95%;
  width: auto;
  color: #222;
  background: rgba(255,255,255,0.65);
  padding: 0.75em 1em;
  font-weight: 600;
  box-sizing: border-box;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  z-index: 2;
  /* text-align: center; */
}

/* Title overlay (top) */
.overlay-top {
  top: 0.5em;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

/* Tagline overlay (bottom) */
.overlay-bottom {
  bottom: 0.5em;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
  font-weight: 400;
  font-size: 1em;
}

/* Card container */
.insight-map-card {
  border-radius: 1rem;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s;
}

.insight-map-card:hover,
.insight-map-card:focus-within {
  box-shadow: 0 12px 48px 0 rgba(0,0,0,0.45), 0 2px 8px 0 rgba(0,0,0,0.18);
}


/* Remove link underline and make clickable area full card */
.insightmaps {
  display: block;
  text-decoration: none;
  color: inherit;
  width: 100%;
  height: 100%;
}

/* Visually hidden (for accessibility) */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: 0;
}

.header-image-overlay-container {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  min-height: 400px; 
  max-width: 100vw;
  overflow: hidden;
}

.header-bg-image {
  width: 100vw;     
  min-width: 100vw;
  height: 400px;  
  max-height: 50vh; 
  object-fit: cover;
  display: block;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.header-overlay-content {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.header-overlay-content h2 {
  font-size: 2rem;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  width: 100%;
  transition: font-size 0.2s;
}

.header-overlay-content .row {
  flex-wrap: wrap;
}

.header-overlay-top {
  top: 0;
  align-items: flex-start;
  padding-top: 2em;
  pointer-events: none;
}

.header-overlay-bottom {
  bottom: 0;
  align-items: flex-end;
  padding-bottom: 2em;
  pointer-events: none;
}

.header-overlay-content .row h1 {
  padding-top: 0;
  font-weight: bold;
}


.header-overlay-content .row,
.header-overlay-content .roadmap-text {
  background: rgba(255,255,255,0.75);
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  padding-top: 0.3em;
  padding-right: 1em;
  padding-bottom: 1em;
  padding-left: 1em;
  margin: 0 auto;
  width: 95%;
  max-width: 1100px;
  pointer-events: auto;
}

.header-overlay-content .roadmap-text{
  padding-top: 1em;
}


.header-overlay-content .roadmap-text {
  font-size: 1.1em;
  text-align: left;
}