@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i);
:root {
  /* Grayscale */
  --gray-50: #fafafa;
  --gray-100: #eeeef0;
  --gray-150: #dedee0;
  --gray-200: #cdcdd0;
  --gray-300: #b1b1b5;
  --gray-400: #98989d;
  --gray-450: #8f8f94;
  --gray-500: #76767a;
  --gray-550: #626264;
  --gray-600: #575758;
  --gray-700: #414142;
  --gray-800: #2c2c2f;
  --gray-900: #161616;

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

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

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

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

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

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

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

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

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

:root {
  --elevation-animation: 0.25s;
  --elevation-0: 0 0 0 0 rgba(0, 0, 0, 0);
  --elevation-01: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.2);
  --elevation-02: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  --elevation-03: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.2);
  --elevation-04: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --elevation-06: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
  --elevation-08: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
  --elevation-09: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12), 0 5px 6px -3px rgba(0, 0, 0, 0.2);
  --elevation-12: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 7px 8px -4px rgba(0, 0, 0, 0.2);
  --elevation-16: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
  --elevation-24: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
}

.nwea__elevation__elevation-animation {
  transition: 0.25s;
  transition: var(--elevation-animation);
}

.nwea__elevation__elevation-0 {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  box-shadow: var(--elevation-0);
}

.nwea__elevation__elevation-01 {
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.2);
  box-shadow: var(--elevation-01);
}

.nwea__elevation__elevation-02 {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  box-shadow: var(--elevation-02);
}

.nwea__elevation__elevation-03 {
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.2);
  box-shadow: var(--elevation-03);
}

.nwea__elevation__elevation-04 {
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  box-shadow: var(--elevation-04);
}

.nwea__elevation__elevation-06 {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
  box-shadow: var(--elevation-06);
}

.nwea__elevation__elevation-08 {
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
  box-shadow: var(--elevation-08);
}

.nwea__elevation__elevation-09 {
  box-shadow: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12), 0 5px 6px -3px rgba(0, 0, 0, 0.2);
  box-shadow: var(--elevation-09);
}

.nwea__elevation__elevation-12 {
  box-shadow: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 7px 8px -4px rgba(0, 0, 0, 0.2);
  box-shadow: var(--elevation-12);
}

.nwea__elevation__elevation-16 {
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
  box-shadow: var(--elevation-16);
}

.nwea__elevation__elevation-24 {
  box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
  box-shadow: var(--elevation-24);
}

:root {
  /* Initial values are for a 768 viewport width */
  --grid-width-full: 100%;
  --grid-width-fluid: 100%;
  --grid-width-fixed: calc(var(--rem-conversion) * 76.8rem);
  --grid-gutter-width: calc(var(--rem-conversion) * 1.6rem);
  --grid-column-width: calc(100% / 12);

  /* Grid Column Widths */
  --grid-column-width-1: var(--grid-column-width);
  --grid-column-width-2: calc(var(--grid-column-width) * 2);
  --grid-column-width-3: calc(var(--grid-column-width) * 3);
  --grid-column-width-4: calc(var(--grid-column-width) * 4);
  --grid-column-width-5: calc(var(--grid-column-width) * 5);
  --grid-column-width-6: calc(var(--grid-column-width) * 6);
  --grid-column-width-7: calc(var(--grid-column-width) * 7);
  --grid-column-width-8: calc(var(--grid-column-width) * 8);
  --grid-column-width-9: calc(var(--grid-column-width) * 9);
  --grid-column-width-10: calc(var(--grid-column-width) * 10);
  --grid-column-width-11: calc(var(--grid-column-width) * 11);
  --grid-column-width-12: calc(var(--grid-column-width) * 12);
}

.nwea__grid__container {
  box-sizing: border-box;
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
          align-items: flex-start;
}

.nwea__grid__container.nwea__grid__full-width {
  width: 100%;
  width: var(--grid-width-full);
}

.nwea__grid__container.nwea__grid__fluid {
  width: 100%;
  width: var(--grid-width-fluid);
}

.nwea__grid__container.nwea__grid__fixed {
  width: calc(var(--rem-conversion) * 76.8rem);
  width: var(--grid-width-fixed);
}

.nwea__grid__column {
  box-sizing: border-box;
  padding: 0 calc(calc(var(--rem-conversion) * 1.6rem) / 2);
  padding: 0 calc(var(--grid-gutter-width) / 2);
}

.nwea__grid__column.nwea__grid__width-1 { width: calc(100% / 12); width: var(--grid-column-width-1); }
.nwea__grid__column.nwea__grid__width-2 { width: calc(calc(100% / 12) * 2); width: var(--grid-column-width-2); }
.nwea__grid__column.nwea__grid__width-3 { width: calc(calc(100% / 12) * 3); width: var(--grid-column-width-3); }
.nwea__grid__column.nwea__grid__width-4 { width: calc(calc(100% / 12) * 4); width: var(--grid-column-width-4); }
.nwea__grid__column.nwea__grid__width-5 { width: calc(calc(100% / 12) * 5); width: var(--grid-column-width-5); }
.nwea__grid__column.nwea__grid__width-6 { width: calc(calc(100% / 12) * 6); width: var(--grid-column-width-6); }
.nwea__grid__column.nwea__grid__width-7 { width: calc(calc(100% / 12) * 7); width: var(--grid-column-width-7); }
.nwea__grid__column.nwea__grid__width-8 { width: calc(calc(100% / 12) * 8); width: var(--grid-column-width-8); }
.nwea__grid__column.nwea__grid__width-9 { width: calc(calc(100% / 12) * 9); width: var(--grid-column-width-9); }
.nwea__grid__column.nwea__grid__width-10 { width: calc(calc(100% / 12) * 10); width: var(--grid-column-width-10); }
.nwea__grid__column.nwea__grid__width-11 { width: calc(calc(100% / 12) * 11); width: var(--grid-column-width-11); }
.nwea__grid__column.nwea__grid__width-12 { width: calc(calc(100% / 12) * 12); width: var(--grid-column-width-12); }

.nwea__grid__column.nwea__grid__offset-1 { margin-left: calc(100% / 12); margin-left: var(--grid-column-width-1); }
.nwea__grid__column.nwea__grid__offset-2 { margin-left: calc(calc(100% / 12) * 2); margin-left: var(--grid-column-width-2); }
.nwea__grid__column.nwea__grid__offset-3 { margin-left: calc(calc(100% / 12) * 3); margin-left: var(--grid-column-width-3); }
.nwea__grid__column.nwea__grid__offset-4 { margin-left: calc(calc(100% / 12) * 4); margin-left: var(--grid-column-width-4); }
.nwea__grid__column.nwea__grid__offset-5 { margin-left: calc(calc(100% / 12) * 5); margin-left: var(--grid-column-width-5); }
.nwea__grid__column.nwea__grid__offset-6 { margin-left: calc(calc(100% / 12) * 6); margin-left: var(--grid-column-width-6); }
.nwea__grid__column.nwea__grid__offset-7 { margin-left: calc(calc(100% / 12) * 7); margin-left: var(--grid-column-width-7); }
.nwea__grid__column.nwea__grid__offset-8 { margin-left: calc(calc(100% / 12) * 8); margin-left: var(--grid-column-width-8); }
.nwea__grid__column.nwea__grid__offset-9 { margin-left: calc(calc(100% / 12) * 9); margin-left: var(--grid-column-width-9); }
.nwea__grid__column.nwea__grid__offset-10 { margin-left: calc(calc(100% / 12) * 10); margin-left: var(--grid-column-width-10); }
.nwea__grid__column.nwea__grid__offset-11 { margin-left: calc(calc(100% / 12) * 11); margin-left: var(--grid-column-width-11); }

@media screen and (min-width: 1024px) {
  /* NOTE: variable structure created at the top of the document is replaced here due to how POSTCSS substitutes their values.
           They should model what is started above (in case POSTCSS changes how it works so that initial variable placement values get
           recalculated when they change in subsequent media states and class settings).
  */
  :root {
    --grid-width-fixed: calc(var(--rem-conversion) * 96rem);
    --grid-gutter-width: calc(var(--rem-conversion) * 2.4rem);
  }

  .nwea__grid__container.nwea__grid__fluid {
    margin: 0 calc(var(--rem-conversion) * 3.2rem);
    width: calc(100% - (var(--rem-conversion) * 6.4rem));
    width: calc(var(--grid-width-fluid) - (var(--rem-conversion) * 6.4rem));
  }

  .nwea__grid__container.nwea__grid__fixed {
    width: calc(var(--rem-conversion) * 96rem);
  }

  .nwea__grid__column {
    padding: 0 calc(var(--rem-conversion) * 1.2rem);
  }
}

@media screen and (min-width: 1280px) {
  :root {
    --grid-width-fixed: calc(var(--rem-conversion) * 124.8rem);
  }

  .nwea__grid__container.nwea__grid__fluid {
    margin: 0 calc(var(--rem-conversion) * 1.6rem);
    width: calc(100% - (var(--rem-conversion) * 3.2rem));
    width: calc(var(--grid-width-fluid) - (var(--rem-conversion) * 3.2rem));
  }

  .nwea__grid__container.nwea__grid__fixed {
    width: calc(var(--rem-conversion) * 124.8rem);
  }
}

@media screen and (min-width: 1440px) {
  :root {
    --grid-width-fixed: calc(var(--rem-conversion) * 134.4rem);
  }

  .nwea__grid__container.nwea__grid__fluid {
    margin: 0 calc(var(--rem-conversion) * 4.8rem);
    width: calc(100% - (var(--rem-conversion) * 9.6rem));
    width: calc(var(--grid-width-fluid) - (var(--rem-conversion) * 9.6rem));
  }

  .nwea__grid__container.nwea__grid__fixed {
    width: calc(var(--rem-conversion) * 134.4rem);
  }
}

.nwea__typography__html-default {
  font-size: calc(var(--rem-percentage) * 1%);
}

.nwea__typography__body-default {
  /* this needs to be browser specific because font-smooth is inconsistent in support */
  -webkit-font-smoothing: antialiased;
  font-family: 'Open Sans', sans-serif;
  font-size: calc(var(--rem-conversion) * 1.4rem);
  font-weight: 400;
  letter-spacing: calc(var(--rem-conversion) * 0.025rem);
  line-height: calc(var(--rem-conversion) * 2.4rem);
  margin: 0;
}

/* Body Copy Default */
.nwea__typography__paragraph {
  color: var(--gray-900);
  font-size: calc(var(--rem-conversion) * 1.4rem);
  font-weight: 400;
  letter-spacing: calc(var(--rem-conversion) * 0.026rem);
  line-height: calc(var(--rem-conversion) * 2.4rem);
  margin: 0 0 calc(var(--rem-conversion) * 4rem) 0;
}

/* Body Copy Medium */
.nwea__typography__paragraph-medium {
  color: var(--gray-900);
  font-size: calc(var(--rem-conversion) * 1.6rem);
  font-weight: 400;
  letter-spacing: calc(var(--rem-conversion) * 0.015rem);
  line-height: calc(var(--rem-conversion) * 2.4rem);
  margin: 0 0 calc(var(--rem-conversion) * 4rem) 0;
}

/* Body Copy Large */
.nwea__typography__paragraph-large {
  color: var(--gray-900);
  font-size: calc(var(--rem-conversion) * 2rem);
  font-weight: 300;
  letter-spacing: calc(var(--rem-conversion) * 0.052rem);
  line-height: calc(var(--rem-conversion) * 3.2rem);
  margin: 0 0 calc(var(--rem-conversion) * 4.8rem) 0;
}

/* HEADING 1 */
.nwea__typography__h1 {
  font-size: calc(var(--rem-conversion) * 4.8rem);
  font-weight: 400;
  letter-spacing: calc(var(--rem-conversion) * -0.1rem);
  line-height: calc(var(--rem-conversion) * 7.2rem);
  margin: calc(var(--rem-conversion) * 0.8rem) 0 calc(var(--rem-conversion) * 2.4rem) calc(var(--rem-conversion) * -0.4rem);
}

/* HEADING 2 */
.nwea__typography__h2 {
  font-size: calc(var(--rem-conversion) * 4rem);
  font-weight: 400;
  letter-spacing: calc(var(--rem-conversion) * 0.05rem);
  line-height: calc(var(--rem-conversion) * 5.6rem);
  margin: calc(var(--rem-conversion) * 0.8rem) 0 calc(var(--rem-conversion) * 2.4rem) calc(var(--rem-conversion) * -0.36rem);
}

/* HEADING 3 */
.nwea__typography__h3 {
  font-size: calc(var(--rem-conversion) * 3.2rem);
  font-weight: 600;
  letter-spacing: calc(var(--rem-conversion) * 0.1rem);
  line-height: calc(var(--rem-conversion) * 4.8rem);
  margin: 0 0 calc(var(--rem-conversion) * 2rem)  calc(var(--rem-conversion) * -0.24rem);
}

/* HEADING 4 */
.nwea__typography__h4 {
  font-size: calc(var(--rem-conversion) * 2.8rem);
  font-weight: 600;
  letter-spacing: calc(var(--rem-conversion) * 0.1rem);
  line-height: calc(var(--rem-conversion) * 4.8rem);
  margin: 0 0 calc(var(--rem-conversion) * 2rem)  calc(var(--rem-conversion) * -0.26rem);
}

/* HEADING 5 */
.nwea__typography__h5 {
  font-size: calc(var(--rem-conversion) * 2rem);
  font-weight: 700;
  letter-spacing: calc(var(--rem-conversion) * 0.1rem);
  line-height: calc(var(--rem-conversion) * 2.8rem);
  margin: 0 0 calc(var(--rem-conversion) * 1.6rem)  calc(var(--rem-conversion) * -0.18rem);
}

/* HEADING 6 */
.nwea__typography__h6 {
  font-size: calc(var(--rem-conversion) * 1.2rem);
  font-weight: 700;
  letter-spacing: calc(var(--rem-conversion) * 0.15rem);
  line-height: calc(var(--rem-conversion) * 3.2rem);
  margin: 0 0 0 calc(var(--rem-conversion) * -0.14rem);
  text-transform: uppercase;
}

.nwea__typography__subtitle {
  color: var(--gray-900);
  font-size: calc(var(--rem-conversion) * 1.6rem);
  font-weight: 600;
  line-height: 24px;
}

.nwea__typography__label {
  color: var(--gray-900);
  font-size: calc(var(--rem-conversion) * 1.4rem);
  font-weight: 600;
  line-height: calc(var(--rem-conversion) * 2.4rem);
}

.nwea__typography__caption {
  color: var(--gray-900);
  font-size: calc(var(--rem-conversion) * 1.2rem);
  line-height: calc(var(--rem-conversion) * 1.8rem);
}

.nwea__typography__button {
  color: var(--gray-900);
  font-size: calc(var(--rem-conversion) * 1.4rem);
  font-weight: 600;
  letter-spacing: calc(var(--rem-conversion) * 0.077rem);
  line-height: calc(var(--rem-conversion) * 2rem);
  text-transform: uppercase;
}

/* Icon Font */
@font-face {
  font-family: 'nwea-icons';
  src: url(./15ba80a8cf517372c6f3d12f93b6cc79.eot) format('embedded-opentype'), url(./5e8a3b4c12073aabe3e3eabcfb1651a7.woff) format('woff');
}

.nwea__typography__icon {
  font-family: nwea-icons, sans-serif;
  font-style: normal;
}

.nwea__layout-item__menu {
  /* container behavior */
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;

  /* flexbox item behavior */
  display: -webkit-flex;
  display: flex;
}

.nwea__layout-item__logo {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-basis: 15%;
          flex-basis: 15%;
  -webkit-align-items: center;
          align-items: center;
}

.nwea__layout-item__spacer {
  height: 50%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-basis: 60%;
          flex-basis: 60%;
}

.nwea__layout-item__accountInfo {
  min-width: calc(var(--rem-conversion) * 38.4rem);
  display: -webkit-flex;
  display: flex;
  -webkit-flex-basis: 20%;
          flex-basis: 20%;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: flex-end;
          align-items: flex-end;
  -webkit-justify-content: flex-end;
          justify-content: flex-end;
  padding-right: calc(var(--rem-conversion) * 2.4rem);
}

/* Base button styles are first */

/* Header component button styles below */

/* vvv BASE BUTTON CLASSES vvv */

/* 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. */
.nwea__button__base {
  --ds-button-icon-fill: var(--ds-button-icon-resting);

  -webkit-font-smoothing: antialiased;
  -webkit-align-items: center;
          align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--ds-button-background-resting);
  border-radius: calc(var(--rem-conversion) * 0.4rem);
  border: 0;
  box-shadow: var(--ds-button-elevation-resting);
  color: var(--ds-button-color-resting);
  cursor: pointer;
  display: -webkit-inline-flex;
  display: inline-flex;
  font-family: inherit;
  font-size: calc(var(--rem-conversion) * 1.4rem);
  font-weight: 500;
  height: var(--ds-button-height);
  -webkit-justify-content: center;
          justify-content: center;
  letter-spacing: calc(var(--rem-conversion) * 0.163rem);
  line-height: calc(var(--rem-conversion) * 1.6rem);
  margin: 0;
  min-width: calc(var(--rem-conversion) * 4rem);
  outline: none;
  padding: 0;
  position: relative;
  transition: all 0.25s, z-index 0.25s step-end;
  vertical-align: middle;
  z-index: 0;
}

/* This overrides the default presentation of Firefox to show a dashed focus indicator on inner text */
.nwea__button__base::-moz-focus-inner {
  border: 0;
}

.nwea__button__base::after {
  background-color: var(--ds-button-highlight-resting);
  border-radius: 0 0 calc(var(--rem-conversion) * 0.4rem) calc(var(--rem-conversion) * 0.4rem);
  border: 0;
  bottom: 0;
  content: ' ';
  display: block;
  height: calc(var(--rem-conversion) * 0.4rem);
  outline: none;
  pointer-events: none;
  position: absolute;
  transition: 0.15s;
  width: 0;
  z-index: -1;
}

/* Safari 11+ implementation to adjust for the absolute position alignment mis-calculation. */
@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance:none) and (stroke-color:transparent) {
    .nwea__button__base::after {
      left: calc(var(--rem-conversion) * 4rem);
    }

    .nwea__button__base:focus::after {
      margin-left: calc(var(--rem-conversion) * -4rem);
      transition: 0.15s;
    }
  }
}

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

.nwea__button__base:focus {
  --ds-button-icon-fill: var(--ds-button-icon-focus);

  background-color: var(--ds-button-background-focus);
  box-shadow: var(--ds-button-elevation-focus);
  color: var(--ds-button-color-focus);
  transition: 0.25s;
  z-index: 15;
}

.nwea__button__base:hover {
  --ds-button-icon-fill: var(--ds-button-icon-hover);

  background-color: var(--ds-button-background-hover);
  box-shadow: var(--ds-button-elevation-hover);
  color: var(--ds-button-color-hover);
  transition: 0.25s;
  z-index: 15;
}

.nwea__button__base:disabled,
.nwea__button__base:disabled:hover {
  --ds-button-icon-fill: var(--gray-550);

  background-color: var(--gray-150);
  box-shadow: none;
  color: var(--gray-550);
  cursor: not-allowed;
}

.nwea__button__base:not([disabled]):active {
  --ds-button-icon-fill: var(--ds-button-icon-active);

  -webkit-tap-highlight-color: var(--ds-button-background-active);
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-name: nwea__button__push;
          animation-name: nwea__button__push;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  background-color: var(--ds-button-background-active);
  box-shadow: var(--ds-button-elevation-active);
  color: var(--ds-button-color-active);
}

.nwea__button__base:focus:hover {
  --ds-button-icon-fill: var(--ds-button-icon-hover);

  background-color: var(--ds-button-background-hover);
  box-shadow: var(--ds-button-elevation-hover);
  color: var(--ds-button-color-hover);
  transition: 0.25s;
  z-index: 15;
}

.nwea__button__iconOnly:disabled,
.nwea__button__iconOnly:disabled:hover {
  --ds-button-icon-fill: var(--gray-450);

  background-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
}

.nwea__button__base:focus::after {
  background-color: var(--ds-button-highlight-focus);
  width: 100%;
}

.nwea__button__base:not([disabled]):active::after,
.nwea__button__base:focus:active::after {
  background-color: var(--ds-button-highlight-default);
  transition: 0.15s;
  width: 0;
}

.nwea__button__base:focus:hover::after {
  background-color: transparent;
}

/* Elevation base pseudo states by fill type */

/* We recognize the duplication in these variable states.
The duplication is here intentionally for future iterations */
.nwea__button__solid {
  --ds-button-elevation-active: var(--elevation-01);
  --ds-button-elevation-focus: var(--elevation-04);
  --ds-button-elevation-hover: var(--elevation-02);
  --ds-button-elevation-resting: var(--elevation-00);
}

.nwea__button__flat {
  --ds-button-elevation-active: var(--elevation-01);
  --ds-button-elevation-focus: var(--elevation-04);
  --ds-button-elevation-hover: var(--elevation-00);
  --ds-button-elevation-resting: var(--elevation-00);
}

.nwea__button__outline {
  --ds-button-elevation-active: var(--elevation-01);
  --ds-button-elevation-focus: var(--elevation-04);
  --ds-button-elevation-hover: var(--elevation-00);
  --ds-button-elevation-resting: var(--elevation-00);
}

/* Outline base class definitions */

.nwea__button__outline > * {
  margin-top: calc(var(--rem-conversion) * -0.1rem);
}

.nwea__button__outline:not([disabled]) {
  border: calc(var(--rem-conversion) * 0.1rem) solid var(--ds-button-border-resting);
}

.nwea__button__outline:focus {
  border: calc(var(--rem-conversion) * 0.1rem) solid var(--ds-button-border-focus);
}

.nwea__button__outline:focus::after {
  background-color: var(--ds-button-highlight-focus);
  bottom: calc(var(--rem-conversion) * -0.2rem);
  width: calc(100% + calc(var(--rem-conversion) * 0.4rem));
}

/* TOOLTIP base */
.nwea__button__tooltipBase[aria-label] {
  position: relative;
}

.nwea__button__tooltipBase[aria-label]::before {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* support for IE transitions */
  background-color: var(--gray-800);
  border-radius: calc(var(--rem-conversion) * 0.4rem);
  bottom: var(--ds-button-tooltip-bottom);
  color: white;
  content: attr(aria-label);
  filter: progid: dximagetransform.microsoft.alpha(Opacity=0);
  font-size: calc(var(--rem-conversion) * 1.4rem);
  left: var(--ds-button-tooltip-left);
  opacity: 0;
  padding: calc(var(--rem-conversion) * 0.4rem) calc(var(--rem-conversion) * 0.8rem);
  pointer-events: none;
  position: absolute;
  right: var(--ds-button-tooltip-right);
  text-align: center;
  text-transform: none;
  top: var(--ds-button-tooltip-top);
  transition: all 0.25s linear;
  visibility: hidden;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

.nwea__button__tooltipBase[aria-label]:hover::before,
.nwea__button__tooltipBase[aria-label]:focus::before {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: dximagetransform.microsoft.alpha(Opacity=100);
  opacity: 1;
  visibility: visible;
}

/* TOOLTIP classes */
.nwea__button__tooltipTopLeftAlign {
  --ds-button-tooltip-bottom: calc(100% + calc(var(--rem-conversion) * 0.8rem));
  --ds-button-tooltip-left: 0;
  --ds-button-tooltip-right: initial;
  --ds-button-tooltip-top: initial;
}

.nwea__button__tooltipTopCenterAlign {
  --ds-button-tooltip-bottom: calc(100% + calc(var(--rem-conversion) * 0.8rem));
  --ds-button-tooltip-top: initial;
}

.nwea__button__tooltipTopRightAlign {
  --ds-button-tooltip-bottom: calc(100% + calc(var(--rem-conversion) * 0.8rem));
  --ds-button-tooltip-left: initial;
  --ds-button-tooltip-right: 0;
  --ds-button-tooltip-top: initial;
}

.nwea__button__tooltipBottomLeftAlign {
  --ds-button-tooltip-bottom: initial;
  --ds-button-tooltip-left: 0;
  --ds-button-tooltip-right: initial;
  --ds-button-tooltip-top: calc(100% + calc(var(--rem-conversion) * 0.8rem));
}

.nwea__button__tooltipBottomCenterAlign {
  --ds-button-tooltip-bottom: initial;
  --ds-button-tooltip-top: calc(100% + calc(var(--rem-conversion) * 0.8rem));
}

.nwea__button__tooltipBottomRightAlign {
  --ds-button-tooltip-bottom: initial;
  --ds-button-tooltip-left: initial;
  --ds-button-tooltip-right: 0;
  --ds-button-tooltip-top: calc(100% + calc(var(--rem-conversion) * 0.8rem));
}

/* SIZE Button VARIABLE Definitions */
.nwea__button__aaa {
  --ds-button-height: calc(var(--rem-conversion) * 4.4rem);
  --ds-button-text-transform: uppercase;
}

.nwea__button__large {
  --ds-button-height: calc(var(--rem-conversion) * 4rem);
  --ds-button-text-transform: uppercase;
}

.nwea__button__small {
  --ds-button-height: calc(var(--rem-conversion) * 3.2rem);
  --ds-button-text-transform: none;
}

/* Alignments to override chrome/edge visual focus interaction
Provides the base for top and bottom on the children to allow the Chrome/edge
visual focus override */
.nwea__button__base > * {
  outline: none;
  padding-top: calc((var(--ds-button-height) - (var(--rem-conversion) * 2.4rem)) / 2);
  padding-bottom: calc((var(--ds-button-height) - (var(--rem-conversion) * 2.4rem)) / 2);
}

.nwea__button__base > span { /* padding has to be based on size variables */
  display: -webkit-flex;
  display: flex;
  height: calc(var(--rem-conversion) * 2.4rem);
  -webkit-align-items: center;
          align-items: center;
  text-transform: var(--ds-button-text-transform);
}

/* ICON Classes  */
.nwea__button__iconFill {
  fill: var(--ds-button-icon-fill);
  padding: 0;
}

.nwea__button__iconSize {
  width: calc(var(--rem-conversion) * 2.4rem);
}

.nwea__button__iconFontBase {
  color: var(--ds-button-icon-fill);
  height: calc(var(--rem-conversion) * 2.4rem);
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
          align-items: center;
  font-size: calc(var(--rem-conversion) * 2.4rem);
}

/* Styling to target children for chrome/firefox fix for text only, left icon
with text, right icon with text and icon only button */
.nwea__button__iconLeft > svg,
.nwea__button__iconLeft > .nwea__button__iconFontBase {
  margin-left: 0;
  padding-left: calc(var(--rem-conversion) * 1.2rem);
  padding-right: calc(var(--rem-conversion) * 0.4rem);
}

.nwea__button__iconLeft > span {
  padding-right: calc(var(--rem-conversion) * 1.6rem);
}

.nwea__button__iconRight > svg,
.nwea__button__iconRight > .nwea__button__iconFontBase {
  margin-right: 0;
  padding-left: calc(var(--rem-conversion) * 0.4rem);
  padding-right: calc(var(--rem-conversion) * 1.2rem);
}

.nwea__button__iconRight > span {
  padding-left: calc(var(--rem-conversion) * 1.6rem);
}

.nwea__button__base > span:only-child {
  padding-left: calc(var(--rem-conversion) * 1.6rem);
  padding-right: calc(var(--rem-conversion) * 1.6rem);
}

.nwea__button__aaa.nwea__button__iconOnly > svg,
.nwea__button__aaa.nwea__button__iconOnly > .nwea__button__iconFontBase {
  padding-left: calc(var(--rem-conversion) * 1rem);
  padding-right: calc(var(--rem-conversion) * 1rem);
}

.nwea__button__large.nwea__button__iconOnly > svg,
.nwea__button__large.nwea__button__iconOnly > .nwea__button__iconFontBase {
  padding-left: calc(var(--rem-conversion) * 0.8rem);
  padding-right: calc(var(--rem-conversion) * 0.8rem);
}

/* Outline button overrides to move the chrome/edge children to overlap border */

.nwea__button__outline > span:only-child {
  padding-left: calc(var(--rem-conversion) * 1.8rem);
  padding-right: calc(var(--rem-conversion) * 1.8rem);
  margin-left: calc(var(--rem-conversion) * -0.2rem);
  margin-right: calc(var(--rem-conversion) * -0.2rem);
}

.nwea__button__outline.nwea__button__iconLeft > svg {
  padding-left: calc(var(--rem-conversion) * 1.4rem);
  margin-left: calc(var(--rem-conversion) * -0.2rem);
  position: relative;
}

.nwea__button__outline.nwea__button__iconLeft > span {
  padding-right: calc(var(--rem-conversion) * 1.8rem);
  position: relative;
  margin-right: calc(var(--rem-conversion) * -0.2rem);
}

.nwea__button__outline.nwea__button__iconRight > svg {
  padding-right: calc(var(--rem-conversion) * 1.4rem);
  position: relative;
  margin-right: calc(var(--rem-conversion) * -0.2rem);
}

.nwea__button__outline.nwea__button__iconRight > span {
  padding-left: calc(var(--rem-conversion) * 1.8rem);
  position: relative;
  margin-left: calc(var(--rem-conversion) * -0.2rem);
}

.nwea__button__aaa.nwea__button__outline.nwea__button__iconOnly > svg {
  padding-left: calc(var(--rem-conversion) * 1rem);
  position: relative;
  margin-left: calc(var(--rem-conversion) * -0.2rem);
  padding-right: calc(var(--rem-conversion) * 1rem);
  margin-right: calc(var(--rem-conversion) * -0.2rem);
}

.nwea__button__large.nwea__button__outline.nwea__button__iconOnly > svg {
  padding-left: calc(var(--rem-conversion) * 0.8rem);
  position: relative;
  margin-left: calc(var(--rem-conversion) * -0.2rem);
  padding-right: calc(var(--rem-conversion) * 0.8rem);
  margin-right: calc(var(--rem-conversion) * -0.2rem);
}

/* ^^^ END BASE BUTTON CLASS DEFINITIONS ^^^ */

/* *** ELEVATED class VARIABLE, Solid and Flat *** */
.nwea__button__elevated {
  --ds-button-elevation-resting: var(--elevation-01);
}

/* *** SOLID Button Color VARIABLE Definitions *** */
.nwea__button__blue.nwea__button__solid {
  --ds-button-background-active: var(--blue-200);
  --ds-button-background-focus: white;
  --ds-button-background-hover: var(--blue-400);
  --ds-button-background-resting: var(--blue-500);
  --ds-button-color-active: black;
  --ds-button-color-focus: var(--blue-700);
  --ds-button-color-hover: white;
  --ds-button-color-resting: white;
  --ds-button-highlight-focus: var(--blue-800);
  --ds-button-highlight-resting: white;
  --ds-button-icon-active: black;
  --ds-button-icon-focus: var(--blue-700);
  --ds-button-icon-hover: white;
  --ds-button-icon-resting: white;
}

.nwea__button__green.nwea__button__solid {
  --ds-button-background-active: var(--green-200);
  --ds-button-background-focus: white;
  --ds-button-background-hover: var(--green-400);
  --ds-button-background-resting: var(--green-500);
  --ds-button-color-active: black;
  --ds-button-color-focus: var(--green-700);
  --ds-button-color-hover: black;
  --ds-button-color-resting: black;
  --ds-button-highlight-focus: var(--green-800);
  --ds-button-highlight-resting: white;
  --ds-button-icon-active: black;
  --ds-button-icon-focus: var(--green-700);
  --ds-button-icon-hover: black;
  --ds-button-icon-resting: black;
}

/* no lime */

.nwea__button__orange.nwea__button__solid {
  --ds-button-background-active: var(--orange-200);
  --ds-button-background-focus: white;
  --ds-button-background-hover: var(--orange-400);
  --ds-button-background-resting: var(--orange-500);
  --ds-button-color-active: black;
  --ds-button-color-focus: var(--orange-700);
  --ds-button-color-hover: black;
  --ds-button-color-resting: black;
  --ds-button-highlight-focus: var(--orange-800);
  --ds-button-highlight-resting: white;
  --ds-button-icon-active: black;
  --ds-button-icon-focus: var(--orange-700);
  --ds-button-icon-hover: black;
  --ds-button-icon-resting: black;
}

.nwea__button__pink.nwea__button__solid {
  --ds-button-background-active: var(--pink-200);
  --ds-button-background-focus: white;
  --ds-button-background-hover: var(--pink-400);
  --ds-button-background-resting: var(--pink-500);
  --ds-button-color-active: black;
  --ds-button-color-focus: var(--pink-700);
  --ds-button-color-hover: white;
  --ds-button-color-resting: white;
  --ds-button-highlight-focus: var(--pink-800);
  --ds-button-highlight-resting: white;
  --ds-button-icon-active: black;
  --ds-button-icon-focus: var(--pink-700);
  --ds-button-icon-hover: white;
  --ds-button-icon-resting: white;
}

.nwea__button__purple.nwea__button__solid {
  --ds-button-background-active: var(--purple-200);
  --ds-button-background-focus: white;
  --ds-button-background-hover: var(--purple-400);
  --ds-button-background-resting: var(--purple-500);
  --ds-button-color-active: black;
  --ds-button-color-focus: var(--purple-700);
  --ds-button-color-hover: white;
  --ds-button-color-resting: white;
  --ds-button-highlight-focus: var(--purple-800);
  --ds-button-highlight-resting: white;
  --ds-button-icon-active: black;
  --ds-button-icon-focus: var(--purple-700);
  --ds-button-icon-hover: white;
  --ds-button-icon-resting: white;
}

.nwea__button__red.nwea__button__solid {
  --ds-button-background-active: var(--red-200);
  --ds-button-background-focus: white;
  --ds-button-background-hover: var(--red-400);
  --ds-button-background-resting: var(--red-500);
  --ds-button-color-active: black;
  --ds-button-color-focus: var(--red-700);
  --ds-button-color-hover: white;
  --ds-button-color-resting: white;
  --ds-button-highlight-focus: var(--red-800);
  --ds-button-highlight-resting: white;
  --ds-button-icon-active: black;
  --ds-button-icon-focus: var(--red-700);
  --ds-button-icon-hover: white;
  --ds-button-icon-resting: white;
}

.nwea__button__teal.nwea__button__solid {
  --ds-button-background-active: var(--teal-200);
  --ds-button-background-focus: white;
  --ds-button-background-hover: var(--teal-400);
  --ds-button-background-resting: var(--teal-500);
  --ds-button-color-active: black;
  --ds-button-color-focus: var(--teal-700);
  --ds-button-color-hover: black;
  --ds-button-color-resting: black;
  --ds-button-highlight-focus: var(--teal-800);
  --ds-button-highlight-resting: white;
  --ds-button-icon-active: black;
  --ds-button-icon-focus: var(--teal-700);
  --ds-button-icon-hover: black;
  --ds-button-icon-resting: black;
}

/* no yellow */

/* *** OUTLINE Buttons Color VARIABLE Definitions *** */
.nwea__button__blue.nwea__button__outline {
  --ds-button-background-active: var(--blue-200);
  --ds-button-background-focus: white;
  --ds-button-background-hover: var(--blue-100);
  --ds-button-background-resting: white;
  --ds-button-border-active: white;
  --ds-button-border-focus: white;
  --ds-button-border-hover: var(--blue-900);
  --ds-button-border-resting: var(--blue-700);
  --ds-button-color-active: black;
  --ds-button-color-focus: var(--blue-700);
  --ds-button-color-hover: black;
  --ds-button-color-resting: var(--blue-700);
  --ds-button-highlight-focus: var(--blue-800);
  --ds-button-highlight-resting: white;
  --ds-button-icon-active: black;
  --ds-button-icon-focus: var(--blue-700);
  --ds-button-icon-hover: black;
  --ds-button-icon-resting: var(--blue-700);
}

.nwea__button__green.nwea__button__outline {
  --ds-button-background-active: var(--green-200);
  --ds-button-background-focus: white;
  --ds-button-background-hover: var(--green-100);
  --ds-button-background-resting: white;
  --ds-button-border-active: transparent;
  --ds-button-border-focus: transparent;
  --ds-button-border-hover: var(--green-900);
  --ds-button-border-resting: var(--green-700);
  --ds-button-color-active: black;
  --ds-button-color-focus: var(--green-700);
  --ds-button-color-hover: black;
  --ds-button-color-resting: var(--green-700);
  --ds-button-highlight-focus: var(--green-800);
  --ds-button-highlight-resting: white;
  --ds-button-icon-active: black;
  --ds-button-icon-focus: var(--green-700);
  --ds-button-icon-hover: black;
  --ds-button-icon-resting: var(--green-700);
}

/* no lime */

/* no orange */

.nwea__button__orange.nwea__button__outline {
  --ds-button-background-active: var(--orange-200);
  --ds-button-background-focus: white;
  --ds-button-background-hover: var(--orange-100);
  --ds-button-background-resting: white;
  --ds-button-border-active: transparent;
  --ds-button-border-focus: transparent;
  --ds-button-border-hover: var(--orange-900);
  --ds-button-border-resting: var(--orange-700);
  --ds-button-color-active: black;
  --ds-button-color-focus: var(--orange-700);
  --ds-button-color-hover: black;
  --ds-button-color-resting: var(--orange-700);
  --ds-button-highlight-focus: var(--orange-800);
  --ds-button-highlight-resting: white;
  --ds-button-icon-active: black;
  --ds-button-icon-focus: var(--orange-700);
  --ds-button-icon-hover: black;
  --ds-button-icon-resting: var(--orange-700);
}

.nwea__button__pink.nwea__button__outline {
  --ds-button-background-active: var(--pink-200);
  --ds-button-background-focus: white;
  --ds-button-background-hover: var(--pink-100);
  --ds-button-background-resting: white;
  --ds-button-border-active: white;
  --ds-button-border-focus: white;
  --ds-button-border-hover: var(--pink-900);
  --ds-button-border-resting: var(--pink-700);
  --ds-button-color-active: black;
  --ds-button-color-focus: var(--pink-700);
  --ds-button-color-hover: black;
  --ds-button-color-resting: var(--pink-700);
  --ds-button-highlight-focus: var(--pink-800);
  --ds-button-highlight-resting: white;
  --ds-button-icon-active: black;
  --ds-button-icon-focus: var(--pink-700);
  --ds-button-icon-hover: black;
  --ds-button-icon-resting: var(--pink-700);
}

.nwea__button__purple.nwea__button__outline {
  --ds-button-background-active: var(--purple-200);
  --ds-button-background-focus: white;
  --ds-button-background-hover: var(--purple-100);
  --ds-button-background-resting: white;
  --ds-button-border-active: white;
  --ds-button-border-focus: white;
  --ds-button-border-hover: var(--purple-900);
  --ds-button-border-resting: var(--purple-700);
  --ds-button-color-active: black;
  --ds-button-color-focus: var(--purple-700);
  --ds-button-color-hover: black;
  --ds-button-color-resting: var(--purple-700);
  --ds-button-highlight-focus: var(--purple-800);
  --ds-button-highlight-resting: white;
  --ds-button-icon-active: black;
  --ds-button-icon-focus: var(--purple-700);
  --ds-button-icon-hover: black;
  --ds-button-icon-resting: var(--purple-700);
}

.nwea__button__red.nwea__button__outline {
  --ds-button-background-active: var(--red-200);
  --ds-button-background-focus: white;
  --ds-button-background-hover: var(--red-100);
  --ds-button-background-resting: white;
  --ds-button-border-active: white;
  --ds-button-border-focus: white;
  --ds-button-border-hover: var(--red-900);
  --ds-button-border-resting: var(--red-700);
  --ds-button-color-active: black;
  --ds-button-color-focus: var(--red-700);
  --ds-button-color-hover: black;
  --ds-button-color-resting: var(--red-700);
  --ds-button-highlight-focus: var(--red-800);
  --ds-button-highlight-resting: white;
  --ds-button-icon-active: black;
  --ds-button-icon-focus: var(--red-700);
  --ds-button-icon-hover: black;
  --ds-button-icon-resting: var(--red-700);
}

.nwea__button__teal.nwea__button__outline {
  --ds-button-background-active: var(--teal-200);
  --ds-button-background-focus: white;
  --ds-button-background-hover: var(--teal-100);
  --ds-button-background-resting: white;
  --ds-button-border-active: transparent;
  --ds-button-border-focus: transparent;
  --ds-button-border-hover: var(--teal-900);
  --ds-button-border-resting: var(--teal-700);
  --ds-button-color-active: black;
  --ds-button-color-focus: var(--teal-700);
  --ds-button-color-hover: black;
  --ds-button-color-resting: var(--teal-700);
  --ds-button-highlight-focus: var(--teal-800);
  --ds-button-highlight-resting: white;
  --ds-button-icon-active: black;
  --ds-button-icon-focus: var(--teal-700);
  --ds-button-icon-hover: black;
  --ds-button-icon-resting: var(--teal-700);
}

/* no yellow */

/* *** FLAT Buttons Color VARIABLE Definitions *** */
.nwea__button__blue.nwea__button__flat {
  --ds-button-background-active: var(--blue-200);
  --ds-button-background-focus: white;
  --ds-button-background-hover: var(--blue-100);
  --ds-button-background-resting: transparent;
  --ds-button-color-active: black;
  --ds-button-color-focus: var(--blue-700);
  --ds-button-color-hover: black;
  --ds-button-color-resting: var(--blue-700);
  --ds-button-highlight-focus: var(--blue-800);
  --ds-button-highlight-resting: white;
  --ds-button-icon-active: black;
  --ds-button-icon-focus: var(--blue-700);
  --ds-button-icon-hover: black;
  --ds-button-icon-resting: var(--blue-700);
}

.nwea__button__green.nwea__button__flat {
  --ds-button-background-active: var(--green-200);
  --ds-button-background-focus: white;
  --ds-button-background-hover: var(--green-100);
  --ds-button-background-resting: transparent;
  --ds-button-color-active: black;
  --ds-button-color-focus: var(--green-700);
  --ds-button-color-hover: black;
  --ds-button-color-resting: var(--green-700);
  --ds-button-highlight-focus: var(--green-800);
  --ds-button-highlight-resting: white;
  --ds-button-icon-active: black;
  --ds-button-icon-focus: var(--green-700);
  --ds-button-icon-hover: black;
  --ds-button-icon-resting: var(--green-700);
}

/* no lime */

.nwea__button__orange.nwea__button__flat {
  --ds-button-background-active: var(--orange-200);
  --ds-button-background-focus: white;
  --ds-button-background-hover: var(--orange-100);
  --ds-button-background-resting: transparent;
  --ds-button-color-active: black;
  --ds-button-color-focus: var(--orange-700);
  --ds-button-color-hover: black;
  --ds-button-color-resting: var(--orange-700);
  --ds-button-highlight-focus: var(--orange-800);
  --ds-button-highlight-resting: white;
  --ds-button-icon-active: black;
  --ds-button-icon-focus: var(--orange-700);
  --ds-button-icon-hover: black;
  --ds-button-icon-resting: var(--orange-700);
}

.nwea__button__pink.nwea__button__flat {
  --ds-button-background-active: var(--pink-200);
  --ds-button-background-focus: white;
  --ds-button-background-hover: var(--pink-100);
  --ds-button-background-resting: transparent;
  --ds-button-color-active: black;
  --ds-button-color-focus: var(--pink-700);
  --ds-button-color-hover: black;
  --ds-button-color-resting: var(--pink-700);
  --ds-button-highlight-focus: var(--pink-800);
  --ds-button-highlight-resting: white;
  --ds-button-icon-active: black;
  --ds-button-icon-focus: var(--pink-700);
  --ds-button-icon-hover: black;
  --ds-button-icon-resting: var(--pink-700);
}

.nwea__button__purple.nwea__button__flat {
  --ds-button-background-active: var(--purple-200);
  --ds-button-background-focus: white;
  --ds-button-background-hover: var(--purple-100);
  --ds-button-background-resting: transparent;
  --ds-button-color-active: black;
  --ds-button-color-focus: var(--purple-700);
  --ds-button-color-hover: black;
  --ds-button-color-resting: var(--purple-700);
  --ds-button-highlight-focus: var(--purple-800);
  --ds-button-highlight-resting: white;
  --ds-button-icon-active: black;
  --ds-button-icon-focus: var(--purple-700);
  --ds-button-icon-hover: black;
  --ds-button-icon-resting: var(--purple-700);
}

.nwea__button__red.nwea__button__flat {
  --ds-button-background-active: var(--red-200);
  --ds-button-background-focus: white;
  --ds-button-background-hover: var(--red-100);
  --ds-button-background-resting: transparent;
  --ds-button-color-active: black;
  --ds-button-color-focus: var(--red-900);
  --ds-button-color-hover: black;
  --ds-button-color-resting: var(--red-700);
  --ds-button-highlight-focus: var(--red-700);
  --ds-button-highlight-resting: white;
  --ds-button-icon-active: black;
  --ds-button-icon-focus: var(--red-700);
  --ds-button-icon-hover: black;
  --ds-button-icon-resting: var(--red-700);
}

.nwea__button__teal.nwea__button__flat {
  --ds-button-background-active: var(--teal-200);
  --ds-button-background-focus: white;
  --ds-button-background-hover: var(--teal-100);
  --ds-button-background-resting: transparent;
  --ds-button-color-active: black;
  --ds-button-color-focus: var(--teal-700);
  --ds-button-color-hover: black;
  --ds-button-color-resting: var(--teal-700);
  --ds-button-highlight-focus: var(--teal-800);
  --ds-button-highlight-resting: white;
  --ds-button-icon-active: black;
  --ds-button-icon-focus: var(--teal-700);
  --ds-button-icon-hover: black;
  --ds-button-icon-resting: var(--teal-700);
}

/* no yellow */

/* --- HEADER COMPONENT CLASSES */

/* Main Navigation Open and Close Styles */
.nwea__button__mainNavMenuToggle {
  background-color: transparent;
  border-radius: calc(var(--rem-conversion) * 0.125rem);
  border: 0;
  box-sizing: border-box;
  color: var(--gray-700);
  height: calc(var(--rem-conversion) * 4rem);
  margin: calc(var(--rem-conversion) * 1rem);
  padding: 0 0 0 0;
  text-align: center;
  width: calc(var(--rem-conversion) * 4rem);
  z-index: calc(var(--click-catcher-fullscreen-z-index) + 1);
}

.nwea__button__mainNavMenuToggle:hover {
  background-color: var(--gray-200);
  cursor: pointer;
}

.nwea__button__mainNavMenuToggle:active {
  cursor: pointer;
}

.nwea__button__mainNavMenuToggle:disabled {
  display: none;
}

.nwea__button__mainNavMenuToggle:focus {
  border: none;
  box-shadow: 0 0 calc(var(--rem-conversion) * 0.6rem)  var(--blue-500);
  cursor: pointer;
  outline: calc(var(--rem-conversion) * 0.1rem) solid var(--blue-200);
}

.nwea__button__mainNavMenuToggleDisabled {
  cursor: not-allowed;
  opacity: 0.4;
}

/* Header Icon Styles */
.nwea__button__mainNavIcon {
  height: calc(var(--rem-conversion) * 1.8rem);
  width: calc(var(--rem-conversion) * 2.4rem);
}

.nwea__button__mainNavIconFill {
  fill: var(--gray-800);
}

.nwea__layout__pageHeader {
  -webkit-align-items: center;
          align-items: center;
  border-bottom: calc(var(--rem-conversion) * 0.1rem) var(--gray-300) solid;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
          flex-direction: row;
  height: calc(var(--rem-conversion) * 7.2rem);
  -webkit-justify-content: flex-start;
          justify-content: flex-start;
  position: relative;
  width: 100%;
  z-index: 100;
}

.nwea__logo__nweaHeaderLogo {
  height: calc(var(--rem-conversion) * 5.1rem);
}

.nwea__logo__nweaHeaderLogoFill {
  fill: var(--gray-700);
}

.nwea__animate__menuAnimateContainer {
  /* It's expected to float over by sliding in from the right. */
  position: absolute;
}

.nwea__animate__mainMenuHide {
  position: relative;
  top: calc(var(--rem-conversion) * 3.7rem);
  left: calc(var(--rem-conversion) * -30rem);
  visibility: hidden;
  transition: 0.25s ease-in;
}

.nwea__animate__mainMenuShow {
  visibility: visible;
  left: calc(var(--rem-conversion) * -6rem);
  transition: 0.4s ease-out;
}

.nwea__link__mainNavItem {
  font-size: calc(var(--rem-conversion) * 1.4rem);
  color: black;
  cursor: pointer;
  display: block;
  text-decoration: none;
  padding:
    calc(var(--rem-conversion) * 1.2rem) 0
    calc(var(--rem-conversion) * 1.2rem)
    var(--nav-link-base-margin-distance);
  line-height: calc(var(--rem-conversion) * 1.6rem);
}

.nwea__link__mainNavItem:hover {
  background-color: var(--gray-100);
  color: black;
  text-decoration: none;
}

.nwea__link__mainNavItem:active {
  background-color: var(--yellow-500);
  color: black;
  text-decoration: none;
}

.nwea__link__mainNavItem:focus {
  cursor: pointer;
  border: none;
  outline: 1px solid var(--blue-200);
  box-shadow: 0 0 calc(var(--rem-conversion) * 0.6rem) var(--blue-500);
  padding-right: 0;
  padding-left: calc(var(--rem-conversion) * 1.2rem);
  margin-left: calc(var(--rem-conversion) * 1.2rem);
  margin-right: calc(var(--rem-conversion) * 1.2rem);
  color: black;
  text-decoration: none;
}

.nwea__link__mainNavItemSub {
  border-left:
    calc(var(--rem-conversion) * 0.1rem)
    var(--gray-200)
    solid;
  color: black;
  cursor: pointer;
  display: block;
  font-size: calc(var(--rem-conversion) * 1.4rem);
  padding:
    calc(var(--rem-conversion) * 1.2rem)
    calc(var(--rem-conversion) * 2.4rem)
    calc(var(--rem-conversion) * 1.2rem)
    calc(var(--rem-conversion) * 1.6rem);
  text-decoration: none;
  line-height: calc(var(--rem-conversion) * 1.6rem);
}

.nwea__link__mainNavItemSub:hover {
  color: black;
  text-decoration: none;
  background-color: var(--nav-link-hover-background-color);
}

.nwea__link__mainNavItemSubActive {
  background-color: var(--yellow-400);
}

.nwea__link__mainNavItemSub:active {
  background-color: var(--nav-link-active-background-color);
  color: black;
  text-decoration: none;
}

.nwea__link__mainNavItemSub:focus {
  cursor: pointer;
  border: none;
  outline: 1px solid var(--blue-200);
  box-shadow: 0 0 calc(var(--rem-conversion) * 0.6rem) var(--blue-500);
  padding-right: 0;
  margin-right: calc(var(--rem-conversion) * 2.4rem);
  color: black;
  text-decoration: none;
}

.nwea__link__accountInfoMenuItem {
  color: var(--gray-600);
  text-decoration: none;
}

.nwea__link__accountInfoMenuItem:link {
  color: var(--gray-600);
}

.nwea__link__accountInfoMenuItem:visited {
  color: var(--gray-600);
}

.nwea__link__accountInfoMenuItem:hover {
  color: var(--black);
  text-decoration: underline;
}

.nwea__link__accountInfoMenuItem:active {
  color: var(--gray-600);
}

.nwea__link__accountInfoMenuItem:focus {
  outline: 1px solid var(--blue-200);
  box-shadow: 0 0 calc(var(--rem-conversion) * 0.6rem) var(--blue-500);
}

:root {
  --nav-link-base-margin-distance: calc(var(--rem-conversion) * 2.4rem);
}

.nwea__menu__mainNav {
  /* fixing width so that animation slide works correctly */
  width: calc(var(--rem-conversion) * 24rem);
  box-shadow: calc(var(--rem-conversion) * 0.4rem) calc(var(--rem-conversion) * 0.4rem) calc(var(--rem-conversion) * 0.8rem) rgba(0, 0, 0, 0.25);
  padding-bottom: calc(var(--rem-conversion) * 1.6rem);
  padding-top: calc(var(--rem-conversion) * 0.8rem);

  /* Fix transparency issue by specifying an opaque background color. */
  background-color: #fff;
  z-index: calc(var(--click-catcher-fullscreen-z-index) + 1);
}

.nwea__menu__mainNavSubmenu {
  display: block;
}

.nwea__menu__mainNavSubmenu:hover {
  display: block;
}

.nwea__menu__mainNavSubmenu:active {
  display: block;
}

.nwea__menu__accountInfo {
  display: inline;
}

/**
 * .mainNav menuItem styles are in link.css because of treatment of rollover and
 * need for clickable link action area.
 */

.nwea__menu-item__accountInfo {
  color: var(--gray-600);
  text-decoration: none;
  display: inline;
  font-size: calc(var(--rem-conversion) * 1.2rem);
}

/**
 * We are using margin for the padding for the left element.
 */
.nwea__menu-item__accountInfo:nth-child(n + 2) {
  border-left: calc(var(--rem-conversion) * 0.1rem) solid var(--gray-600);
  padding-left: calc(var(--rem-conversion) * 0.8rem);
  margin-left: calc(var(--rem-conversion) * 0.8rem);
}

.nwea__menu-item__mainNavSub {
  padding-left: var(--nav-link-base-margin-distance);
}

.nwea__menu-item__mainNavSub:hover {
  background-color: var(--gray-100);
}

.nwea__menu-item__mainNavSub:active {
  background-color: var(--yellow-500);
}

.nwea__menu-item__userAccountInfoSub {
  display: inline;
}

.nwea__menu-item-label__mainNavItemLabel {
  font-size: calc(var(--rem-conversion) * 1.4rem);
  font-weight: 700;
  padding: calc(var(--rem-conversion) * 0.8rem) calc(var(--rem-conversion) * 0.8rem) calc(var(--rem-conversion) * 0.8rem) var(--nav-link-base-margin-distance);
  display: block;
}

.nwea__text__headerUserAccount {
  font-size: calc(var(--rem-conversion) * 1.2rem);
  line-height: calc(var(--rem-conversion) * 1.2rem);
  color: black;
  padding: calc(var(--rem-conversion) * 1.3rem) 0 calc(var(--rem-conversion) * 0.8rem) 0;
}

.nwea__text__userNameStyle {
  font-weight: 700;
}

.nwea__text__headerLinks {
  text-align: right;
  font-size: calc(var(--rem-conversion) * 1.2rem);
  line-height: calc(var(--rem-conversion) * 1.2rem);
  padding: calc(var(--rem-conversion) * 0.8rem) 0 calc(var(--rem-conversion) * 1rem) 0;
}

/* Click Catcher */
:root {
  --click-catcher-fullscreen-z-index: 0;
}

.nwea__click-catcher__inactive {
  display: none;
}

.nwea__click-catcher__fullScreenActive {
  position: fixed;
  background-color: transparent;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  z-index: var(--click-catcher-fullscreen-z-index);
}