/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/main/webapp/agency-sass/styles.scss?ngGlobalStyle ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
  generate css variables and !important classes from color map.
  will generate --{property}-color-{name}-{n}
  the map:
     ('red': ('100': $red-100, '200': {red-200}),'blue': ('100': {blue-100},'200': {blue-200}))

  generates: css variables
  --color-red-100: value of {red-100};
  --color-red-200: value of {red-200};
  --color-blue-100: value of {blue-100};
  --color-blue-200: value of {red-200};

  also generates: !important classes
  .{propertyName}-color--{colorName}-{colorShade]

  usage: These classes are !important. Use sparingly! Inside a component's style is the best place for using !important classes. Global use can lead to difficulty overriding.
  <div class="font-color--green-700"></div> will make a div that has green4 text.

  color palette:
**/
/*
COLORS
*/
:root {
  --color--green-100: hsl(80, 92%, 91%);
  --color--green-200: hsl(84, 91%, 82%);
  --color--green-300: hsl(87, 85%, 71%);
  --color--green-400: hsl(90, 77%, 62%);
  --color--green-500: hsl(94, 75%, 49%);
  --color--green-600: hsl(97, 78%, 41%);
  --color--green-700: hsl(101, 82%, 34%);
  --color--green-800: hsl(149, 100%, 24%);
  --color--green-900: hsl(149, 100%, 14%);
  --color--blue-0: hsl(228, 100%, 99%);
  --color--blue-100: hsl(227, 92%, 95%);
  --color--blue-200: hsl(226, 92%, 90%);
  --color--blue-300: hsl(227, 92%, 81%);
  --color--blue-400: hsl(228, 87%, 70%);
  --color--blue-500: hsl(229, 81%, 61%);
  --color--blue-600: hsl(230, 81%, 48%);
  --color--blue-700: hsl(230, 74%, 43%);
  --color--blue-800: hsl(230, 73%, 32%);
  --color--blue-900: hsl(230, 50%, 23%);
  --color--accent-blue-100: hsl(176, 100%, 97%);
  --color--accent-blue-200: hsl(178, 91%, 83%);
  --color--accent-blue-300: hsl(182, 93%, 79%);
  --color--accent-blue-400: hsl(187, 86%, 67%);
  --color--accent-blue-500: hsl(191, 78%, 56%);
  --color--accent-blue-600: hsl(195, 100%, 41%);
  --color--accent-blue-700: hsl(199, 100%, 36%);
  --color--accent-blue-800: hsl(199, 100%, 30%);
  --color--grey-100: hsl(0, 0%, 98%);
  --color--grey-200: hsl(240, 3%, 94%);
  --color--grey-300: hsl(200, 8%, 93%);
  --color--grey-400: hsl(197, 8%, 83%);
  --color--grey-500: hsl(202, 8%, 73%);
  --color--grey-600: hsl(200, 8%, 63%);
  --color--grey-700: hsl(201, 8%, 53%);
  --color--grey-800: hsl(200, 8%, 43%);
  --color--grey-900: hsl(201, 8%, 33%);
  --color--black-100: hsl(0, 0%, 0%);
  --color--white-100: hsl(0, 0%, 100%);
  --color--red-100: hsl(0, 83%, 98%);
  --color--red-700: hsl(0, 63%, 44%);
  --color--yellow-100: hsl(32, 100%, 95%);
  --color--yellow-700: hsl(32, 100%, 39%);
}

.font-color--green-100 {
  color: hsl(80, 92%, 91%) !important;
}

.background-color--green-100 {
  background-color: hsl(80, 92%, 91%) !important;
}

.border-color--green-100 {
  border-color: hsl(80, 92%, 91%) !important;
}

.outline-color--green-100 {
  outline-color: hsl(80, 92%, 91%) !important;
}

.font-color--green-200 {
  color: hsl(84, 91%, 82%) !important;
}

.background-color--green-200 {
  background-color: hsl(84, 91%, 82%) !important;
}

.border-color--green-200 {
  border-color: hsl(84, 91%, 82%) !important;
}

.outline-color--green-200 {
  outline-color: hsl(84, 91%, 82%) !important;
}

.font-color--green-300 {
  color: hsl(87, 85%, 71%) !important;
}

.background-color--green-300 {
  background-color: hsl(87, 85%, 71%) !important;
}

.border-color--green-300 {
  border-color: hsl(87, 85%, 71%) !important;
}

.outline-color--green-300 {
  outline-color: hsl(87, 85%, 71%) !important;
}

.font-color--green-400 {
  color: hsl(90, 77%, 62%) !important;
}

.background-color--green-400 {
  background-color: hsl(90, 77%, 62%) !important;
}

.border-color--green-400 {
  border-color: hsl(90, 77%, 62%) !important;
}

.outline-color--green-400 {
  outline-color: hsl(90, 77%, 62%) !important;
}

.font-color--green-500 {
  color: hsl(94, 75%, 49%) !important;
}

.background-color--green-500 {
  background-color: hsl(94, 75%, 49%) !important;
}

.border-color--green-500 {
  border-color: hsl(94, 75%, 49%) !important;
}

.outline-color--green-500 {
  outline-color: hsl(94, 75%, 49%) !important;
}

.font-color--green-600 {
  color: hsl(97, 78%, 41%) !important;
}

.background-color--green-600 {
  background-color: hsl(97, 78%, 41%) !important;
}

.border-color--green-600 {
  border-color: hsl(97, 78%, 41%) !important;
}

.outline-color--green-600 {
  outline-color: hsl(97, 78%, 41%) !important;
}

.font-color--green-700 {
  color: hsl(101, 82%, 34%) !important;
}

.background-color--green-700 {
  background-color: hsl(101, 82%, 34%) !important;
}

.border-color--green-700 {
  border-color: hsl(101, 82%, 34%) !important;
}

.outline-color--green-700 {
  outline-color: hsl(101, 82%, 34%) !important;
}

.font-color--green-800 {
  color: hsl(149, 100%, 24%) !important;
}

.background-color--green-800 {
  background-color: hsl(149, 100%, 24%) !important;
}

.border-color--green-800 {
  border-color: hsl(149, 100%, 24%) !important;
}

.outline-color--green-800 {
  outline-color: hsl(149, 100%, 24%) !important;
}

.font-color--green-900 {
  color: hsl(149, 100%, 14%) !important;
}

.background-color--green-900 {
  background-color: hsl(149, 100%, 14%) !important;
}

.border-color--green-900 {
  border-color: hsl(149, 100%, 14%) !important;
}

.outline-color--green-900 {
  outline-color: hsl(149, 100%, 14%) !important;
}

.font-color--blue-0 {
  color: hsl(228, 100%, 99%) !important;
}

.background-color--blue-0 {
  background-color: hsl(228, 100%, 99%) !important;
}

.border-color--blue-0 {
  border-color: hsl(228, 100%, 99%) !important;
}

.outline-color--blue-0 {
  outline-color: hsl(228, 100%, 99%) !important;
}

.font-color--blue-100 {
  color: hsl(227, 92%, 95%) !important;
}

.background-color--blue-100 {
  background-color: hsl(227, 92%, 95%) !important;
}

.border-color--blue-100 {
  border-color: hsl(227, 92%, 95%) !important;
}

.outline-color--blue-100 {
  outline-color: hsl(227, 92%, 95%) !important;
}

.font-color--blue-200 {
  color: hsl(226, 92%, 90%) !important;
}

.background-color--blue-200 {
  background-color: hsl(226, 92%, 90%) !important;
}

.border-color--blue-200 {
  border-color: hsl(226, 92%, 90%) !important;
}

.outline-color--blue-200 {
  outline-color: hsl(226, 92%, 90%) !important;
}

.font-color--blue-300 {
  color: hsl(227, 92%, 81%) !important;
}

.background-color--blue-300 {
  background-color: hsl(227, 92%, 81%) !important;
}

.border-color--blue-300 {
  border-color: hsl(227, 92%, 81%) !important;
}

.outline-color--blue-300 {
  outline-color: hsl(227, 92%, 81%) !important;
}

.font-color--blue-400 {
  color: hsl(228, 87%, 70%) !important;
}

.background-color--blue-400 {
  background-color: hsl(228, 87%, 70%) !important;
}

.border-color--blue-400 {
  border-color: hsl(228, 87%, 70%) !important;
}

.outline-color--blue-400 {
  outline-color: hsl(228, 87%, 70%) !important;
}

.font-color--blue-500 {
  color: hsl(229, 81%, 61%) !important;
}

.background-color--blue-500 {
  background-color: hsl(229, 81%, 61%) !important;
}

.border-color--blue-500 {
  border-color: hsl(229, 81%, 61%) !important;
}

.outline-color--blue-500 {
  outline-color: hsl(229, 81%, 61%) !important;
}

.font-color--blue-600 {
  color: hsl(230, 81%, 48%) !important;
}

.background-color--blue-600 {
  background-color: hsl(230, 81%, 48%) !important;
}

.border-color--blue-600 {
  border-color: hsl(230, 81%, 48%) !important;
}

.outline-color--blue-600 {
  outline-color: hsl(230, 81%, 48%) !important;
}

.font-color--blue-700 {
  color: hsl(230, 74%, 43%) !important;
}

.background-color--blue-700 {
  background-color: hsl(230, 74%, 43%) !important;
}

.border-color--blue-700 {
  border-color: hsl(230, 74%, 43%) !important;
}

.outline-color--blue-700 {
  outline-color: hsl(230, 74%, 43%) !important;
}

.font-color--blue-800 {
  color: hsl(230, 73%, 32%) !important;
}

.background-color--blue-800 {
  background-color: hsl(230, 73%, 32%) !important;
}

.border-color--blue-800 {
  border-color: hsl(230, 73%, 32%) !important;
}

.outline-color--blue-800 {
  outline-color: hsl(230, 73%, 32%) !important;
}

.font-color--blue-900 {
  color: hsl(230, 50%, 23%) !important;
}

.background-color--blue-900 {
  background-color: hsl(230, 50%, 23%) !important;
}

.border-color--blue-900 {
  border-color: hsl(230, 50%, 23%) !important;
}

.outline-color--blue-900 {
  outline-color: hsl(230, 50%, 23%) !important;
}

.font-color--accent-blue-100 {
  color: hsl(176, 100%, 97%) !important;
}

.background-color--accent-blue-100 {
  background-color: hsl(176, 100%, 97%) !important;
}

.border-color--accent-blue-100 {
  border-color: hsl(176, 100%, 97%) !important;
}

.outline-color--accent-blue-100 {
  outline-color: hsl(176, 100%, 97%) !important;
}

.font-color--accent-blue-200 {
  color: hsl(178, 91%, 83%) !important;
}

.background-color--accent-blue-200 {
  background-color: hsl(178, 91%, 83%) !important;
}

.border-color--accent-blue-200 {
  border-color: hsl(178, 91%, 83%) !important;
}

.outline-color--accent-blue-200 {
  outline-color: hsl(178, 91%, 83%) !important;
}

.font-color--accent-blue-300 {
  color: hsl(182, 93%, 79%) !important;
}

.background-color--accent-blue-300 {
  background-color: hsl(182, 93%, 79%) !important;
}

.border-color--accent-blue-300 {
  border-color: hsl(182, 93%, 79%) !important;
}

.outline-color--accent-blue-300 {
  outline-color: hsl(182, 93%, 79%) !important;
}

.font-color--accent-blue-400 {
  color: hsl(187, 86%, 67%) !important;
}

.background-color--accent-blue-400 {
  background-color: hsl(187, 86%, 67%) !important;
}

.border-color--accent-blue-400 {
  border-color: hsl(187, 86%, 67%) !important;
}

.outline-color--accent-blue-400 {
  outline-color: hsl(187, 86%, 67%) !important;
}

.font-color--accent-blue-500 {
  color: hsl(191, 78%, 56%) !important;
}

.background-color--accent-blue-500 {
  background-color: hsl(191, 78%, 56%) !important;
}

.border-color--accent-blue-500 {
  border-color: hsl(191, 78%, 56%) !important;
}

.outline-color--accent-blue-500 {
  outline-color: hsl(191, 78%, 56%) !important;
}

.font-color--accent-blue-600 {
  color: hsl(195, 100%, 41%) !important;
}

.background-color--accent-blue-600 {
  background-color: hsl(195, 100%, 41%) !important;
}

.border-color--accent-blue-600 {
  border-color: hsl(195, 100%, 41%) !important;
}

.outline-color--accent-blue-600 {
  outline-color: hsl(195, 100%, 41%) !important;
}

.font-color--accent-blue-700 {
  color: hsl(199, 100%, 36%) !important;
}

.background-color--accent-blue-700 {
  background-color: hsl(199, 100%, 36%) !important;
}

.border-color--accent-blue-700 {
  border-color: hsl(199, 100%, 36%) !important;
}

.outline-color--accent-blue-700 {
  outline-color: hsl(199, 100%, 36%) !important;
}

.font-color--accent-blue-800 {
  color: hsl(199, 100%, 30%) !important;
}

.background-color--accent-blue-800 {
  background-color: hsl(199, 100%, 30%) !important;
}

.border-color--accent-blue-800 {
  border-color: hsl(199, 100%, 30%) !important;
}

.outline-color--accent-blue-800 {
  outline-color: hsl(199, 100%, 30%) !important;
}

.font-color--grey-100 {
  color: hsl(0, 0%, 98%) !important;
}

.background-color--grey-100 {
  background-color: hsl(0, 0%, 98%) !important;
}

.border-color--grey-100 {
  border-color: hsl(0, 0%, 98%) !important;
}

.outline-color--grey-100 {
  outline-color: hsl(0, 0%, 98%) !important;
}

.font-color--grey-200 {
  color: hsl(240, 3%, 94%) !important;
}

.background-color--grey-200 {
  background-color: hsl(240, 3%, 94%) !important;
}

.border-color--grey-200 {
  border-color: hsl(240, 3%, 94%) !important;
}

.outline-color--grey-200 {
  outline-color: hsl(240, 3%, 94%) !important;
}

.font-color--grey-300 {
  color: hsl(200, 8%, 93%) !important;
}

.background-color--grey-300 {
  background-color: hsl(200, 8%, 93%) !important;
}

.border-color--grey-300 {
  border-color: hsl(200, 8%, 93%) !important;
}

.outline-color--grey-300 {
  outline-color: hsl(200, 8%, 93%) !important;
}

.font-color--grey-400 {
  color: hsl(197, 8%, 83%) !important;
}

.background-color--grey-400 {
  background-color: hsl(197, 8%, 83%) !important;
}

.border-color--grey-400 {
  border-color: hsl(197, 8%, 83%) !important;
}

.outline-color--grey-400 {
  outline-color: hsl(197, 8%, 83%) !important;
}

.font-color--grey-500 {
  color: hsl(202, 8%, 73%) !important;
}

.background-color--grey-500 {
  background-color: hsl(202, 8%, 73%) !important;
}

.border-color--grey-500 {
  border-color: hsl(202, 8%, 73%) !important;
}

.outline-color--grey-500 {
  outline-color: hsl(202, 8%, 73%) !important;
}

.font-color--grey-600 {
  color: hsl(200, 8%, 63%) !important;
}

.background-color--grey-600 {
  background-color: hsl(200, 8%, 63%) !important;
}

.border-color--grey-600 {
  border-color: hsl(200, 8%, 63%) !important;
}

.outline-color--grey-600 {
  outline-color: hsl(200, 8%, 63%) !important;
}

.font-color--grey-700 {
  color: hsl(201, 8%, 53%) !important;
}

.background-color--grey-700 {
  background-color: hsl(201, 8%, 53%) !important;
}

.border-color--grey-700 {
  border-color: hsl(201, 8%, 53%) !important;
}

.outline-color--grey-700 {
  outline-color: hsl(201, 8%, 53%) !important;
}

.font-color--grey-800 {
  color: hsl(200, 8%, 43%) !important;
}

.background-color--grey-800 {
  background-color: hsl(200, 8%, 43%) !important;
}

.border-color--grey-800 {
  border-color: hsl(200, 8%, 43%) !important;
}

.outline-color--grey-800 {
  outline-color: hsl(200, 8%, 43%) !important;
}

.font-color--grey-900 {
  color: hsl(201, 8%, 33%) !important;
}

.background-color--grey-900 {
  background-color: hsl(201, 8%, 33%) !important;
}

.border-color--grey-900 {
  border-color: hsl(201, 8%, 33%) !important;
}

.outline-color--grey-900 {
  outline-color: hsl(201, 8%, 33%) !important;
}

.font-color--black-100 {
  color: hsl(0, 0%, 0%) !important;
}

.background-color--black-100 {
  background-color: hsl(0, 0%, 0%) !important;
}

.border-color--black-100 {
  border-color: hsl(0, 0%, 0%) !important;
}

.outline-color--black-100 {
  outline-color: hsl(0, 0%, 0%) !important;
}

.font-color--white-100 {
  color: hsl(0, 0%, 100%) !important;
}

.background-color--white-100 {
  background-color: hsl(0, 0%, 100%) !important;
}

.border-color--white-100 {
  border-color: hsl(0, 0%, 100%) !important;
}

.outline-color--white-100 {
  outline-color: hsl(0, 0%, 100%) !important;
}

.font-color--red-100 {
  color: hsl(0, 83%, 98%) !important;
}

.background-color--red-100 {
  background-color: hsl(0, 83%, 98%) !important;
}

.border-color--red-100 {
  border-color: hsl(0, 83%, 98%) !important;
}

.outline-color--red-100 {
  outline-color: hsl(0, 83%, 98%) !important;
}

.font-color--red-700 {
  color: hsl(0, 63%, 44%) !important;
}

.background-color--red-700 {
  background-color: hsl(0, 63%, 44%) !important;
}

.border-color--red-700 {
  border-color: hsl(0, 63%, 44%) !important;
}

.outline-color--red-700 {
  outline-color: hsl(0, 63%, 44%) !important;
}

.font-color--yellow-100 {
  color: hsl(32, 100%, 95%) !important;
}

.background-color--yellow-100 {
  background-color: hsl(32, 100%, 95%) !important;
}

.border-color--yellow-100 {
  border-color: hsl(32, 100%, 95%) !important;
}

.outline-color--yellow-100 {
  outline-color: hsl(32, 100%, 95%) !important;
}

.font-color--yellow-700 {
  color: hsl(32, 100%, 39%) !important;
}

.background-color--yellow-700 {
  background-color: hsl(32, 100%, 39%) !important;
}

.border-color--yellow-700 {
  border-color: hsl(32, 100%, 39%) !important;
}

.outline-color--yellow-700 {
  outline-color: hsl(32, 100%, 39%) !important;
}

/*!
fonts
 */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 25% 150%;
  src: url('SourceSans3VF-Upright.otf.f477a50822d385ad.woff2') format("woff");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 200 900;
  font-stretch: 25% 150%;
  src: url('SourceSans3VF-Italic.otf.254652c2002afd5d.woff2') format("woff");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 200;
  font-stretch: normal;
  src: url('lato-v23-latin-regular.584e94768f19f8b3.woff') format("woff");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 300;
  font-stretch: normal;
  src: url('lato-v23-latin-300.c5195215cb712e9c.woff2') format("woff");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  src: url('Lato-Regular.4291f48c2ea51320.ttf') format("truetype");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  src: url('lato-v23-latin-700.d5eb20bcdcf5616a.woff2') format("woff");
}
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 200;
  font-stretch: normal;
  src: url('Lato-Italic.76e32f3f45e366a1.ttf') format("truetype");
}
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 300;
  font-stretch: normal;
  src: url('lato-v23-latin-300italic.804a1838fe4df1f2.woff2') format("woff");
}
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 400;
  font-stretch: normal;
  src: url('Lato-Italic.76e32f3f45e366a1.ttf') format("truetype");
}
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 700;
  font-stretch: normal;
  src: url('lato-v23-latin-700italic.495c95e95df6df48.woff2') format("woff");
}
:root {
  --font-family--primary: "Source Sans 3", sans-serif;
  --font-family--secondary: "Lato", sans-serif;
  --nav-width: 15rem;
  --content-width: 75rem;
  --transition-duration--default: 0.33s;
  --transition-duration: var(--transition-duration--default);
  --state-transition-duration: calc(var(--transition-duration--default) * var(--allow-motion));
  /*adds width to border for inputs in certain states*/
  --state-border-helper-color: transparent;
  --state-border-helper-width: 0rem;
  --focus-outline-color: var(--color--blue-800);
  --focus-contrast-color: transparent;
  --focus-outline-width: 0.125rem;
  --focus-contrast-width: 0.25rem;
  --outline-color: transparent;
  --outline-width: 0rem;
  /*default*/
  --input__text--default: var(--color--black-900);
  --input__border--default: var(--color--grey-700);
  --input__background--default: var(--color--white-100);
  /*error*/
  --input__text--error: var(--input__text--default);
  --text--error: var(--color--red-700);
  --input__border--error: var(--color--red-700);
  --input__background--error: var(--color--red-100);
  /*hover*/
  --input__text--hover: var(--input__text--default);
  --input__border--hover: var(--color--grey-800);
  --input__background--hover: var(--color--white-100);
  /*focus*/
  --input__text--focus: var(--input__text--default);
  --input__border--focus: var(--color--blue-800);
  --input__background--focus: var(--color--grey-100);
  /*disabled*/
  --input__text--disabled: var(--color--grey-800);
  --input__border--disabled: var(--color--grey-400);
  --input__background--disabled: var(--color--grey-200);
  /*current*/
  --input__border-width: 0.0625rem;
  --input__text-color: var(--input__text--default);
  --input__border-color: var(--input__border--default);
  --input__background-color: var(--input__background--default);
  /*default*/
  --button__text--default: var(--color--grey-200);
  --button__background--default: var(--color--blue-800);
  --button__border--default: var(--color--blue-800);
  /*hover*/
  --button__text--hover: var(--button__text--default);
  --button__background--hover: var(--color--blue-600);
  --button__border--hover: var(--color--blue-600);
  /*focus*/
  --button__text--focus: var(--button__text--default);
  --button__background--focus: var(--color--blue-800);
  --button__border--focus: var(--color--blue-800);
  /*disabled*/
  --button__text--disabled: var(--color--grey-800);
  --button__background--disabled: var(--color--grey-300);
  --button__border--disabled: var(--color--grey-300);
  /*current - change these in your variant classes*/
  --button__border-width: 0.0625rem;
  --button__text-color: var(--button__text--default);
  --button__background: var(--button__background--default);
  --button__border-color: var(--button__border--default);
}

/*
input, select, textarea
*/
/*
checkboxes and radios
*/
/*
button
*/
:root {
  interpolate-size: allow-keywords;
  --content-width: 90rem;
}

/*
universal rules
*/
html {
  hanging-punctuation: first last; /* Not supported in Chrome */
  font-family: "Source Sans 3", sans-serif;
  color: #000;
  font-size: 16px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  border: none;
  font: inherit; /* Get rid of all font sizes and heights */
  color: inherit;
}

/*
container rules
*/
body {
  min-height: 100vh;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
  padding: inherit;
}

/* Media responsive */
img, picture, svg, video {
  display: block;
}

p {
  max-width: 100%;
  padding-bottom: 0.5rem;
  color: black;
  text-wrap: pretty; /* Prevents orphans on lines */
}

:target {
  scroll-margin-block: 2em;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    --allow-motion: 1;
  }
  :has(:target) {
    scroll-behavior: smooth;
    scroll-padding-top: 3rem;
  }
}
@media (prefers-reduced-motion) {
  :root {
    --allow-motion: 0;
  }
}
body {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  background-color: var(--color--white-100);
}
body:has(dialog[open]) {
  overflow: clip;
}

hr {
  height: 0.125rem;
  width: 100%;
  background-color: var(--color--grey-400);
}

footer {
  display: flex;
}

:is(h1, :where(.h1), h2, :where(.h2), h3, :where(.h3), h4, :where(.h4), h5, :where(.h5), h6 :where(.h6)) {
  font-weight: 600;
  padding: 0.75em 0;
}

:is(h1, :where(.h1)) {
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.21429;
}

:is(h2, :where(.h2)) {
  font-size: 1.5rem;
  line-height: 1.24;
}

:is(h3, :where(.h3)) {
  font-size: 1.4375rem;
  line-height: 1.21739;
}

:is(h4, :where(.h4)) {
  font-size: 1.25rem;
  line-height: 1.25;
}

legend {
  float: left;
  font-size: 1.25rem;
  font-weight: 600;
  white-space: normal;
  padding-block: 0 1rem;
  width: 100%;
}

label {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.125;
}

select, input, textarea {
  --focus-contrast-width: 0rem;
  border-radius: 0.25rem;
  padding: 0.5rem;
  background-color: var(--input__background-color);
  border: var(--input__border-width) solid var(--input__border-color);
  box-shadow: 0 0 0 var(--state-border-helper-width) var(--input__border-color), 0 0 0 var(--focus-contrast-width) var(--focus-contrast-color);
  font-size: 1rem;
  color: var(--input__text-color);
  outline-width: var(--outline-width);
  outline-color: var(--outline-color);
  outline-offset: calc(2 * var(--focus-contrast-width) + 1px);
  flex: 1;
  appearance: none;
  line-height: 1.125;
  transition-duration: var(--transition-duration--default);
  transition-property: scale, background, color, border, outline, outline-offset, box-shadow, filter;
  transition-timing-function: ease;
  transition-delay: 0s;
  transition-behavior: allow-discrete;
}
select:is(:hover, :focus-visible, :focus):not([type=radio], [type=checkbox]), input:is(:hover, :focus-visible, :focus):not([type=radio], [type=checkbox]), textarea:is(:hover, :focus-visible, :focus):not([type=radio], [type=checkbox]) {
  --state-border-helper-width: var(--input__border-width);
}
select:hover, input:hover, textarea:hover {
  filter: brightness(0.975);
}
select:focus-visible, input:focus-visible, textarea:focus-visible {
  --outline-color: var(--focus-outline-color);
  --outline-width: var(--focus-outline-width);
  --focus-contrast-color: var(--color--white-100);
  --focus-contrast-width: 0.125rem;
}
select:is(:focus-visible, :focus), input:is(:focus-visible, :focus), textarea:is(:focus-visible, :focus) {
  --input__background-color: var(--input__background--focus);
  --input__border-color: var(--input__border--focus);
}
select:is(.invalidInput, :where(.ng-touched.ng-invalid), .error), input:is(.invalidInput, :where(.ng-touched.ng-invalid), .error), textarea:is(.invalidInput, :where(.ng-touched.ng-invalid), .error) {
  --input__text-color: var(--text--error);
  --input__background-color: var(--input__background--error);
  --input__border-color: var(--input__border--error);
}
select:disabled, input:disabled, textarea:disabled {
  cursor: not-allowed;
  --input__background-color: var(--input__background--disabled);
  --state-border-helper-width: 0;
  --state-border-color: var(--input__border--disabled);
}

input:is([type=radio], [type=checkbox]) {
  --input__border-width: 0.125rem;
  --input__border-color: var(--color--blue-800);
  --input__background--focus: var(--color--grey-200);
  --focus-contrast-width: 0.125rem;
  appearance: none;
  position: relative;
  display: flex;
  height: 1rem;
  width: 1rem;
  padding: 0;
  min-height: 1rem;
  min-width: 1rem;
  align-self: start;
  justify-content: center;
  align-items: center;
  color: var(--color--blue-800);
  filter: grayscale(1);
}
input:is([type=radio], [type=checkbox]):focus {
  --outline-offset: 0.1875rem;
}
input:is([type=radio], [type=checkbox]):before, input:is([type=radio], [type=checkbox]):after {
  position: absolute;
  border-radius: inherit;
  height: 100%;
  width: 100%;
  align-self: center;
  justify-self: center;
  scale: 0;
  opacity: 0;
  transition-property: scale, opacity;
  --transition-duration--default: 0.33s;
  transform-origin: center;
  transition-timing-function: ease;
  transition-duration: var(--transition-duration--default);
  line-height: 1;
  font-size: 0.75rem;
  text-align: center;
}
input:is([type=radio], [type=checkbox]):checked:before {
  scale: 1;
  opacity: 1;
}
input:is([type=radio], [type=checkbox]):hover, input:is([type=radio], [type=checkbox]):focus {
  filter: grayscale(0);
}
input[type=radio] {
  border-radius: 99rem;
}
input[type=radio]:before {
  content: "";
  height: 0.5rem;
  width: 0.5rem;
  border-radius: inherit;
  background-color: var(--input__border-color);
  transition-duration: var(--transition-duration--default);
  transition-property: scale;
  transition-timing-function: ease;
  transition-delay: 0s;
  transition-behavior: allow-discrete;
}
input[type=radio]:after {
  content: unset;
}
input[type=checkbox] {
  --state-transition-duration: 0.0s;
  border-radius: 0.125rem;
}
input[type=checkbox]:before {
  content: "\f00c";
  font-weight: 900;
  color: #fff;
  font-family: "Font Awesome 6 Pro";
  background-color: var(--color--blue-800);
  border-radius: 0;
}
input:focus-visible {
  --outline-width: 0.125rem;
  --outline-offset: 0.125rem;
}

input[type=file] + label:hover,
input[type=checkbox] + label:hover,
input[type=radio] + label:hover {
  cursor: pointer;
}

button, input[type=button] {
  display: flex;
  flex-direction: row;
  padding: 0.5rem 1.5rem;
  justify-content: center;
  align-items: center;
  align-self: center;
  line-height: 1;
  border-radius: 1rem;
  height: 2rem;
  min-width: fit-content;
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 0.8125rem;
  /*state properties*/
  color: var(--button__text-color);
  background-color: var(--button__background);
  border: var(--button__border-width) solid var(--button__border-color);
  --button__text-color: var(--button__text--default);
  --button__background: var(--button__background--default);
  --button__border-color: var(--button__border--default);
}
button:hover:not(:disabled):not(.disabled), input[type=button]:hover:not(:disabled):not(.disabled) {
  --button__text-color: var(--button__text--hover);
  --button__background: var(--button__background--hover);
  --button__border-color: var(--button__border--hover);
  cursor: pointer;
}
button:focus-visible, input[type=button]:focus-visible {
  --button__text-color: var(--button__text--focus);
  --button__background: var(--button__background--focus);
  --button__border-color: var(--button__border--focus);
  --focus-contrast-color: var(--color--white-100);
  outline: 0.125rem solid var(--focus-outline-color);
  outline-offset: 0.125rem;
  box-shadow: 0 0 0 0.125rem var(--color--white-100);
}
button:disabled, button.disabled, input[type=button]:disabled, input[type=button].disabled {
  --button__text-color: var(--button__text--disabled);
  --button__background: var(--button__background--disabled);
  --button__border-color: var(--button__border--disabled);
  cursor: not-allowed;
}

:is(a, :where(.anchor, .link)) {
  font-weight: 600;
}

b {
  font-weight: bolder;
}

button[popovertarget].popover-trigger {
  anchor-name: var(--anchor-name);
  color: var(--color--blue-800, #1565c0);
  background: transparent;
  border: none;
  font-size: 1.5rem;
  height: fit-content;
  margin-inline: 0.5rem;
  box-shadow: none;
  padding: 0rem;
}
button[popovertarget].popover-trigger:focus-visible {
  outline: 0.1875rem solid var(--focus-outline-color);
  outline-offset: 0.1875rem;
  box-shadow: 0 0 0 0.1875rem var(--color--white-100);
}

[popover].popover-content {
  position-anchor: var(--popover-anchor-name);
  position-try: flip-inline, flip-block;
  bottom: anchor(top);
  left: anchor(right);
  top: unset;
  right: unset;
  padding: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.625rem;
  font-size: 0.75rem;
  font-family: roboto, sans-serif;
  background-color: #fff;
  word-break: normal;
  overflow-wrap: anywhere;
  max-height: 40vh;
  min-width: 2.5rem;
  max-width: 30rem;
  overflow: visible;
}

@supports not (bottom: anchor(bottom)) {
  .position-popover-browser-specific {
    position: absolute;
    left: 19.5rem !important;
  }
}
.popover .popover-header {
  background-color: #fff;
  border: none;
}
.popover .popover-header .btn-close {
  display: none;
  padding: 0.25rem 0.75rem;
  position: absolute;
  top: 0;
  right: 0;
  left: unset;
  border-radius: 0;
}
.popover .popover-header .btn-close:focus {
  outline: 0.125rem solid;
}
.popover .popover-header .btn-close:before {
  font-weight: 500;
  color: var(--color--grey-800);
}
.popover[po-kb] .btn-close {
  display: flex;
}

.container {
  background-color: transparent;
  flex-direction: row;
  min-width: fit-content;
}
.container-for--btn {
  display: flex;
  gap: 0.5rem;
  overflow: visible;
  flex-direction: row;
  max-width: fit-content;
  align-self: end;
}
.container-for--btn .btn-type--icon {
  background-color: transparent;
}
.container-for--btn-rt {
  align-self: flex-end;
  justify-content: flex-end;
}
.container-for--btn-lt {
  margin-right: initial;
}
.container-for--btn-center {
  justify-content: center;
}
.container-for--btn.container-type--sm-col-reverse {
  flex-direction: row;
}
.container-wt {
  background-color: white;
  padding: 2rem;
}
.container-spread {
  max-inline-size: 100%;
  inline-size: 100%;
  justify-content: space-between;
}
.container-center {
  justify-content: center;
}
.container-right {
  justify-content: end;
}
.container-left {
  justify-content: start;
}

.agreement_button_container {
  display: flex;
  justify-content: end;
  margin-top: 2rem;
  gap: 1rem;
}

.main-grid {
  display: grid;
  grid-template-areas: "logo       header" ".          content" "navigation content";
  grid-template-columns: var(--nav-width) auto;
  grid-template-rows: auto 3rem 1fr;
  margin-inline: auto;
  width: 90rem;
  max-width: 100%;
}
.main-grid__logo {
  grid-area: logo;
  justify-self: center;
  align-self: center;
  padding: 0rem 0.75rem 2rem 0.75rem;
}
.main-grid__content {
  grid-area: content;
}
.main-grid__header {
  grid-area: header;
  padding: 1.5rem 2.5rem;
  /*appearance in layout*/
  background-color: var(--color--grey-100);
}
.main-grid__navigation {
  grid-area: navigation;
}
@media (max-width: 1199px) {
  .main-grid {
    grid-template-areas: "navigation header" "content    content" "content    content";
    grid-template-columns: 0.5fr 8fr;
    grid-template-rows: auto 3rem 1fr;
  }
}
@media-query (max-width:992px) {
  .main-grid {
    --nav-width: 0;
    --content-width: 100%;
  }
}

.content-panel {
  display: flex;
  flex-flow: nowrap column;
  row-gap: 1rem;
  background: #FAFAFA;
  min-height: 100vh;
  padding-top: 1rem;
}

.content-panel__header {
  padding: 1.5rem 2.5rem 1rem;
  /*appearance in layout*/
  background-color: var(--color--grey-100);
}

.content-panel__content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding-inline: 2.5rem;
  width: 0;
  min-width: 100%;
}

.content-panel__footer {
  display: flex;
  flex-direction: row;
  flex: 0 0 auto;
}

.page-content {
  max-width: var(--content-width);
  width: 100%;
  flex-grow: 1;
  align-self: center;
  padding: 0rem;
  background-color: var(--color--grey-100);
}

.pera-logo {
  background-image: url('logo-full.23ffadf8c5fe2363.svg');
  background-size: 99%;
  background-repeat: no-repeat;
  display: inline-block;
  height: 3.5rem;
  width: 13rem;
  margin: 0.5rem;
  margin-top: 3rem;
}

.hideOnInit {
  display: none;
}

.clearfloat {
  clear: both;
  font-size: 1px;
  height: 0;
  line-height: 0;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.centered {
  text-align: center;
}

.one-char {
  width: 2.5em !important;
}

.two-char {
  width: 3.5em !important;
}

.three-char {
  width: 4.5em !important;
}

.four-char {
  width: 5.5em !important;
}

.five-char {
  width: 6.5em !important;
}

.six-char {
  width: 7.5em !important;
}

.seven-char {
  width: 8.5em !important;
}

.eight-char {
  width: 9.5em !important;
}

.nine-char {
  width: 10.5em !important;
}

.ten-char {
  width: 11.5em !important;
}

.fifteen-char {
  width: 16.5em !important;
}

.icon-text span.form-icon {
  margin-right: 6px;
  vertical-align: top;
}

.hand-cursor {
  cursor: pointer;
}

.showOnSmall {
  display: none;
}

.note {
  color: var(--color--grey-900);
  font-family: Lato;
  font-style: italic;
  font-weight: 500;
  font-size: 0.75rem;
}

/*Add Mobile Breakpoints*/
.pera-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.pera-font-icon [class^=icon-], .pera-font-icon [class*=" icon-"] {
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  color: var(--color--blue-900);
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.social-icon {
  display: inline-block;
  background-color: var(--color--blue-900);
}
.social-icon.before {
  font-weight: 400;
}
.social-icon.facebook {
  border-radius: 1.5rem;
}
.social-icon.facebook:before {
  content: "\f39e";
}
.social-icon.twitter:before {
  content: "\f099";
}
.social-icon.linkedin:before {
  content: "\f0e1";
}
.error-summary {
  flex-direction: row;
  padding: 0.75rem;
  border: 0.125rem solid var(--color--red-700);
  background-color: var(--color--red-100);
}
.error-summary.alerts-general {
  border: 0.125rem solid var(--color--accent-blue-800);
  background-color: var(--color--accent-blue-100);
}
.error-summary.alerts-general .alerts-gen--icon {
  color: var(--color--accent-blue-800);
  border-radius: 0.5rem;
  font-size: 1.5rem;
  padding: 0.5rem;
}
.error-summary:empty {
  display: none;
}

.form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.forms__container {
  --forms__container-cell-width--standard: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 55rem;
  gap: 0.5rem;
  /*TODO remove notes
     because you could have the forms__container-legend 
     without being a legend, it has to be defined here too.
     */
}
.forms__container .forms__container-legend {
  font-size: 1.25rem;
  font-weight: 600;
  white-space: normal;
  padding-block: 0 1rem;
  width: 100%;
  display: inherit;
}
.forms__container-cell {
  display: grid;
  grid-template-areas: "label" "input" "error";
  grid-template-rows: min-content min-content minmax(1.5rem, min-content);
  max-width: var(--forms__container-cell-width--standard);
  min-width: 0;
  justify-self: stretch;
  gap: 0.25rem;
}
.forms__container-cell .forms__label {
  grid-area: label;
  width: fit-content;
}
.forms__container-cell .forms__input {
  grid-area: input;
  width: 100%;
}
.forms__container-cell .forms__input-helper {
  grid-area: input;
  justify-self: flex-end;
  height: 100%;
  padding: 0.5em;
  width: fit-content;
}
.forms__container-cell:has(.forms__input--checkbox, .forms__input--radio) {
  grid-template-areas: "input label" "error error";
  grid-template-columns: min-content auto;
  gap: 0 0.5rem;
}
.forms__container-cell:has(.forms__input--checkbox, .forms__input--radio) label {
  font-weight: 400;
  cursor: pointer;
}
.forms__container-cell .forms__inline-errors {
  grid-area: error;
  display: none;
  height: 0;
  overflow: hidden;
  color: var(--text--error);
  font-size: 0.75rem;
  font-style: italic;
  font-family: Lato, sans-serif;
  transition-property: height, display;
  transition-duration: var(--transition-duration);
  transition-delay: 0.25s;
}
@supports (transition-behavior: allow-discrete) {
  .forms__container-cell .forms__inline-errors {
    transition-behavior: allow-discrete;
  }
  @starting-style {
    .forms__container-cell .forms__inline-errors {
      height: 0;
      display: flex;
    }
  }
}
.forms__container-cell .forms__inline-errors .forms__inline-errors-list {
  margin-bottom: 0.5rem;
}
.forms__container-cell .forms__inline-errors li {
  color: inherit;
}
.forms__container-cell:has(.invalidInput) .forms__inline-errors {
  display: flex;
  height: min-content;
}

.forms__input, input.forms__input {
  --focus-contrast-width: 0rem;
  border-radius: 0.25rem;
  padding: 0.5rem;
  background-color: var(--input__background-color);
  border: var(--input__border-width) solid var(--input__border-color);
  box-shadow: 0 0 0 var(--state-border-helper-width) var(--input__border-color), 0 0 0 var(--focus-contrast-width) var(--focus-contrast-color);
  font-size: 1rem;
  color: var(--input__text-color);
  outline-width: var(--outline-width);
  outline-color: var(--outline-color);
  outline-offset: calc(2 * var(--focus-contrast-width) + 1px);
  flex: 1;
  appearance: none;
  line-height: 1.125;
  transition-duration: var(--transition-duration--default);
  transition-property: scale, background, color, border, outline, outline-offset, box-shadow, filter;
  transition-timing-function: ease;
  transition-delay: 0s;
  transition-behavior: allow-discrete;
  /*checkable inputs*/
}
.forms__input:is(:hover, :focus-visible, :focus):not([type=radio], [type=checkbox]), input.forms__input:is(:hover, :focus-visible, :focus):not([type=radio], [type=checkbox]) {
  --state-border-helper-width: var(--input__border-width);
}
.forms__input:hover, input.forms__input:hover {
  filter: brightness(0.975);
}
.forms__input:focus-visible, input.forms__input:focus-visible {
  --outline-color: var(--focus-outline-color);
  --outline-width: var(--focus-outline-width);
  --focus-contrast-color: var(--color--white-100);
  --focus-contrast-width: 0.125rem;
}
.forms__input:is(:focus-visible, :focus), input.forms__input:is(:focus-visible, :focus) {
  --input__background-color: var(--input__background--focus);
  --input__border-color: var(--input__border--focus);
}
.forms__input:is(.invalidInput, :where(.ng-touched.ng-invalid), .error), input.forms__input:is(.invalidInput, :where(.ng-touched.ng-invalid), .error) {
  --input__text-color: var(--text--error);
  --input__background-color: var(--input__background--error);
  --input__border-color: var(--input__border--error);
}
.forms__input:disabled, input.forms__input:disabled {
  cursor: not-allowed;
  --input__background-color: var(--input__background--disabled);
  --state-border-helper-width: 0;
  --state-border-color: var(--input__border--disabled);
}
.forms__input--checkbox, .forms__input--radio, input.forms__input--checkbox, input.forms__input--radio {
  --input__border-width: 0.125rem;
  --input__border-color: var(--color--blue-800);
  --input__background--focus: var(--color--grey-200);
  --focus-contrast-width: 0.125rem;
  appearance: none;
  position: relative;
  display: flex;
  height: 1rem;
  width: 1rem;
  padding: 0;
  min-height: 1rem;
  min-width: 1rem;
  align-self: start;
  justify-content: center;
  align-items: center;
  color: var(--color--blue-800);
  filter: grayscale(1);
}
.forms__input--checkbox:focus, .forms__input--radio:focus, input.forms__input--checkbox:focus, input.forms__input--radio:focus {
  --outline-offset: 0.1875rem;
}
.forms__input--checkbox:before, .forms__input--checkbox:after, .forms__input--radio:before, .forms__input--radio:after, input.forms__input--checkbox:before, input.forms__input--checkbox:after, input.forms__input--radio:before, input.forms__input--radio:after {
  position: absolute;
  border-radius: inherit;
  height: 100%;
  width: 100%;
  align-self: center;
  justify-self: center;
  scale: 0;
  opacity: 0;
  transition-property: scale, opacity;
  --transition-duration--default: 0.33s;
  transform-origin: center;
  transition-timing-function: ease;
  transition-duration: var(--transition-duration--default);
  line-height: 1;
  font-size: 0.75rem;
  text-align: center;
}
.forms__input--checkbox:checked:before, .forms__input--radio:checked:before, input.forms__input--checkbox:checked:before, input.forms__input--radio:checked:before {
  scale: 1;
  opacity: 1;
}
.forms__input--checkbox:hover, .forms__input--checkbox:focus, .forms__input--radio:hover, .forms__input--radio:focus, input.forms__input--checkbox:hover, input.forms__input--checkbox:focus, input.forms__input--radio:hover, input.forms__input--radio:focus {
  filter: grayscale(0);
}
.forms__input--checkbox:is(.invalidInput, :where(.ng-touched.ng-invalid), .error) + label, .forms__input--radio:is(.invalidInput, :where(.ng-touched.ng-invalid), .error) + label, input.forms__input--checkbox:is(.invalidInput, :where(.ng-touched.ng-invalid), .error) + label, input.forms__input--radio:is(.invalidInput, :where(.ng-touched.ng-invalid), .error) + label {
  color: var(--input__border--error);
}
.forms__input--checkbox, input.forms__input--checkbox {
  border-radius: 0.125rem;
}
.forms__input--checkbox:before, input.forms__input--checkbox:before {
  content: "\f00c";
  font-weight: 900;
  color: #fff;
  font-family: "Font Awesome 6 Pro";
  background-color: var(--color--blue-800);
  border-radius: 0;
}
.forms__input--checkbox--animated, input.forms__input--checkbox--animated {
  border-width: 0.125rem;
  position: relative;
  justify-content: center;
  align-items: center;
  color: var(--color--grey-900);
  border-radius: 0.125rem;
}
.forms__input--checkbox--animated:before, .forms__input--checkbox--animated:after, input.forms__input--checkbox--animated:before, input.forms__input--checkbox--animated:after {
  --transition-duration: calc(var(--state-transition-duration) / 2);
  content: "";
  display: flex;
  box-sizing: border-box;
  position: absolute;
  height: 2px;
  width: 0%;
  transition-property: width;
  transition-duration: var(--transition-duration);
  transform-origin: left;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: #fff;
  background-color: #fff;
  border-radius: 99rem;
  scale: 1;
  opacity: 1;
}
.forms__input--checkbox--animated:before, input.forms__input--checkbox--animated:before {
  transform-origin: top left;
  top: 44%;
  left: 22%;
  rotate: 0.125turn;
  transition-delay: var(--transition-duration);
}
.forms__input--checkbox--animated:after, input.forms__input--checkbox--animated:after {
  top: 70%;
  left: 39%;
  rotate: -0.125turn;
}
.forms__input--checkbox--animated:where(:checked, .checked), input.forms__input--checkbox--animated:where(:checked, .checked) {
  background-color: var(--color--blue-800);
}
.forms__input--checkbox--animated:where(:checked, .checked):before, input.forms__input--checkbox--animated:where(:checked, .checked):before {
  color: inherit;
}
.forms__input--checkbox--animated:where(:checked, .checked):before, input.forms__input--checkbox--animated:where(:checked, .checked):before {
  width: 36%;
  transition-delay: 0s;
}
.forms__input--checkbox--animated:where(:checked, .checked):after, input.forms__input--checkbox--animated:where(:checked, .checked):after {
  width: 61%;
  transition-delay: var(--transition-duration);
}
.forms__input--radio, input.forms__input--radio {
  border-radius: 99rem;
}
.forms__input--radio:before, input.forms__input--radio:before {
  content: "";
  height: 0.5rem;
  width: 0.5rem;
  border-radius: inherit;
  background-color: var(--input__border-color);
  transition-duration: var(--transition-duration--default);
  transition-property: scale;
  transition-timing-function: ease;
  transition-delay: 0s;
  transition-behavior: allow-discrete;
}
.forms__input--radio:after, input.forms__input--radio:after {
  content: unset;
}
.forms__input:disabled ~ .forms__label, input.forms__input:disabled ~ .forms__label {
  pointer-events: none;
}
.forms__input:not(.invalidInput, :where(.ng-touched.ng-invalid), .error) ~ .forms__inline-errors, input.forms__input:not(.invalidInput, :where(.ng-touched.ng-invalid), .error) ~ .forms__inline-errors {
  height: 0;
  display: none;
}
.forms__input:is(.invalidInput, :where(.ng-touched.ng-invalid), .error) ~ .forms__inline-errors, input.forms__input:is(.invalidInput, :where(.ng-touched.ng-invalid), .error) ~ .forms__inline-errors {
  display: flex;
  height: fit-content;
}
.forms__input:is(.invalidInput, :where(.ng-touched.ng-invalid), .error):not([type=radio], [type=checkbox]), input.forms__input:is(.invalidInput, :where(.ng-touched.ng-invalid), .error):not([type=radio], [type=checkbox]) {
  --state-border-helper-width: var(--input__border-width);
}

/*
This is for form input helper. (e.g. password show/hide eye)
*/
.forms__input-helper {
  min-width: min-content;
  display: flex;
  margin: 0;
  height: auto;
  background-color: transparent;
  z-index: 1;
}
.forms__input-helper:before, .forms__input-helper:after {
  font-weight: 400;
  rotate: 0turn;
}
.forms__input-helper[type=checkbox] {
  background: transparent;
  border: none;
}
.forms__input-helper[type=checkbox]:before, .forms__input-helper[type=checkbox]:after {
  all: initial;
  content: "";
}
.forms__input-helper[type=checkbox]:before {
  display: flex;
}
.forms__input-helper[type=checkbox]:after {
  display: none;
}
.forms__input-helper[type=checkbox]:where(:checked):before {
  display: none;
}
.forms__input-helper[type=checkbox]:where(:checked):after {
  display: flex;
}
.forms__input-helper.forms__input-helper--eye:before, .forms__input-helper.forms__input-helper--eye:after {
  font-family: "Font Awesome 6 Pro";
}
.forms__input-helper.forms__input-helper--eye:before {
  content: "\f06e";
}
.forms__input-helper.forms__input-helper--eye:after {
  content: "\f070";
}
.forms__input-helper.forms__input-helper--dollar {
  background-image: url('$.a794ff15af48a1b9.svg');
  background-repeat: no-repeat;
  background-size: 0.4375em;
  background-position: 50%;
  justify-self: start;
  width: 1.5rem;
  pointer-events: none;
}

.forms__label {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.125;
  color: var(--color--black-100);
  display: inline-flex;
  gap: 0.25rem;
  padding-block-end: 0;
}

.link {
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.125rem;
}
.link--primary {
  color: var(--color--blue-700);
  text-decoration: underline;
}
.link--primary:hover {
  color: var(--color--blue-800);
}
.link--secondary {
  color: black;
  text-decoration: none;
}
.link--secondary:hover {
  color: var(--color--blue-800);
  text-decoration: underline;
}
.link--navigation {
  color: var(--color--grey-900);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.75rem;
}
.link--forms {
  color: var(--color--blue-800);
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-style: solid;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  line-height: 1.375rem;
}
.link--forms:hover {
  color: var(--color--blue-900);
}

.link-in-dialog {
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.125rem;
  color: var(--color--blue-800);
}
.link-in-dialog:hover {
  color: var(--color--blue-800);
  text-decoration: underline;
}

.heading-dialog {
  color: black;
  font-size: 1.25rem;
}

.list-container {
  padding-left: 2rem;
  color: black;
}

.font-weight-bold {
  font-weight: 600;
}

.error-text {
  color: var(--text--error) !important;
}

.button_container {
  display: flex;
  justify-content: end;
  margin-top: 3rem;
  gap: 1rem;
}

.max-record-message {
  display: grid;
  justify-items: center;
  align-items: center;
  color: var(--color--grey-800);
}

.icon-color-edit-delete {
  font-size: 1.5rem;
  color: #4D565B;
}
.icon-color-edit-delete:hover {
  color: var(--color--blue-700);
}

.dialog-btn-container-jsp {
  display: flex;
}
.dialog-btn-container-jsp span {
  display: flex;
  justify-content: start;
}
.dialog-btn-container-jsp div {
  margin-left: auto;
  display: flex;
  justify-content: end;
  gap: 0.5rem;
}

.close-dialog-box-jsp {
  float: right;
  cursor: pointer;
  border: none;
  background: transparent;
  font-size: 24px;
  margin-bottom: 2rem;
  border: transparent;
}
.close-dialog-box-jsp i {
  color: var(--Gray-5, #5D5D5D);
}
.close-dialog-box-jsp:hover {
  background-color: var(--Gray-5, #e7e7e7);
}

.jsp-modal-heading {
  display: flex;
  justify-content: space-between;
  padding-left: 0;
}

.popover .popover-header {
  background-color: #fff;
  border: none;
}
.popover .popover-header .btn-close {
  display: none;
  padding: 0.25rem 0.75rem;
  position: absolute;
  top: 0;
  right: 0;
  left: unset;
  border-radius: 0;
}
.popover .popover-header .btn-close:focus {
  outline: 0.125rem solid;
}
.popover .popover-header .btn-close:before {
  font-weight: 500;
  color: var(--color--grey-800);
}
.popover[po-kb] .btn-close {
  display: flex;
}

.radio-container {
  display: contents;
  margin: 1rem;
}
.radio-container--cell {
  display: inline-flex;
  width: min-content;
  padding: 0.25rem;
}

/*
should be in agency-popover-tooltip.component.scss
*/
agency-popover-tooltip button[data-bs-toggle=popover] {
  box-shadow: rgba(255, 255, 255, 0.87) 0 0 0 1.74168px;
  color: var(--color--blue-800);
  outline-offset: 1.73438px;
  outline-width: 0;
  background: transparent;
  border: none;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

@media (min-width: 992px) {
  .forms__container {
    --forms__container-cell-width--standard: 26.6rem;
    --forms__container-cell-width--full: 100%;
  }
  .forms__container__cell-width--full {
    --forms__container-cell-width--standard: var(--forms__container-cell-width--full);
  }
  .forms__container-cell {
    max-width: var(--forms__container-cell-width--standard);
  }
  .forms__container-cell.forms__container-cell-width--standard {
    width: var(--forms__container-cell-width--standard);
  }
  .forms__container-cell.forms__container-cell-width--full {
    width: var(--forms__container-cell-width--full);
    max-width: var(--forms__container-cell-width--full);
  }
  .forms__row-container {
    display: grid;
    grid-template-areas: "label" "input" "error";
    grid-template-rows: min-content min-content minmax(1.5rem, min-content);
    grid-template-columns: repeat(auto-fill, minmax(min-content, 12rem));
    grid-auto-rows: min-content;
    column-gap: 1rem;
    row-gap: 0rem;
  }
  .forms__row-container .forms__container-cell {
    grid-row: span 3;
    grid-column: span 1;
    grid-template-rows: subgrid;
    width: unset;
  }
  .forms__row-container .forms__container-cell .forms__label {
    align-self: end;
  }
  .forms__row-container .forms__container-cell__separator {
    grid-area: input;
    display: flex;
    align-items: center;
    font-size: 1.5rem;
  }
  .forms__row-container .forms__container-cell:has(input[type=radio], input[type=checkbox], forms__input--radio, forms__input-checkbox) {
    grid-template-areas: "input label" "error error";
    grid-template-columns: min-content;
    grid-template-rows: min-content min-content;
  }
  .forms__row-container .forms__container-cell.forms__container-cell-width--standard {
    width: var(--forms__container-cell-width--standard);
  }
  .forms__row-container .forms__container-cell.forms__container-cell-width--full {
    width: var(--forms__container-cell-width--full);
  }
  .forms__row-container .forms__container-legend {
    grid-area: legend;
    grid-column: 1/-1;
  }
  .forms__row-container.f-m-l-name {
    grid-template-columns: 1fr min-content 1fr;
  }
  .forms__row-container-minimal {
    grid-template-columns: repeat(auto-fill, minmax(min-content, 0));
  }
}
select {
  width: 0;
  min-width: 100%;
  flex: 0;
  text-overflow: ellipsis;
  line-height: 1;
}

.forms__input {
  --focus-contrast-width: 0rem;
  border-radius: 0.25rem;
  padding: 0.5rem;
  background-color: var(--input__background-color);
  border: var(--input__border-width) solid var(--input__border-color);
  box-shadow: 0 0 0 var(--state-border-helper-width) var(--input__border-color), 0 0 0 var(--focus-contrast-width) var(--focus-contrast-color);
  font-size: 1rem;
  color: var(--input__text-color);
  outline-width: var(--outline-width);
  outline-color: var(--outline-color);
  outline-offset: calc(2 * var(--focus-contrast-width) + 1px);
  flex: 1;
  appearance: none;
  line-height: 1.125;
  transition-duration: var(--transition-duration--default);
  transition-property: scale, background, color, border, outline, outline-offset, box-shadow, filter;
  transition-timing-function: ease;
  transition-delay: 0s;
  transition-behavior: allow-discrete;
}
.forms__input:is(:hover, :focus-visible, :focus):not([type=radio], [type=checkbox]) {
  --state-border-helper-width: var(--input__border-width);
}
.forms__input:hover {
  filter: brightness(0.975);
}
.forms__input:focus-visible {
  --outline-color: var(--focus-outline-color);
  --outline-width: var(--focus-outline-width);
  --focus-contrast-color: var(--color--white-100);
  --focus-contrast-width: 0.125rem;
}
.forms__input:is(:focus-visible, :focus) {
  --input__background-color: var(--input__background--focus);
  --input__border-color: var(--input__border--focus);
}
.forms__input:is(.invalidInput, :where(.ng-touched.ng-invalid), .error) {
  --input__text-color: var(--text--error);
  --input__background-color: var(--input__background--error);
  --input__border-color: var(--input__border--error);
}
.forms__input:disabled {
  cursor: not-allowed;
  --input__background-color: var(--input__background--disabled);
  --state-border-helper-width: 0;
  --state-border-color: var(--input__border--disabled);
}
.forms__input--sm {
  width: 30%;
  min-width: 30%;
}
.forms__input:has(~ .forms__input-helper--dollar) {
  padding-left: 1.5rem;
}

.forms__textarea {
  width: 100%;
  max-width: 100%;
}
.forms__textarea.forms__input--sm {
  width: 75%;
  min-width: 50%;
}

.required {
  grid-template-columns: max-content 1rem;
}
.required:after {
  content: "*"/"required";
  color: var(--color--red-700);
  align-items: normal;
  display: inline-flex;
}

.p-note {
  max-width: 100%;
  display: flex;
  justify-content: center;
  font-style: italic;
  font-weight: normal;
  color: #5a5a5a;
}

.forms__text {
  max-width: 100%;
  padding-bottom: 0.5rem;
}

.bold {
  font-weight: bold;
}

.ul-list {
  list-style: inherit;
}

.ui-datepicker {
  background-color: white;
  border: 0.025rem solid;
}

.note {
  font-size: 0.75rem;
  font-style: italic;
  font-weight: 400;
  font-family: "Lato", sans-serif;
  align-self: end;
}

.form-error {
  color: var(--text--error);
}

.main-content-hide {
  display: none;
}

.container-for--alert, messages {
  padding: 0 0;
  margin: 0 0;
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
.container-for--alert:has(> ul:not(:empty)), .container-for--alert:has(> div:not(:empty)), messages:has(> ul:not(:empty)), messages:has(> div:not(:empty)) {
  display: flex;
}
@media (max-width: 992px) {
  .container-for--alert, messages {
    max-width: 100%;
  }
}

.alerts {
  line-height: 1.25;
  z-index: 0;
  width: 100%;
  box-sizing: border-box;
  color: var(--color--grey-100);
  margin: 1rem 0;
  align-items: center;
  display: flex;
  height: fit-content;
  padding: 1rem;
  font-size: 1rem;
  opacity: 1;
  overflow: hidden;
  max-height: 12.5rem;
}
.alerts::before {
  width: 0.75em;
  height: 0.8em;
  font-size: 2em;
  line-height: 2em;
  text-align: center;
  font-weight: 900;
  left: 0.75em;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "peraicon", sans-serif;
  margin: 0 1rem 0 0;
}
.alerts.alert-error {
  background-color: var(--color--red-100);
  color: #000;
  border: 1px solid var(--color--red-700);
}
.alerts.alert-error p {
  color: #000;
}
.alerts.alert-error a {
  color: var(--color--blue-800);
}
.alerts.alert-error:before {
  font-family: "pera-icon-font", "sans-serif";
  border: none;
  background: var(--color--red-100);
  color: var(--color--red-700);
  font-weight: normal;
}
.alerts.alert-general {
  background-color: var(--color--accent-blue-100);
  color: #000;
  border: 1px solid var(--color--accent-blue-800);
}
.alerts.alert-general p {
  color: #000;
}
.alerts.alert-general a {
  color: var(--color--accent-blue-800);
}
.alerts.alert-general:before {
  font-family: "pera-icon-font", "sans-serif";
  border: none;
  background: var(--color--accent-blue-100);
  color: var(--color--accent-blue-800);
  font-weight: normal;
}
.alerts.alert-warn {
  background-color: var(--color--yellow-100);
  color: #000;
  border: 1px solid var(--color--yellow-700);
}
.alerts.alert-warn p {
  color: #000;
}
.alerts.alert-warn a {
  color: var(--color--blue-800);
}
.alerts.alert-warn:before {
  font-family: "pera-icon-font", "sans-serif";
  border: none;
  background: var(--color--grey-0);
  color: var(--color--yellow-700);
  font-weight: normal;
}
@media (max-width: 992px) {
  .alerts.alert-errors {
    max-height: initial;
    overflow: initial;
    padding: 1rem 2rem 1rem 1rem;
    white-space: initial;
  }
  .alerts.alert-errors * {
    -webkit-line-clamp: initial;
    -webkit-box-orient: initial;
    overflow: initial;
  }
}
.alerts.alert-errors {
  align-items: baseline;
}

.container-for--alert .alerts-general {
  background-color: var(--color--accent-blue-100);
  border: 2px solid var(--color--accent-blue-800);
  border-radius: 0.5rem;
  color: #000;
}
.container-for--alert .alerts-general > .alerts-gen--icon {
  color: var(--color--accent-blue-800);
  border-radius: 0.5rem;
  font-size: 1.5rem;
  padding: 0.5rem;
}
.container-for--alert .alerts-error {
  background-color: var(--color--red-100);
  color: #000;
  border: 1px solid var(--color--red-700);
  border-radius: 0.5rem;
}
.container-for--alert .alerts-error .alerts-err--icon {
  color: var(--color--red-700);
  border-radius: 0.5rem;
  font-size: 1.5rem;
  padding: 0.5rem;
}
.container-for--alert .alerts-warn {
  background-color: var(--color--yellow-100);
  border: 1px solid var(--color--yellow-700);
  border-radius: 0.5rem;
  color: #000;
}
.container-for--alert .alerts-warn > .alerts-warn--icon {
  color: var(--color--yellow-700);
  border-radius: 0.5rem;
  font-size: 1.5rem;
  padding: 0.5rem;
}

.btn, .button {
  display: flex;
  flex-direction: row;
  padding: 0.5rem 1.5rem;
  justify-content: center;
  align-items: center;
  align-self: center;
  line-height: 1;
  border-radius: 1rem;
  height: 2rem;
  min-width: fit-content;
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 0.8125rem;
  /*state properties*/
  color: var(--button__text-color);
  background-color: var(--button__background);
  border: var(--button__border-width) solid var(--button__border-color);
  --button__text-color: var(--button__text--default);
  --button__background: var(--button__background--default);
  --button__border-color: var(--button__border--default);
}
.btn:hover:not(:disabled):not(.disabled), .button:hover:not(:disabled):not(.disabled) {
  --button__text-color: var(--button__text--hover);
  --button__background: var(--button__background--hover);
  --button__border-color: var(--button__border--hover);
  cursor: pointer;
}
.btn:focus-visible, .button:focus-visible {
  --button__text-color: var(--button__text--focus);
  --button__background: var(--button__background--focus);
  --button__border-color: var(--button__border--focus);
  --focus-contrast-color: var(--color--white-100);
  outline: 0.125rem solid var(--focus-outline-color);
  outline-offset: 0.125rem;
  box-shadow: 0 0 0 0.125rem var(--color--white-100);
}
.btn:disabled, .btn.disabled, .button:disabled, .button.disabled {
  --button__text-color: var(--button__text--disabled);
  --button__background: var(--button__background--disabled);
  --button__border-color: var(--button__border--disabled);
  cursor: not-allowed;
}
.btn__primary, .btn--primary, .button__primary, .button--primary {
  --button__background--default: var(--color--blue-800);
}
.btn__secondary, .btn--secondary, .button__secondary, .button--secondary {
  /*default*/
  --button__text--default: var(--color--blue-800);
  --button__background--default: var(--color--grey-100);
  --button__border--default: var(--color--blue-800);
  /*hover*/
  --button__text--hover: var(--button__text--default);
  --button__background--hover: var(--color--grey-200);
  --button__border--hover: var(--button__border--default);
  /*focus*/
  --button__text--focus: var(--button__text--default);
  --button__background--focus: var(--color--grey-200);
  --button__border--focus: var(--button__border--default);
}
.btn__tertiary, .btn--tertiary, .button__tertiary, .button--tertiary {
  --button__text--default: var(--color--blue-700);
  --button__background--default: transparent;
  --button__border--default: var(--button__background--default);
  /*hover*/
  --button__text--hover: var(--button__text--default);
  --button__background--hover: var(--color--grey-200);
  --button__border--hover: var(--button__background--hover);
  /*focus*/
  --button__text--focus: var(--button__text--default);
  --button__background--focus: var(--color--grey-200);
  --button__border--focus: var(--color--blue-700);
}
.btn__quad, .button__quad {
  --button__text--default: var(--color--blue-700);
  --button__background--default: var(--color--blue-100);
  --button__border--default: var(--button__background--default);
  /*hover*/
  --button__text--hover: var(--color--blue-700);
  --button__background--hover: var(--color--blue-100);
  --button__border--hover: var(--color--blue-700);
  /*focus*/
  --button__text--focus: var(--color--blue-800);
  --button__background--focus: var(--color--blue-200);
  --button__border--focus: var(--color--blue-800);
}
.btn__alert, .button__alert {
  --button__text--default: var(--color--grey-200);
  --button__background--default: var(--color--red-700);
  --button__border--default: var(--button__background--default);
  /*hover*/
  --button__text--hover: hsl(0, 83%, 98%);
  --button__background--hover: hsl(359, 72%, 31%);
  --button__border--hover: var(--button__background--hover);
  /*focus*/
  --button__text--focus: hsl(0, 83%, 98%);
  --button__background--focus: hsl(359, 72%, 31%);
  --button__border--focus: var(--button__background--focus);
}

/*TODO remove notes
   This appears to only be used in critical shortage.
   Should be named btn--text according to BEM
   */
.text-btn {
  background-color: transparent;
  border: none;
  color: black;
  font-family: "Source Sans 3", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25rem;
  text-decoration-line: underline;
  text-decoration-style: solid;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.btn-type--icon {
  padding: 0;
  height: fit-content;
  font-size: 1rem;
  background-color: transparent;
  border: gray;
  color: var(--color--blue-800);
}

.btn-type--icon.btn-type--icon-override {
  color: var(--color--grey-900);
  border-radius: 99rem;
}
.btn-type--icon.btn-type--icon-override:hover {
  background-color: var(--color--grey-200);
}
.btn-type--icon.btn-type--icon-override:focus {
  color: var(--color--blue-800);
}

.btn-type--action {
  padding: 0.5rem;
  border-radius: 0.25rem;
}

.card--container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  grid-auto-rows: auto;
  grid-gap: 1rem;
}

.card--container__large {
  display: grid;
  width: 100%;
}

.card__large {
  max-width: 90%;
  border-width: 0.125rem;
  border-radius: 0.25rem;
  border-color: lightgray;
  border-style: solid;
  display: grid;
  background-color: white;
  color: inherit;
  flex: 1;
  min-width: fit-content;
  outline-offset: 0.25rem;
}
.card__large .card--header__large {
  display: grid;
  font-size: 1.8rem;
  line-height: 1.625;
  font-weight: 600;
  padding: 1rem;
  align-content: center;
  justify-content: flex-start;
}
.card__large .card--title__large {
  color: hsl(230, 73%, 32%);
  font-size: 1.25rem;
  line-height: 1.625;
  font-weight: 600;
}
.card__large p {
  color: black;
}
.card__large .card--body__large {
  display: grid;
  justify-content: center;
  align-items: center;
  justify-items: center;
}

.card__small {
  word-wrap: break-word;
  background-color: white;
  background-clip: border-box;
  border-width: 0.125rem;
  border-color: transparent;
  border-radius: 0;
}
.card__small .card--header__small {
  flex-wrap: nowrap;
  display: flex;
  gap: 1rem;
  margin-bottom: 0;
  margin-top: 0;
  text-align: start;
  color: black;
  font-size: 1.25rem;
  font-weight: 600;
  align-items: flex-start;
}
.card__small .card--header__small .card--cell__small {
  display: inline-flex;
  padding: 2rem 1rem 0.5rem 1rem;
  gap: 0;
  align-items: flex-start;
}
.card__small .card--body__small {
  display: grid;
  justify-content: center;
  align-items: center;
  justify-items: center;
}
.card__small .card--body__small .card--title__small {
  color: hsl(230, 73%, 32%);
  font-size: 1.25rem;
  line-height: 1.625;
  font-weight: 600;
}
.card__small .card--body__small p {
  padding: 1rem;
}

@media (min-width: 992px) {
  .card--container {
    margin: 0 -1rem;
    padding: 1rem 1.5rem;
    width: 90%;
  }
  .card--container__large {
    margin: 0 -1rem;
    padding: 1rem 1.5rem;
    width: 90%;
  }
  .card__large {
    width: 90%;
    flex-direction: column !important;
  }
}
.table {
  width: 100%;
  background-color: white;
  border-spacing: 0;
}
.table__th {
  background-color: var(--color--grey-200);
  color: black;
  padding: 1em 1em 0.5em 1em;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid var(--Grey-400, #D0D5D7);
}
.table__tr {
  height: 2em;
  width: 30%;
  border-bottom: 1px solid var(--color--grey-300);
}
.table__tr:hover {
  /*background-color: var(--color--blue-0);*/
}
.table__td {
  text-align: left;
  padding: 1em;
  font-size: 0.875em;
  font-style: normal;
  font-weight: 400;
  line-height: 1.0625;
  border-bottom: 1px solid var(--Color-Grey-300, #EBEDEE);
}
.table__thead {
  justify-content: right;
  font-weight: 600;
  line-height: 1.875;
  background-color: var(--color--grey-200);
}
.table__body_tr:nth-child(odd) {
  border-bottom: 1px solid var(--Color-Grey-300, #EBEDEE);
  background: #FAFBFF;
}

.table-style-one, table.table-style-one {
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 1rem;
}
.table-style-one thead, .table-style-one .t-head, table.table-style-one thead, table.table-style-one .t-head {
  background-color: var(--color--grey-200, #F2F4F5);
  color: black;
  font-weight: 600;
}
.table-style-one thead th, .table-style-one .t-head th, table.table-style-one thead th, table.table-style-one .t-head th {
  width: inherit;
}
.table-style-one tbody tr, table.table-style-one tbody tr {
  background-color: var(--color--white-100, #FFFFFF);
}
.table-style-one tbody tr td, table.table-style-one tbody tr td {
  font-size: 0.875em;
}
.table-style-one tbody tr:nth-child(even), table.table-style-one tbody tr:nth-child(even) {
  background-color: hsl(228, 100%, 99%);
}
.table-style-one th, .table-style-one td, table.table-style-one th, table.table-style-one td {
  padding: 1em;
  text-align: left;
  line-height: 1.0625;
}
.table-style-one tfoot, table.table-style-one tfoot {
  background-color: var(--color--grey-100);
  font-weight: 600;
}
.table-style-one.clickable-rows tbody tr, table.table-style-one.clickable-rows tbody tr {
  cursor: pointer;
}
.table-style-one.clickable-rows tbody tr:hover, table.table-style-one.clickable-rows tbody tr:hover {
  filter: brightness(0.95);
}

.no-records {
  display: grid;
  justify-items: center;
  align-items: center;
  color: var(--color--grey-800);
}

.td-link a {
  color: black;
  text-decoration: underline;
}
.td-link a:hover {
  text-decoration: underline;
  color: var(--color--blue-800);
}

div.control-button-container {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 1.5rem;
  padding-block: 1.5rem 0.5rem;
}
div.control-button-container > button.btn-type--toggle-switch {
  padding: 0;
  align-items: center;
  gap: 0;
  width: 3rem;
  height: 1.5rem;
}
div.control-button-container > button.btn-type--toggle-switch:before {
  content: "";
  height: 1.125rem;
  width: 1.125rem;
  background-color: var(--color--blue-700);
  border-radius: 99rem;
  transform: translateX(-0.75rem);
  transition: transform 0.2s linear;
}
div.control-button-container > div.indicator-btn {
  text-indent: 0;
  flex: 1;
  background-color: transparent;
  margin: 0;
  max-width: fit-content;
  padding: 0;
}
div.control-button-container > div.indicator-btn > div.indicator-btn {
  color: var(--color--grey-700);
}
div.control-button-container:not(.right) > div.indicator-btn:first-child {
  color: var(--color--blue-700);
}
div.control-button-container.right > button.btn-type--toggle-switch:before {
  transform: translateX(0.75rem);
}
div.control-button-container.right > div.indicator-btn:last-child {
  color: var(--color--blue-700);
}

@media (min-width: 992px) {
  div.control-button-container {
    width: 3rem;
    display: inline-flex;
  }
}
::backdrop {
  background-color: black;
  opacity: 0.5;
}

[popover]::backdrop {
  background-color: transparent;
  opacity: 1;
}

.modal {
  width: 36.5rem;
  background-color: #FAFAFA;
  color: black;
  flex-direction: column;
  align-self: center;
  justify-self: center;
  gap: 1rem;
  border: 0.063rem solid var(--color--grey-400);
}
.modal__content {
  display: flex;
  flex-direction: column;
  padding: 2rem;
}
.modal__header {
  display: flex;
  justify-content: space-between;
  padding-left: 2rem;
}
.modal__close {
  cursor: pointer;
  background-color: transparent;
  border: none;
  color: black;
  font-size: inherit;
  position: absolute;
  padding: 0.5rem;
  top: 0.5rem;
  right: 0.5rem;
  height: fit-content;
  border-radius: 0.25rem;
}
.modal__close:before {
  content: "\f00d";
  font-family: "Font Awesome 6 Pro";
  font-size: 2rem;
  height: 1em;
  width: 1em;
}
.modal__title {
  display: inherit;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  font-size: 1.5625rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.24;
  padding: 2rem;
}
.modal__body {
  display: inherit;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  gap: 1rem;
}

.modal-override.modal {
  gap: 0;
}
.modal-override.modal--wide {
  width: 50rem;
}
.modal-override.modal[open] {
  display: flex;
  flex-direction: column;
}
.modal-override.modal .modal__header {
  flex-wrap: wrap;
  padding: 2rem 2rem 1rem;
}
.modal-override.modal .modal__header .modal__title {
  padding: 0;
  flex-direction: column;
}
.modal-override.modal .modal__header .modal__close {
  color: var(--color--grey-900);
  padding-inline: 0;
  border-radius: 99rem;
  top: 1.5rem;
  right: 1.5rem;
}
.modal-override.modal .modal__header .modal__close:hover {
  color: var(--color--blue-800);
}
.modal-override.modal .modal__body {
  padding: 1rem 2rem 2rem;
  flex-direction: column;
  gap: 1rem;
}

.tab-nav {
  --control-width-ratio: 5;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  min-height: fit-content;
  padding-bottom: 2rem;
}

@media (min-width: 880px) {
  .tab-nav {
    background-color: #A1B5FB;
    padding: 3.3125rem;
    flex-grow: 1;
  }
}
@media (min-width: 992px) {
  .tab-nav {
    --control-height: 4cqw;
    --tab-panel-container-gap: 10cqw;
    --tab-nav-control-gap: 5cqw;
    --number-of-panels: 3;
    display: grid;
    grid-template-rows: min-content;
    container-type: size;
  }
}
.header {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.header .header-title--employer {
  font-size: 1.75rem;
  align-self: baseline;
  font-style: normal;
  font-weight: 600;
  line-height: 2.125rem;
  margin: 0;
  color: black;
}
.header .header-title--agency {
  color: var(--color--grey-900);
}

.top-nav-container {
  background-color: var(--color--blue-900);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 2rem;
  margin-right: auto;
  margin-left: auto;
}
.top-nav-container.logout {
  border-left: 0 none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

.status-line {
  width: 100%;
  display: flex;
  padding: 1.5rem 2.5rem 0 2.5rem;
  justify-content: space-between;
}
.status-line .employer-info {
  display: grid;
  align-items: flex-start;
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.125rem;
}
.status-line .employer-info p {
  color: #4D565B;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.125rem;
  margin-top: 0;
}
.status-line .employer-info h1 {
  margin-bottom: 0;
}
.status-line .user-icon {
  display: grid;
  justify-items: flex-end;
  align-items: center;
  gap: 1.5rem;
}

.navigation {
  font-style: normal;
  font-weight: 600;
  line-height: 1.27;
}
.navigation .navigation-item {
  border-left: 0.25rem solid transparent;
  padding: 0;
  margin: 0;
  color: var(--color--grey-900);
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.55rem;
}
.navigation .navigation-item .navigation-item--a {
  padding: 1rem;
  border-radius: 0;
  background-color: transparent;
  display: flex;
  justify-content: space-between;
  text-align: left;
  font-size: 1.375rem;
  font-family: inherit;
  font-weight: 400;
  color: inherit;
  box-sizing: content-box;
  border-left: 0.25rem solid transparent;
}
.navigation .navigation-item .link--navigation {
  padding: 1rem;
}
.navigation .active {
  background-color: var(--color--grey-100);
  color: var(--color--blue-800) !important;
  border-left-color: var(--color--blue-800);
  border-left: solid;
  font-weight: 600;
}

footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  background-color: var(--color--grey-100);
  max-width: var(--content-width);
  align-self: center;
  justify-content: space-between;
  padding: 0 2.5rem 1.5rem;
  margin: auto;
}
footer p {
  color: black;
}
footer hr {
  margin-bottom: 1rem;
}
footer .footer-social-section {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin-block: 1rem 0rem;
}
footer .footer-social-section a {
  display: inline-block;
  color: var(--color--blue-900);
  font-size: 1.875rem;
  line-height: 1;
  padding: 0.125rem;
}
footer .footer-social-section a i {
  color: inherit;
}
@media (max-width: 992px) {
  footer .footer-social-section {
    display: none;
  }
}
footer .footer-social-section .social-icon.before {
  font-family: "pera-icon-font", sans-serif;
  font-weight: 400;
}

.footer-container--address {
  display: none;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1rem;
}
.footer-container--address .footer-address--a {
  text-align: end;
  color: black;
  line-height: normal;
  font-weight: 600;
}

.footer-container--links {
  display: flex;
  flex-direction: column;
}
.footer-container--links > .link--footer {
  color: black;
  display: flex;
  padding: 0.125rem 0.25rem;
  background-color: transparent;
  font-weight: 600;
  font-size: 1rem;
  justify-content: flex-start;
  align-self: flex-start;
  border: none;
  border-radius: 0.25rem;
}
.footer-container--links > .link--footer:focus-visible {
  outline: 0.125rem solid var(--focus-outline-color);
}
.footer-container--links > .hideOnLogin {
  display: none;
}

@media (min-width: 992px) {
  .footer-container--address, .footer-social-section {
    display: flex;
  }
}
html {
  --mat-sys-title-small-font: var(--font-family--primary);
  --mat-sys-title-medium-font: var(--font-family--primary);
  --mat-sys-title-large-font: var(--font-family--primary);
  --mat-sys-body-small-font: var(--font-family--primary);
  --mat-sys-body-medium-font: var(--font-family--primary);
  --mat-sys-body-large-font: var(--font-family--primary);
  --mat-sys-headline-small-font: var(--font-family--primary);
  --mat-sys-headline-medium-font: var(--font-family--primary);
  --mat-sys-headline-large-font: var(--font-family--primary);
  --mat-sys-display-small-font: var(--font-family--primary);
  --mat-sys-display-medium-font: var(--font-family--primary);
  --mat-sys-display-large-font: var(--font-family--primary);
  --mat-sys-label-small-font: var(--font-family--primary);
  --mat-sys-label-medium-font: var(--font-family--primary);
  --mat-sys-label-large-font: var(--font-family--primary);
}

.mat-table {
  --mat-table-background-color: #FFFFFF;
}

.table-caption {
  border-bottom: 0.0625rem solid grey;
  text-align: left;
  padding: 0.5rem;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.875rem;
  color: black;
}

.mat-table {
  width: 100%;
  border-bottom: 0.0625rem solid grey;
  display: table;
}
.mat-table__cell--important {
  font-weight: 600;
  text-decoration: underline;
}
.mat-table thead {
  justify-content: right;
  display: table-header-group;
  width: 100%;
  font-weight: 600;
  line-height: 1.875rem;
  background-color: var(--color--grey-200) !important;
}
.mat-table .mat-row:not(:last-child) {
  border-bottom: 0.0625rem solid grey;
}

.table-container {
  border: transparent;
  margin: 1rem 0;
}

mat-card {
  --mdc-outlined-card-container-color: #FFFFFF;
}

mat-card.mat-mdc-card-outlined {
  border-radius: 0.5rem;
  border: 1px solid #EBEDEE;
  background: white;
}

.mat-mdc-card-actions {
  justify-content: end;
  width: 100%;
}

.mat-mdc-card-title {
  width: 100%;
  text-wrap: nowrap;
}

.materials__card-lg {
  border-radius: 0.5rem;
  width: 95%;
  padding: 0.5rem;
  margin: 1rem;
}

.materials__card-sm {
  border-radius: 0.5rem;
  padding: 0.5rem;
  word-wrap: break-word;
  margin: 1rem;
  min-width: fit-content;
}

mat-card-footer {
  padding: 0 1rem;
}

html {
  --mdc-dialog-container-color: #FAFAFA;
}
html {
  --mdc-dialog-container-shape: 0;
}
html {
  --mdc-dialog-supporting-text-size: 1rem;
}
html {
  --mdc-dialog-supporting-text-line-height: 1.5rem;
}

.mat-mdc-dialog-container .mat-mdc-dialog-content {
  color: black;
}

.mat-mdc-row {
  font-family: "Source Sans 3" !important;
}

.mat-mdc-header-cell {
  font-family: "Source Sans 3" !important;
}

div .mat-mdc-form-field-infix {
  padding-top: 0;
}

.mat-mdc-dialog-container .mat-mdc-dialog-component-host .mat-mdc-dialog-title {
  color: #000;
  font-size: 1.5625rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.9375rem;
}

.mat-dialog--close {
  float: right;
  cursor: pointer;
  background-color: transparent;
  border: none;
  color: var(--color--grey-900);
  font-size: inherit;
  margin: 1rem 0 0 0;
}

.ag-expansion-panel-no-padding mat-expansion-panel-header {
  padding: 0;
}
.ag-expansion-panel-no-padding .mat-expansion-panel-body {
  padding: 0;
}
.ag-expansion-panel-no-padding .mat-content.mat-content-hide-toggle {
  margin: 0;
}

.mat-expansion-panel-body {
  padding-right: 0 !important;
}

.ag-expansion-panel-x-scrollable .mat-expansion-panel-content {
  overflow-x: auto;
  overflow-y: hidden;
}

html {
  --mdc-snackbar-container-color: #FFF;
}

html {
  --mdc-circular-progress-active-indicator-color: var(--color--grey-800);
}

html {
  --mdc-plain-tooltip-container-color: #FFF;
}
html {
  --mdc-plain-tooltip-supporting-text-color: black;
}
html {
  --mdc-plain-tooltip-container-shape: gray;
}
html {
  --mdc-plain-tooltip-supporting-text-size: 0.875rem;
}
html {
  --mdc-plain-tooltip-supporting-text-line-height: 1.25rem;
}

mat-tooltip-component {
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.5rem;
}

.mat-mdc-tooltip::before {
  background-color: #FFF;
  border: 1px solid rgba(0, 0, 0, 0.2);
  height: 12px;
  width: 12px;
  rotate: 45deg;
  right: 50% !important;
  left: auto !important;
  transform: translate(4px, -4px);
}

.mat-mdc-tooltip-panel-above .mat-mdc-tooltip::before {
  top: auto;
  bottom: -6px !important;
}

.mat-mdc-tooltip-panel-below .mat-mdc-tooltip::before {
  top: -6px !important;
  bottom: auto;
}

.mat-mdc-tooltip-panel-left .mat-mdc-tooltip::before {
  top: 47% !important;
  bottom: auto;
  right: 1px !important;
  left: auto;
}

.mat-mdc-tooltip-panel-right .mat-mdc-tooltip::before {
  top: 47% !important;
  bottom: auto;
  left: 1px !important;
  right: auto;
}

/*mat-form-field{
  @include mat.datepicker-overrides((
          calendar-container-background-color: #FAFAFA,
  ));
}*/
::ng-deep .mat-datepicker-content-container {
  background-color: white;
}

.mat-mdc-text-field-wrapper, .mdc-text-field--filled {
  color: var(--color--grey-900);
  background-color: var(--color--grey-0);
  font-size: 1rem;
  border: var(--input__border--default);
  border-radius: 0.25rem;
  --inner-ring-color: currentColor;
  --outer-ring-color: var(--color--grey-700);
  --outer-ring-solid-width: 0.0625rem;
  --outer-haze-width: 0.03125rem;
  --inner-haze-width: 0.03125rem;
  box-shadow: 0 0 var(--inner-haze-width) 0 inset var(--outer-ring-color), 0 0 var(--outer-haze-width) var(--outer-ring-solid-width) var(--outer-ring-color);
  outline-offset: 0.0625rem;
  padding: 0.5rem;
  flex: 1;
  appearance: none;
}

.mdc-text-field--filled:not(.mdc-text-field--disabled) {
  background-color: #FAFAFA;
  padding-left: 0;
}
.mdc-text-field--filled:not(.mdc-text-field--disabled):hover {
  --outer-ring-solid-width: 0.0625rem;
  --inner-haze-width: 0.03125rem;
  --outline-color: var(--color--blue-800);
  --inner-ring-color: var(--color--blue-800);
  border-color: var(--color--blue-800);
}

::ng-deep .mat-mdc-form-field-flex {
  background-color: white;
  border-radius: 0.25rem;
  border: none;
  align-items: center;
}
mat-slide-toggle {
  --mat-switch-track-outline-color: transparent;
}
mat-slide-toggle {
  --mdc-switch-selected-icon-color: #162A8F;
}
mat-slide-toggle {
  --mdc-switch-unselected-icon-color: #162A8F;
}
mat-slide-toggle {
  --mdc-switch-selected-track-color: #CFDAFD;
}
mat-slide-toggle {
  --mdc-switch-unselected-track-color: #FAFAFA;
}
mat-slide-toggle {
  --mdc-switch-selected-hover-track-color: #CFDAFD;
}
mat-slide-toggle {
  --mdc-switch-selected-focus-track-color: #CFDAFD;
}
mat-slide-toggle {
  --mdc-switch-unselected-handle-color: #162A8F;
}
mat-slide-toggle {
  --mdc-switch-selected-handle-color: #162A8F;
}
mat-slide-toggle {
  --mdc-switch-selected-focus-handle-color: #162A8F;
}
mat-slide-toggle {
  --mdc-switch-unselected-focus-handle-color: #162A8F;
}
mat-slide-toggle {
  --mdc-switch-selected-hover-handle-color: #162A8F;
}
mat-slide-toggle {
  --mdc-switch-unselected-hover-state-layer-color: white;
}
mat-slide-toggle {
  --mdc-switch-selected-hover-state-layer-color: #FAFAFA;
}
mat-slide-toggle {
  --mdc-switch-disabled-unselected-track-color: #EFEFF0;
}
mat-slide-toggle {
  --mdc-switch-disabled-selected-track-color: #EFEFF0;
}
mat-slide-toggle {
  --mdc-switch-disabled-unselected-handle-color: #657177;
}
mat-slide-toggle {
  --mdc-switch-disabled-selected-handle-color: #657177;
}
mat-slide-toggle {
  --mdc-switch-disabled-unselected-icon-color: #657177;
}
mat-slide-toggle {
  --mdc-switch-disabled-selected-icon-color: #657177;
}
mat-slide-toggle .mat-mdc-tab-body-wrapper {
  padding: 0.5rem;
  background-color: lightgray;
}

.example-headers-align .mat-expansion-panel-header-description {
  justify-content: space-between;
  align-items: center;
}

.example-headers-align .mat-mdc-form-field + .mat-mdc-form-field {
  margin-left: 8px;
}

mat-expansion-panel-header.materials-expansion-panel--header {
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.125rem;
  color: var(--color--blue-900);
}

.mat-mdc-form-field-subscript-wrapper {
  display: none;
}

.mat-mdc-icon-button {
  border-radius: 0.25rem;
}

html {
  --mdc-plain-tooltip-container-color: white;
}
html {
  --mdc-plain-tooltip-container-shape: 0.625rem;
}
html {
  --mdc-plain-tooltip-supporting-text-color: black;
}

.ag-tabs {
  --mat-tab-header-active-ripple-color: transparent;
}
.ag-tabs {
  --mat-tab-header-inactive-ripple-color: transparent;
}
.ag-tabs {
  --mat-tab-header-disabled-ripple-color: transparent;
}
.ag-tabs {
  --mat-tab-header-label-text-size: 1.5rem;
}
.ag-tabs {
  --mat-tab-header-label-text-weight: 600;
}
.ag-tabs {
  --mat-tab-header-divider-color: var(--color--grey-800);
}
.ag-tabs {
  --mat-tab-header-divider-height: 0.1rem;
}
.ag-tabs {
  --mat-tab-header-active-label-text-color: var(--color--blue-800);
}
.ag-tabs {
  --mat-tab-header-active-focus-label-text-color: var(--color--blue-800);
}
.ag-tabs {
  --mat-tab-header-active-hover-label-text-color: var(--color--blue-800);
}
.ag-tabs {
  --mdc-tab-indicator-active-indicator-color: var(--color--blue-800);
}
.ag-tabs {
  --mat-tab-header-inactive-label-text-color: var(--color--grey-800);
}
.ag-tabs {
  --mat-tab-header-inactive-focus-label-text-color: var(--color--grey-800);
}
.ag-tabs {
  --mat-tab-header-inactive-hover-label-text-color: var(--color--grey-800);
}
.ag-tabs [mattablabelwrapper] {
  border-radius: 0.25rem 0.25rem 0 0;
}
.ag-tabs [mattablabelwrapper].mdc-tab--active:not(:hover):not(.cdk-focused) {
  background-color: var(--color--white-100);
  outline: 1px solid var(--color--grey-300);
  outline-offset: -1px;
}
.ag-tabs [mattablabelwrapper].mdc-tab--active.cdk-focused {
  background-color: var(--color--blue-100);
  outline: 2px solid var(--color--blue-800);
  outline-offset: -2px;
}
.ag-tabs [mattablabelwrapper].mdc-tab--active:hover {
  background-color: var(--color--blue-100);
}
.ag-tabs [mattablabelwrapper]:not(.mdc-tab--active):not(.mat-mdc-tab-disabled).cdk-focused {
  background-color: var(--color--grey-200);
  outline: 2px solid var(--color--grey-800);
  outline-offset: -2px;
}
.ag-tabs [mattablabelwrapper]:not(.mdc-tab--active):not(.mat-mdc-tab-disabled):hover {
  background-color: var(--color--grey-200);
}

.ag-tabs-no-headers mat-tab-header {
  display: none;
}

.ag-month-year-date-picker .mat-calendar-period-button {
  display: none;
}
.ag-month-year-date-picker mat-month-view {
  display: none;
}

/*this class hides the content visually,
while providing the content to screen readers.*/
.visually-hidden {
  padding: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  margin: -1px;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/main/angular/apps/agency-login/src/styles.scss?ngGlobalStyle ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* You can add global styles to this file, and also import other style files */
/*
.page-content{
    background-color: #A1B5FB;
}
*/
.login-header {
  width: 100%;
  background-color: var(--color--blue-900);
  display: flex;
  flex: 0;
  align-items: center;
  justify-content: flex-end;
  min-height: 2rem;
  margin-right: auto;
  margin-left: auto;
}

agency-login {
  width: 100%;
  display: grid;
  max-width: 90rem;
  justify-self: center;
}
agency-login .forms__container-cell {
  grid-template-columns: 16rem;
}
agency-login .forms-input {
  min-width: 16rem;
}

agency-login-primary-authentication {
  width: 100%;
  height: 100%;
  display: flex;
}

agency-login-mfa-required, agency-login-forgot-password, agency-login-forgot-user-id,
agency-login-enroll-question, agency-login-mfa-challenge-email, agency-login-password-expired,
agency-login-password-reset {
  width: 100%;
  height: 100%;
  display: grid;
  background-color: white;
  justify-content: center;
}

.forgot-a {
  color: var(--color--blue-800);
}

/*.container-for--btn{
    width: 100%;
    display: grid;
    justify-content: center;
}*/
.login-container {
  --min-width: 100%;
  display: flex;
  gap: 1rem;
  border-radius: 0.5rem;
  border: 0.063rem solid var(--color--grey-400);
  background: var(--color--grey-100);
  padding: 2.5rem;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  margin: 2.5rem;
}

.server-login-error {
  background-color: var(--color--red-100);
  color: var(--text--error);
  padding: 1rem;
  border: 1px solid;
}

.inline-error-message {
  color: var(--text--error);
  font-size: 0.75rem;
  font-style: italic;
  font-family: Lato, sans-serif;
}

.spinner {
  width: 30px !important;
  height: 30px !important;
}

.forgot-user {
  color: var(--color--blue-700);
}
.forgot-user:hover {
  text-decoration: underline;
}

.btn-container-for-login {
  display: flex;
  gap: 0.5rem;
  overflow: visible;
  flex-direction: row;
  max-width: fit-content;
  align-self: center;
}