/*!*****************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/@nwea/nwea-frontend-components-v1/dist/design-system.css ***!
  \*****************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i);
/*!*****************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/header/header.css ***!
  \*****************************************************************************************************/
:root {
  --nwea-clui-header-height: 6rem;
  --nwea-clui-header-logo-margin-top-bottom: 1.4rem;
  --nwea-clui-header-strip-height: 1.2rem;
}

.nwea-clui-header-header {
  background-color: #ffffff;
  height: calc(
    var(--nwea-clui-header-height) + var(--nwea-clui-header-strip-height)
  );
  line-height: 0; /* prevents space between logo and color strip */
}

.nwea-clui-header-logo {
  color: var(--nwea-ds-v1-gray-700);
  height: 3.2rem;
  margin: var(--nwea-clui-header-logo-margin-top-bottom) 0
    var(--nwea-clui-header-logo-margin-top-bottom) 5.6rem;
}

.nwea-clui-header-colorStrip {
  display: flex;
  height: var(--nwea-clui-header-strip-height);
  width: 100%;
  align-items: stretch;
}

.nwea-clui-header-firstSection {
  width: 52.8%;
  background-color: #ffc20e;
}

.nwea-clui-header-secondSection {
  width: 21.1%;
  background-color: #ed0677;
}

.nwea-clui-header-thirdSection {
  width: 11%;
  background-color: #ac218b;
}

.nwea-clui-header-fourthSection {
  width: 12.9%;
  background-color: #00a79d;
}

.nwea-clui-header-fifthSection {
  width: 2.2%;
  background-color: #023f5a;
}

@media only screen and (max-width: 650px) {
  .nwea-clui-header-logo {
    margin: 2.1rem 0 2.1rem 1.5rem;
    height: 1.8rem;
  }
}

/*!********************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/error/error-page.css ***!
  \********************************************************************************************************/
:root {
  --nwea-clui-error-box-height: 31rem;
  --nwea-clui-error-box-width: 58.8rem;
  --nwea-clui-error-box-top-margin: 8rem;
  --nwea-clui-error-box-right-adding: 4rem;
}

.nwea-clui-error-main {
  display: flex;
  justify-content: center;
  /* take up remaining room not used by header  */
  height: calc(100vh - var(--nwea-clui-header-height));
  align-items: flex-start;
  min-height: calc(
    var(--nwea-clui-error-box-height) + var(--nwea-clui-error-box-top-margin)
  );
}

.nwea-clui-error-box {
  box-shadow: var(--nwea-ds-v1-elevation-12);
  transition: var(--nwea-ds-v1-elevation-animation);
  border-radius: 6px; /* px is intentional */
  margin-top: var(--nwea-clui-error-box-top-margin);
  flex-grow: 0;
  width: var(--nwea-clui-error-box-width);
  height: var(--nwea-clui-error-box-height);
  padding-top: 2rem;
  padding-left: 2.4rem;
  padding-right: var(--nwea-clui-error-box-right-adding);
  position: relative;
}

.nwea-clui-error-title {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  margin-bottom: 0.8rem;
}

.nwea-clui-error-errorIcon {
  margin-right: 1.6rem;
  margin-top: 0.2rem;
  height: 2.4rem;
}

.nwea-clui-error-errorIconUse {
  fill: var(--nwea-ds-v1-red-500);
}

.nwea-clui-error-errorNumberText {
  margin-bottom: 3.2rem;
}

.nwea-clui-error-openSupportButton {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  bottom: 3.2rem;
  right: var(--nwea-clui-error-box-right-adding);
}

.nwea-clui-error-openInNewIcon {
  height: 2.4rem;
}

/*!**************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/educator/email-prompt/email-prompt.css ***!
  \**************************************************************************************************************************/
:root {
  --nwea-clui-email-prompt-link-blue: #0066bb;
}

.nwea-clui-email-prompt-content {
  background-color: var(--nwea-ds-v1-gray-100);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.nwea-clui-email-prompt-emailPrompt {
  padding: 5.6rem 4.8rem;
  margin: 10.8rem auto 0 auto;
  width: 51.2rem;
}

.nwea-clui-email-prompt-headerText {
  height: 2.7rem;
  color: var(--nwea-ds-v1-gray-900);
  font-size: 2rem;
  letter-spacing: 0.02rem;
  line-height: 2.7rem;
  display: flex;
  justify-content: center;
}

.nwea-clui-email-prompt-input {
  width: 100%;
}

.nwea-clui-email-prompt-createAccountContainer {
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  margin-top: 3.15rem;
  /* the negative margin ensures that the button text for "Create an account" is lined up with the other
       elements in the wrapper
       */
  margin-left: -1.6rem;
}

.nwea-clui-email-prompt-needHelp {
  color: var(--nwea-ds-v1-gray-500);
  margin-top: 4rem;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.014rem;
  line-height: 1.9rem;
}

.nwea-clui-email-prompt-supportContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  font-size: 1.2rem;
  letter-spacing: 0;
  line-height: 2rem;
  margin-top: 1.6rem;
}

.nwea-clui-email-prompt-link {
  color: var(--nwea-clui-email-prompt-link-blue);
}

@media only screen and (max-width: 650px) {
  .nwea-clui-email-prompt-emailPrompt {
    width: 78%;
    padding-left: 3.7rem;
    padding-right: 3.7rem;
  }
  .nwea-clui-email-prompt-headerText {
    font-size: 1.6rem;
  }
}

@media only screen and (max-height: 800px) {
  .nwea-clui-email-prompt-emailPrompt {
    margin: auto;
  }
  .nwea-clui-email-prompt-content {
    align-items: center;
  }
}

/*!***********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/content-wrapper/content-wrapper.css ***!
  \***********************************************************************************************************************/
:root {
  --nwea-clui-min-width: 37.5rem;
  --nwea-clui-min-height: 60rem;
}

.nwea-clui-content-wrapper-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: var(--nwea-clui-min-width);
  min-height: var(--nwea-clui-min-height);
}

.nwea-clui-content-wrapper-header {
  flex-shrink: 0;
}

.nwea-clui-content-wrapper-content {
  flex-grow: 1;
}

.nwea-clui-content-wrapper-footer {
  flex-shrink: 0;
}

/*!*****************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/footer/footer.css ***!
  \*****************************************************************************************************/
:root {
  --nwea-clui-footer-height: 7.2rem;
}

.nwea-clui-footer-footer {
  background-color: var(--nwea-ds-v1-gray-700);
  height: var(--nwea-clui-footer-height);
  line-height: 0;
  width: 100%;
}

.nwea-clui-footer-tagline {
  height: 3rem;
  margin: 2.1rem 2.4rem;
}

.nwea-clui-footer-copyright {
  color: #ffffff;
  float: right;
  margin-top: 3.5rem;
  margin-right: 2.4rem;
}

/*!**********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/educator/login-form/login-form.css ***!
  \**********************************************************************************************************************/
.nwea-clui-login-form-wrapper {
  background-color: #ffffff; /* should go back to white */
  border-radius: 0.6rem;
  box-shadow: var(--nwea-ds-v1-elevation-12);
}

/*!***************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/input-field/input-field.css ***!
  \***************************************************************************************************************/
.nwea-clui-input-field-inputContainer {
  display: flex;
  flex-direction: column;
  position: relative; /* position this so that the fake span is relative to it */
}

.nwea-clui-input-field-input {
  width: 100%;
  background-color: #ffffff;
  order: 1;
  outline: none;
  appearance: none;
  padding: 0.8rem;
  border-radius: 0.4rem;
  height: 4rem;
  border-color: var(--nwea-ds-v1-gray-900);
  border-width: 0.1rem;
  border-style: solid;
}

/* prevents overrides of background color from browser autofill:
   https://stackoverflow.com/a/29350537
   This doesn't prevent the background color change, but it does
   delay it for 10000s
   */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 10000s ease-in-out 0s;
}

.nwea-clui-input-field-input:focus,
.nwea-clui-input-field-input:active {
  border-color: #065ec2;
  box-shadow: var(--nwea-ds-v1-elevation-04);
}

.nwea-clui-input-field-input:hover {
  border-color: #065ec2;
  cursor: pointer;
  box-shadow: var(--nwea-ds-v1-elevation-04);
  transition: box-shadow 0.25s ease-in-out;
}

.nwea-clui-input-field-label {
  order: 0; /* display first even though the input field is before it in the DOM */
  display: block;
  font-family: 'Gilroy Bold', 'Futura', Helvetica, sans-serif;
  font-size: 1.4rem;
  line-height: 2.4rem;
  letter-spacing: 0.02rem;
  color: #2d2d2d;
  font-weight: 700;
}

.nwea-clui-input-field-input.nwea-clui-input-field-disabled {
  border-color: var(--nwea-ds-v1-gray-500);
  color: #2d2d2d;
}

.nwea-clui-input-field-input.nwea-clui-input-field-disabled:active,
.nwea-clui-input-field-input.nwea-clui-input-field-disabled:focus,
.nwea-clui-input-field-input.nwea-clui-input-field-disabled:hover {
  border-color: var(--nwea-ds-v1-gray-500);
  box-shadow: none;
}

.nwea-clui-input-field-input.nwea-clui-input-field-disabled {
  cursor: not-allowed;
}

.nwea-clui-input-field-input.nwea-clui-input-field-error {
  border-color: var(--nwea-ds-v1-red-500);
}

.nwea-clui-input-field-label.nwea-clui-input-field-error {
  color: var(--nwea-ds-v1-red-500);
}

.nwea-clui-input-field-focusSelector {
  display: flex;
  width: 100%;
  margin: 0.5rem 0 0 0;
  padding: 0.1rem;
  border-radius: 0.4rem;
  border: none;
}

.nwea-clui-input-field-focusSelectorFocused {
  border: 2px solid var(--nwea-ds-v1-red-500);
}

/*!************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/layout/content-wrapper/content-wrapper.css ***!
  \************************************************************************************************************************************/
.nwea-clui-content-wrapper-contentWrapper {
  height: 100%;
  display: flex;
  justify-content: center;
}

.nwea-clui-content-wrapper-card {
  width: 535px;
  max-width: 535px;
  display: flex;
  flex-direction: column;
  padding: 2.4rem;
  background-color: #fff;
  flex: 1 1 0%;
}

.nwea-clui-content-wrapper-cardHeader {
  display: flex;
  justify-content: center;
  padding-bottom: 1.6rem;
}

.nwea-clui-content-wrapper-nweaLogo {
  height: 74px;
  width: 137.5px;
}

.nwea-clui-content-wrapper-cardContent {
  height: 100%;
  position: relative;
}

.nwea-clui-content-wrapper-cardFooterUpper {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 0 3.2rem 0;
}

.nwea-clui-content-wrapper-cardFooterLower {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1.6rem;
}

.nwea-clui-content-wrapper-cardFooterHelpText {
  margin: 0;
}

.nwea-clui-content-wrapper-openInAnchorIcon {
  width: 1.5rem;
  height: 1.5rem;
  fill: #065ec2;
  margin-left: 0.5rem;
  margin-bottom: 0.2rem;
  vertical-align: middle;
}

.nwea-clui-content-wrapper-cardFooterAnchorText {
  font-family: 'Noto Sans', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2.2rem;
  text-decoration-line: underline;
  color: #065ec2;
}

.nwea-clui-content-wrapper-illustration {
  height: fit-content;
}

.nwea-clui-content-wrapper-illustrationWrapper {
  display: flex;
  flex: 1 1 0%;
  justify-content: center;
  padding: 24px;
  background-color: #cbf2ea;
}

.nwea-clui-content-wrapper-illustrationTransform {
  overflow: hidden;
  max-height: 60vh;
  height: fit-content;
  width: clamp(3rem, 100%, 40vw);
  transform: translateY(
    clamp(0px, 8rem + 8vw, 20vh)
  ); /* vertically off-centers the illustration in the same way HCP login does */
  display: flex;
  justify-content: center;
}

.nwea-clui-content-wrapper-illustrationContent {
  display: flex;
  justify-content: center;
  width: 100%;
}

.nwea-clui-content-wrapper-illustrationContent svg {
  display: block;
  width: 100%;
  height: auto;
}

:focus-visible {
  outline-color: #d62424;
}

@media only screen and (max-width: 959px) {
  .nwea-clui-content-wrapper-illustrationWrapper {
    display: none;
  }
}

/*!********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/components/toast/toast.css ***!
  \********************************************************************************************************************/
.nwea-clui-toast-toastRoot {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 1.6rem;
  gap: 0.8rem;
  margin: 0.8rem 0 2.4rem 0;
}

.nwea-clui-toast-toastError {
  background-color: #ffe8e8;
  border-radius: 1rem;
}

.nwea-clui-toast-toastInfo {
  background-color: #e3f7fa;
  border-radius: 1rem;
}

.nwea-clui-toast-toastSuccess {
  background-color: #9dffbb;
  border-radius: 1rem;
}

.nwea-clui-toast-toastIconRoot {
  width: 2rem;
  margin-top: 0.5rem;
}

.nwea-clui-toast-toastIconRed {
  fill: #e91b19;
}

.nwea-clui-toast-toastIconBlue {
  fill: #007db3;
}

.nwea-clui-toast-toastIconGreen {
  fill: #1c8828;
}

.nwea-clui-toast-toastText {
  display: flex;
  flex-direction: column;
}

.nwea-clui-toast-toastTitle {
  font-family: 'NotoSans-Bold', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.02rem;
  color: #2d2d2d;
  margin: 0.4rem 0.8rem 0 0 !important;
  display: inline-block;
}

.nwea-clui-toast-toastMessage {
  font-family: 'Noto Sans', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.02rem;
  color: #2d2d2d;
  margin: 0.3rem !important;
  display: inline-block;
}

/*!**************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/components/password-input-field/password-input-field.css ***!
  \**************************************************************************************************************************************************/
.nwea-clui-password-input-field-inputFieldRoot {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.nwea-clui-password-input-field-inputFieldBaseRoot {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  padding: 0.2rem;
  background-color: #ffffff;
  border-radius: 0.4rem;
  height: 3.4rem;
  border-color: var(--nwea-ds-v1-gray-900);
  border-width: 0.1rem;
  border-style: solid;
  box-sizing: content-box;
}

.nwea-clui-password-input-field-inputFieldBaseRoot:hover {
  border-color: #065ec2;
  cursor: pointer;
  box-shadow: var(--nwea-ds-v1-elevation-04);
  transition: box-shadow 0.25s ease-in-out;
}

.nwea-clui-password-input-field-inputFieldRoot.nwea-clui-password-input-field-active .nwea-clui-password-input-field-inputFieldBaseRoot {
  border-color: #065ec2;
  box-shadow: var(--nwea-ds-v1-elevation-04);
}

/* prevents overrides of background color from browser autofill:
   https://stackoverflow.com/a/29350537
   This doesn't prevent the background color change, but it does
   delay it for 10000s
   */
.nwea-clui-password-input-field-inputFieldBaseRoot:-webkit-autofill,
.nwea-clui-password-input-field-inputFieldBaseRoot:-webkit-autofill:hover,
.nwea-clui-password-input-field-inputFieldBaseRoot:-webkit-autofill:focus,
.nwea-clui-password-input-field-inputFieldBaseRoot:-webkit-autofill:active {
  transition: background-color 10000s ease-in-out 0s;
}

.nwea-clui-password-input-field-inputField {
  flex: 1;
  outline: none;
  appearance: none;
  border-width: 0;
  padding: 1rem;
}

.nwea-clui-password-input-field-inputFieldEffect {
  align-self: center;
  background-color: transparent;
  border-radius: 0 0 0.4rem 0.4rem;
  border: 0;
  left: 0;
  bottom: 0;
  height: 0.4rem;
  outline: none;
  pointer-events: none;
  position: absolute;
  transition: 0.15s;
  width: 0;
  z-index: 1;
}

.nwea-clui-password-input-field-inputField:active + .nwea-clui-password-input-field-inputFieldEffect,
.nwea-clui-password-input-field-inputField:focus + .nwea-clui-password-input-field-inputFieldEffect {
  background-color: #065ec2;
  width: 100%;
}

.nwea-clui-password-input-field-inputFieldLabel {
  flex: 1;
  display: block;
  height: 1.5rem;
  font-family: 'Gilroy Bold', 'Futura', Helvetica, sans-serif;
  font-size: 1.4rem;
  line-height: 2.4rem;
  letter-spacing: 0.02rem;
  color: #2d2d2d;
  font-weight: 700;
}

.nwea-clui-password-input-field-inputFieldIconButton {
  width: 3.4rem;
  height: 3.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  border: 0;
  padding: 1rem;
}

.nwea-clui-password-input-field-inputFieldAction {
  margin: 1.6rem 0 0 0;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.4rem;
  text-align: right;
  text-decoration-line: underline;
  color: #065ec2;
}

.nwea-clui-password-input-field-inputFieldRoot.nwea-clui-password-input-field-error .nwea-clui-password-input-field-inputFieldLabel {
  color: var(--nwea-ds-v1-red-500);
}

.nwea-clui-password-input-field-inputFieldRoot.nwea-clui-password-input-field-error .nwea-clui-password-input-field-inputFieldBaseRoot {
  border-color: var(--nwea-ds-v1-red-500);
}

.nwea-clui-password-input-field-inputFieldRoot.nwea-clui-password-input-field-error .nwea-clui-password-input-field-inputFieldBaseRoot .nwea-clui-password-input-field-inputFieldEffect {
  background-color: var(--nwea-ds-v1-red-500);
}

.nwea-clui-password-input-field-focusSelector {
  display: flex;
  width: 100%;
  margin: 0.5rem 0 0 0;
  padding: 0.1rem;
  border-radius: 0.4rem;
  border: none;
}

.nwea-clui-password-input-field-focusSelectorFocused {
  border: 2px solid var(--nwea-ds-v1-red-500);
}

/*!**********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/components/button/button.css ***!
  \**********************************************************************************************************************/
.nwea-clui-button-btnRoot {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Gilroy', 'Futura', Helvetica, sans-serif; /* var(--ebl-wf-headings) in ed.baseline.ux */
  font-style: normal;
  font-weight: 500; /* var(--ebl-wf-headings-weight); in ed.baseline.ux */
  font-size: 1.4rem;
  line-height: 1.4rem; /* var(--ebl-sh4-line-height); in ed.baseline.ux */
  letter-spacing: 0.0125rem; /* var(--ebl-sh4-letter-spacing); in ed.baseline.ux */
  color: #ffffff;
  padding: 4px 24px 4px 24px;
  gap: 4px;
  border-radius: 4px;
  cursor: pointer;
  min-width: 64px;
}

.nwea-clui-button-btnDisabled {
  color: #ffffff;
  cursor: not-allowed;
}

.nwea-clui-button-btnLg {
  height: 4.8rem;
}

.nwea-clui-button-btnMd {
  height: 4rem;
}

.nwea-clui-button-btnSm {
  height: 3.2rem;
}

.nwea-clui-button-btnContained {
  border: none;
  background: #065ec2;
}

.nwea-clui-button-btnOutlined {
  border: 1px solid #065ec2;
  background-color: #ffffff;
  color: #065ec2;
  font-size: 1.3rem;
}

.nwea-clui-button-btnText {
  border: none;
  background-color: #ffffff;
  color: #065ec2;
  font-size: 1.3rem;
}

.nwea-clui-button-btnContained.nwea-clui-button-btnDisabled {
  background-color: var(--nwea-ds-v1-gray-200);
  color: white;
}

.nwea-clui-button-btnOutlined.nwea-clui-button-btnDisabled {
  border-color: var(--nwea-ds-v1-gray-200);
  color: rgb(202, 207, 209);
}

.nwea-clui-button-btnText.nwea-clui-button-btnDisabled {
  color: var(--nwea-ds-v1-gray-200);
}

/*!*************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/forms/login-form/login-form.css ***!
  \*************************************************************************************************************************/
.nwea-clui-login-form-form {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.nwea-clui-login-form-formText {
  width: 100%;
  font-family: 'Gilroy Bold', 'Futura', Helvetica, sans-serif;
  font-size: 2.4rem;
  line-height: 3.2rem;
  letter-spacing: 0.02rem;
  color: #2d2d2d;
  margin: 0;
}

.nwea-clui-login-form-formInput {
  width: 100%;
  margin: 0.8rem 0 0;
  font-family: 'Noto Sans', 'Helvetica Neue', Helvetica, sans-serif;
  font-style: normal;
}

:disabled {
  border: none;
}

.nwea-clui-login-form-formActions {
  width: 100%;
  height: 3.2rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 1.6rem;
}

.nwea-clui-login-form-buttonContinue {
  justify-self: flex-end;
}

.nwea-clui-login-form-formButton {
  margin: 0.8rem 0;
}

.nwea-clui-login-form-accountIcon {
  width: 2.4rem;
  height: 2.4rem;
}

.nwea-clui-login-form-infoContainer {
  width: 100%;
  height: 2.4rem;
  gap: 0.8rem;
  display: flex;
  margin: 0 0 1.6rem 0;
}

.nwea-clui-login-form-infoIcon {
  width: 16px;
  height: 16px;
  fill: #007db3;
  margin-top: 0.4rem;
}

.nwea-clui-login-form-infoText {
  padding: 0.1rem;
  font-family: 'Noto Sans', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  letter-spacing: 0.02rem;
  color: #2d2d2d;
}

/*!***************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/forms/announcement-form/announcement-form.css ***!
  \***************************************************************************************************************************************/
.nwea-clui-announcement-form-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.nwea-clui-announcement-form-formText {
  text-align: center;
  font-family: 'Noto Sans', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  letter-spacing: 0.02rem;
  color: #2d2d2d;
  /* margin: 1.6rem 0; */
}

.nwea-clui-announcement-form-formInput {
  width: 100%;
  /* margin: 1.6rem 0; */
}

.nwea-clui-announcement-form-formActions {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  /* margin-top: 2.4rem; */
}

/*!***************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/pages/login/login.css ***!
  \***************************************************************************************************************/
.nwea-clui-login-root {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  justify-content: center;
}

/*!**********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/components/select/select.css ***!
  \**********************************************************************************************************************/
.nwea-clui-select-root {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.nwea-clui-select-label {
  flex: 1;
  font-family: 'Gilroy Bold', 'Futura', Helvetica, sans-serif;
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: #2d2d2d;
}

.nwea-clui-select-label.nwea-clui-select-open {
  color: var(--nwea-ds-v1-blue-700);
}

.nwea-clui-select-select {
  height: 4.8rem;

  display: flex;
  align-items: center;

  margin: 0.5rem 0;
  padding-left: 0.8rem;

  border-radius: 0.4rem;
  border: 1px solid var(--nwea-ds-v1-gray-500);
}

.nwea-clui-select-select.nwea-clui-select-open,
.nwea-clui-select-select:focus {
  border-color: var(--nwea-ds-v1-blue-700);
  box-shadow: var(--nwea-ds-v1-elevation-04);
}

.nwea-clui-select-selectedOption {
  flex: 1;
  font-family: 'Open Sans';
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.4rem;
  color: var(--nwea-ds-v1-gray-700);
}

.nwea-clui-select-arrow {
  width: 4.8rem;
  height: 4.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.nwea-clui-select-arrow.nwea-clui-select-open {
  transform: rotate(180deg);
}

.nwea-clui-select-arrowSVG {
  width: 1rem;
  height: 0.5rem;
}

.nwea-clui-select-options {
  z-index: 1;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 25.6rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.8rem 0;
  gap: 0.8rem;
  list-style: none;
  background: white;
  box-shadow: var(--nwea-ds-v1-elevation-04);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.nwea-clui-select-options.nwea-clui-select-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}

.nwea-clui-select-option {
  min-height: 4rem;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.4rem;
  color: var(--nwea-ds-v1-gray-900);
  padding: 0.8rem 5.2rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.nwea-clui-select-option:hover,
.nwea-clui-select-option.nwea-clui-select-selected {
  background-color: var(--nwea-ds-v1-gray-100);
}

/*!********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/pages/select-agency/components/select-agency/select-agency.css ***!
  \********************************************************************************************************************************************************/
.nwea-clui-select-agency-root {
  display: flex;
  flex-direction: row;
  position: relative;
}

.nwea-clui-select-agency-title {
  text-align: left;
  font-family: 'Gilroy Bold', 'Futura', Helvetica, sans-serif;
  font-style: normal;
  font-size: 2.4rem;
  line-height: 3.2rem;
  letter-spacing: 0.02rem;
  color: #2d2d2d;
  margin: 0;
}

.nwea-clui-select-agency-infoContainer {
  width: 100%;
  height: 2.4rem;
  gap: 0.8rem;
  display: flex;
  margin: 0 0 1.6rem 0;
}

.nwea-clui-select-agency-infoIcon {
  width: 16px;
  height: 16px;
  fill: #007db3;
  margin-top: 0.4rem;
}

.nwea-clui-select-agency-infoText {
  padding: 0.1rem;
  font-family: 'Noto Sans', 'Helvetica Neue', Helvetica, sans-serif;
  font-style: normal;
  font-size: 1.6rem;
  line-height: 2.4rem;
  letter-spacing: 0;
  color: #2d2d2d;
}

.nwea-clui-select-agency-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.2rem;
}

.nwea-clui-select-agency-text {
  text-align: left;
  font-style: normal;
  font-family: 'Noto Sans', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.4rem;
  letter-spacing: 0.02rem;
  color: #2d2d2d;
  margin: 0;
}

.nwea-clui-select-agency-button {
  margin: 0.8rem 0;
}

/*!************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/pages/select-agency/select-agency-page.css ***!
  \************************************************************************************************************************************/
.nwea-clui-select-agency-root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/*!**************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/pages/select-district/components/select-district/select-district.css ***!
  \**************************************************************************************************************************************************************/
.nwea-clui-select-district-root {
  display: flex;
  flex-direction: row;
  position: relative;
}

.nwea-clui-select-district-title {
  width: 100%;
  font-family: 'Gilroy Bold', 'Futura', Helvetica, sans-serif;
  font-size: 2.4rem;
  line-height: 3.2rem;
  letter-spacing: 0.02rem;
  color: #2d2d2d;
  margin: 0 0 0.6rem;
}

.nwea-clui-select-district-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.8rem;
}

.nwea-clui-select-district-button {
  margin: 0.8rem 0;
}

.nwea-clui-select-district-radioGroupWrapper {
  width: 100%;
  margin-top: 1rem;
}

.nwea-clui-select-district-radioGroup {
  display: block;
  border: none;
  && label {
    display: block;
    width: 100%;
    line-height: 3rem;
    cursor: pointer;
    margin: 0 0 0.8rem;
  }
  && input {
    display: inline-block;
    margin: 8px;
    vertical-align: top;
  }
}

label {
  font-family: 'Gilroy', 'Futura', Helvetica, sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 2.4rem;
  letter-spacing: 0.02rem;
}

li {
  font-family: 'Gilroy', 'Futura', Helvetica, sans-serif;
}

/*!****************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/pages/select-district/select-district-page.css ***!
  \****************************************************************************************************************************************/
.nwea-clui-select-district-root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/*!*******************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/forms/create-account-form/create-account-form.css ***!
  \*******************************************************************************************************************************************/
.nwea-clui-create-account-form-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.nwea-clui-create-account-form-formText {
  text-align: center;
  font-family: 'Open Sans';
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.00026em;
  color: #191919;
  margin: 16px 0px !important;
}

.nwea-clui-create-account-form-formInput {
  width: 100%;
}

.nwea-clui-create-account-form-formActions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin-top: 16px;
}

.nwea-clui-create-account-form-formButton {
}

/*!***************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/pages/create-account/components/create-account-confirm/create-account-confirm.css ***!
  \***************************************************************************************************************************************************************************/
.nwea-clui-create-account-confirm-root {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.nwea-clui-create-account-confirm-title {
  text-align: center;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.4rem;
  letter-spacing: 0.00026em;
  color: #000000;
  margin: 1.6rem 0;
}

.nwea-clui-create-account-confirm-action {
  color: var(--nwea-ds-v1-blue-500);
  text-decoration: none;
}

.nwea-clui-create-account-confirm-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 2.4rem;
}

.nwea-clui-create-account-confirm-emailSentIcon {
  width: 16rem;
  height: 16rem;
}

/*!*********************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/pages/create-account/create-account.css ***!
  \*********************************************************************************************************************************/
.nwea-clui-create-account-root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/*!*********************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/forms/forgot-password-form/forgot-password-form.css ***!
  \*********************************************************************************************************************************************/
.nwea-clui-forgot-password-form-form {
  display: flex;
  flex-direction: column;
}

.nwea-clui-forgot-password-form-formTitle {
  font-family: 'Gilroy Bold', 'Futura', Helvetica, sans-serif;
  font-style: normal;
  font-size: 2.4rem;
  color: #2d2d2d;
  margin: 0;
}

.nwea-clui-forgot-password-form-formText {
  font-family: 'Noto Sans', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 1.4rem;
  line-height: 2rem;
  letter-spacing: 0.02rem;
  color: #2d2d2d;
  margin: 1.6rem 0 0.6rem 0;
}

.nwea-clui-forgot-password-form-formInput {
  width: 100%;
  margin: 1.6rem 0;
  margin-top: 0.2rem;
}

.nwea-clui-forgot-password-form-formActions {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.nwea-clui-forgot-password-form-formButton {
  margin: 0.8rem 0;
}

.nwea-clui-forgot-password-form-backIcon {
  width: 2.4rem;
  height: 2.4rem;
}

/*!******************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/pages/forgot-password/components/forgot-password-confirm/forgot-password-confirm.css ***!
  \******************************************************************************************************************************************************************************/
.nwea-clui-forgot-password-confirm-root {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.nwea-clui-forgot-password-confirm-title {
  text-align: left;
  font-family: 'Gilroy Bold', 'Futura', Helvetica, sans-serif;
  font-style: normal;
  font-size: 2.4rem;
  line-height: 2rem;
  letter-spacing: 0.02rem;
  color: #2d2d2d;
  margin: 0;
}

.nwea-clui-forgot-password-confirm-text {
  text-align: left;
  font-style: normal;
  font-family: 'Noto Sans', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 1.4rem;
  line-height: 2rem;
  letter-spacing: 0.02rem;
  color: #2d2d2d;
  margin-top: 1.6rem;
}

.nwea-clui-forgot-password-confirm-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  margin-top: 0.8rem;
}

.nwea-clui-forgot-password-confirm-emailSentIcon {
  width: 16rem;
  height: 16rem;
}

/*!***********************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/pages/forgot-password/forgot-password.css ***!
  \***********************************************************************************************************************************/
.nwea-clui-forgot-password-root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/*!**********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/components/password-validation-list/password-validation-list.css ***!
  \**********************************************************************************************************************************************************/
.nwea-clui-password-validation-list-root {
  width: 100%;
  display: flex;
  margin: 0.8rem 0;
  background-color: #d8fffc; /* not the exact color, need color code */
  border-radius: 1rem;
  padding: 1rem;
}

.nwea-clui-password-validation-list-title {
  font-family: 'Noto Sans', 'Helvetica Neue', Helvetica, sans-serif; /* var(--ebl-wf-body); in ed.baseline.ux */
  font-style: normal;
  font-weight: 500;
  font-size: 1.65rem;
  line-height: 2.4rem;
  color: var(--nwea-ds-v1-gray-600);
  margin: 0 !important;
}

.nwea-clui-password-validation-list-iconRoot {
  width: 2rem;
  margin-top: 1rem;
}

.nwea-clui-password-validation-list-infoIcon {
  fill: #007db3; /* var(--ebl-signal-info); in ed.baseline.ux */
}

.nwea-clui-password-validation-list-infoContent {
  display: 'flex';
  flex-direction: 'column';
  padding: 0.75rem;
}

.nwea-clui-password-validation-list-option {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

.nwea-clui-password-validation-list-optionIndicator {
  width: 1rem;
  height: 1rem;
}

.nwea-clui-password-validation-list-optionLabel {
  font-family: 'Noto Sans', 'Helvetica Neue', Helvetica, sans-serif; /* var(--ebl-wf-body); in ed.baseline.ux */
  font-style: normal;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.5rem; /* var(--ebl-p1-line-height); in ed.baseline.ux */
  color: var(--nwea-ds-v1-gray-600);
  margin-left: 0.8rem;
  max-width: calc(100% - 1.8rem);
  white-space: pre;
}

.nwea-clui-password-validation-list-option.nwea-clui-password-validation-list-active .nwea-clui-password-validation-list-optionLabel {
  color: var(--nwea-ds-v1-green-700);
}

/*!*******************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/forms/reset-password-form/reset-password-form.css ***!
  \*******************************************************************************************************************************************/
.nwea-clui-reset-password-form-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.nwea-clui-reset-password-form-formTitle {
  font-family: 'Gilroy Bold', 'Futura', Helvetica, sans-serif;
  font-style: normal;
  font-size: 2.4rem;
  color: #2d2d2d;
  margin: 0;
}

.nwea-clui-reset-password-form-formText {
  font-style: normal;
  font-family: 'Noto Sans', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 1.4rem;
  line-height: 2rem;
  letter-spacing: 0.02rem;
  color: #2d2d2d;
  margin: 0 0 0.8rem;
}

.nwea-clui-reset-password-form-passwordInput {
  margin-top: 0.8rem;
}

.nwea-clui-reset-password-form-formActions {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  margin-top: 2.4rem;
}

.nwea-clui-reset-password-form-formButton {
  margin: 0.8rem 0;
}

/*!***************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/pages/reset-password/components/reset-password-success/reset-password-success.css ***!
  \***************************************************************************************************************************************************************************/
.nwea-clui-reset-password-success-root {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.nwea-clui-reset-password-success-title {
  text-align: center;
  font-style: normal;
  font-family: 'Noto Sans', 'Helvetica Neue', Helvetica, sans-serif; /* var(--ebl-wf-body); in ed.baseline.ux */
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.4rem;
  letter-spacing: 0.00026em;
  color: var(--nwea-ds-v1-gray-900);
  margin: 1.6rem 0;
}

.nwea-clui-reset-password-success-actions {
  display: flex;
  justify-content: center;
}

.nwea-clui-reset-password-success-checkMarkIcon {
  width: 16rem;
  height: 16rem;
  margin: 2.4em 0;
}

/*!***************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/pages/reset-password/components/reset-password-failure/reset-password-failure.css ***!
  \***************************************************************************************************************************************************************************/
.nwea-clui-reset-password-failure-root {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.nwea-clui-reset-password-failure-title {
  text-align: center;
  font-style: normal;
  font-family: 'Noto Sans', 'Helvetica Neue', Helvetica, sans-serif; /* var(--ebl-wf-body); in ed.baseline.ux */
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.4rem;
  letter-spacing: 0.00026em;
  color: var(--nwea-ds-v1-gray-900);
  margin: 1.6rem 0;
}

.nwea-clui-reset-password-failure-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.nwea-clui-reset-password-failure-alertIcon {
  width: 16rem;
  height: 16rem;
  margin: 2.4em 0;
}

.nwea-clui-reset-password-failure-arrowBackIcon {
  width: 2.4rem;
  height: 2.4rem;
}

/*!*************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/pages/reset-password/components/reset-password-verify/reset-password-verify.css ***!
  \*************************************************************************************************************************************************************************/
.nwea-clui-reset-password-verify-root {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.nwea-clui-reset-password-verify-title {
  text-align: center;
  font-style: normal;
  font-family: 'Noto Sans', 'Helvetica Neue', Helvetica, sans-serif; /* var(--ebl-wf-body); in ed.baseline.ux */
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2.4rem;
  letter-spacing: 0.00026em;
  color: var(--nwea-ds-v1-gray-900);
  margin: 1.6rem 0;
}

.nwea-clui-reset-password-verify-alertIcon {
  width: 16rem;
  height: 16rem;
  margin: 2.4em 0;
}

/*!*********************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/pages/reset-password/reset-password.css ***!
  \*********************************************************************************************************************************/
.nwea-clui-reset-password-root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/*!*****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/pages/logout/logout.css ***!
  \*****************************************************************************************************************/
.nwea-clui-logout-root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.nwea-clui-logout-title {
  width: 100%;
  font-family: 'Gilroy Bold', 'Futura', Helvetica, sans-serif;
  font-size: 2.4rem;
  line-height: 3.2rem;
  letter-spacing: 0.02rem;
  color: #2d2d2d;
  margin: 0;
}

.nwea-clui-logout-text {
  font-family: 'Noto Sans', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 1.4rem;
  line-height: 2.4rem;
  letter-spacing: 0.02rem;
  color: #2d2d2d;
  margin: 1.6rem 0 0.8rem;
}

.nwea-clui-logout-actions {
  display: flex;
  flex-direction: column;
  justify-content: end;
  height: 4rem;
}

/*!*********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/pages/activate-account/components/activate-account-confirm/activate-account-confirm.css ***!
  \*********************************************************************************************************************************************************************************/
.nwea-clui-activate-account-confirm-root {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.nwea-clui-activate-account-confirm-title {
  text-align: center;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.4rem;
  letter-spacing: 0.00026em;
  color: #000000;
  margin: 1.6rem 0;
}

.nwea-clui-activate-account-confirm-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 2.4rem;
}

.nwea-clui-activate-account-confirm-checkIcon {
  width: 16rem;
  height: 16rem;
}

/*!*********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/pages/activate-account/components/activate-account-failure/activate-account-failure.css ***!
  \*********************************************************************************************************************************************************************************/
.nwea-clui-activate-account-failure-root {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.nwea-clui-activate-account-failure-title {
  text-align: center;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.4rem;
  letter-spacing: 0.00026em;
  color: var(--nwea-ds-v1-gray-900);
  margin: 1.6rem 0;
}

.nwea-clui-activate-account-failure-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.nwea-clui-activate-account-failure-alertIcon {
  width: 16rem;
  height: 16rem;
  margin: 2.4em auto;
}

/*!*************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/pages/activate-account/activate-account.css ***!
  \*************************************************************************************************************************************/
.nwea-clui-activate-account-root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/*!***************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/pages/session-out/session-out.css ***!
  \***************************************************************************************************************************/
.nwea-clui-session-out-root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.nwea-clui-session-out-title {
  width: 100%;
  font-family: 'Gilroy Bold', 'Futura', Helvetica, sans-serif;
  font-size: 2.4rem;
  line-height: 3.2rem;
  letter-spacing: 0.02rem;
  color: #2d2d2d;
  margin: 0;
}

.nwea-clui-session-out-text {
  font-family: 'Noto Sans', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 1.4rem;
  line-height: 2.4rem;
  letter-spacing: 0.02rem;
  color: #2d2d2d;
  margin: 1.6rem 0 0.8rem;
}

.nwea-clui-session-out-actions {
  display: flex;
  flex-direction: column;
  justify-content: end;
  height: 4rem;
}

/*!**********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/routes.css ***!
  \**********************************************************************************************/
.nwea-clui-src-authRoute {
  font-size: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25vw;
  color: saddlebrown;
}

/*!***************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/adult/pages/error/error.css ***!
  \***************************************************************************************************************/
.nwea-clui-error-root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.nwea-clui-error-title {
  width: 100%;
  font-family: 'Gilroy Bold', 'Futura', Helvetica, sans-serif;
  font-size: 2.4rem;
  line-height: 3.2rem;
  letter-spacing: 0.02rem;
  color: #2d2d2d;
  margin: 0;
}

.nwea-clui-error-text {
  padding: 0.1rem;
  font-family: 'Noto Sans', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 1.4rem;
  line-height: 2.4rem;
  letter-spacing: 0.02rem;
  color: #2d2d2d;
  margin: 1.6rem 0 0.8rem;
}

.nwea-clui-error-actions {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  height: 4rem;
}

/*!*********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/index.css ***!
  \*********************************************************************************************/
:root {
  --nwea-ds-v1-rem-basis: 10;
}

html {
  font-size: 10px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

body {
  width: 100%;
  height: 100%;
  overflow: auto;
  margin: 0;
}

* {
  box-sizing: border-box;
}

/*!***************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/fonts/fonts.css ***!
  \***************************************************************************************************/
:root {
  /* --Font Weight-- */
  --ebl-wf-headings-weight-bold: 600;
  --ebl-wf-headings-weight: 500;

  --ebl-wf-body-weight-bold: 600;
  --ebl-wf-body-weight: 400;
}

/*------------------------------------------------------------------
 * Noto Sans
 * Additional charset support can be found here: https://fonts.googleapis.com/css?family=Noto+Sans:400,700
 *----------------------------------------------------------------*/

/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: var(--wf-body-weight-bold);
  src: local('Noto Sans Bold'), local('NotoSans-Bold'),
    url(/b36335ad42b404de740f.woff2) format('woff2');
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: var(--wf-body-weight);
  src: local('Noto Sans'), local('NotoSans'),
    url(/44f6f6c44fcf686daa86.woff2) format('woff2');
}

/*------------------------------------------------------------------
 * Gilroy
 * For license information contact Nathan O'Neal (nathan.oneal@hmhco.com)
 *----------------------------------------------------------------*/
@font-face {
  font-family: 'Gilroy';
  font-style: normal;
  font-weight: var(--ebl-wf-headings-weight-bold);
  src: local('Gilroy Bold'), local('Gilroy-Bold'),
    url(/05118a41b2698989b89e.eot?#iefix);
  src: local('Gilroy Bold'), local('Gilroy-Bold'),
    url(/05118a41b2698989b89e.eot?#iefix)
      format('eot'),
    url(/17a32f687ec6cccd43f3.woff2) format('woff2'),
    url(/57fd3a18a97620ca6f65.woff) format('woff'),
    url(/f3345a07bbf361c49ba5.ttf) format('truetype');
}

@font-face {
  font-family: 'Gilroy';
  font-style: normal;
  font-weight: var(--ebl-wf-headings-weight);
  src: local('Gilroy'),
    url(/b21aca227df6e8466de3.eot?#iefix);
  src: local('Gilroy'),
    url(/b21aca227df6e8466de3.eot?#iefix)
      format('eot'),
    url(/80dc906ae564ca2f9667.woff2) format('woff2'),
    url(/5f7fceba105697e38070.woff) format('woff'),
    url(/6db5e25dba7051a4d8c9.ttf) format('truetype');
}

/*!*********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/@nwea/nwea-frontend-components-v1/dist/design-system.css (1) ***!
  \*********************************************************************************************************************************************************/
/* NWEA Design System - Colors */

:root, :host {
    /* Grayscale */
    --nwea-ds-v1-gray-50: #fafafa;
    --nwea-ds-v1-gray-100: #eeeef0;
    --nwea-ds-v1-gray-150: #dedee0;
    --nwea-ds-v1-gray-200: #cdcdd0;
    --nwea-ds-v1-gray-300: #b1b1b5;
    --nwea-ds-v1-gray-400: #98989d;
    --nwea-ds-v1-gray-450: #8f8f94;
    --nwea-ds-v1-gray-500: #76767a;
    --nwea-ds-v1-gray-550: #626264;
    --nwea-ds-v1-gray-600: #575758;
    --nwea-ds-v1-gray-700: #414142;
    --nwea-ds-v1-gray-800: #2c2c2f;
    --nwea-ds-v1-gray-900: #161616;

    /* Yellow */
    --nwea-ds-v1-yellow-50: #fffbf0;
    --nwea-ds-v1-yellow-100: #fff4ae;
    --nwea-ds-v1-yellow-200: #ffea86;
    --nwea-ds-v1-yellow-300: #fee05e;
    --nwea-ds-v1-yellow-400: #fed535;
    --nwea-ds-v1-yellow-500: #fec10d;
    --nwea-ds-v1-yellow-600: #ffaf00;
    --nwea-ds-v1-yellow-700: #fe9b09;
    --nwea-ds-v1-yellow-800: #ff8c00;
    --nwea-ds-v1-yellow-900: #ff7800;

    /* Blue */
    --nwea-ds-v1-blue-50: #f2f9ff;
    --nwea-ds-v1-blue-100: #b3e4ff;
    --nwea-ds-v1-blue-200: #7ac7ff;
    --nwea-ds-v1-blue-300: #46a0ee;
    --nwea-ds-v1-blue-400: #1681d9;
    --nwea-ds-v1-blue-500: #0066bb;
    --nwea-ds-v1-blue-600: #0055a0;
    --nwea-ds-v1-blue-700: #004b88;
    --nwea-ds-v1-blue-800: #003f70;
    --nwea-ds-v1-blue-900: #003159;

    /* Teal */
    --nwea-ds-v1-teal-50: #eefdff;
    --nwea-ds-v1-teal-100: #c9f2f7;
    --nwea-ds-v1-teal-200: #a3e8ef;
    --nwea-ds-v1-teal-300: #7edde8;
    --nwea-ds-v1-teal-400: #58d3e0;
    --nwea-ds-v1-teal-500: #33c8d8;
    --nwea-ds-v1-teal-600: #25b5c5;
    --nwea-ds-v1-teal-700: #0f828f;
    --nwea-ds-v1-teal-800: #077582;
    --nwea-ds-v1-teal-900: #006774;

    /* Green */
    --nwea-ds-v1-green-50: #ecfcee;
    --nwea-ds-v1-green-100: #cef0d2;
    --nwea-ds-v1-green-200: #aae1b0;
    --nwea-ds-v1-green-300: #85d28d;
    --nwea-ds-v1-green-400: #61c36b;
    --nwea-ds-v1-green-500: #3cb449;
    --nwea-ds-v1-green-600: #299f36;
    --nwea-ds-v1-green-700: #1c8828;
    --nwea-ds-v1-green-800: #0f721a;
    --nwea-ds-v1-green-900: #005c0a;

    /* Lime */
    --nwea-ds-v1-lime-50: #fdffe7;
    --nwea-ds-v1-lime-100: #f2f7aa;
    --nwea-ds-v1-lime-200: #ebf380;
    --nwea-ds-v1-lime-300: #e4ee5f;
    --nwea-ds-v1-lime-400: #deea3f;
    --nwea-ds-v1-lime-500: #d7e600;
    --nwea-ds-v1-lime-600: #cedc07;
    --nwea-ds-v1-lime-700: #c0d100;
    --nwea-ds-v1-lime-800: #afc400;
    --nwea-ds-v1-lime-900: #99b000;

    /* Purple */
    --nwea-ds-v1-purple-50: #f4f3ff;
    --nwea-ds-v1-purple-100: #d3caff;
    --nwea-ds-v1-purple-200: #b7a1ff;
    --nwea-ds-v1-purple-300: #9d76ff;
    --nwea-ds-v1-purple-400: #844ffa;
    --nwea-ds-v1-purple-500: #6a30df;
    --nwea-ds-v1-purple-600: #5c25c5;
    --nwea-ds-v1-purple-700: #4e1aab;
    --nwea-ds-v1-purple-800: #3f0f91;
    --nwea-ds-v1-purple-900: #310477;

    /* Pink */
    --nwea-ds-v1-pink-50: #fff3f9;
    --nwea-ds-v1-pink-100: #ffc3e2;
    --nwea-ds-v1-pink-200: #f483be;
    --nwea-ds-v1-pink-300: #e159a0;
    --nwea-ds-v1-pink-400: #d23787;
    --nwea-ds-v1-pink-500: #c22e7b;
    --nwea-ds-v1-pink-600: #b1276f;
    --nwea-ds-v1-pink-700: #9f1f62;
    --nwea-ds-v1-pink-800: #88104f;
    --nwea-ds-v1-pink-900: #70003b;

    /* Red */
    --nwea-ds-v1-red-50: #fff0f0;
    --nwea-ds-v1-red-100: #ffbdbd;
    --nwea-ds-v1-red-200: #ff877e;
    --nwea-ds-v1-red-300: #ff6259;
    --nwea-ds-v1-red-400: #fa3732;
    --nwea-ds-v1-red-500: #e91b19;
    --nwea-ds-v1-red-600: #d70b03;
    --nwea-ds-v1-red-700: #bf0a00;
    --nwea-ds-v1-red-800: #a40000;
    --nwea-ds-v1-red-900: #8f0000;

    /* Orange */
    --nwea-ds-v1-orange-50: #fff5ee;
    --nwea-ds-v1-orange-100: #ffcdad;
    --nwea-ds-v1-orange-200: #ff9d5f;
    --nwea-ds-v1-orange-300: #ff8537;
    --nwea-ds-v1-orange-400: #ff6602;
    --nwea-ds-v1-orange-500: #f85105;
    --nwea-ds-v1-orange-600: #ec470c;
    --nwea-ds-v1-orange-700: #d93d00;
    --nwea-ds-v1-orange-800: #c53000;
    --nwea-ds-v1-orange-900: #b12800;
}

/* NWEA Design System - Typography */

:root, :host {
    --nwea-ds-v1-typography-rem-percentage: calc(var(--nwea-ds-v1-rem-basis, 16) / 16 * 100);
    --nwea-ds-v1-typography-rem-conversion: calc(10 / var(--nwea-ds-v1-rem-basis, 16));
    --nwea-ds-v1-typography-font-family: 'Open Sans', sans-serif;
}

.nwea-ds-v1-typography-html-default {
    font-size: calc(var(--nwea-ds-v1-typography-rem-percentage) * 1%);
}

.nwea-ds-v1-typography-body-default {
    /* this needs to be browser specific because font-smooth is inconsistent in support */
    -webkit-font-smoothing: antialiased;
    color: var(--nwea-ds-v1-gray-900);
    font-family: var(--nwea-ds-v1-typography-font-family);
    font-size: calc(var(--nwea-ds-v1-typography-rem-conversion) * 1.4rem);
    font-weight: 400;
    letter-spacing: calc(var(--nwea-ds-v1-typography-rem-conversion) * 0.025rem);
    line-height: calc(var(--nwea-ds-v1-typography-rem-conversion) * 2.4rem);
    margin: 0;
}

.nwea-ds-v1-typography-body-copy-large {
    font-family: var(--nwea-ds-v1-typography-font-family);
    font-size: calc(var(--nwea-ds-v1-typography-rem-conversion) * 2rem);
    font-weight: 300;
    letter-spacing: calc(var(--nwea-ds-v1-typography-rem-conversion) * 0.052rem);
    line-height: calc(var(--nwea-ds-v1-typography-rem-conversion) * 3.2rem);
    margin: 0 0 calc(var(--nwea-ds-v1-typography-rem-conversion) * 4.8rem) 0;
}

.nwea-ds-v1-typography-body-copy-medium {
    font-family: var(--nwea-ds-v1-typography-font-family);
    font-size: calc(var(--nwea-ds-v1-typography-rem-conversion) * 1.6rem);
    font-weight: 400;
    letter-spacing: calc(var(--nwea-ds-v1-typography-rem-conversion) * 0.015rem);
    line-height: calc(var(--nwea-ds-v1-typography-rem-conversion) * 2.4rem);
    margin: 0 0 calc(var(--nwea-ds-v1-typography-rem-conversion) * 4rem) 0;
}

.nwea-ds-v1-typography-body-copy-default {
    font-family: var(--nwea-ds-v1-typography-font-family);
    font-size: calc(var(--nwea-ds-v1-typography-rem-conversion) * 1.4rem);
    font-weight: 400;
    letter-spacing: calc(var(--nwea-ds-v1-typography-rem-conversion) * 0.026rem);
    line-height: calc(var(--nwea-ds-v1-typography-rem-conversion) * 2.4rem);
    margin: 0 0 calc(var(--nwea-ds-v1-typography-rem-conversion) * 4rem) 0;
}

.nwea-ds-v1-typography-heading-1 {
    font-family: var(--nwea-ds-v1-typography-font-family);
    font-size: calc(var(--nwea-ds-v1-typography-rem-conversion) * 4.8rem);
    font-weight: 400;
    letter-spacing: calc(var(--nwea-ds-v1-typography-rem-conversion) * -0.1rem);
    line-height: calc(var(--nwea-ds-v1-typography-rem-conversion) * 7.2rem);
    margin: calc(var(--nwea-ds-v1-typography-rem-conversion) * 0.8rem) 0 calc(var(--nwea-ds-v1-typography-rem-conversion) * 2.4rem) calc(var(--nwea-ds-v1-typography-rem-conversion) * -0.4rem);
}

.nwea-ds-v1-typography-heading-2 {
    font-family: var(--nwea-ds-v1-typography-font-family);
    font-size: calc(var(--nwea-ds-v1-typography-rem-conversion) * 4rem);
    font-weight: 400;
    letter-spacing: calc(var(--nwea-ds-v1-typography-rem-conversion) * 0.05rem);
    line-height: calc(var(--nwea-ds-v1-typography-rem-conversion) * 5.6rem);
    margin: calc(var(--nwea-ds-v1-typography-rem-conversion) * 0.8rem) 0 calc(var(--nwea-ds-v1-typography-rem-conversion) * 2.4rem) calc(var(--nwea-ds-v1-typography-rem-conversion) * -0.36rem);
}

.nwea-ds-v1-typography-heading-3 {
    font-family: var(--nwea-ds-v1-typography-font-family);
    font-size: calc(var(--nwea-ds-v1-typography-rem-conversion) * 3.2rem);
    font-weight: 600;
    letter-spacing: calc(var(--nwea-ds-v1-typography-rem-conversion) * 0.1rem);
    line-height: calc(var(--nwea-ds-v1-typography-rem-conversion) * 4.8rem);
    margin: 0 0 calc(var(--nwea-ds-v1-typography-rem-conversion) * 2rem)  calc(var(--nwea-ds-v1-typography-rem-conversion) * -0.24rem);
}

.nwea-ds-v1-typography-heading-4 {
    font-family: var(--nwea-ds-v1-typography-font-family);
    font-size: calc(var(--nwea-ds-v1-typography-rem-conversion) * 2.8rem);
    font-weight: 600;
    letter-spacing: calc(var(--nwea-ds-v1-typography-rem-conversion) * 0.1rem);
    line-height: calc(var(--nwea-ds-v1-typography-rem-conversion) * 4.8rem);
    margin: 0 0 calc(var(--nwea-ds-v1-typography-rem-conversion) * 2rem)  calc(var(--nwea-ds-v1-typography-rem-conversion) * -0.26rem);
}

.nwea-ds-v1-typography-heading-5 {
    font-family: var(--nwea-ds-v1-typography-font-family);
    font-size: calc(var(--nwea-ds-v1-typography-rem-conversion) * 2rem);
    font-weight: 700;
    letter-spacing: calc(var(--nwea-ds-v1-typography-rem-conversion) * 0.1rem);
    line-height: calc(var(--nwea-ds-v1-typography-rem-conversion) * 2.8rem);
    margin: 0 0 calc(var(--nwea-ds-v1-typography-rem-conversion) * 1.6rem)  calc(var(--nwea-ds-v1-typography-rem-conversion) * -0.18rem);
}

.nwea-ds-v1-typography-heading-6 {
    font-family: var(--nwea-ds-v1-typography-font-family);
    font-size: calc(var(--nwea-ds-v1-typography-rem-conversion) * 1.2rem);
    font-weight: 700;
    letter-spacing: calc(var(--nwea-ds-v1-typography-rem-conversion) * 0.15rem);
    line-height: calc(var(--nwea-ds-v1-typography-rem-conversion) * 3.2rem);
    margin: 0 0 0 calc(var(--nwea-ds-v1-typography-rem-conversion) * -0.14rem);
    text-transform: uppercase;
}

.nwea-ds-v1-typography-subtitle {
    font-family: var(--nwea-ds-v1-typography-font-family);
    font-size: calc(var(--nwea-ds-v1-typography-rem-conversion) * 1.6rem);
    font-weight: 600;
    line-height: calc(var(--nwea-ds-v1-typography-rem-conversion) * 2.4rem);
}

.nwea-ds-v1-typography-label {
    font-family: var(--nwea-ds-v1-typography-font-family);
    font-size: calc(var(--nwea-ds-v1-typography-rem-conversion) * 1.4rem);
    font-weight: 600;
    line-height: calc(var(--nwea-ds-v1-typography-rem-conversion) * 2.4rem);
}

.nwea-ds-v1-typography-caption {
    font-family: var(--nwea-ds-v1-typography-font-family);
    font-size: calc(var(--nwea-ds-v1-typography-rem-conversion) * 1.2rem);
    font-weight: 400;
    line-height: calc(var(--nwea-ds-v1-typography-rem-conversion) * 2.0rem);
}

/* NWEA Design System - Elevation */

:root, :host {
    --nwea-ds-v1-elevation-rem-conversion: calc(10 / var(--nwea-ds-v1-rem-basis, 16));
    --nwea-ds-v1-elevation-1px: calc(0.1rem * var(--nwea-ds-v1-elevation-rem-conversion));
    --nwea-ds-v1-elevation-2px: calc(0.2rem * var(--nwea-ds-v1-elevation-rem-conversion));
    --nwea-ds-v1-elevation-3px: calc(0.3rem * var(--nwea-ds-v1-elevation-rem-conversion));
    --nwea-ds-v1-elevation-4px: calc(0.4rem * var(--nwea-ds-v1-elevation-rem-conversion));
    --nwea-ds-v1-elevation-5px: calc(0.5rem * var(--nwea-ds-v1-elevation-rem-conversion));
    --nwea-ds-v1-elevation-6px: calc(0.6rem * var(--nwea-ds-v1-elevation-rem-conversion));
    --nwea-ds-v1-elevation-7px: calc(0.7rem * var(--nwea-ds-v1-elevation-rem-conversion));
    --nwea-ds-v1-elevation-8px: calc(0.8rem * var(--nwea-ds-v1-elevation-rem-conversion));
    --nwea-ds-v1-elevation-9px: calc(0.9rem * var(--nwea-ds-v1-elevation-rem-conversion));
    --nwea-ds-v1-elevation-10px: calc(1.0rem * var(--nwea-ds-v1-elevation-rem-conversion));
    --nwea-ds-v1-elevation-11px: calc(1.1rem * var(--nwea-ds-v1-elevation-rem-conversion));
    --nwea-ds-v1-elevation-12px: calc(1.2rem * var(--nwea-ds-v1-elevation-rem-conversion));
    --nwea-ds-v1-elevation-14px: calc(1.4rem * var(--nwea-ds-v1-elevation-rem-conversion));
    --nwea-ds-v1-elevation-15px: calc(1.5rem * var(--nwea-ds-v1-elevation-rem-conversion));
    --nwea-ds-v1-elevation-16px: calc(1.6rem * var(--nwea-ds-v1-elevation-rem-conversion));
    --nwea-ds-v1-elevation-17px: calc(1.7rem * var(--nwea-ds-v1-elevation-rem-conversion));
    --nwea-ds-v1-elevation-18px: calc(1.8rem * var(--nwea-ds-v1-elevation-rem-conversion));
    --nwea-ds-v1-elevation-22px: calc(2.2rem * var(--nwea-ds-v1-elevation-rem-conversion));
    --nwea-ds-v1-elevation-24px: calc(2.4rem * var(--nwea-ds-v1-elevation-rem-conversion));
    --nwea-ds-v1-elevation-30px: calc(3.0rem * var(--nwea-ds-v1-elevation-rem-conversion));
    --nwea-ds-v1-elevation-38px: calc(3.8rem * var(--nwea-ds-v1-elevation-rem-conversion));
    --nwea-ds-v1-elevation-46px: calc(4.6rem * var(--nwea-ds-v1-elevation-rem-conversion));
    --nwea-ds-v1-elevation-animation: 0.25s;
    --nwea-ds-v1-elevation-0: 0 0 0 0 rgba(0, 0, 0, 0);
    --nwea-ds-v1-elevation-01: 0 var(--nwea-ds-v1-elevation-1px) var(--nwea-ds-v1-elevation-1px) 0 rgba(0, 0, 0, 0.14),
                             0 var(--nwea-ds-v1-elevation-2px) var(--nwea-ds-v1-elevation-1px) calc(-1 * var(--nwea-ds-v1-elevation-1px)) rgba(0, 0, 0, 0.12),
                             0 var(--nwea-ds-v1-elevation-1px) var(--nwea-ds-v1-elevation-3px) 0 rgba(0, 0, 0, 0.2);
    --nwea-ds-v1-elevation-02: 0 var(--nwea-ds-v1-elevation-2px) var(--nwea-ds-v1-elevation-2px) 0 rgba(0, 0, 0, 0.14),
                             0 var(--nwea-ds-v1-elevation-3px) var(--nwea-ds-v1-elevation-1px) calc(-1 * var(--nwea-ds-v1-elevation-2px)) rgba(0, 0, 0, 0.12),
                             0 var(--nwea-ds-v1-elevation-1px) var(--nwea-ds-v1-elevation-5px) 0 rgba(0, 0, 0, 0.2);
    --nwea-ds-v1-elevation-03: 0 var(--nwea-ds-v1-elevation-3px) var(--nwea-ds-v1-elevation-4px) 0 rgba(0, 0, 0, 0.14),
                             0 var(--nwea-ds-v1-elevation-3px) var(--nwea-ds-v1-elevation-3px) calc(-1 * var(--nwea-ds-v1-elevation-2px)) rgba(0, 0, 0, 0.12),
                             0 var(--nwea-ds-v1-elevation-1px) var(--nwea-ds-v1-elevation-8px) 0 rgba(0, 0, 0, 0.2);
    --nwea-ds-v1-elevation-04: 0 var(--nwea-ds-v1-elevation-4px) var(--nwea-ds-v1-elevation-5px) 0 rgba(0, 0, 0, 0.14), 
                             0 var(--nwea-ds-v1-elevation-1px) var(--nwea-ds-v1-elevation-10px) 0 rgba(0, 0, 0, 0.12),
                             0 var(--nwea-ds-v1-elevation-2px) var(--nwea-ds-v1-elevation-4px) calc(-1 * var(--nwea-ds-v1-elevation-1px)) rgba(0, 0, 0, 0.2);
    --nwea-ds-v1-elevation-06: 0 var(--nwea-ds-v1-elevation-6px) var(--nwea-ds-v1-elevation-10px) 0 rgba(0, 0, 0, 0.14),
                             0 var(--nwea-ds-v1-elevation-1px) var(--nwea-ds-v1-elevation-18px) 0 rgba(0, 0, 0, 0.12),
                             0 var(--nwea-ds-v1-elevation-3px) var(--nwea-ds-v1-elevation-5px) calc(-1 * var(--nwea-ds-v1-elevation-1px)) rgba(0, 0, 0, 0.2);
    --nwea-ds-v1-elevation-08: 0 var(--nwea-ds-v1-elevation-8px) var(--nwea-ds-v1-elevation-10px) var(--nwea-ds-v1-elevation-1px) rgba(0, 0, 0, 0.14),
                             0 var(--nwea-ds-v1-elevation-3px) var(--nwea-ds-v1-elevation-14px) var(--nwea-ds-v1-elevation-2px) rgba(0, 0, 0, 0.12),
                             0 var(--nwea-ds-v1-elevation-5px) var(--nwea-ds-v1-elevation-5px) calc(-1 * var(--nwea-ds-v1-elevation-3px)) rgba(0, 0, 0, 0.2);
    --nwea-ds-v1-elevation-09: 0 var(--nwea-ds-v1-elevation-9px) var(--nwea-ds-v1-elevation-12px) var(--nwea-ds-v1-elevation-1px) rgba(0, 0, 0, 0.14),
                             0 var(--nwea-ds-v1-elevation-3px) var(--nwea-ds-v1-elevation-16px) var(--nwea-ds-v1-elevation-2px) rgba(0, 0, 0, 0.12),
                             0 var(--nwea-ds-v1-elevation-5px) var(--nwea-ds-v1-elevation-6px) calc(-1 * var(--nwea-ds-v1-elevation-3px)) rgba(0, 0, 0, 0.2);
    --nwea-ds-v1-elevation-12: 0 var(--nwea-ds-v1-elevation-12px) var(--nwea-ds-v1-elevation-17px) var(--nwea-ds-v1-elevation-2px) rgba(0, 0, 0, 0.14),
                             0 var(--nwea-ds-v1-elevation-5px) var(--nwea-ds-v1-elevation-22px) var(--nwea-ds-v1-elevation-4px) rgba(0, 0, 0, 0.12),
                             0 var(--nwea-ds-v1-elevation-7px) var(--nwea-ds-v1-elevation-8px) calc(-1 * var(--nwea-ds-v1-elevation-4px)) rgba(0, 0, 0, 0.2);
    --nwea-ds-v1-elevation-16: 0 var(--nwea-ds-v1-elevation-16px) var(--nwea-ds-v1-elevation-24px) var(--nwea-ds-v1-elevation-2px) rgba(0, 0, 0, 0.14),
                             0 var(--nwea-ds-v1-elevation-6px) var(--nwea-ds-v1-elevation-30px) var(--nwea-ds-v1-elevation-5px) rgba(0, 0, 0, 0.12),
                             0 var(--nwea-ds-v1-elevation-8px) var(--nwea-ds-v1-elevation-10px) calc(-1 * var(--nwea-ds-v1-elevation-5px)) rgba(0, 0, 0, 0.2);
    --nwea-ds-v1-elevation-24: 0 var(--nwea-ds-v1-elevation-24px) var(--nwea-ds-v1-elevation-38px) var(--nwea-ds-v1-elevation-3px) rgba(0, 0, 0, 0.14),
                             0 var(--nwea-ds-v1-elevation-9px) var(--nwea-ds-v1-elevation-46px) var(--nwea-ds-v1-elevation-8px) rgba(0, 0, 0, 0.12),
                             0 var(--nwea-ds-v1-elevation-11px) var(--nwea-ds-v1-elevation-15px) calc(-1 * var(--nwea-ds-v1-elevation-7px)) rgba(0, 0, 0, 0.2);
}

.nwea-ds-v1-elevation-animation {
    transition: var(--nwea-ds-v1-elevation-animation);
}

.nwea-ds-v1-elevation-level-0 {
    box-shadow: var(--nwea-ds-v1-elevation-0);
}

.nwea-ds-v1-elevation-level-01 {
    box-shadow: var(--nwea-ds-v1-elevation-01);
}

.nwea-ds-v1-elevation-level-02 {
    box-shadow: var(--nwea-ds-v1-elevation-02);
}

.nwea-ds-v1-elevation-level-03 {
    box-shadow: var(--nwea-ds-v1-elevation-03);
}

.nwea-ds-v1-elevation-level-04 {
    box-shadow: var(--nwea-ds-v1-elevation-04);
}

.nwea-ds-v1-elevation-level-06 {
    box-shadow: var(--nwea-ds-v1-elevation-06);
}

.nwea-ds-v1-elevation-level-08 {
    box-shadow: var(--nwea-ds-v1-elevation-08);
}

.nwea-ds-v1-elevation-level-09 {
    box-shadow: var(--nwea-ds-v1-elevation-09);
}

.nwea-ds-v1-elevation-level-12 {
    box-shadow: var(--nwea-ds-v1-elevation-12);
}

.nwea-ds-v1-elevation-level-16 {
    box-shadow: var(--nwea-ds-v1-elevation-16);
}

.nwea-ds-v1-elevation-level-24 {
    box-shadow: var(--nwea-ds-v1-elevation-24);
}

/* NWEA Design System - Hello World */

.nwea-ds-v1-helloWorld-gray { color: var(--nwea-ds-v1-gray-900); }
.nwea-ds-v1-helloWorld-yellow { color: var(--nwea-ds-v1-yellow-900); }
.nwea-ds-v1-helloWorld-blue { color: var(--nwea-ds-v1-blue-900); }
.nwea-ds-v1-helloWorld-teal { color: var(--nwea-ds-v1-teal-900); }
.nwea-ds-v1-helloWorld-green { color: var(--nwea-ds-v1-green-900); }
.nwea-ds-v1-helloWorld-lime { color: var(--nwea-ds-v1-lime-900); }
.nwea-ds-v1-helloWorld-purple { color: var(--nwea-ds-v1-purple-900); }
.nwea-ds-v1-helloWorld-pink { color: var(--nwea-ds-v1-pink-900); }
.nwea-ds-v1-helloWorld-red { color: var(--nwea-ds-v1-red-900); }
.nwea-ds-v1-helloWorld-orange { color: var(--nwea-ds-v1-orange-900); }

.nwea-ds-v1-helloWorld-content { display: block; }

:host {
  --nwea-ds-v1-button-icon-margin: calc(var(--nwea-ds-v1-button-rem-conversion) * -0.4rem);
}

::slotted(svg) {
  /* When an svg is used in a button, it blocks the click of the button. So, you have to tell the svg to allow the click to pass through by using a pointer event.
  Article: https://css-tricks.com/slightly-careful-sub-elements-clickable-things/
  */

  pointer-events: none;
  width: calc(var(--nwea-ds-v1-button-rem-conversion) * 2.4rem);
  height: calc(var(--nwea-ds-v1-button-rem-conversion) * 2.4rem);
  fill: currentColor;
  margin-left: var(--nwea-ds-v1-button-icon-margin-left, var(--nwea-ds-v1-button-icon-margin));
  margin-right: var(--nwea-ds-v1-button-icon-margin-right, var(--nwea-ds-v1-button-icon-margin));
}

.nwea-ds-v1-button-icon-on-left {
  --nwea-ds-v1-button-icon-margin-right: calc(var(--nwea-ds-v1-button-rem-conversion) * 0.4rem);
}

.nwea-ds-v1-button-icon-on-right {
  --nwea-ds-v1-button-icon-margin-left: calc(var(--nwea-ds-v1-button-rem-conversion) * 0.4rem);
}

.nwea-ds-v1-button-icon-only {
  --nwea-ds-v1-button-icon-margin-left: var(--nwea-ds-v1-button-icon-only-margin);
  --nwea-ds-v1-button-icon-margin-right: var(--nwea-ds-v1-button-icon-only-margin);
}

.nwea-ds-v1-button-icon-only.nwea-ds-v1-button-outline {
  --nwea-ds-v1-button-icon-margin-left: var(--nwea-ds-v1-button-icon-only-margin);
  --nwea-ds-v1-button-icon-margin-right: var(--nwea-ds-v1-button-icon-only-margin);
}

:root, :host {
    --nwea-ds-v1-button-rem-conversion: calc(10 / var(--nwea-ds-v1-rem-basis, 16));
}

/* Duplication of justify-content and vertical-align are intentional. justify-content for Edge to align of focus indicator in outline iconOnly button correctly. vertical-align is responsible for alignment of button element inline positioning. */

/* BASE BUTTON */
.nwea-ds-v1-button-base {
  /* --nwea-ds-v1-button-icon-fill: var(--nwea-ds-v1-button-icon-resting); */
  -webkit-font-smoothing: antialiased;
  align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--nwea-ds-v1-button-background-resting);
  border-radius: calc(var(--nwea-ds-v1-button-rem-conversion) * 0.4rem);
  border: 0;
  box-shadow: var(--nwea-ds-v1-button-elevation-resting);
  color: var(--nwea-ds-v1-button-color-resting);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: calc(var(--nwea-ds-v1-button-rem-conversion) * 1.4rem);
  font-weight: 600;
  height: var(--nwea-ds-v1-button-height);
  justify-content: center;
  letter-spacing: calc(var(--nwea-ds-v1-button-rem-conversion) * 0.072rem);
  line-height: calc(var(--nwea-ds-v1-button-rem-conversion) * 1.6rem);
  margin: 0;
  min-width: calc(var(--nwea-ds-v1-button-rem-conversion) * 3.2rem);
  outline: none;
  padding: var(--nwea-ds-v1-button-padding);
  position: relative;
  transition: all 0.25s, z-index 0.25s step-end;
  vertical-align: middle;
  /* TODO: need to revisit z-index for buttons, tooltips and focus. */
  z-index: 0;
}

/* Focus indicator color bar that sits on top of the main button bg so that colors in bg can be preserved */
.nwea-ds-v1-button-base::after {
  background-color: var(--nwea-ds-v1-button-highlight-resting);
  border-radius: 0 0 calc(var(--nwea-ds-v1-button-rem-conversion) * 0.4rem) calc(var(--nwea-ds-v1-button-rem-conversion) * 0.4rem);
  border: 0;
  bottom: 0;
  content: ' ';
  display: block;
  height: calc(var(--nwea-ds-v1-button-rem-conversion) * 0.4rem);
  outline: none;
  pointer-events: none;
  position: absolute;
  transition: 0.15s;
  width: 0;
  z-index: -1;
}

/* HOVER */
/* nwea-ds-test-hover-state is a class used for Visual Regression testing. */
:host(.nwea-ds-test-hover-state) .nwea-ds-v1-button-base,
.nwea-ds-v1-button-base:hover {
  background-color: var(--nwea-ds-v1-button-background-hover);
  box-shadow: var(--nwea-ds-v1-button-elevation-hover);
  color: var(--nwea-ds-v1-button-color-hover);
  transition: 0.25s;
  z-index: 15;
}

/* FOCUS */
.nwea-ds-v1-button-base:not(.nwea-ds-v1-button-focus-override):focus {
  background-color: var(--nwea-ds-v1-button-background-focus);
  box-shadow: var(--nwea-ds-v1-button-elevation-focus);
  color: var(--nwea-ds-v1-button-color-focus);
  transition: 0.25s;
  z-index: 15;
}

/* focus-visible is useful to provide a different focus indicator based on the user’s input modality. */
/* https://css-tricks.com/the-focus-visible-trick */
/* MDN specification, https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
.nwea-ds-v1-button-base.nwea-ds-v1-button-focus-override:focus-visible {
  background-color: var(--nwea-ds-v1-button-background-focus);
  box-shadow: var(--nwea-ds-v1-button-elevation-focus);
  color: var(--nwea-ds-v1-button-color-focus);
  transition: 0.25s;
  z-index: 15;
}

.nwea-ds-v1-button-base:not(.nwea-ds-v1-button-focus-override):focus::after {
  background-color: var(--nwea-ds-v1-button-highlight-focus);
  width: 100%;
}

.nwea-ds-v1-button-base.nwea-ds-v1-button-focus-override:focus-visible::after {
  background-color: var(--nwea-ds-v1-button-highlight-focus);
  width: 100%;
}

/* ACTIVE */
/* nwea-ds-test-active-state is a class used for Visual Regression testing. */
:host(.nwea-ds-test-active-state) .nwea-ds-v1-button-base:not([disabled]),
.nwea-ds-v1-button-base:not([disabled]):active {
  -webkit-tap-highlight-color: var(--nwea-ds-v1-button-background-active);
  animation-duration: 0.3s;
  animation-iteration-count: 1;
  animation-name: nwea-ds-v1-button-push;
  animation-timing-function: ease-in-out;
  background-color: var(--nwea-ds-v1-button-background-active);
  box-shadow: var(--nwea-ds-v1-button-elevation-active);
  color: var(--nwea-ds-v1-button-color-active);
}

/* Keyframe animation included slowing the animation on active so that it is perceptible. */
@keyframes nwea-ds-v1-button-push {
  40% {
    background-color: var(--nwea-ds-v1-button-background-active);
    box-shadow: var(--nwea-ds-v1-button-elevation-resting);
  }
}

/* DISABLED BUTTON CLASSES */
/* nwea-ds-test-hover-state is a class used for Visual Regression testing. */
:host(.nwea-ds-test-hover-state) .nwea-ds-v1-button-base:disabled,
.nwea-ds-v1-button-base:disabled,
.nwea-ds-v1-button-base:disabled:hover {
  background-color: var(--nwea-ds-v1-gray-150);
  box-shadow: none;
  color: var(--nwea-ds-v1-gray-550);
  cursor: not-allowed;
}

/* SPECIFIC BLENDED STATES  */
.nwea-ds-v1-button-base:not([disabled]):active::after,
.nwea-ds-v1-button-base:focus:active::after {
  background-color: var(--nwea-ds-v1-button-highlight-default);
  transition: 0.15s;
  width: 0;
}

slot {
  display: inline-flex;
  align-items: center;
}
/* Elevation base pseudo states by fill type */
/* color variables that do not change between fills are found in buttonFill.css  */

/* FILLED TYPES and COLORS */
.nwea-ds-v1-button-blue.nwea-ds-v1-button-filled {
  --nwea-ds-v1-button-background-resting: var(--nwea-ds-v1-blue-500);
  --nwea-ds-v1-button-background-hover: var(--nwea-ds-v1-blue-400);
  --nwea-ds-v1-button-color-focus: var(--nwea-ds-v1-blue-700);
  --nwea-ds-v1-button-icon-focus: var(--nwea-ds-v1-blue-700);
  /* Color of Focus bar */
  --nwea-ds-v1-button-highlight-focus: var(--nwea-ds-v1-blue-800);
  --nwea-ds-v1-button-background-active: var(--nwea-ds-v1-blue-200);
}

.nwea-ds-v1-button-blue.nwea-ds-v1-button-outline {
  --nwea-ds-v1-button-color-resting: var(--nwea-ds-v1-blue-700);
  --nwea-ds-v1-button-icon-resting: var(--nwea-ds-v1-blue-700);
  --nwea-ds-v1-button-border-resting: var(--nwea-ds-v1-blue-700);
  --nwea-ds-v1-button-background-hover: var(--nwea-ds-v1-blue-100);
  --nwea-ds-v1-button-border-hover: var(--nwea-ds-v1-blue-900);
  --nwea-ds-v1-button-color-focus: var(--nwea-ds-v1-blue-700);
  --nwea-ds-v1-button-icon-focus: var(--nwea-ds-v1-blue-700);
  --nwea-ds-v1-button-highlight-focus: var(--nwea-ds-v1-blue-800);
  --nwea-ds-v1-button-background-active: var(--nwea-ds-v1-blue-200);
}

.nwea-ds-v1-button-blue.nwea-ds-v1-button-flat {
  --nwea-ds-v1-button-color-resting: var(--nwea-ds-v1-blue-700);
  --nwea-ds-v1-button-icon-resting: var(--nwea-ds-v1-blue-700);
  --nwea-ds-v1-button-background-hover: var(--nwea-ds-v1-blue-100);
  --nwea-ds-v1-button-color-focus: var(--nwea-ds-v1-blue-700);
  --nwea-ds-v1-button-icon-focus: var(--nwea-ds-v1-blue-700);
  --nwea-ds-v1-button-highlight-focus: var(--nwea-ds-v1-blue-800);
  --nwea-ds-v1-button-background-active: var(--nwea-ds-v1-blue-200);
}

.nwea-ds-v1-button-purple.nwea-ds-v1-button-filled {
  --nwea-ds-v1-button-background-resting: var(--nwea-ds-v1-purple-500);
  --nwea-ds-v1-button-background-hover: var(--nwea-ds-v1-purple-400);
  --nwea-ds-v1-button-color-focus: var(--nwea-ds-v1-purple-700);
  --nwea-ds-v1-button-icon-focus: var(--nwea-ds-v1-purple-700);
  --nwea-ds-v1-button-highlight-focus: var(--nwea-ds-v1-purple-800);
  --nwea-ds-v1-button-background-active: var(--nwea-ds-v1-purple-200);
}

.nwea-ds-v1-button-purple.nwea-ds-v1-button-outline {
  --nwea-ds-v1-button-color-resting: var(--nwea-ds-v1-purple-700);
  --nwea-ds-v1-button-icon-resting: var(--nwea-ds-v1-purple-700);
  --nwea-ds-v1-button-border-resting: var(--nwea-ds-v1-purple-700);
  --nwea-ds-v1-button-background-hover: var(--nwea-ds-v1-purple-100);
  --nwea-ds-v1-button-border-hover: var(--nwea-ds-v1-purple-900);
  --nwea-ds-v1-button-color-focus: var(--nwea-ds-v1-purple-700);
  --nwea-ds-v1-button-icon-focus: var(--nwea-ds-v1-purple-700);
  --nwea-ds-v1-button-highlight-focus: var(--nwea-ds-v1-purple-800);
  --nwea-ds-v1-button-background-active: var(--nwea-ds-v1-purple-200);
}

.nwea-ds-v1-button-purple.nwea-ds-v1-button-flat {
  --nwea-ds-v1-button-color-resting: var(--nwea-ds-v1-purple-700);
  --nwea-ds-v1-button-icon-resting: var(--nwea-ds-v1-purple-700);
  --nwea-ds-v1-button-background-hover: var(--nwea-ds-v1-purple-100);
  --nwea-ds-v1-button-color-focus: var(--nwea-ds-v1-purple-700);
  --nwea-ds-v1-button-icon-focus: var(--nwea-ds-v1-purple-700);
  --nwea-ds-v1-button-highlight-focus: var(--nwea-ds-v1-purple-800);
  --nwea-ds-v1-button-background-active: var(--nwea-ds-v1-purple-200);
}

.nwea-ds-v1-button-teal-light.nwea-ds-v1-button-filled {
  --nwea-ds-v1-button-color-resting: black;
  --nwea-ds-v1-button-icon-resting: black;
  --nwea-ds-v1-button-background-resting: var(--nwea-ds-v1-teal-500);
  --nwea-ds-v1-button-background-hover: var(--nwea-ds-v1-teal-400);
  --nwea-ds-v1-button-color-focus: var(--nwea-ds-v1-teal-700);
  --nwea-ds-v1-button-icon-focus: var(--nwea-ds-v1-teal-700);
  --nwea-ds-v1-button-highlight-focus: var(--nwea-ds-v1-teal-800);
  --nwea-ds-v1-button-background-active: var(--nwea-ds-v1-teal-200);
}

.nwea-ds-v1-button-teal-dark.nwea-ds-v1-button-outline {
  --nwea-ds-v1-button-color-resting: var(--nwea-ds-v1-teal-700);
  --nwea-ds-v1-button-icon-resting: var(--nwea-ds-v1-teal-700);
  --nwea-ds-v1-button-border-resting: var(--nwea-ds-v1-teal-700);
  --nwea-ds-v1-button-background-hover: var(--nwea-ds-v1-teal-100);
  --nwea-ds-v1-button-border-hover: var(--nwea-ds-v1-teal-900);
  --nwea-ds-v1-button-color-focus: var(--nwea-ds-v1-teal-700);
  --nwea-ds-v1-button-icon-focus: var(--nwea-ds-v1-teal-700);
  --nwea-ds-v1-button-highlight-focus: var(--nwea-ds-v1-teal-800);
  --nwea-ds-v1-button-background-active: var(--nwea-ds-v1-teal-200);
}

.nwea-ds-v1-button-teal-dark.nwea-ds-v1-button-flat {
  --nwea-ds-v1-button-color-resting: var(--nwea-ds-v1-teal-700);
  --nwea-ds-v1-button-icon-resting: var(--nwea-ds-v1-teal-700);
  --nwea-ds-v1-button-background-hover: var(--nwea-ds-v1-teal-100);
  --nwea-ds-v1-button-color-focus: var(--nwea-ds-v1-teal-700);
  --nwea-ds-v1-button-icon-focus: var(--nwea-ds-v1-teal-700);
  --nwea-ds-v1-button-highlight-focus: var(--nwea-ds-v1-teal-800);
  --nwea-ds-v1-button-background-active: var(--nwea-ds-v1-teal-200);
}

.nwea-ds-v1-button-teal-dark.nwea-ds-v1-button-filled {
  --nwea-ds-v1-button-color-resting: white;
  --nwea-ds-v1-button-icon-resting: white;
  --nwea-ds-v1-button-background-resting: var(--nwea-ds-v1-teal-700);
  --nwea-ds-v1-button-background-hover: var(--nwea-ds-v1-teal-600);
  --nwea-ds-v1-button-color-focus: var(--nwea-ds-v1-teal-700);
  --nwea-ds-v1-button-icon-focus: var(--nwea-ds-v1-teal-700);
  --nwea-ds-v1-button-highlight-focus: var(--nwea-ds-v1-teal-800);
  --nwea-ds-v1-button-background-active: var(--nwea-ds-v1-teal-200);
}

/* no gray filled */

.nwea-ds-v1-button-gray.nwea-ds-v1-button-outline {
  --nwea-ds-v1-button-color-resting: var(--nwea-ds-v1-gray-700);
  --nwea-ds-v1-button-icon-resting: var(--nwea-ds-v1-gray-700);
  --nwea-ds-v1-button-border-resting: var(--nwea-ds-v1-gray-700);
  --nwea-ds-v1-button-background-hover: var(--nwea-ds-v1-gray-50);
  --nwea-ds-v1-button-border-hover: var(--nwea-ds-v1-gray-900);
  --nwea-ds-v1-button-color-focus: var(--nwea-ds-v1-gray-700);
  --nwea-ds-v1-button-icon-focus: var(--nwea-ds-v1-gray-700);
  --nwea-ds-v1-button-highlight-focus: var(--nwea-ds-v1-gray-800);
  --nwea-ds-v1-button-background-active: var(--nwea-ds-v1-gray-100);
}

.nwea-ds-v1-button-gray.nwea-ds-v1-button-flat {
  --nwea-ds-v1-button-color-resting: var(--nwea-ds-v1-gray-700);
  --nwea-ds-v1-button-icon-resting: var(--nwea-ds-v1-gray-700);
  --nwea-ds-v1-button-background-hover: var(--nwea-ds-v1-gray-50);
  --nwea-ds-v1-button-color-focus: var(--nwea-ds-v1-gray-700);
  --nwea-ds-v1-button-icon-focus: var(--nwea-ds-v1-gray-700);
  --nwea-ds-v1-button-highlight-focus: var(--nwea-ds-v1-gray-800);
  --nwea-ds-v1-button-background-active: var(--nwea-ds-v1-gray-100);
}

.nwea-ds-v1-button-green.nwea-ds-v1-button-filled {
  --nwea-ds-v1-button-background-resting: var(--nwea-ds-v1-green-700);
  --nwea-ds-v1-button-background-hover: var(--nwea-ds-v1-green-600);
  --nwea-ds-v1-button-color-focus: var(--nwea-ds-v1-green-700);
  --nwea-ds-v1-button-icon-focus: var(--nwea-ds-v1-green-700);
  --nwea-ds-v1-button-highlight-focus: var(--nwea-ds-v1-green-800);
  --nwea-ds-v1-button-background-active: var(--nwea-ds-v1-green-200);
}

.nwea-ds-v1-button-green.nwea-ds-v1-button-outline {
  --nwea-ds-v1-button-color-resting: var(--nwea-ds-v1-green-700);
  --nwea-ds-v1-button-icon-resting: var(--nwea-ds-v1-green-700);
  --nwea-ds-v1-button-border-resting: var(--nwea-ds-v1-green-700);
  --nwea-ds-v1-button-background-hover: var(--nwea-ds-v1-green-100);
  --nwea-ds-v1-button-border-hover: var(--nwea-ds-v1-green-900);
  --nwea-ds-v1-button-color-focus: var(--nwea-ds-v1-green-700);
  --nwea-ds-v1-button-icon-focus: var(--nwea-ds-v1-green-700);
  --nwea-ds-v1-button-highlight-focus: var(--nwea-ds-v1-green-800);
  --nwea-ds-v1-button-background-active: var(--nwea-ds-v1-green-200);
}

.nwea-ds-v1-button-green.nwea-ds-v1-button-flat {
  --nwea-ds-v1-button-color-resting: var(--nwea-ds-v1-green-700);
  --nwea-ds-v1-button-icon-resting: var(--nwea-ds-v1-green-700);
  --nwea-ds-v1-button-background-hover: var(--nwea-ds-v1-green-100);
  --nwea-ds-v1-button-color-focus: var(--nwea-ds-v1-green-700);
  --nwea-ds-v1-button-icon-focus: var(--nwea-ds-v1-green-700);
  --nwea-ds-v1-button-highlight-focus: var(--nwea-ds-v1-green-800);
  --nwea-ds-v1-button-background-active: var(--nwea-ds-v1-green-200);
}

.nwea-ds-v1-button-orange.nwea-ds-v1-button-filled {
  --nwea-ds-v1-button-background-resting: var(--nwea-ds-v1-orange-700);
  --nwea-ds-v1-button-background-hover: var(--nwea-ds-v1-orange-600);
  --nwea-ds-v1-button-color-focus: var(--nwea-ds-v1-orange-700);
  --nwea-ds-v1-button-icon-focus: var(--nwea-ds-v1-orange-700);
  --nwea-ds-v1-button-highlight-focus: var(--nwea-ds-v1-orange-800);
  --nwea-ds-v1-button-background-active: var(--nwea-ds-v1-orange-200);
}

.nwea-ds-v1-button-orange.nwea-ds-v1-button-outline {
  --nwea-ds-v1-button-color-resting: var(--nwea-ds-v1-orange-700);
  --nwea-ds-v1-button-icon-resting: var(--nwea-ds-v1-orange-700);
  --nwea-ds-v1-button-border-resting: var(--nwea-ds-v1-orange-700);
  --nwea-ds-v1-button-background-hover: var(--nwea-ds-v1-orange-100);
  --nwea-ds-v1-button-border-hover: var(--nwea-ds-v1-orange-900);
  --nwea-ds-v1-button-color-focus: var(--nwea-ds-v1-orange-700);
  --nwea-ds-v1-button-icon-focus: var(--nwea-ds-v1-orange-700);
  --nwea-ds-v1-button-highlight-focus: var(--nwea-ds-v1-orange-800);
  --nwea-ds-v1-button-background-active: var(--nwea-ds-v1-orange-200);
}

.nwea-ds-v1-button-orange.nwea-ds-v1-button-flat {
  --nwea-ds-v1-button-color-resting: var(--nwea-ds-v1-orange-700);
  --nwea-ds-v1-button-icon-resting: var(--nwea-ds-v1-orange-700);
  --nwea-ds-v1-button-background-hover: var(--nwea-ds-v1-orange-100);
  --nwea-ds-v1-button-color-focus: var(--nwea-ds-v1-orange-700);
  --nwea-ds-v1-button-icon-focus: var(--nwea-ds-v1-orange-700);
  --nwea-ds-v1-button-highlight-focus: var(--nwea-ds-v1-orange-800);
  --nwea-ds-v1-button-background-active: var(--nwea-ds-v1-orange-200);
}


.nwea-ds-v1-button-red.nwea-ds-v1-button-filled {
  --nwea-ds-v1-button-background-resting: var(--nwea-ds-v1-red-500);
  --nwea-ds-v1-button-background-hover: var(--nwea-ds-v1-red-400);
  --nwea-ds-v1-button-color-focus: var(--nwea-ds-v1-red-700);
  --nwea-ds-v1-button-icon-focus: var(--nwea-ds-v1-red-700);
  --nwea-ds-v1-button-highlight-focus: var(--nwea-ds-v1-red-800);
  --nwea-ds-v1-button-background-active: var(--nwea-ds-v1-red-200);
}

.nwea-ds-v1-button-red.nwea-ds-v1-button-outline {
  --nwea-ds-v1-button-color-resting: var(--nwea-ds-v1-red-700);
  --nwea-ds-v1-button-icon-resting: var(--nwea-ds-v1-red-700);
  --nwea-ds-v1-button-border-resting: var(--nwea-ds-v1-red-700);
  --nwea-ds-v1-button-background-hover: var(--nwea-ds-v1-red-100);
  --nwea-ds-v1-button-border-hover: var(--nwea-ds-v1-red-900);
  --nwea-ds-v1-button-color-focus: var(--nwea-ds-v1-red-700);
  --nwea-ds-v1-button-icon-focus: var(--nwea-ds-v1-red-700);
  --nwea-ds-v1-button-highlight-focus: var(--nwea-ds-v1-red-800);
  --nwea-ds-v1-button-background-active: var(--nwea-ds-v1-red-200);
}

.nwea-ds-v1-button-red.nwea-ds-v1-button-flat {
  --nwea-ds-v1-button-color-resting: var(--nwea-ds-v1-red-700);
  --nwea-ds-v1-button-icon-resting: var(--nwea-ds-v1-red-700);
  --nwea-ds-v1-button-background-hover: var(--nwea-ds-v1-red-100);
  --nwea-ds-v1-button-color-focus: var(--nwea-ds-v1-red-700);
  --nwea-ds-v1-button-icon-focus: var(--nwea-ds-v1-red-700);
  --nwea-ds-v1-button-highlight-focus: var(--nwea-ds-v1-red-800);
  --nwea-ds-v1-button-background-active: var(--nwea-ds-v1-red-200);
}

/* no lime */
/* no yellow */
/* no pink */

/* SIZES */
.nwea-ds-v1-button-large {
  --nwea-ds-v1-button-height: calc(var(--nwea-ds-v1-button-rem-conversion) * 4.8rem);
  --nwea-ds-v1-button-icon-only-margin: calc(var(--nwea-ds-v1-button-rem-conversion) * -0.4rem);
}

.nwea-ds-v1-button-medium {
  --nwea-ds-v1-button-height: calc(var(--nwea-ds-v1-button-rem-conversion) * 4rem);
  --nwea-ds-v1-button-icon-only-margin: calc(var(--nwea-ds-v1-button-rem-conversion) * -0.8rem);
}

.nwea-ds-v1-button-small {
  --nwea-ds-v1-button-height: calc(var(--nwea-ds-v1-button-rem-conversion) * 3.2rem);
  --nwea-ds-v1-button-icon-only-margin: calc(var(--nwea-ds-v1-button-rem-conversion) * -1.2rem);
}

.nwea-ds-v1-button-filled {
  /* Elevations */
  --nwea-ds-v1-button-elevation-active: var(--nwea-ds-v1-elevation-01);
  --nwea-ds-v1-button-elevation-focus: var(--nwea-ds-v1-elevation-04);
  --nwea-ds-v1-button-elevation-hover: var(--nwea-ds-v1-elevation-02);
  --nwea-ds-v1-button-elevation-resting: var(--nwea-ds-v1-elevation-00);
  /* Common Fill and Color Definitions */
  --nwea-ds-v1-button-color-resting: white;
  --nwea-ds-v1-button-icon-resting: white;
  --nwea-ds-v1-button-color-hover: white;
  --nwea-ds-v1-button-icon-hover: white;
  --nwea-ds-v1-button-background-focus: white;
  --nwea-ds-v1-button-color-active: black;
  --nwea-ds-v1-button-icon-active: black;
  --nwea-ds-v1-button-padding: 0 calc(var(--nwea-ds-v1-button-rem-conversion) * 1.6rem);
}

/* Alternate Fill and Color Definition */
.nwea-ds-v1-button-teal-light.nwea-ds-v1-button-filled {
  --nwea-ds-v1-button-color-hover: black;
  --nwea-ds-v1-button-icon-hover: black;
  --nwea-ds-v1-button-background-focus: white;
  --nwea-ds-v1-button-color-active: black;
  --nwea-ds-v1-button-icon-active: black;
}

.nwea-ds-v1-button-outline {
  /* Elevations */
  --nwea-ds-v1-button-elevation-active: var(--nwea-ds-v1-elevation-01);
  --nwea-ds-v1-button-elevation-focus: var(--nwea-ds-v1-elevation-04);
  --nwea-ds-v1-button-elevation-hover: var(--nwea-ds-v1-elevation-00);
  --nwea-ds-v1-button-elevation-resting: var(--nwea-ds-v1-elevation-00);
  /* Common Fill and Color Definitions */
  --nwea-ds-v1-button-background-resting: white;
  --nwea-ds-v1-button-highlight-resting: white;
  --nwea-ds-v1-button-color-hover: black;
  --nwea-ds-v1-button-icon-hover: black;
  --nwea-ds-v1-button-background-focus: white;
  --nwea-ds-v1-button-border-focus: white;
  --nwea-ds-v1-button-color-active: black;
  --nwea-ds-v1-button-icon-active: black;
  --nwea-ds-v1-button-border-active: white;
  --nwea-ds-v1-button-padding: 0 calc(var(--nwea-ds-v1-button-rem-conversion) * 1.5rem);
}

/* no lime */
/* no yellow */
/* no pink */

/* TODO: This is for the focus override spacing for boarder. */
/* .outline > * {
  margin-top: calc(var(--nwea-ds-v1-button-rem-conversion) * -0.1rem);
} */

.nwea-ds-v1-button-outline:not([disabled]) {
  border: calc(var(--nwea-ds-v1-button-rem-conversion) * 0.1rem) solid var(--nwea-ds-v1-button-border-resting);
  box-sizing: border-box;
}

.nwea-ds-v1-button-outline:not(.nwea-ds-v1-button-focus-override):focus {
  border: calc(var(--nwea-ds-v1-button-rem-conversion) * 0.1rem) solid var(--nwea-ds-v1-button-border-focus);
  box-sizing: border-box;
}

/* focus-visible is useful to provide a different focus indicator based on the user’s input modality. */
/* https://css-tricks.com/the-focus-visible-trick */
/* MDN specification, https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
.nwea-ds-v1-button-outline.nwea-ds-v1-button-focus-override:focus-visible {
  border: calc(var(--nwea-ds-v1-button-rem-conversion) * 0.1rem) solid var(--nwea-ds-v1-button-border-focus);
  box-sizing: border-box;
}

.nwea-ds-v1-button-outline:not(.nwea-ds-v1-button-focus-override):focus::after {
  background-color: var(--nwea-ds-v1-button-highlight-focus);
  bottom: calc(var(--nwea-ds-v1-button-rem-conversion) * -0.2rem);
  width: calc(100% + calc(var(--nwea-ds-v1-button-rem-conversion) * 0.4rem));
  box-sizing: border-box;
}

.nwea-ds-v1-button-outline.nwea-ds-v1-button-focus-override:focus-visible::after {
  background-color: var(--nwea-ds-v1-button-highlight-focus);
  bottom: calc(var(--nwea-ds-v1-button-rem-conversion) * -0.2rem);
  width: calc(100% + calc(var(--nwea-ds-v1-button-rem-conversion) * 0.4rem));
  box-sizing: border-box;
}

.nwea-ds-v1-button-flat {
  /* Elevations */
  --nwea-ds-v1-button-elevation-active: var(--nwea-ds-v1-elevation-01);
  --nwea-ds-v1-button-elevation-focus: var(--nwea-ds-v1-elevation-04);
  --nwea-ds-v1-button-elevation-hover: var(--nwea-ds-v1-elevation-00);
  --nwea-ds-v1-button-elevation-resting: var(--nwea-ds-v1-elevation-00);
  /* Common Fill and Color Definitions */
  --nwea-ds-v1-button-background-resting: transparent;
  --nwea-ds-v1-button-highlight-resting: white;
  --nwea-ds-v1-button-color-hover: black;
  --nwea-ds-v1-button-icon-hover: black;
  --nwea-ds-v1-button-background-focus: white;
  --nwea-ds-v1-button-color-active: black;
  --nwea-ds-v1-button-icon-active: black;
  --nwea-ds-v1-button-padding: 0 calc(var(--nwea-ds-v1-button-rem-conversion) * 1.6rem);
}

/* TOOLTIP classes */
.nwea-ds-v1-button-inline-left {
  --nwea-ds-v1-button-tooltip-bottom: auto;
  --nwea-ds-v1-button-tooltip-left: auto;
  --nwea-ds-v1-button-tooltip-right: var(--nwea-ds-v1-button-tooltip-offset);
  --nwea-ds-v1-button-tooltip-top: 50%;
  --nwea-ds-v1-button-tooltip-vertical-adjustment: -50%;
}

.nwea-ds-v1-button-top-left {
  --nwea-ds-v1-button-tooltip-bottom: var(--nwea-ds-v1-button-tooltip-offset);
  --nwea-ds-v1-button-tooltip-left: 0;
  --nwea-ds-v1-button-tooltip-right: initial;
  --nwea-ds-v1-button-tooltip-top: initial;
}

.nwea-ds-v1-button-top-center {
  --nwea-ds-v1-button-tooltip-bottom: var(--nwea-ds-v1-button-tooltip-offset);
  --nwea-ds-v1-button-tooltip-top: initial;
}

.nwea-ds-v1-button-top-right {
  --nwea-ds-v1-button-tooltip-bottom: var(--nwea-ds-v1-button-tooltip-offset);
  --nwea-ds-v1-button-tooltip-left: initial;
  --nwea-ds-v1-button-tooltip-right: 0;
  --nwea-ds-v1-button-tooltip-top: initial;
}

.nwea-ds-v1-button-inline-right {
  --nwea-ds-v1-button-tooltip-bottom: auto;
  --nwea-ds-v1-button-tooltip-left: var(--nwea-ds-v1-button-tooltip-offset);
  --nwea-ds-v1-button-tooltip-right: auto;
  --nwea-ds-v1-button-tooltip-top: 50%;
  --nwea-ds-v1-button-tooltip-vertical-adjustment: -50%;
}

.nwea-ds-v1-button-bottom-left {
  --nwea-ds-v1-button-tooltip-bottom: initial;
  --nwea-ds-v1-button-tooltip-left: 0;
  --nwea-ds-v1-button-tooltip-right: initial;
  --nwea-ds-v1-button-tooltip-top: var(--nwea-ds-v1-button-tooltip-offset);
}

.nwea-ds-v1-button-bottom-center {
  --nwea-ds-v1-button-tooltip-bottom: initial;
  --nwea-ds-v1-button-tooltip-top: var(--nwea-ds-v1-button-tooltip-offset);
}

.nwea-ds-v1-button-bottom-right {
  --nwea-ds-v1-button-tooltip-bottom: initial;
  --nwea-ds-v1-button-tooltip-left: initial;
  --nwea-ds-v1-button-tooltip-right: 0;
  --nwea-ds-v1-button-tooltip-top: var(--nwea-ds-v1-button-tooltip-offset);
}

:root, :host {
  --nwea-ds-v1-button-tooltip-offset-visible: calc(100% + calc(var(--nwea-ds-v1-button-rem-conversion) * 0.8rem));
}

/* TOOLTIP base */
.nwea-ds-v1-button-tooltip-base {
  /* The offset variables account for verbose tooltip text. A11y focus indicators can look mismatched because the tooltip is not visible and the A11y indicator wraps it.  */
  --nwea-ds-v1-button-tooltip-offset: 50%; /* default to position within the button bounds */
  position: relative;
}

.nwea-ds-v1-button-tooltip-base[aria-label]::before {
  background-color: var(--nwea-ds-v1-gray-800);
  border-radius: calc(var(--nwea-ds-v1-button-rem-conversion) * 0.4rem);
  bottom: var(--nwea-ds-v1-button-tooltip-bottom);
  color: white;
  content: attr(aria-label);
  font-size: calc(var(--nwea-ds-v1-button-rem-conversion) * 1.4rem);
  left: var(--nwea-ds-v1-button-tooltip-left);
  max-height: 0;
  max-width: 0;
  opacity: 0;
  padding: calc(var(--nwea-ds-v1-button-rem-conversion) * 0.4rem) calc(var(--nwea-ds-v1-button-rem-conversion) * 0.8rem);
  pointer-events: none;
  position: absolute;
  right: var(--nwea-ds-v1-button-tooltip-right);
  text-align: center;
  text-transform: none;
  top: var(--nwea-ds-v1-button-tooltip-top);
  transition: all 0.25s step-end, opacity 0.25s linear;
  width: max-content;
  transform: translateY(var(--nwea-ds-v1-button-tooltip-vertical-adjustment, 0));
}

/* nwea-ds-test-hover-state is a class used for Visual Regression testing. */
:host(.nwea-ds-test-hover-state) .nwea-ds-v1-button-tooltip-base[aria-label],
.nwea-ds-v1-button-tooltip-base[aria-label]:hover,
.nwea-ds-v1-button-tooltip-base[aria-label]:focus {
  --nwea-ds-v1-button-tooltip-offset: var(--nwea-ds-v1-button-tooltip-offset-visible);
}

:host(.nwea-ds-test-hover-state) .nwea-ds-v1-button-tooltip-base[aria-label]::before,
.nwea-ds-v1-button-tooltip-base[aria-label]:hover::before,
.nwea-ds-v1-button-tooltip-base[aria-label]:focus::before {
  max-width: 100vw;
  max-height: 100vh;
  opacity: 1;
  transition: all 0.25s step-start, opacity 0.25s linear;
}

/* NWEA Design System - Switch (Checkbox, Toggle, Radio Button) */

:host {
    --nwea-ds-switch-rem-conversion: calc(10 / var(--nwea-ds-v1-rem-basis, 16));
    --nwea-ds-switch-height: calc(var(--nwea-ds-switch-rem-conversion) * 2.6rem);
    --nwea-ds-switch-width: calc(var(--nwea-ds-switch-rem-conversion) * 2.6rem);
    --nwea-ds-switch-outline-border-color: var(--nwea-ds-v1-gray-700);
    --nwea-ds-switch-outline-border-width: calc(var(--nwea-ds-switch-rem-conversion) * 0.2rem);
}

/* Core setup of Control */
.nwea-ds-v1-switch-control {
    -webkit-appearance: none; /* Edge uses -webkit- prefix */
    -moz-appearance: none;
    appearance: none; /* Not supported, but here for when it is */
    outline: none; /* Turn off default focus ring - we implement our own */
    border: calc(var(--nwea-ds-switch-rem-conversion) * 0.2rem) solid transparent; /* This is our focus ring */
    border-radius: var(--nwea-ds-switch-focus-ring-border-radius);
    box-sizing: border-box;
    flex-shrink: 0;
    height: var(--nwea-ds-switch-height);
    width: var(--nwea-ds-switch-width);
    margin: calc(var(--nwea-ds-switch-rem-conversion) * -0.1rem) 0;
}

/* Switch outline - the box/circle itself */
.nwea-ds-v1-switch-control::before {
    content: '';
    background-color: var(--nwea-ds-switch-background-color, transparent);
    border: var(--nwea-ds-switch-outline-border-width) solid var(--nwea-ds-switch-outline-border-color);
    border-radius: var(--nwea-ds-switch-outline-border-radius, 0);
    box-sizing: border-box;
    display: inline-block;
    flex-grow: 0;
    flex-shrink: 0;
    width: var(--nwea-ds-switch-outline-width, 0);
    height: var(--nwea-ds-switch-outline-height, 0);
    margin: var(--nwea-ds-switch-outline-margin-top, 0)
            var(--nwea-ds-switch-outline-margin-side, 0)
            var(--nwea-ds-switch-outline-margin-bottom, 0)
            var(--nwea-ds-switch-outline-margin-offset, 0);
    order: -2;
}

.nwea-ds-v1-switch-control:disabled {
    --nwea-ds-switch-outline-border-color: var(--nwea-ds-v1-gray-450);
    --nwea-ds-switch-color: var(--nwea-ds-v1-gray-450);
}

.nwea-ds-v1-switch-control:focus,
.nwea-ds-v1-switch-control:not([disabled]):active {
    /* Focus ring color */
    border-color: var(--nwea-ds-switch-focus-ring, var(--nwea-ds-v1-gray-700));
    /* Box color */
    --nwea-ds-switch-outline-border-color: var(--nwea-ds-switch-focus-color);
}

/* The containing element and how it positions its children */
.nwea-ds-v1-switch-container {
    display: flex;
    align-items: flex-start;
    margin: 0;
}

/*
    '.nwea-ds-test-hover-state' is included in this declaration solely for the purposes of visual regression testing.
    The ':global()' reference instructs CSS Modules to not transform the class name.
    The ':host' reference indicates that the '.nwea-ds-test-hover-state' is being applied to the custom element itself,
       meaning that the test engine can apply it directly to the web component instead of having to dive into the shadow root.
*/
:host(.nwea-ds-test-hover-state) .nwea-ds-v1-switch-container,
.nwea-ds-v1-switch-container:hover {
    --nwea-ds-switch-color: var(--nwea-ds-switch-hover-color);
}

/* The text that 'labels' the switch */
.nwea-ds-v1-switch-label {
    color: var(--nwea-ds-v1-gray-700);
    display: flex;
    flex-grow: 1;
    margin: var(--nwea-ds-switch-label-space-top, 0) 0 0 var(--nwea-ds-switch-label-space-side, 0);
}

.nwea-ds-v1-switch-control:disabled + .nwea-ds-v1-switch-label {
    --nwea-ds-switch-color: var(--nwea-ds-v1-gray-450);
    --nwea-ds-switch-hover-color: var(--nwea-ds-v1-gray-450);
    --nwea-ds-switch-checkmark-color: white;
    color: var(--nwea-ds-v1-gray-500);
}

/* Label Positioning */
.nwea-ds-v1-switch-label-hidden {
    width: var(--nwea-ds-switch-width);
}

.nwea-ds-v1-switch-label-hidden .nwea-ds-v1-switch-label {
    display: none;
}

.nwea-ds-v1-switch-label-on-left {
    flex-direction: row-reverse;
}

.nwea-ds-v1-switch-label-on-left .nwea-ds-v1-switch-label {
    margin: var(--nwea-ds-switch-label-space-top, 0) var(--nwea-ds-switch-label-space-side, 0) 0 0;
}

.nwea-ds-v1-switch-control-is-centered, .nwea-ds-v1-switch-control-is-centered .nwea-ds-v1-switch-label {
    align-items: center;
}

/* COLORS */
.nwea-ds-v1-switch-blue {
    --nwea-ds-switch-focus-ring: var(--nwea-ds-v1-blue-700);
    --nwea-ds-switch-focus-color: var(--nwea-ds-v1-blue-500);
    --nwea-ds-switch-color: var(--nwea-ds-v1-blue-500);
    --nwea-ds-switch-hover-color: var(--nwea-ds-v1-blue-400);
}

.nwea-ds-v1-switch-purple {
    --nwea-ds-switch-focus-ring: var(--nwea-ds-v1-purple-700);
    --nwea-ds-switch-focus-color: var(--nwea-ds-v1-purple-500);
    --nwea-ds-switch-color: var(--nwea-ds-v1-purple-500);
    --nwea-ds-switch-hover-color: var(--nwea-ds-v1-purple-400);
}

.nwea-ds-v1-switch-teal {
    --nwea-ds-switch-focus-ring: var(--nwea-ds-v1-teal-900);
    --nwea-ds-switch-focus-color: var(--nwea-ds-v1-teal-700);
    --nwea-ds-switch-color: var(--nwea-ds-v1-teal-700);
    --nwea-ds-switch-hover-color: var(--nwea-ds-v1-teal-600);
}

.nwea-ds-v1-switch-orange {
    --nwea-ds-switch-focus-ring: var(--nwea-ds-v1-orange-700);
    --nwea-ds-switch-focus-color: var(--nwea-ds-v1-orange-500);
    --nwea-ds-switch-color: var(--nwea-ds-v1-orange-500);
    --nwea-ds-switch-hover-color: var(--nwea-ds-v1-orange-400);
}

/* NWEA Design System - Checkbox */

.nwea-ds-v1-checkbox-control {
    --nwea-ds-switch-focus-ring-border-radius: calc(var(--nwea-ds-switch-rem-conversion) * 0.4rem);
    --nwea-ds-switch-outline-border-radius: calc(var(--nwea-ds-switch-rem-conversion) * 0.2rem);
    --nwea-ds-switch-outline-width: calc(var(--nwea-ds-switch-rem-conversion) * 1.8rem);
    --nwea-ds-switch-outline-height: calc(var(--nwea-ds-switch-rem-conversion) * 1.8rem);
    --nwea-ds-switch-outline-margin-top: calc(var(--nwea-ds-switch-rem-conversion) * 0.2rem);
    --nwea-ds-switch-outline-margin-offset: calc(var(--nwea-ds-switch-rem-conversion) * 0.2rem);
    --nwea-ds-switch-icon-content: none;
    --nwea-ds-switch-icon-margin-offset: calc(var(--nwea-ds-switch-rem-conversion) * -2.1rem);
    --nwea-ds-switch-icon-margin-side: calc(var(--nwea-ds-switch-rem-conversion) * 0.7rem);
}

.nwea-ds-v1-checkbox-control:disabled ~ .nwea-ds-v1-checkbox-icon {
    --nwea-ds-switch-color: var(--nwea-ds-v1-gray-450);
}

.nwea-ds-v1-checkbox-label {
    --nwea-ds-switch-label-space-side: calc(var(--nwea-ds-switch-rem-conversion) * 0.6rem);
}

.nwea-ds-v1-checkbox-icon {
    fill: var(--nwea-ds-switch-color);
    flex-grow: 0;
    flex-shrink: 0;
    height: calc(var(--nwea-ds-switch-rem-conversion) * 2.4rem);
    margin: 0 calc(var(--nwea-ds-switch-rem-conversion) * -2.5rem) 0 0;
    width: calc(var(--nwea-ds-switch-rem-conversion) * 2.4rem);
    opacity: 0;
    order: -1;
}

.nwea-ds-v1-checkbox-indeterminate {
    display: none;
}

.nwea-ds-v1-switch-label-on-left .nwea-ds-v1-checkbox-icon {
    margin: 0 0 0 calc(var(--nwea-ds-switch-rem-conversion) * -2.5rem);
}

.nwea-ds-v1-switch-switch-is-centered .nwea-ds-v1-checkbox-label {
    --nwea-ds-switch-outline-margin-top: 0;
}

.nwea-ds-v1-checkbox-control:checked::before,
.nwea-ds-v1-checkbox-control:indeterminate::before,
.nwea-ds-v1-checkbox-control[indeterminate]::before {
    animation: nwea-ds-v1-checkbox-show-checkmark 0.3s;
    border-color: transparent var(--nwea-ds-switch-color) transparent transparent;
    border-width: 0 0 0 calc(var(--nwea-ds-switch-outline-width));
}

.nwea-ds-v1-checkbox-control:checked ~ .nwea-ds-v1-checkbox-icon,
.nwea-ds-v1-checkbox-control:indeterminate ~ .nwea-ds-v1-checkbox-icon,
.nwea-ds-v1-checkbox-control[indeterminate] ~ .nwea-ds-v1-checkbox-icon {
    opacity: 1;
    transition: opacity 0.15s step-end;
}

.nwea-ds-v1-checkbox-control:indeterminate ~ .nwea-ds-v1-checkbox-checkmark,
.nwea-ds-v1-checkbox-control[indeterminate] ~ .nwea-ds-v1-checkbox-checkmark {
    display: none;
}

.nwea-ds-v1-checkbox-control:indeterminate ~ .nwea-ds-v1-checkbox-indeterminate,
.nwea-ds-v1-checkbox-control[indeterminate] ~ .nwea-ds-v1-checkbox-indeterminate {
    display: initial;
}

@keyframes nwea-ds-v1-checkbox-show-checkmark {
    0% {
        background-color: transparent;
        border-color: var(--nwea-ds-switch-outline-border-color);
        border-width: calc(var(--nwea-ds-switch-rem-conversion) * 0.2rem);
    }

    50% {
        background-color: var(--nwea-ds-switch-color);
        border-color: var(--nwea-ds-switch-color);
        border-width: calc(var(--nwea-ds-switch-rem-conversion) * 0.2rem);
    }

    51% {
        background-color: var(--nwea-ds-switch-color);
        border-color: transparent var(--nwea-ds-switch-color) transparent transparent;
        border-width: 0 var(--nwea-ds-switch-outline-width) 0 0;
    }

    100% {
        /* Animating from full Right border to full Left border causes a "jiggle" at the end */
        /* Hence, animating to 1px shy of full width */
        border-width: 0 calc(var(--nwea-ds-switch-rem-conversion) * 0.1rem) 0 calc(var(--nwea-ds-switch-outline-width) - calc(var(--nwea-ds-switch-rem-conversion) * 0.1rem));
    }
}
/* NWEA Design System - Toggle */

:host {
    --nwea-ds-toggle-track-height: calc(var(--nwea-ds-switch-rem-conversion) * 2.4rem);
    --nwea-ds-toggle-track-width: calc(var(--nwea-ds-switch-rem-conversion) * 4.8rem);
    --nwea-ds-toggle-margin: calc(var(--nwea-ds-switch-rem-conversion) * 0.2rem);
    --nwea-ds-toggle-border: calc(var(--nwea-ds-switch-rem-conversion) * 0.2rem);
}

.nwea-ds-v1-toggle-control {
    /* Extremely large border radii cause an overlap situation,
           resulting in a recalculation to the smallest radius that doesn't cause overlap,
           and applying the reduction proportionally across all radii.
       https://drafts.csswg.org/css-backgrounds/#corner-overlap
       Using this method of rounding the edges instead of specifying a pre-determined amount
           in order to make the measurement relative to the size of the toggle.
    */
    --nwea-ds-switch-focus-ring-border-radius: 100vh;
    --nwea-ds-switch-height: calc(var(--nwea-ds-toggle-track-height) + (var(--nwea-ds-toggle-margin) * 2) + (var(--nwea-ds-toggle-border) * 2));
    --nwea-ds-switch-width: calc(var(--nwea-ds-toggle-track-width) + (var(--nwea-ds-toggle-margin) * 2) + (var(--nwea-ds-toggle-border) * 2));
    --nwea-ds-switch-background-color: var(--nwea-ds-v1-gray-500); /* track color (initial) */
    --nwea-ds-switch-outline-border-color: transparent; /* This control has a track, not an outline. */
    --nwea-ds-switch-outline-border-radius: 100vh;
    --nwea-ds-switch-outline-border-width: 0;
    --nwea-ds-switch-outline-width: calc(100% - (var(--nwea-ds-toggle-margin) * 2));
    --nwea-ds-switch-outline-height: calc(100% - (var(--nwea-ds-toggle-margin) * 2));
    --nwea-ds-switch-outline-margin-top: var(--nwea-ds-toggle-margin);
    --nwea-ds-switch-outline-margin-offset: var(--nwea-ds-toggle-margin);

    order: -3;
}

.nwea-ds-v1-toggle-control::before {
    transition: 0.2s;
}

.nwea-ds-v1-toggle-control:checked, .nwea-ds-v1-toggle-control:disabled {
    --nwea-ds-switch-background-color: var(--nwea-ds-switch-color);
}

.nwea-ds-v1-toggle-control:checked ~ .nwea-ds-v1-toggle-icon {
    fill: var(--nwea-ds-switch-color);
    margin: calc(var(--nwea-ds-switch-rem-conversion) * 0.5rem)
            calc(var(--nwea-ds-switch-rem-conversion) * 0.3rem)
            0
            calc(var(--nwea-ds-switch-rem-conversion) * -2.6rem);
}

.nwea-ds-v1-toggle-control:disabled ~ .nwea-ds-v1-toggle-icon {
    --nwea-ds-switch-color: var(--nwea-ds-v1-gray-450);
    background-color: var(--nwea-ds-v1-gray-150);
    box-shadow: var(--nwea-ds-v1-elevation-0);
}

.nwea-ds-v1-switch-control-is-centered .nwea-ds-v1-toggle-control {
    margin: calc(var(--nwea-ds-switch-rem-conversion) * 0.1rem)
            0
            calc(var(--nwea-ds-switch-rem-conversion) * -0.3rem);
}

.nwea-ds-v1-toggle-icon {
    background-color: white;
    border-radius: 50%;
    box-shadow: var(--nwea-ds-v1-elevation-01);
    box-sizing: border-box;
    fill: transparent;
    flex-grow: 0;
    flex-shrink: 0;
    height: calc(var(--nwea-ds-switch-rem-conversion) * 2rem);
    margin: calc(var(--nwea-ds-switch-rem-conversion) * 0.5rem)
            calc(var(--nwea-ds-switch-rem-conversion) * 2.7rem)
            0
            calc(var(--nwea-ds-switch-rem-conversion) * -5rem);
    width: calc(var(--nwea-ds-switch-rem-conversion) * 2rem);
    order: -1;
    padding: 0 calc(var(--nwea-ds-switch-rem-conversion) * 0.1rem) calc(var(--nwea-ds-switch-rem-conversion) * 0.1rem);
    transition: 0.2s;
}

.nwea-ds-v1-switch-label-on-left .nwea-ds-v1-toggle-icon {
    margin: calc(var(--nwea-ds-switch-rem-conversion) * 0.5rem)
            calc(var(--nwea-ds-switch-rem-conversion) * -2.6rem)
            0
            calc(var(--nwea-ds-switch-rem-conversion) * 0.3rem);
}

.nwea-ds-v1-switch-label-on-left .nwea-ds-v1-toggle-control:checked ~ .nwea-ds-v1-toggle-icon {
    margin: calc(var(--nwea-ds-switch-rem-conversion) * 0.5rem)
    calc(var(--nwea-ds-switch-rem-conversion) * -5rem)
    0
    calc(var(--nwea-ds-switch-rem-conversion) * 2.7rem);
}

.nwea-ds-v1-switch-control-is-centered .nwea-ds-v1-toggle-icon {
    margin-top: calc(var(--nwea-ds-switch-rem-conversion) * 0.4rem);
}

.nwea-ds-v1-switch-control-is-centered .nwea-ds-v1-toggle-control:checked ~ .nwea-ds-v1-toggle-icon {
    margin-top: calc(var(--nwea-ds-switch-rem-conversion) * 0.4rem);
}

.nwea-ds-v1-switch-label-hidden.nwea-ds-v1-toggle-container {
    --nwea-ds-switch-width: calc(var(--nwea-ds-toggle-track-width) + (var(--nwea-ds-toggle-margin) * 2) + (var(--nwea-ds-toggle-border) * 2));
}

.nwea-ds-v1-toggle-label {
    --nwea-ds-switch-label-space-side: calc(var(--nwea-ds-switch-rem-conversion) * 0.6rem);
    --nwea-ds-switch-label-space-top: calc(var(--nwea-ds-switch-rem-conversion) * 0.2rem);
}

:host {
  --nwea-ds-single-select-rem-conversion: calc(
    10 / var(--nwea-ds-v1-rem-basis, 16)
  );
}

.nwea-ds-v1-singleSelect-experimental-select {
  width: 100%;
}

.nwea-ds-v1-singleSelect-experimental-label,
.nwea-ds-v1-singleSelect-experimental-select,
.nwea-ds-v1-singleSelect-experimental-assistiveText {
  display: block;
}
.nwea-ds-v1-singleSelect-experimental-container {
  max-width: calc(var(--nwea-ds-single-select-rem-conversion) * 60.4rem);
  min-width: calc(var(--nwea-ds-single-select-rem-conversion) * 8.8rem);
  display: inline-block;
  overflow: hidden;
}

.nwea-ds-v1-singleSelect-experimental-assistiveText,
.nwea-ds-v1-singleSelect-experimental-select:active ~ .nwea-ds-v1-singleSelect-experimental-assistiveText,
.nwea-ds-v1-singleSelect-experimental-select:hover ~ .nwea-ds-v1-singleSelect-experimental-assistiveText {
  color: var(--nwea-ds-v1-gray-600);
}

.nwea-ds-v1-singleSelect-experimental-select:disabled ~ .nwea-ds-v1-singleSelect-experimental-assistiveText {
  color: var(--nwea-ds-v1-gray-550);
}

.nwea-ds-v1-singleSelect-experimental-container.nwea-ds-v1-singleSelect-experimental-error .nwea-ds-v1-singleSelect-experimental-assistiveText {
  color: var(--nwea-ds-v1-red-600);
}

.nwea-ds-v1-singleSelect-experimental-label,
.nwea-ds-v1-singleSelect-experimental-label:hover {
  color: var(--nwea-ds-v1-gray-700);
}
.nwea-ds-v1-singleSelect-experimental-label.nwea-ds-v1-singleSelect-experimental-blue.nwea-ds-v1-singleSelect-experimental-active,
.nwea-ds-v1-singleSelect-experimental-label.nwea-ds-v1-singleSelect-experimental-blue.nwea-ds-v1-singleSelect-experimental-focused {
  color: var(--nwea-ds-v1-blue-800);
}
.nwea-ds-v1-singleSelect-experimental-label.nwea-ds-v1-singleSelect-experimental-purple.nwea-ds-v1-singleSelect-experimental-active,
.nwea-ds-v1-singleSelect-experimental-label.nwea-ds-v1-singleSelect-experimental-purple.nwea-ds-v1-singleSelect-experimental-focused {
  color: var(--nwea-ds-v1-purple-800);
}
.nwea-ds-v1-singleSelect-experimental-label.nwea-ds-v1-singleSelect-experimental-teal.nwea-ds-v1-singleSelect-experimental-active,
.nwea-ds-v1-singleSelect-experimental-label.nwea-ds-v1-singleSelect-experimental-teal.nwea-ds-v1-singleSelect-experimental-focused {
  color: var(--nwea-ds-v1-teal-800);
}

.nwea-ds-v1-singleSelect-experimental-label.nwea-ds-v1-singleSelect-experimental-disabled {
  color: var(--nwea-ds-v1-gray-550);
}

.nwea-ds-v1-singleSelect-experimental-container.nwea-ds-v1-singleSelect-experimental-error .nwea-ds-v1-singleSelect-experimental-label {
  color: var(--nwea-ds-v1-red-500);
}

.nwea-ds-v1-singleSelect-experimental-select {
  --nwea-ds-single-select-arrow-width: calc(
    var(--nwea-ds-single-select-rem-conversion) * 2.4rem
  );
  --nwea-ds-single-select-padding: calc(
    var(--nwea-ds-single-select-rem-conversion) * 1.2rem
  );
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 version=%271.1%27 height=%2724px%27 viewBox=%270 0 24 24%27 width=%2724px%27 fill=%27%23414142%27%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3Cpath d=%27M7 10l5 5 5-5z%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position-x: calc(
    100% - calc(var(--nwea-ds-single-select-rem-conversion) * 1.8rem)
  );
  background-position-y: center;
  border-color: var(--nwea-ds-v1-gray-500);
  border-radius: calc(var(--nwea-ds-single-select-rem-conversion) * 0.4rem);
  border-width: calc(var(--nwea-ds-single-select-rem-conversion) * 0.1rem);
  color: var(--nwea-ds-v1-gray-700);
  height: calc(var(--nwea-ds-single-select-rem-conversion) * 4.8rem);
  margin: 0;
  outline: none;
  padding: var(--nwea-ds-single-select-padding);
  padding-right: calc(
    var(--nwea-ds-single-select-padding) +
      var(--nwea-ds-single-select-arrow-width) +
      var(--nwea-ds-single-select-padding)
  );
  text-overflow: ellipsis;
  max-width: calc(var(--nwea-ds-single-select-rem-conversion) * 60.4rem);
  min-width: calc(var(--nwea-ds-single-select-rem-conversion) * 8.8rem);
}

.nwea-ds-v1-singleSelect-experimental-select:disabled {
  background-color: var(--nwea-ds-v1-gray-150);
  border-color: var(--nwea-ds-v1-gray-450);
  color: var(--nwea-ds-v1-gray-550);
}

.nwea-ds-v1-singleSelect-experimental-select.nwea-ds-v1-singleSelect-experimental-blue:active,
.nwea-ds-v1-singleSelect-experimental-select.nwea-ds-v1-singleSelect-experimental-blue:focus {
  border-color: var(--nwea-ds-v1-blue-700);
  color: var(--nwea-ds-v1-gray-700);
}

.nwea-ds-v1-singleSelect-experimental-select.nwea-ds-v1-singleSelect-experimental-purple:active,
.nwea-ds-v1-singleSelect-experimental-select.nwea-ds-v1-singleSelect-experimental-purple:focus {
  border-color: var(--nwea-ds-v1-purple-700);
}

.nwea-ds-v1-singleSelect-experimental-select.nwea-ds-v1-singleSelect-experimental-teal:active,
.nwea-ds-v1-singleSelect-experimental-select.nwea-ds-v1-singleSelect-experimental-teal:focus {
  border-color: var(--nwea-ds-v1-teal-700);
}

.nwea-ds-v1-singleSelect-experimental-container.nwea-ds-v1-singleSelect-experimental-error .nwea-ds-v1-singleSelect-experimental-select {
  border-color: var(--nwea-ds-v1-red-500);
}


/*# sourceMappingURL=design-system.css.map*/