/*******************************************
******* 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 ****************
*******************************************/
/*
  * 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);
	 }
 */
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
:root {
  --breakXs: 0;
  --breakSm: 576px;
  --breakMd: 768px;
  --breakLg: 992px;
  --breakXl: 1200px;
}
:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --sm_dn: 575px;
  --md_dn: 767px;
  --lg_dn: 991px;
  --xl_dn: 1199px;
  --homeFooter: 1345px;
  --fill-darkGray: #353535;
  --fill-lightGray: #e7e7e7;
  --fill-blue: #0056ac;
}

/*
* 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);
	}
*/
/* 
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;
}

/*******************************************
******* 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 ****************
*******************************************/
/*
  * 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);
	 }
 */
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
:root {
  --breakXs: 0;
  --breakSm: 576px;
  --breakMd: 768px;
  --breakLg: 992px;
  --breakXl: 1200px;
}

/* FLUID FONT SIZE
========================================================================== */
/*
SASS:
.card {
  background-color:$white;
  @include modifier(--red) {
    background-color:red;
}
COMPILED CSS:
.card {
  background-color:#fff;
}
.p-card--red .card, .card--red {
  background-color: red;
}
*/
.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;
}
:root {
  --registration-blue: #1d2946;
  --registration-light-gray: #b0b0b0;
  --registration-button-blue: #2f5aa1;
  --registration-button-teal: #00c7ab;
  --registration-button-dark-teal: #004f71;
  --registration-button-blue-hover: #1f6ab1;
  --registration-button-teal-hover: #14e3b6;
  --registration-button-dark-teal-hover: #105f81;
  --registration-gap-base: 20px;
  --registration-font-family: "Gilroy-Regular", Arial, Helvetica, sans-serif;
  --registration-font-family-bold: "Gilroy-Bold", Arial, Helvetica, sans-serif;
  --registration-font-family-serif: "Roboto Slab", Arial, Helvetica, sans-serif;
  --registration-font-family-icon: "Font Awesome 5 Pro";
  --registration-input-size: 1rem;
}
.registration-flyout {
  background: var(--registration-blue);
  color: #fff;
  font-family: var(--registration-font-family);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0 1rem 0 0.55rem;
}
.registration-flyout__disabled {
  pointer-events: none;
}
.registration-flyout__lock {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  font-size: 2em;
  padding: 2rem 0 0 13%;
  max-height: 70px;
}
@media (max-width: 575px) {
.registration-flyout__lock {
    padding-left: 22%;
}
}
.registration-flyout__logo {
  display: block;
  text-align: center;
  margin-bottom: 2rem;
}
.registration-flyout__logo img {
  max-width: 55px;
}
@media (min-width: 992px) {
.registration-flyout__logo {
    -webkit-transform: translateX(-7px);
            transform: translateX(-7px);
}
}
.registration-flyout__left {
  -ms-flex-preferred-size: 10%;
      flex-basis: 10%;
  margin-top: -3.5rem;
}
@media (min-width: 992px) {
.registration-flyout__left {
    margin-top: -2.9375rem;
}
}
@media (max-width: 575px) {
.registration-flyout__left {
    -ms-flex-preferred-size: 15%;
        flex-basis: 15%;
}
}
.registration-flyout__close {
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  text-decoration: none;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  color: #fff;
  font-family: "Gilroy-Bold", Arial, Helvetica, sans-serif;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 28px;
  margin: 0 0 0 10px;
}
.registration-flyout__close:hover {
  text-decoration: none;
}
.registration-flyout__close span {
  -webkit-writing-mode: tb-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: tb-rl;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.registration-flyout__close i {
  margin-bottom: 0.5rem;
}
@media (max-width: 575px) {
.registration-flyout__close {
    font-size: 0.75rem;
}
}
.registration-flyout__right {
  -ms-flex-preferred-size: 90%;
      flex-basis: 90%;
}
@media (max-width: 575px) {
.registration-flyout__right {
    -ms-flex-preferred-size: 85%;
        flex-basis: 85%;
}
}
.registration-flyout__error {
  font-size: 0.85em;
  color: #fff;
  width: 100%;
}
.registration-flyout__error > * {
  margin-bottom: 0;
}
.registration-flyout__error p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding: 0.5rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.registration-flyout__error i {
  border-radius: 50%;
  background-color: #f00;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 0.8em;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2em;
  height: 2em;
}
.registration-flyout__error-wrapper {
  border: 1px solid #f00;
  margin-bottom: 0.75rem;
  width: 100%;
}
.registration-flyout__disabled-anim {
  color: transparent;
}
.registration-flyout__disabled-anim:before {
  content: "\f110";
  color: var(--registration-button-teal);
  display: inline-block;
  font-family: var(--registration-font-family-icon);
  font-size: 1em;
  -webkit-animation: spinner 1s linear infinite;
          animation: spinner 1s linear infinite;
}
.login-page-wrapper {
  display: none;
  position: absolute;
  max-width: 900px;
  width: 98vw;
  z-index: -1;
}
.login-page-wrapper.is-active {
  display: block;
  z-index: 1000;
  height: 100vh;
  overflow-y: auto;
  background: var(--registration-blue);
}
@-webkit-keyframes spinner {
0% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
}
50% {
    -webkit-transform: rotate(180deg) scale(1.25);
            transform: rotate(180deg) scale(1.25);
}
100% {
    -webkit-transform: rotate(360deg) scale(1);
            transform: rotate(360deg) scale(1);
}
}
@keyframes spinner {
0% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
}
50% {
    -webkit-transform: rotate(180deg) scale(1.25);
            transform: rotate(180deg) scale(1.25);
}
100% {
    -webkit-transform: rotate(360deg) scale(1);
            transform: rotate(360deg) scale(1);
}
}/*******************************************
******* 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 ****************
*******************************************/
/*
  * 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);
	 }
 */
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
[data-v-26e4a023]:root {
  --breakXs: 0;
  --breakSm: 576px;
  --breakMd: 768px;
  --breakLg: 992px;
  --breakXl: 1200px;
}
[data-v-26e4a023]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --sm_dn: 575px;
  --md_dn: 767px;
  --lg_dn: 991px;
  --xl_dn: 1199px;
  --homeFooter: 1345px;
  --fill-darkGray: #353535;
  --fill-lightGray: #e7e7e7;
  --fill-blue: #0056ac;
}

/*
* 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);
	}
*/
/* 
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-26e4a023] {
  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;
}

/*******************************************
******* 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 ****************
*******************************************/
/*
  * 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);
	 }
 */
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
[data-v-26e4a023]:root {
  --breakXs: 0;
  --breakSm: 576px;
  --breakMd: 768px;
  --breakLg: 992px;
  --breakXl: 1200px;
}

/* FLUID FONT SIZE
========================================================================== */
/*
SASS:
.card {
  background-color:$white;
  @include modifier(--red) {
    background-color:red;
}
COMPILED CSS:
.card {
  background-color:#fff;
}
.p-card--red .card, .card--red {
  background-color: red;
}
*/
.hideVisually[data-v-26e4a023] {
  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;
}
.registration-page[data-v-26e4a023] {
  background: var(--registration-blue);
  color: #fff;
  font-family: var(--registration-font-family);
  padding: 33px 53px 33px 19px;
}
.registration-page__heading[data-v-26e4a023] {
  font-size: 2em;
  font-weight: 600;
  margin-bottom: var(--registration-gap-base);
  font-family: var(--registration-font-family-bold);
}
.registration-page__subheading[data-v-26e4a023] {
  font-weight: 600;
  font-family: var(--registration-font-family);
  font-size: 1.15em;
  margin-bottom: calc(var(--registration-gap-base) * 2);
}
.registration-page__form[data-v-26e4a023] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--registration-gap-base);
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.registration-page__input-wrapper[data-v-26e4a023] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  position: relative;
}
.registration-page__password-wrapper[data-v-26e4a023] {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
}
.registration-page__password-explanation[data-v-26e4a023] {
  font-size: 0.875rem;
}
.registration-page__password-indicator[data-v-26e4a023] {
  width: 100%;
  height: 0.375rem;
  background: #e7e7e7;
  margin-bottom: 0.625rem;
}
.registration-page__password-indicator[data-v-26e4a023]::before {
  content: "";
  display: block;
  width: 0;
  height: 100%;
  background: #931208;
  -webkit-transition: width 0.25s ease, background 0.25s ease;
  transition: width 0.25s ease, background 0.25s ease;
}
.new-password--valid .registration-page__password-indicator[data-v-26e4a023]::before {
  background: #5a8100;
}
.registration-page__password-wrapper[data-strength="1"] .registration-page__password-indicator[data-v-26e4a023]::before {
  width: 20%;
}
.registration-page__password-wrapper[data-strength="2"] .registration-page__password-indicator[data-v-26e4a023]::before {
  width: 40%;
}
.registration-page__password-wrapper[data-strength="3"] .registration-page__password-indicator[data-v-26e4a023]::before {
  width: 60%;
  background: #ffce4c;
}
.registration-page__password-wrapper[data-strength="4"] .registration-page__password-indicator[data-v-26e4a023]::before {
  width: 80%;
  background: #ffce4c;
}
.registration-page__password-wrapper[data-strength="5"] .registration-page__password-indicator[data-v-26e4a023]::before {
  width: 100%;
  background: #5a8100;
}
.registration-page__reveal[data-v-26e4a023] {
  font-size: 1.25em;
  max-height: 22px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 10px;
  right: 25px;
}
.registration-page__input[data-v-26e4a023], .registration-page__back[data-v-26e4a023] {
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 4px solid var(--registration-light-gray);
  color: var(--registration-light-gray);
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  margin-bottom: 12px;
  padding: calc(var(--registration-gap-base) * 0.5) 0;
  border-radius: 0;
}
.registration-page__input[data-v-26e4a023]::-webkit-input-placeholder, .registration-page__back[data-v-26e4a023]::-webkit-input-placeholder {
  color: var(--registration-light-gray);
}
.registration-page__input[data-v-26e4a023]::-moz-placeholder, .registration-page__back[data-v-26e4a023]::-moz-placeholder {
  color: var(--registration-light-gray);
}
.registration-page__input[data-v-26e4a023]:-ms-input-placeholder, .registration-page__back[data-v-26e4a023]:-ms-input-placeholder {
  color: var(--registration-light-gray);
}
.registration-page__input[data-v-26e4a023]::-ms-input-placeholder, .registration-page__back[data-v-26e4a023]::-ms-input-placeholder {
  color: var(--registration-light-gray);
}
.registration-page__input[data-v-26e4a023]::placeholder, .registration-page__back[data-v-26e4a023]::placeholder {
  color: var(--registration-light-gray);
}
.registration-page__input--submit[data-v-26e4a023], .registration-page__input[type=submit][data-v-26e4a023], .registration-page__input--register[data-v-26e4a023], .registration-page__input--login[data-v-26e4a023], .registration-page__back--submit[data-v-26e4a023], .registration-page__back[type=submit][data-v-26e4a023], .registration-page__back--register[data-v-26e4a023], .registration-page__back--login[data-v-26e4a023] {
  background-color: var(--registration-button-blue);
  border-bottom: none;
  color: #fff;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 70%;
          flex: 0 1 70%;
}
.registration-page__input--submit[data-v-26e4a023]:hover, .registration-page__input[type=submit][data-v-26e4a023]:hover, .registration-page__input--register[data-v-26e4a023]:hover, .registration-page__input--login[data-v-26e4a023]:hover, .registration-page__back--submit[data-v-26e4a023]:hover, .registration-page__back[type=submit][data-v-26e4a023]:hover, .registration-page__back--register[data-v-26e4a023]:hover, .registration-page__back--login[data-v-26e4a023]:hover {
  background-color: var(--registration-button-blue-hover);
}
@media (min-width: 576px) {
.registration-page__input--submit[data-v-26e4a023], .registration-page__input[type=submit][data-v-26e4a023], .registration-page__input--register[data-v-26e4a023], .registration-page__input--login[data-v-26e4a023], .registration-page__back--submit[data-v-26e4a023], .registration-page__back[type=submit][data-v-26e4a023], .registration-page__back--register[data-v-26e4a023], .registration-page__back--login[data-v-26e4a023] {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 47%;
            flex: 0 1 47%;
}
}
.registration-page__input--login[data-v-26e4a023], .registration-page__back--login[data-v-26e4a023] {
  background-color: var(--registration-button-teal);
  -ms-flex-preferred-size: 47%;
      flex-basis: 47%;
}
.registration-page__input--login[data-v-26e4a023]:hover, .registration-page__back--login[data-v-26e4a023]:hover {
  background-color: var(--registration-button-teal-hover);
}
@media screen and (min-width: 768px) {
.registration-page__input[data-v-26e4a023], .registration-page__back[data-v-26e4a023] {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 47%;
            flex: 1 1 47%;
}
.registration-page__input--full[data-v-26e4a023], .registration-page__back--full[data-v-26e4a023] {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
}
.registration-page__back[data-v-26e4a023] {
  border-bottom: none;
  color: #fff;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 70%;
          flex: 0 1 70%;
  background-color: var(--registration-button-teal);
  width: 70%;
}
.registration-page__back[data-v-26e4a023]:hover {
  background-color: var(--registration-button-teal-hover);
}
@media (min-width: 576px) {
.registration-page__back[data-v-26e4a023] {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 47%;
            flex: 0 1 47%;
}
}
.registration-page__select[data-v-26e4a023] {
  color: var(--registration-light-gray);
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  background-color: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  border-bottom: 4px solid var(--registration-light-gray);
  height: calc(var(--registration-input-size, 1rem) * 2 + 1rem);
  max-height: 48px;
  line-height: 2;
  padding: calc(var(--registration-gap-base) * 0.5 - 0.125rem) 0 calc(var(--registration-gap-base) * 0.5 - 0.375rem) 0.25rem;
  margin-bottom: 12px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat, repeat;
  background-position: right 0.7em top 50%;
  background-size: 0.65em auto;
}
@media screen and (min-width: 768px) {
.registration-page__select[data-v-26e4a023] {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 47%;
            flex: 1 1 47%;
}
.registration-page__select--full[data-v-26e4a023] {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
}
}
.registration-page__fieldset[data-v-26e4a023] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  margin-bottom: var(--registration-gap-base);
}
.registration-page__legend[data-v-26e4a023] {
  font-size: 1em;
  font-family: var(--registration-font-family-bold);
  margin-bottom: calc(var(--registration-gap-base) * 0.5);
}
.registration-page__sublegend[data-v-26e4a023] {
  display: block;
  font-family: var(--registration-font-family);
}
.registration-page__option[data-v-26e4a023] {
  color: #000;
}
.registration-page__inline[data-v-26e4a023] {
  width: 100%;
}
.registration-page__inline .registration-page__input[data-v-26e4a023] {
  margin-right: calc(var(--registration-gap-base) * 0.5);
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}
.registration-page__inline--radio[data-v-26e4a023], .registration-page__inline--checkbox[data-v-26e4a023] {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1em auto;
  grid-template-columns: 1em auto;
  gap: calc(var(--registration-gap-base) * 0.5);
}
.registration-page__inline input[type=radio][data-v-26e4a023],
.registration-page__inline input[type=checkbox][data-v-26e4a023] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: none;
  font: inherit;
  color: currentColor;
  width: var(--registration-input-size);
  height: var(--registration-input-size);
  border: 0.15em solid #fff;
  border-radius: 50%;
  padding: 0;
  display: -ms-grid;
  display: grid;
  place-content: center;
}
.registration-page__inline input[type=radio][data-v-26e4a023]:before,
.registration-page__inline input[type=checkbox][data-v-26e4a023]:before {
  content: "";
  width: 1em;
  height: 1.1em;
  border-radius: 50%;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: 120ms -webkit-transform ease-in-out;
  transition: 120ms -webkit-transform ease-in-out;
  transition: 120ms transform ease-in-out;
  transition: 120ms transform ease-in-out, 120ms -webkit-transform ease-in-out;
  -webkit-box-shadow: inset 1em 1em var(--registration-button-teal);
          box-shadow: inset 1em 1em var(--registration-button-teal);
}
.registration-page__inline input[type=radio][data-v-26e4a023]:checked::before,
.registration-page__inline input[type=checkbox][data-v-26e4a023]:checked::before {
  -webkit-transform: scale(0.4);
          transform: scale(0.4);
}
.registration-page__inline input[type=checkbox][data-v-26e4a023] {
  border-radius: 0;
}
.registration-page__inline input[type=checkbox][data-v-26e4a023]:before {
  content: "";
  font-family: "Font Awesome 5 Pro";
  font-size: 1em;
  color: var(--registration-button-teal);
  border-radius: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.registration-page__inline input[type=checkbox][data-v-26e4a023]:checked:before {
  content: "\f00c";
  -webkit-transform: scale(1.5) translate(calc(var(--registration-input-size) * 0.25), calc(-1 * var(--registration-input-size) * 0.35));
          transform: scale(1.5) translate(calc(var(--registration-input-size) * 0.25), calc(-1 * var(--registration-input-size) * 0.35));
}
.registration-page__label[data-v-26e4a023] {
  margin-right: calc(var(--registration-gap-base) * 0.5);
  text-transform: capitalize;
  width: 90%;
}/*******************************************
******* 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 ****************
*******************************************/
/*
  * 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);
	 }
 */
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
:root {
  --breakXs: 0;
  --breakSm: 576px;
  --breakMd: 768px;
  --breakLg: 992px;
  --breakXl: 1200px;
}
:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --sm_dn: 575px;
  --md_dn: 767px;
  --lg_dn: 991px;
  --xl_dn: 1199px;
  --homeFooter: 1345px;
  --fill-darkGray: #353535;
  --fill-lightGray: #e7e7e7;
  --fill-blue: #0056ac;
}

/*
* 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);
	}
*/
/* 
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;
}

/*******************************************
******* 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 ****************
*******************************************/
/*
  * 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);
	 }
 */
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
:root {
  --breakXs: 0;
  --breakSm: 576px;
  --breakMd: 768px;
  --breakLg: 992px;
  --breakXl: 1200px;
}

/* FLUID FONT SIZE
========================================================================== */
/*
SASS:
.card {
  background-color:$white;
  @include modifier(--red) {
    background-color:red;
}
COMPILED CSS:
.card {
  background-color:#fff;
}
.p-card--red .card, .card--red {
  background-color: red;
}
*/
.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;
}
.reset-password {
  background: var(--registration-blue);
  color: #fff;
  font-family: var(--registration-font-family);
  padding: 2.0625rem 3.3125rem 0 1.1875rem;
}
.reset-password .pageHeading {
  color: #fff;
  font-size: 2em;
  font-weight: 600;
  margin-bottom: var(--registration-gap-base);
  font-family: var(--registration-font-family-bold);
}
.reset-password a {
  color: var(--registration-button-teal);
}
.reset-password a:hover {
  color: var(--registration-button-teal-hover);
}
.reset-password__heading {
  font-size: 2em;
  font-weight: 600;
  margin-bottom: var(--registration-gap-base);
  font-family: var(--registration-font-family-bold);
}
.reset-password__subheading {
  font-weight: 600;
  font-family: var(--registration-font-family-bold);
  font-size: 1.15em;
  margin-bottom: calc(var(--registration-gap-base) * 0.5);
}
@media screen and (min-width: 768px) {
.reset-password__subheading {
    margin-bottom: calc(var(--registration-gap-base) * 2);
}
}
.reset-password__content {
  color: var(--registration-light-gray);
  font-family: var(--registration-font-family-serif);
  margin-bottom: var(--registration-gap-base);
}
.reset-password__content a {
  color: #fff;
  font-weight: 600;
}
.reset-password__content a:hover {
  text-decoration: underline;
}
.reset-password__form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.reset-password__input {
  background: none;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 4px solid var(--registration-light-gray);
  color: var(--registration-light-gray);
  margin-bottom: 12px;
  padding: calc(var(--registration-gap-base) * 0.5) 0;
  border-radius: 0;
}
.reset-password__input::-webkit-input-placeholder {
  color: var(--registration-light-gray);
}
.reset-password__input::-moz-placeholder {
  color: var(--registration-light-gray);
}
.reset-password__input:-ms-input-placeholder {
  color: var(--registration-light-gray);
}
.reset-password__input::-ms-input-placeholder {
  color: var(--registration-light-gray);
}
.reset-password__input::placeholder {
  color: var(--registration-light-gray);
}
.reset-password__input--submit, .reset-password__input[type=submit], .reset-password__input--reset {
  background-color: var(--registration-button-blue);
  border-bottom: none;
  color: #fff;
}
@media screen and (min-width: 768px) {
.reset-password__input--submit, .reset-password__input[type=submit], .reset-password__input--reset {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 49%;
            flex: 0 1 49%;
}
}
.reset-password__input--submit:hover, .reset-password__input[type=submit]:hover, .reset-password__input--reset:hover {
  background-color: var(--registration-button-blue-hover);
}
.reset-password__input--reset {
  background-color: var(--registration-button-teal);
  text-align: center;
}
.reset-password__input--reset:hover {
  background-color: var(--registration-button-teal-hover);
}
.reset-password__reset {
  color: var(--registration-button-teal);
  display: block;
  font-weight: 400;
  margin-top: var(--registration-gap-base);
  margin-bottom: calc(var(--registration-gap-base));
}
@media screen and (min-width: 768px) {
.reset-password__reset {
    margin-bottom: calc(var(--registration-gap-base) * 1.5);
}
}
.reset-password__reset:hover {
  color: var(--registration-button-teal-hover);
}
.reset-password__register {
  color: #fff;
}
@media screen and (min-width: 768px) {
.reset-password__register {
    margin-bottom: calc(var(--registration-gap-base) * 3);
}
}
.reset-password__register span {
  color: var(--registration-button-teal);
  cursor: pointer;
}
.reset-password__register span:hover {
  color: var(--registration-button-teal-hover);
  text-decoration: underline;
}
.reset-password__content strong {
  color: #fff;
}
.reset-password__content a {
  color: var(--registration-button-teal);
}
.reset-password__content a:hover {
  color: var(--registration-button-teal-hover);
}/*******************************************
******* 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 ****************
*******************************************/
/*
  * 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);
	 }
 */
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
:root {
  --breakXs: 0;
  --breakSm: 576px;
  --breakMd: 768px;
  --breakLg: 992px;
  --breakXl: 1200px;
}
:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --sm_dn: 575px;
  --md_dn: 767px;
  --lg_dn: 991px;
  --xl_dn: 1199px;
  --homeFooter: 1345px;
  --fill-darkGray: #353535;
  --fill-lightGray: #e7e7e7;
  --fill-blue: #0056ac;
}

/*
* 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);
	}
*/
/* 
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;
}

/*******************************************
******* 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 ****************
*******************************************/
/*
  * 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);
	 }
 */
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
:root {
  --breakXs: 0;
  --breakSm: 576px;
  --breakMd: 768px;
  --breakLg: 992px;
  --breakXl: 1200px;
}

/* FLUID FONT SIZE
========================================================================== */
/*
SASS:
.card {
  background-color:$white;
  @include modifier(--red) {
    background-color:red;
}
COMPILED CSS:
.card {
  background-color:#fff;
}
.p-card--red .card, .card--red {
  background-color: red;
}
*/
.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;
}
.registration-dashboard {
  background: var(--registration-blue);
  color: #fff;
  padding: 33px 33px 33px 19px;
}
@media (min-width: 576px) {
.registration-dashboard {
    padding: 33px 43px 33px 19px;
}
}
@media (min-width: 768px) {
.registration-dashboard {
    padding: 33px 53px 33px 19px;
}
}
.registration-dashboard__heading {
  font-size: 2em;
  font-weight: 600;
  margin-bottom: var(--registration-gap-base);
  font-family: var(--registration-font-family-bold);
}
.registration-dashboard__subheading {
  font-weight: 600;
  font-family: var(--registration-font-family);
  font-size: 1.15em;
  margin-bottom: calc(var(--registration-gap-base) * 2);
}
.registration-dashboard__title {
  font-weight: 600;
  font-family: var(--registration-font-family);
  font-size: 1.5em;
  margin-bottom: var(--registration-gap-base);
}
.registration-dashboard__title--reminder {
  background: #f00;
  color: #fff;
  width: 100%;
  text-align: center;
  padding: 0.25rem;
  cursor: pointer;
}
.registration-dashboard__content {
  margin-bottom: var(--registration-gap-base);
}
.registration-dashboard__wysiwyg {
  font-family: var(--registration-font-family);
  margin-left: 29px;
}
.registration-dashboard__wysiwyg ul {
  margin-top: calc(var(--registration-gap-base) * -1);
  padding-left: calc(var(--registration-gap-base) * 3);
}
.registration-dashboard__questions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: calc(var(--registration-gap-base) * 0.5);
  margin-bottom: calc(var(--registration-gap-base) * 2);
}
.registration-dashboard__question {
  color: var(--registration-button-teal);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: var(--registration-gap-base);
  -webkit-box-flex: 1;
      -ms-flex: 1 1 49%;
          flex: 1 1 49%;
  max-width: 370px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  font-size: 1em;
  font-weight: 600;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.registration-dashboard__question:is(span):hover span {
  color: var(--registration-button-teal);
  text-decoration: none;
}
.registration-dashboard__question i {
  font-size: 2em;
}
.registration-dashboard__question span {
  -ms-flex-preferred-size: 90%;
      flex-basis: 90%;
}
.registration-dashboard__question:hover {
  text-decoration: none;
  color: var(--registration-button-teal-hover);
}
.registration-dashboard__question:hover span {
  text-decoration: underline;
}
.registration-dashboard__logout {
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  text-decoration: none;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  position: absolute;
  top: 2rem;
  right: 54px;
  text-align: right;
  color: var(--registration-button-teal);
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: var(--registration-gap-base);
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-preferred-size: 49%;
      flex-basis: 49%;
  font-size: 1em;
  font-weight: 600;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.registration-dashboard__logout:hover {
  text-decoration: none;
}
@media (min-width: 576px) {
.registration-dashboard__logout {
    right: 64px;
}
}
@media (min-width: 768px) {
.registration-dashboard__logout {
    right: 74px;
}
}
.registration-dashboard__logout i {
  font-size: 2em;
}
.registration-dashboard__logout span {
  -ms-flex-preferred-size: 90%;
      flex-basis: 90%;
  text-align: left;
}
.registration-dashboard__logout:hover {
  text-decoration: none;
  color: var(--registration-button-teal-hover);
}
.registration-dashboard__logout:hover span {
  text-decoration: underline;
}
.registration-resource {
  font-family: var(--registration-font-family);
  margin-top: var(--registration-gap-base);
}
.registration-resource--optional + .registration-dashboard__wysiwyg {
  margin-bottom: calc(var(--registration-gap-base) * 2.4);
}
.registration-resource__heading {
  color: #fff;
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: calc(var(--registration-gap-base) * 0.5);
  text-transform: capitalize;
}
.registration-resource__heading:before {
  content: "\f061";
  color: var(--registration-button-teal);
  font-family: var(--registration-font-family-icon);
  margin-right: calc(var(--registration-gap-base) * 0.25);
  display: inline-block;
}
.registration-resource__heading:before:hover {
  text-decoration: none;
}
.registration-resource__heading:hover {
  color: var(--registration-button-teal);
}
.registration-resource__heading:hover:before {
  text-decoration: none;
}
.registration-flyout__error {
  -webkit-transition: 0.15s ease;
  transition: 0.15s ease;
}
.registration-flyout__error p {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.registration-flyout__error i {
  -webkit-transition: 0.15s ease;
  transition: 0.15s ease;
  min-width: 2em;
}
.registration-flyout__error-close {
  background: transparent;
  border: none;
  padding: 0.875rem 0 0;
  padding-right: 0.5rem;
  line-height: 1;
  height: 1.5rem;
}
.registration-flyout__error-close-icon {
  background: transparent;
  font-size: 1.5rem;
  color: #fff;
  -webkit-transition: 0.15s ease;
  transition: 0.15s ease;
}
.registration-flyout__error-close:hover .registration-flyout__error-close-icon {
  color: #f44336;
  font-size: 1.75rem;
}
.registration-flyout__error-wrapper {
  cursor: pointer;
  -webkit-transition: 0.15s ease;
  transition: 0.15s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  background: transparent;
}
.registration-flyout__error-wrapper:hover:not(:has(.registration-flyout__error-close:hover)) {
  border-color: var(--registration-button-teal);
}
.registration-flyout__error-wrapper:hover:not(:has(.registration-flyout__error-close:hover)) .registration-flyout__error i {
  background: var(--registration-button-teal);
  color: var(--registration-blue);
}
.registration-dialog {
  max-width: 540px;
  border: 2px solid #999999;
  padding: 0;
  width: calc(100% - 2rem);
  max-height: 80vh;
}
.registration-dialog::-webkit-backdrop {
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.registration-dialog::backdrop {
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.registration-dialog__heading {
  border-bottom: 2px solid #999999;
  padding: 0.5rem 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.registration-dialog__heading > * {
  margin: 0;
}
.registration-dialog__title {
  padding-right: 1rem;
}
.registration-dialog__content {
  padding: 1rem;
  overflow: hidden;
}
.registration-dialog__close {
  background: transparent;
  border: none;
  padding: 0.25rem;
}
.registration-dialog__close i {
  font-size: 2rem;
}
.registration-dialog__image {
  width: 100%;
  height: auto;
}
.registration-dialog__text {
  margin: 1rem 0;
}
.registration-dialog__link {
  float: right;
  background: #385e9d;
  color: #fff;
  padding: 0.5rem 1rem;
  min-width: 150px;
  max-width: 80%;
  text-align: center;
}
.registration-dialog__link:hover {
  background: #4a76be;
  color: #fff;
}/*******************************************
******* 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 ****************
*******************************************/
/*
  * 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);
	 }
 */
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
:root {
  --breakXs: 0;
  --breakSm: 576px;
  --breakMd: 768px;
  --breakLg: 992px;
  --breakXl: 1200px;
}
:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --sm_dn: 575px;
  --md_dn: 767px;
  --lg_dn: 991px;
  --xl_dn: 1199px;
  --homeFooter: 1345px;
  --fill-darkGray: #353535;
  --fill-lightGray: #e7e7e7;
  --fill-blue: #0056ac;
}

/*
* 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);
	}
*/
/* 
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;
}

/*******************************************
******* 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 ****************
*******************************************/
/*
  * 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);
	 }
 */
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
:root {
  --breakXs: 0;
  --breakSm: 576px;
  --breakMd: 768px;
  --breakLg: 992px;
  --breakXl: 1200px;
}

/* FLUID FONT SIZE
========================================================================== */
/*
SASS:
.card {
  background-color:$white;
  @include modifier(--red) {
    background-color:red;
}
COMPILED CSS:
.card {
  background-color:#fff;
}
.p-card--red .card, .card--red {
  background-color: red;
}
*/
.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;
}
.login-page {
  background: var(--registration-blue);
  color: #fff;
  font-family: var(--registration-font-family);
  padding: 2.0625rem 3.3125rem 0 1.1875rem;
}
.login-page__heading {
  font-size: 2em;
  font-weight: 600;
  margin-bottom: var(--registration-gap-base);
  font-family: var(--registration-font-family-bold);
}
.login-page__subheading {
  font-weight: 600;
  font-family: var(--registration-font-family-bold);
  font-size: 1.15em;
  margin-bottom: calc(var(--registration-gap-base) * 0.5);
}
@media screen and (min-width: 768px) {
.login-page__subheading {
    margin-bottom: calc(var(--registration-gap-base) * 2);
}
}
.login-page__content {
  color: var(--registration-light-gray);
  font-family: var(--registration-font-family-serif);
  margin-bottom: var(--registration-gap-base);
}
.login-page__content a {
  color: #fff;
  font-weight: 600;
}
.login-page__content a:hover {
  text-decoration: underline;
}
.login-page__form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.login-page__input-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  position: relative;
}
.login-page__reveal {
  font-size: 1.25em;
  max-height: 22px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 10px;
  right: 25px;
}
.login-page__input {
  background: none;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 4px solid var(--registration-light-gray);
  color: var(--registration-light-gray);
  margin-bottom: 12px;
  padding: calc(var(--registration-gap-base) * 0.5) 0;
  border-radius: 0;
}
.login-page__input::-webkit-input-placeholder {
  color: var(--registration-light-gray);
}
.login-page__input::-moz-placeholder {
  color: var(--registration-light-gray);
}
.login-page__input:-ms-input-placeholder {
  color: var(--registration-light-gray);
}
.login-page__input::-ms-input-placeholder {
  color: var(--registration-light-gray);
}
.login-page__input::placeholder {
  color: var(--registration-light-gray);
}
.login-page__input--submit, .login-page__input[type=submit], .login-page__input--register {
  background-color: var(--registration-button-blue);
  border-bottom: none;
  color: #fff;
}
@media screen and (min-width: 768px) {
.login-page__input--submit, .login-page__input[type=submit], .login-page__input--register {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 49%;
            flex: 0 1 49%;
}
}
.login-page__input--submit:hover, .login-page__input[type=submit]:hover, .login-page__input--register:hover {
  background-color: var(--registration-button-blue-hover);
}
.login-page__input--submit {
  margin-top: 1rem;
}
.login-page__reset {
  color: var(--registration-button-teal);
  display: block;
  font-weight: 400;
  margin-top: var(--registration-gap-base);
  margin-bottom: calc(var(--registration-gap-base));
}
@media screen and (min-width: 768px) {
.login-page__reset {
    margin-bottom: calc(var(--registration-gap-base) * 1.5);
}
}
.login-page__reset:hover {
  color: var(--registration-button-teal-hover);
}
.login-page__register {
  color: #fff;
}
@media screen and (min-width: 768px) {
.login-page__register {
    margin-bottom: calc(var(--registration-gap-base) * 3);
}
}
.login-page__register span {
  color: var(--registration-button-teal);
  cursor: pointer;
}
.login-page__register span:hover {
  color: var(--registration-button-teal-hover);
  text-decoration: underline;
}
.login-page__content strong {
  color: #fff;
}
.login-page__content a {
  color: var(--registration-button-teal);
}
.login-page__content a:hover {
  color: var(--registration-button-teal-hover);
}/*******************************************
******* 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 ****************
*******************************************/
/*
  * 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);
	 }
 */
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
[data-v-5ccf1590]:root {
  --breakXs: 0;
  --breakSm: 576px;
  --breakMd: 768px;
  --breakLg: 992px;
  --breakXl: 1200px;
}
[data-v-5ccf1590]:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --sm_dn: 575px;
  --md_dn: 767px;
  --lg_dn: 991px;
  --xl_dn: 1199px;
  --homeFooter: 1345px;
  --fill-darkGray: #353535;
  --fill-lightGray: #e7e7e7;
  --fill-blue: #0056ac;
}

/*
* 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);
	}
*/
/* 
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-5ccf1590] {
  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;
}

/*******************************************
******* 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 ****************
*******************************************/
/*
  * 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);
	 }
 */
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
[data-v-5ccf1590]:root {
  --breakXs: 0;
  --breakSm: 576px;
  --breakMd: 768px;
  --breakLg: 992px;
  --breakXl: 1200px;
}

/* FLUID FONT SIZE
========================================================================== */
/*
SASS:
.card {
  background-color:$white;
  @include modifier(--red) {
    background-color:red;
}
COMPILED CSS:
.card {
  background-color:#fff;
}
.p-card--red .card, .card--red {
  background-color: red;
}
*/
.hideVisually[data-v-5ccf1590] {
  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;
}
.registration-questions[data-v-5ccf1590] {
  background: var(--registration-blue);
  color: #fff;
  font-family: var(--registration-font-family);
  padding: 33px 53px 33px 19px;
}
.registration-questions__heading[data-v-5ccf1590] {
  font-size: 2em;
  font-weight: 600;
  margin-bottom: var(--registration-gap-base);
  font-family: var(--registration-font-family-bold);
}
.registration-questions__heading small[data-v-5ccf1590] {
  display: block;
  font-family: "Gilroy-Thin", Arial, Helvetica, sans-serif;
  font-size: 0.5em;
  font-style: italic;
  font-weight: 100;
}
.registration-questions__title[data-v-5ccf1590] {
  font-weight: 600;
  font-family: var(--registration-font-family);
  font-size: 1.35em;
  margin-bottom: calc(var(--registration-gap-base) * 2);
}
.registration-questions__form[data-v-5ccf1590] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.registration-questions__fieldset[data-v-5ccf1590] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  margin-bottom: var(--registration-gap-base);
}
.registration-questions__legend[data-v-5ccf1590] {
  font-size: 1em;
  font-family: var(--registration-font-family-bold);
  margin-bottom: calc(var(--registration-gap-base) * 0.5);
}
.registration-questions__inline[data-v-5ccf1590] {
  width: 100%;
}
.registration-questions__inline .registration-page__input[data-v-5ccf1590] {
  margin-right: calc(var(--registration-gap-base) * 0.5);
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}
.registration-questions__inline--radio[data-v-5ccf1590], .registration-questions__inline--checkbox[data-v-5ccf1590] {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1em auto;
  grid-template-columns: 1em auto;
  gap: calc(var(--registration-gap-base) * 0.5);
  margin-top: 3px;
}
.registration-questions__inline input[type=radio][data-v-5ccf1590],
.registration-questions__inline input[type=checkbox][data-v-5ccf1590] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: none;
  font: inherit;
  color: currentColor;
  width: var(--registration-input-size);
  height: var(--registration-input-size);
  border: 0.15em solid #fff;
  border-radius: 50%;
  padding: 0;
  display: -ms-grid;
  display: grid;
  place-content: center;
}
.registration-questions__inline input[type=radio][data-v-5ccf1590]:before,
.registration-questions__inline input[type=checkbox][data-v-5ccf1590]:before {
  content: "";
  width: 1em;
  height: 1.1em;
  border-radius: 50%;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: 120ms -webkit-transform ease-in-out;
  transition: 120ms -webkit-transform ease-in-out;
  transition: 120ms transform ease-in-out;
  transition: 120ms transform ease-in-out, 120ms -webkit-transform ease-in-out;
  -webkit-box-shadow: inset 1em 1em var(--registration-button-teal);
          box-shadow: inset 1em 1em var(--registration-button-teal);
}
.registration-questions__inline input[type=radio][data-v-5ccf1590]:checked::before,
.registration-questions__inline input[type=checkbox][data-v-5ccf1590]:checked::before {
  -webkit-transform: scale(0.4);
          transform: scale(0.4);
}
.registration-questions__inline input[type=checkbox][data-v-5ccf1590] {
  border-radius: 0;
}
.registration-questions__inline input[type=checkbox][data-v-5ccf1590]:before {
  content: "";
  font-family: "Font Awesome 5 Pro";
  font-size: 1.5em;
  color: var(--registration-button-teal);
  border-radius: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transform: translate(calc(-1 * var(--registration-input-size) * 0.25), calc(-1 * var(--registration-input-size) * 0.25));
          transform: translate(calc(-1 * var(--registration-input-size) * 0.25), calc(-1 * var(--registration-input-size) * 0.25));
}
.registration-questions__inline input[type=checkbox][data-v-5ccf1590]:checked:before {
  content: "\f00c";
  -webkit-transform: scale(1.5) translate(calc(var(--registration-input-size) * 0.25), calc(-1 * var(--registration-input-size) * 0.35));
          transform: scale(1.5) translate(calc(var(--registration-input-size) * 0.25), calc(-1 * var(--registration-input-size) * 0.35));
}
.registration-questions__label[data-v-5ccf1590] {
  margin-right: calc(var(--registration-gap-base) * 0.5);
  text-transform: capitalize;
}
.registration-questions__button[data-v-5ccf1590] {
  background-color: var(--registration-button-blue);
  border: none;
  color: #fff;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 49%;
          flex: 0 1 49%;
  padding: calc(var(--registration-gap-base) * 0.5) 0;
}
.registration-questions__button[type=submit][data-v-5ccf1590] {
  border-radius: 0;
}
.registration-questions__button[data-v-5ccf1590]:hover {
  background-color: var(--registration-button-blue-hover);
}
.registration-questions__button--alt[data-v-5ccf1590] {
  background-color: var(--registration-button-dark-teal);
}
.registration-questions__button--alt[data-v-5ccf1590]:hover {
  background-color: var(--registration-button-dark-teal-hover);
}/*******************************************
******* 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 ****************
*******************************************/
/*
  * 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);
	 }
 */
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
:root {
  --breakXs: 0;
  --breakSm: 576px;
  --breakMd: 768px;
  --breakLg: 992px;
  --breakXl: 1200px;
}
:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --sm_dn: 575px;
  --md_dn: 767px;
  --lg_dn: 991px;
  --xl_dn: 1199px;
  --homeFooter: 1345px;
  --fill-darkGray: #353535;
  --fill-lightGray: #e7e7e7;
  --fill-blue: #0056ac;
}

/*
* 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);
	}
*/
/* 
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;
}

/*******************************************
******* 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 ****************
*******************************************/
/*
  * 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);
	 }
 */
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
:root {
  --breakXs: 0;
  --breakSm: 576px;
  --breakMd: 768px;
  --breakLg: 992px;
  --breakXl: 1200px;
}

/* FLUID FONT SIZE
========================================================================== */
/*
SASS:
.card {
  background-color:$white;
  @include modifier(--red) {
    background-color:red;
}
COMPILED CSS:
.card {
  background-color:#fff;
}
.p-card--red .card, .card--red {
  background-color: red;
}
*/
.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;
}
.v-enter-active,
.v-leave-active {
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
  opacity: 0;
}
:root {
  --size: 5px;
}
.loader {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 100000;
}
.loader + * {
  -webkit-filter: blur(calc(var(--size) * 0.8));
          filter: blur(calc(var(--size) * 0.8));
}
.loader__element {
  border-radius: 100%;
  border: var(--size) solid var(--registration-button-teal);
  margin: calc(var(--size) * 2);
}
.loader__element:nth-child(1) {
  -webkit-animation: preloader 0.6s ease-in-out alternate infinite;
          animation: preloader 0.6s ease-in-out alternate infinite;
}
.loader__element:nth-child(2) {
  -webkit-animation: preloader 0.6s ease-in-out alternate 0.2s infinite;
          animation: preloader 0.6s ease-in-out alternate 0.2s infinite;
}
.loader__element:nth-child(3) {
  -webkit-animation: preloader 0.6s ease-in-out alternate 0.4s infinite;
          animation: preloader 0.6s ease-in-out alternate 0.4s infinite;
}
@-webkit-keyframes preloader {
100% {
    -webkit-transform: scale(2);
            transform: scale(2);
}
}
@keyframes preloader {
100% {
    -webkit-transform: scale(2);
            transform: scale(2);
}
}/*******************************************
******* 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 ****************
*******************************************/
/*
  * 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);
	 }
 */
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
:root {
  --breakXs: 0;
  --breakSm: 576px;
  --breakMd: 768px;
  --breakLg: 992px;
  --breakXl: 1200px;
}
:root {
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --sm_dn: 575px;
  --md_dn: 767px;
  --lg_dn: 991px;
  --xl_dn: 1199px;
  --homeFooter: 1345px;
  --fill-darkGray: #353535;
  --fill-lightGray: #e7e7e7;
  --fill-blue: #0056ac;
}

/*
* 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);
	}
*/
/* 
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;
}

/*******************************************
******* 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 ****************
*******************************************/
/*
  * 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);
	 }
 */
/******************************************/
/******************************************/
/*******************************************
******* COMPOSITION BACKGROUNDS ************
**** Any colors included in this   *********
**** map will have composition     *********
**** fill classes automatically    *********
**** generated.                    *********
**** EX. .composition--fill-blue   *********
*******************************************/
/******************************************/
/*******************************************
******* TYPOGRAPHY *************************
*******************************************/
/******************************************/
:root {
  --breakXs: 0;
  --breakSm: 576px;
  --breakMd: 768px;
  --breakLg: 992px;
  --breakXl: 1200px;
}

/* FLUID FONT SIZE
========================================================================== */
/*
SASS:
.card {
  background-color:$white;
  @include modifier(--red) {
    background-color:red;
}
COMPILED CSS:
.card {
  background-color:#fff;
}
.p-card--red .card, .card--red {
  background-color: red;
}
*/
.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;
}