/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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-b58f11e8]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --sm_dn: 575px;
  --md_dn: 767px;
  --lg_dn: 991px;
  --xl_dn: 1199px;
}

/* 
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);
}
*/
/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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);
	}
*/
/* FLUID FONT SIZE
========================================================================== */
/* ASPECT RATIO
========================================================================== */
.marketData-request-error h2[data-v-b58f11e8], .marketData-request-error h3[data-v-b58f11e8] {
  color: #fff;
  font-size: 2rem;
}/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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-184c5a74]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --sm_dn: 575px;
  --md_dn: 767px;
  --lg_dn: 991px;
  --xl_dn: 1199px;
}

/* 
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);
}
*/
/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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);
	}
*/
/* FLUID FONT SIZE
========================================================================== */
/* ASPECT RATIO
========================================================================== */
p.marketData-results-noResults[data-v-184c5a74] {
  padding: 0 15px;
}/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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-46e85f48]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --sm_dn: 575px;
  --md_dn: 767px;
  --lg_dn: 991px;
  --xl_dn: 1199px;
}

/* 
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);
}
*/
/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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);
	}
*/
/* FLUID FONT SIZE
========================================================================== */
/* ASPECT RATIO
========================================================================== */
.marketData-tableHeading[data-v-46e85f48] {
  font-family: "Gilroy-Regular", Arial, Helvetica, sans-serif;
  position: relative;
}
.marketData-tableHeading:last-child .border[data-v-46e85f48] {
  display: none;
}
.marketData-tableHeading.heading .text[data-v-46e85f48] {
  font-size: 1.125rem;
}
.marketData-tableHeading.sortable[data-v-46e85f48] {
  cursor: pointer;
  padding: 0.25rem 1.125rem 0.25rem 0.9375rem;
}
.marketData-tableHeading.sortable[data-v-46e85f48]:hover {
  background: #078ecb;
}
.marketData-tableHeading.borderBottom[data-v-46e85f48] {
  border-bottom: solid 1px #444956;
}
.marketData-tableHeading.marketData-tableHeading--lg span.text[data-v-46e85f48] {
  text-align: center;
  font-size: 1.125rem;
  color: #8b8d9c;
  position: relative;
  padding: 0 0 10px;
  display: block;
}
.text[data-v-46e85f48] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.table-head__cond[data-v-46e85f48] {
  display: contents;
}
.arrow[data-v-46e85f48] {
  position: absolute;
  right: 6px;
  top: 5px;
  bottom: 5px;
  width: 6px;
}
.arrow[data-v-46e85f48]::before, .arrow[data-v-46e85f48]::after {
  position: absolute;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  content: "";
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  border-bottom: 5px solid #fff;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
}
.arrow[data-v-46e85f48]::after {
  top: auto;
  bottom: 0;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.border[data-v-46e85f48] {
  position: absolute;
  width: 1px;
  background: #2f3548;
  top: 0;
  right: 0;
  bottom: 0;
  border: none !important;
}/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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-12f07cc5]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --sm_dn: 575px;
  --md_dn: 767px;
  --lg_dn: 991px;
  --xl_dn: 1199px;
}

/* 
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);
}
*/
/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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);
	}
*/
/* FLUID FONT SIZE
========================================================================== */
/* ASPECT RATIO
========================================================================== *//*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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-40062af2]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --sm_dn: 575px;
  --md_dn: 767px;
  --lg_dn: 991px;
  --xl_dn: 1199px;
}

/* 
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);
}
*/
/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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);
	}
*/
/* FLUID FONT SIZE
========================================================================== */
/* ASPECT RATIO
========================================================================== */
.marketData-footnote-span[data-v-40062af2] {
  display: block;
}/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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-7deefc68]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --sm_dn: 575px;
  --md_dn: 767px;
  --lg_dn: 991px;
  --xl_dn: 1199px;
}

/* 
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);
}
*/
/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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);
	}
*/
/* FLUID FONT SIZE
========================================================================== */
/* ASPECT RATIO
========================================================================== */
.marketData-columnHeaderItem span[data-v-7deefc68]::-moz-selection {
  background: transparent;
}
.marketData-columnHeaderItem span[data-v-7deefc68]::selection {
  background: transparent;
}
.marketData-columnHeaderItem .arrow.disabled[data-v-7deefc68] {
  cursor: default;
}/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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: 1200px;
  --sm_dn: 575px;
  --md_dn: 767px;
  --lg_dn: 991px;
  --xl_dn: 1199px;
}

/* 
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);
}
*/
/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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);
	}
*/
/* FLUID FONT SIZE
========================================================================== */
/* ASPECT RATIO
========================================================================== */
@media (max-width: 991) {
.marketData-chartContainer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
}
@media (max-width: 560) {
.marketData-chartContainer canvas#pie-chart {
    width: 100%;
    height: unset;
}
}/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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-d177456e]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --sm_dn: 575px;
  --md_dn: 767px;
  --lg_dn: 991px;
  --xl_dn: 1199px;
}

/* 
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);
}
*/
/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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);
	}
*/
/* FLUID FONT SIZE
========================================================================== */
/* ASPECT RATIO
========================================================================== */
.marketData-results h2.marketData-reduce-mt[data-v-d177456e] {
  margin-top: 1.625rem;
}/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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-66455b43]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --sm_dn: 575px;
  --md_dn: 767px;
  --lg_dn: 991px;
  --xl_dn: 1199px;
}

/* 
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);
}
*/
/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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);
	}
*/
/* FLUID FONT SIZE
========================================================================== */
/* ASPECT RATIO
========================================================================== *//*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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-7944f10e]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --sm_dn: 575px;
  --md_dn: 767px;
  --lg_dn: 991px;
  --xl_dn: 1199px;
}

/* 
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);
}
*/
/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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);
	}
*/
/* FLUID FONT SIZE
========================================================================== */
/* ASPECT RATIO
========================================================================== */
.tbody-move[data-v-7944f10e] {
  -webkit-transition: -webkit-transform 0.75s ease;
  transition: -webkit-transform 0.75s ease;
  transition: transform 0.75s ease;
  transition: transform 0.75s ease, -webkit-transform 0.75s ease;
}/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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-52daa3f7]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --sm_dn: 575px;
  --md_dn: 767px;
  --lg_dn: 991px;
  --xl_dn: 1199px;
}

/* 
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);
}
*/
/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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);
	}
*/
/* FLUID FONT SIZE
========================================================================== */
/* ASPECT RATIO
========================================================================== *//*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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-7b579565]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --sm_dn: 575px;
  --md_dn: 767px;
  --lg_dn: 991px;
  --xl_dn: 1199px;
}

/* 
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);
}
*/
/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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);
	}
*/
/* FLUID FONT SIZE
========================================================================== */
/* ASPECT RATIO
========================================================================== *//*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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-4624ba0e]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --sm_dn: 575px;
  --md_dn: 767px;
  --lg_dn: 991px;
  --xl_dn: 1199px;
}

/* 
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);
}
*/
/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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);
	}
*/
/* FLUID FONT SIZE
========================================================================== */
/* ASPECT RATIO
========================================================================== */
a[data-v-4624ba0e] {
  color: #00bdb3;
  font-size: 0.875rem;
  font-family: "Gilroy-SemiBold", Arial, Helvetica, sans-serif;
  text-decoration: none;
}/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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-28dbab48]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --sm_dn: 575px;
  --md_dn: 767px;
  --lg_dn: 991px;
  --xl_dn: 1199px;
}

/* 
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);
}
*/
/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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);
	}
*/
/* FLUID FONT SIZE
========================================================================== */
/* ASPECT RATIO
========================================================================== *//*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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-e999bcc8]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --sm_dn: 575px;
  --md_dn: 767px;
  --lg_dn: 991px;
  --xl_dn: 1199px;
}

/* 
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);
}
*/
/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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);
	}
*/
/* FLUID FONT SIZE
========================================================================== */
/* ASPECT RATIO
========================================================================== */
a.marketData-inputBtn[data-v-e999bcc8] {
  cursor: pointer;
}/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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-d6159864]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --sm_dn: 575px;
  --md_dn: 767px;
  --lg_dn: 991px;
  --xl_dn: 1199px;
}

/* 
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);
}
*/
/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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);
	}
*/
/* FLUID FONT SIZE
========================================================================== */
/* ASPECT RATIO
========================================================================== */
a.marketData-inputBtn[data-v-d6159864] {
  cursor: pointer;
}/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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-7a22fb5a]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --sm_dn: 575px;
  --md_dn: 767px;
  --lg_dn: 991px;
  --xl_dn: 1199px;
}

/* 
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);
}
*/
/*******************************************
******* GLOBAL OVERRIDES *******************
**** You can reassign these global *********
**** defaults by un-commenting the *********
**** variables below & giving them *********
**** new values. The comments show *********
**** the default values.           *********
*******************************************/
/******************************************/
/*******************************************
******* BRAND/GLOBAL COLORS ****************
*******************************************/
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
/*
* 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);
	}
*/
/* FLUID FONT SIZE
========================================================================== */
/* ASPECT RATIO
========================================================================== */