/*
 * black and white for mixing
 */
/*
 * Define base brand colors and gray variables here and then add them to the map below.
 * Color names can be generated entering hex values into http://chir.ag/projects/name-that-color/
 * Colors below are examples YOU SHOULD REPLACE WITH YOU OWN COLOR NAMES/HEX
 */
/*
  * Standard error/warning/success
  */
/*
 * Populate the map below with the brand colors you entered above gray in map for shades
 * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss
 * as well as populating in pug/styleguide.pug
 * USAGE (scss):
	 div {
		 color: palette(gray,500);
		 background-color: palette(gray,50);
		 border: 1px solid palette(gray,900);
	 }
 */
[data-v-54b38805]:root {
  --xs:0;
  --sm:576px;
  --md:768px;
  --lg:992px;
  --xl:1050px;
}

/*
* Call the color palette modifiers for scss usage
* USAGE (scss):
	div {
		color: palette(gray,500);
		background-color: palette(gray,50);
		border: 1px solid palette(gray,900);
	}
*/
/**
* Calculate the contrast ratio between two colors.
* See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
*/
/**
* Determine whether to use dark or light text on top of given color.
* Returns black for dark text and white for light text.
*/
/*
create a fluid property value that adjusts from $min to $max,
based on screen size (default $minWidth and $maxWidth in the _variables.scss)
example:
h1 {
  @include fluid(font-size, 2rem, 3rem);
  @include fluid(margin-bottom, 20px, 30px);
  @include fluid(padding-left, 0.5rem, 5rem, 900px 1200px);
}
*/
.hideVisually[data-v-54b38805] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  border: 0;
}
.county-map[data-v-54b38805] {
  display: flex;
}
.county-map__error[data-v-54b38805] {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
  margin: 0 auto;
  text-align: center;
}
@media (min-width: 576px) {
.county-map__error[data-v-54b38805] {
    font-size: 1.75rem;
}
}
.county-map__inner[data-v-54b38805] {
  flex: 1;
  display: flex;
  position: relative;
  width: 100%;
  max-width: 100%;
}
.county-map__inner[data-v-54b38805]::before {
  content: "";
  width: 100%;
  display: block;
  padding-top: 73.68%;
}
.county-map__inner.isErrored[data-v-54b38805] {
  aspect-ratio: 100/73.68;
  background-color: rgba(255, 0, 0, 0.14);
  border: dashed 0.25rem #ff0000;
  padding: 0.5rem;
}
.county-map__inner.isErrored[data-v-54b38805]::before {
  content: unset;
}/*
 * black and white for mixing
 */
/*
 * Define base brand colors and gray variables here and then add them to the map below.
 * Color names can be generated entering hex values into http://chir.ag/projects/name-that-color/
 * Colors below are examples YOU SHOULD REPLACE WITH YOU OWN COLOR NAMES/HEX
 */
/*
  * Standard error/warning/success
  */
/*
 * Populate the map below with the brand colors you entered above gray in map for shades
 * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss
 * as well as populating in pug/styleguide.pug
 * USAGE (scss):
	 div {
		 color: palette(gray,500);
		 background-color: palette(gray,50);
		 border: 1px solid palette(gray,900);
	 }
 */
:root {
  --xs:0;
  --sm:576px;
  --md:768px;
  --lg:992px;
  --xl:1050px;
}

/*
* Call the color palette modifiers for scss usage
* USAGE (scss):
	div {
		color: palette(gray,500);
		background-color: palette(gray,50);
		border: 1px solid palette(gray,900);
	}
*/
/**
* Calculate the contrast ratio between two colors.
* See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
*/
/**
* Determine whether to use dark or light text on top of given color.
* Returns black for dark text and white for light text.
*/
/*
create a fluid property value that adjusts from $min to $max,
based on screen size (default $minWidth and $maxWidth in the _variables.scss)
example:
h1 {
  @include fluid(font-size, 2rem, 3rem);
  @include fluid(margin-bottom, 20px, 30px);
  @include fluid(padding-left, 0.5rem, 5rem, 900px 1200px);
}
*/
.hideVisually {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  border: 0;
}
.loader__inner {
  position: static !important;
  transform: none !important;
}/*
 * black and white for mixing
 */
/*
 * Define base brand colors and gray variables here and then add them to the map below.
 * Color names can be generated entering hex values into http://chir.ag/projects/name-that-color/
 * Colors below are examples YOU SHOULD REPLACE WITH YOU OWN COLOR NAMES/HEX
 */
/*
  * Standard error/warning/success
  */
/*
 * Populate the map below with the brand colors you entered above gray in map for shades
 * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss
 * as well as populating in pug/styleguide.pug
 * USAGE (scss):
	 div {
		 color: palette(gray,500);
		 background-color: palette(gray,50);
		 border: 1px solid palette(gray,900);
	 }
 */
:root {
  --xs:0;
  --sm:576px;
  --md:768px;
  --lg:992px;
  --xl:1050px;
}

/*
* Call the color palette modifiers for scss usage
* USAGE (scss):
	div {
		color: palette(gray,500);
		background-color: palette(gray,50);
		border: 1px solid palette(gray,900);
	}
*/
/**
* Calculate the contrast ratio between two colors.
* See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
*/
/**
* Determine whether to use dark or light text on top of given color.
* Returns black for dark text and white for light text.
*/
/*
create a fluid property value that adjusts from $min to $max,
based on screen size (default $minWidth and $maxWidth in the _variables.scss)
example:
h1 {
  @include fluid(font-size, 2rem, 3rem);
  @include fluid(margin-bottom, 20px, 30px);
  @include fluid(padding-left, 0.5rem, 5rem, 900px 1200px);
}
*/
.hideVisually {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  border: 0;
}
.county-map__marker {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  aspect-ratio: 1/1;
  background: #1e1e1e;
}
.county-map__marker:hover, div:hover > div > .county-map__marker {
  background: #7a9a01;
}
@media (max-width: 767px) {
.county-map__marker {
    width: 14px;
    height: 14px;
}
}
.county-map__label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.375rem;
  color: #fff;
  box-shadow: 0 0 10px rgba(30, 30, 30, 0.1);
  background-color: #1e1e1e;
  font-size: 0.75rem;
  line-height: 1;
  z-index: 1;
  display: none;
}/*
 * black and white for mixing
 */
/*
 * Define base brand colors and gray variables here and then add them to the map below.
 * Color names can be generated entering hex values into http://chir.ag/projects/name-that-color/
 * Colors below are examples YOU SHOULD REPLACE WITH YOU OWN COLOR NAMES/HEX
 */
/*
  * Standard error/warning/success
  */
/*
 * Populate the map below with the brand colors you entered above gray in map for shades
 * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss
 * as well as populating in pug/styleguide.pug
 * USAGE (scss):
	 div {
		 color: palette(gray,500);
		 background-color: palette(gray,50);
		 border: 1px solid palette(gray,900);
	 }
 */
[data-v-b3f82a06]:root {
  --xs:0;
  --sm:576px;
  --md:768px;
  --lg:992px;
  --xl:1050px;
}

/*
* Call the color palette modifiers for scss usage
* USAGE (scss):
	div {
		color: palette(gray,500);
		background-color: palette(gray,50);
		border: 1px solid palette(gray,900);
	}
*/
/**
* Calculate the contrast ratio between two colors.
* See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
*/
/**
* Determine whether to use dark or light text on top of given color.
* Returns black for dark text and white for light text.
*/
/*
create a fluid property value that adjusts from $min to $max,
based on screen size (default $minWidth and $maxWidth in the _variables.scss)
example:
h1 {
  @include fluid(font-size, 2rem, 3rem);
  @include fluid(margin-bottom, 20px, 30px);
  @include fluid(padding-left, 0.5rem, 5rem, 900px 1200px);
}
*/
.hideVisually[data-v-b3f82a06] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  border: 0;
}
.county-map__map[data-v-b3f82a06] {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}/*
 * black and white for mixing
 */
/*
 * Define base brand colors and gray variables here and then add them to the map below.
 * Color names can be generated entering hex values into http://chir.ag/projects/name-that-color/
 * Colors below are examples YOU SHOULD REPLACE WITH YOU OWN COLOR NAMES/HEX
 */
/*
  * Standard error/warning/success
  */
/*
 * Populate the map below with the brand colors you entered above gray in map for shades
 * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss
 * as well as populating in pug/styleguide.pug
 * USAGE (scss):
	 div {
		 color: palette(gray,500);
		 background-color: palette(gray,50);
		 border: 1px solid palette(gray,900);
	 }
 */
[data-v-abe20a10]:root {
  --xs:0;
  --sm:576px;
  --md:768px;
  --lg:992px;
  --xl:1050px;
}

/*
* Call the color palette modifiers for scss usage
* USAGE (scss):
	div {
		color: palette(gray,500);
		background-color: palette(gray,50);
		border: 1px solid palette(gray,900);
	}
*/
/**
* Calculate the contrast ratio between two colors.
* See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
*/
/**
* Determine whether to use dark or light text on top of given color.
* Returns black for dark text and white for light text.
*/
/*
create a fluid property value that adjusts from $min to $max,
based on screen size (default $minWidth and $maxWidth in the _variables.scss)
example:
h1 {
  @include fluid(font-size, 2rem, 3rem);
  @include fluid(margin-bottom, 20px, 30px);
  @include fluid(padding-left, 0.5rem, 5rem, 900px 1200px);
}
*/
.hideVisually[data-v-abe20a10] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  border: 0;
}
.loader[data-v-abe20a10] {
  width: 100%;
  height: 100%;
  inset: 0;
  z-index: 20;
  position: absolute;
  background: #fff;
}
.loader.hidden[data-v-abe20a10] {
  animation: fade-data-v-abe20a10 0.25s 0.75s ease-out forwards;
  pointer-events: none;
}
.loader__inner[data-v-abe20a10] {
  position: absolute;
  top: 3rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}
.hidden .loader__inner[data-v-abe20a10] {
  animation: scale-data-v-abe20a10 1.25s ease-out forwards,exploadX-data-v-abe20a10 0.75s 0.625s forwards ease-out;
}
.loader__row[data-v-abe20a10] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.hidden .loader__row[data-v-abe20a10] {
  animation: exploadY-data-v-abe20a10 0.75s 0.625s forwards ease-out;
}
.loader__block[data-v-abe20a10] {
  width: clamp(1.25rem, 3vw, 3rem);
  height: clamp(1.25rem, 3vw, 3rem);
  background: #00677f;
  position: relative;
}
.loader__block--outer-1[data-v-abe20a10] {
  animation: phase-data-v-abe20a10 2.5s -0.1388888889s infinite;
}
.loader__block--outer-2[data-v-abe20a10] {
  animation: phase-data-v-abe20a10 2.5s -0.2777777778s infinite;
}
.loader__block--outer-3[data-v-abe20a10] {
  animation: phase-data-v-abe20a10 2.5s -0.4166666667s infinite;
}
.loader__block--outer-4[data-v-abe20a10] {
  animation: phase-data-v-abe20a10 2.5s -0.5555555556s infinite;
}
.loader__block--outer-5[data-v-abe20a10] {
  animation: phase-data-v-abe20a10 2.5s -0.6944444444s infinite;
}
.loader__block--outer-6[data-v-abe20a10] {
  animation: phase-data-v-abe20a10 2.5s -0.8333333333s infinite;
}
.loader__block--outer-7[data-v-abe20a10] {
  animation: phase-data-v-abe20a10 2.5s -0.9722222222s infinite;
}
.loader__block--outer-8[data-v-abe20a10] {
  animation: phase-data-v-abe20a10 2.5s -1.1111111111s infinite;
}
.loader__block--outer-9[data-v-abe20a10] {
  animation: phase-data-v-abe20a10 2.5s -1.25s infinite;
}
.loader__block--outer-10[data-v-abe20a10] {
  animation: phase-data-v-abe20a10 2.5s -1.3888888889s infinite;
}
.loader__block--outer-11[data-v-abe20a10] {
  animation: phase-data-v-abe20a10 2.5s -1.5277777778s infinite;
}
.loader__block--outer-12[data-v-abe20a10] {
  animation: phase-data-v-abe20a10 2.5s -1.6666666667s infinite;
}
.loader__block--outer-13[data-v-abe20a10] {
  animation: phase-data-v-abe20a10 2.5s -1.8055555556s infinite;
}
.loader__block--outer-14[data-v-abe20a10] {
  animation: phase-data-v-abe20a10 2.5s -1.9444444444s infinite;
}
.loader__block--outer-15[data-v-abe20a10] {
  animation: phase-data-v-abe20a10 2.5s -2.0833333333s infinite;
}
.loader__block--outer-16[data-v-abe20a10] {
  animation: phase-data-v-abe20a10 2.5s -2.2222222222s infinite;
}
.loader__block--inner-1[data-v-abe20a10] {
  animation: phase-data-v-abe20a10 2.5s -0.4166666667s infinite;
}
.loader__block--inner-2[data-v-abe20a10] {
  opacity: 0;
}
.loader__block--inner-3[data-v-abe20a10] {
  animation: phase-data-v-abe20a10 2.5s -1.25s infinite;
}
.loader__block--inner-4[data-v-abe20a10] {
  animation: phase-data-v-abe20a10 2.5s -1.6666666667s infinite;
}
.loader__block--inner-5[data-v-abe20a10] {
  animation: phase-data-v-abe20a10 2.5s -2.0833333333s infinite;
}
.loader__block--inner-6[data-v-abe20a10] {
  animation: phase-data-v-abe20a10 2.5s -2.5s infinite;
}
.loader__block--inner-7[data-v-abe20a10] {
  animation: phase-data-v-abe20a10 2.5s -2.9166666667s infinite;
}
.loader__block--inner-8[data-v-abe20a10] {
  animation: phase-data-v-abe20a10 2.5s -3.3333333333s infinite;
}
.loader__block--inner-9[data-v-abe20a10] {
  animation: phase-data-v-abe20a10 2.5s -3.75s infinite;
}
@keyframes phase-data-v-abe20a10 {
0% {
    background: #00677f;
}
30% {
    background: #6cb2c8;
    transform: scale(0.75);
}
100% {
    background: #00677f;
}
}
@keyframes scale-data-v-abe20a10 {
50% {
    transform: translateX(-50%) scale(0.75, 0.75);
    opacity: 1;
}
90% {
    opacity: 0;
}
100% {
    transform: translateX(-50%) scale(5, 5);
    opacity: 0;
}
}
@keyframes fade-data-v-abe20a10 {
100% {
    background: transparent;
}
}
@keyframes exploadX-data-v-abe20a10 {
to {
    gap: 20vmin;
}
}
@keyframes exploadY-data-v-abe20a10 {
to {
    gap: 10vmin;
}
}/*
 * black and white for mixing
 */
/*
 * Define base brand colors and gray variables here and then add them to the map below.
 * Color names can be generated entering hex values into http://chir.ag/projects/name-that-color/
 * Colors below are examples YOU SHOULD REPLACE WITH YOU OWN COLOR NAMES/HEX
 */
/*
  * Standard error/warning/success
  */
/*
 * Populate the map below with the brand colors you entered above gray in map for shades
 * Helper classes are being generated by this sass map in styles/scss/base/_helpers.scss
 * as well as populating in pug/styleguide.pug
 * USAGE (scss):
	 div {
		 color: palette(gray,500);
		 background-color: palette(gray,50);
		 border: 1px solid palette(gray,900);
	 }
 */
[data-v-39364fce]:root {
  --xs:0;
  --sm:576px;
  --md:768px;
  --lg:992px;
  --xl:1050px;
}

/*
* Call the color palette modifiers for scss usage
* USAGE (scss):
	div {
		color: palette(gray,500);
		background-color: palette(gray,50);
		border: 1px solid palette(gray,900);
	}
*/
/**
* Calculate the contrast ratio between two colors.
* See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
*/
/**
* Determine whether to use dark or light text on top of given color.
* Returns black for dark text and white for light text.
*/
/*
create a fluid property value that adjusts from $min to $max,
based on screen size (default $minWidth and $maxWidth in the _variables.scss)
example:
h1 {
  @include fluid(font-size, 2rem, 3rem);
  @include fluid(margin-bottom, 20px, 30px);
  @include fluid(padding-left, 0.5rem, 5rem, 900px 1200px);
}
*/
.hideVisually[data-v-39364fce] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  border: 0;
}
.county-map__modal .dialog__content[data-v-39364fce] {
  width: calc(100vw - 2.5rem);
  max-width: 540px;
}
.county-map__modal .community-report-dialog__item[data-v-39364fce] {
  font-size: 1rem;
}
@media (min-width: 576px) {
.county-map__modal .community-report-dialog__item[data-v-39364fce] {
    font-size: 1.125rem;
}
}
.county-map__modal .community-report-dialog__line[data-v-39364fce] {
  margin-bottom: 0.5rem;
  line-height: 1.25;
}
.county-map__modal .community-report-dialog__line[data-v-39364fce]:last-of-type {
  margin-bottom: 0;
}
.county-map__modal .community-report-dialog__line span[data-v-39364fce] {
  font-weight: 700;
}
.county-map__modal hr[data-v-39364fce] {
  border-color: #1e1e1e;
}