:root {
  /* USWDS 3.13.0: color palette specifications */

  /* primary color */
  --blue-warm-60:      rgb(var(--blue-warm-60_rgb));
  --blue-warm-60_rgb:   52  93 150; /* hex equivalent #345d96 */
  /* primary tints */
  --blue-warm-5:       rgb(var(--blue-warm-5_rgb));
  --blue-warm-5_rgb:   236 241 247; /* hex equivalent #ECF1F7 */
  --blue-warm-20:      rgb(var(--blue-warm-20_rgb));
  --blue-warm-20_rgb:  187 202 228; /* hex equivalent #BBCAE4 */
  --blue-warm-40:      rgb(var(--blue-warm-40_rgb));
  --blue-warm-40_rgb:  114 146 199; /* hex equivalent #7292C7 */
  /* primary shades */
  --blue-warm-70:      rgb(var(--blue-warm-70_rgb));
  --blue-warm-70_rgb:   47  70 104; /* hex equivalent #2F4668 */

  /* secondary color */
  --gray-warm-90:      rgb(var(--gray-warm-90_rgb));
  --gray-warm-90_rgb:   23  23  22; /* hex equivalent #171716 */
  /* secondary tints */
  --gray-10:           rgb(var(--gray-10_rgb));
  --gray-10_rgb:       230 230 230; /* hex equivalent #E6E6E6 */
  --gray-30:           rgb(var(--gray-30_rgb));
  --gray-30_rgb:       173 173 173; /* hex equivalent #ADADAD */
  --gray-50:           rgb(var(--gray-50_rgb));
  --gray-50_rgb:       117 117 117; /* hex equivalent #757575 */
  --gray-80:           rgb(var(--gray-80_rgb));
  --gray-80_rgb:        46  46  46; /* hex equivalent #2E2E2E */

  /* Unused, but here because we're required to have it. */
  --blue-warm-80v:     rgb(var(--blue-warm-80v_rgb));
  --blue-warm-80v_rgb:  22  46  81; /* hex equivalent #162E51 */



  /* Army branding: color palette specifications */
  --army-black_rgb:   34  31  32;
  --army-gold_rgb:   255 204   1;
  --army-green_rgb:   47  55  47;
  --tan_rgb:         241 228 199;
  --field-01_rgb:    114 115 101;
  --field-02_rgb:    191 184 166;
  --gray-01_rgb:      86  85  87;
  --gray-02_rgb:     213 213 215;

  --army-black: rgb(var(--army-black_rgb));
  --army-gold:  rgb(var(--army-gold_rgb));
  --army-green: rgb(var(--army-green_rgb));
  --tan:        rgb(var(--tan_rgb));
  --field-01:   rgb(var(--field-01_rgb));
  --field-02:   rgb(var(--field-02_rgb));
  --gray-01:    rgb(var(--gray-01_rgb));
  --gray-02:    rgb(var(--gray-02_rgb));

  /* Army branding: special-use colors */
  --highlight-orange_rgb: 241 101  33;
  --highlight-green_rgb:   45 170  39;
  --highlight-red_rgb:    207   0   0;

  --highlight-orange: rgb(var(--highlight-orange_rgb));
  --highlight-green:  rgb(var(--highlight-green_rgb));
  --highlight-red:    rgb(var(--highlight-red_rgb));



  /* SHARED : USWDS 3.13.0: color palette specifications */
  --yellow-20v_rgb: 250 206   0;
  --gray-20_rgb:    201 201 201;

  --yellow-20v: rgb(var(--yellow-20v_rgb));
  --gray-20:    rgb(var(--gray-20_rgb));



  --body_bg-color_rgb: 226 226 226;
  --body_bg-color: rgb(var(--body_bg-color_rgb));

  --body_font_color_rgb: 27 27 27;
  --body_font_color: rgb(var(--body_font_color_rgb));

  --card_width: 375px;
  --card_h-padding: 35px;

  /* Button styles */
  --button_bg-color: var(--blue-warm-60);
  --button_border-color: transparent;
  --button_font_color: white;

  --button_hover_bg-color: var(--blue-warm-20);
  --button_hover_border-color: transparent;
  --button_hover_font_color: black;

  --button_disabled_bg-color: rgb(192 192 192);
  --button_disabled_border-color: transparent;
  --button_disabled_font_color: rgb(224 224 224);
}

.agency-2 {
  --body_bg-color_rgb: 228 225 226;

  --button_bg-color: var(--army-black);
  --button_border-color: transparent;
  --button_font_color: white;

  --button_hover_bg-color: var(--field-02);
  --button_hover_border-color: var(--army-black);
  --button_hover_font_color: black;
}


body {
  font-family: Open Sans, Helvetica, sans-serif;
  margin: 0;
  min-height: 100vh;
  background-color: var(--body_bg-color);
  font-size: 12px;
  line-height: 1.25;
  color: var(--body_font_color);
}

* {box-sizing: border-box;}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 26px;
  padding-top: 60px;
  padding-bottom: 39px;
  position: relative;
  background: linear-gradient(180deg, var(--blue-warm-60) 200px, var(--body_bg-color) 200px);
}
.agency-2 .main {
  background: linear-gradient(180deg, var(--army-black) 200px, var(--body_bg-color) 200px);
}

.text-center {
  text-align: center;
}

.banner {
  padding: 0.1rem 0.5rem;
  border: 1px solid rgba(0, 0, 0, .2);
  border: var(--cas-theme-border-light, 1px solid rgba(0, 0, 0, .2));
  position: relative;
  border-radius: 4px;
}

.banner .banner-message {
  margin: 0.375rem 0;
}

.banner .banner-heading:first-child {
  margin-top: 0;
}

.banner .banner-message:first-child {
  margin-top: 0;
}

.banner .banner-message:last-child {
  margin-bottom: 0;
}

.banner-primary {
  border-color: #153e50;
  border-color: var(--cas-theme-primary, #153e50);
}

.banner-primary .mdi {
  color: #153e50;
  color: var(--cas-theme-primary, #153e50);
}


.wrapper-warning {
  margin-top: 2px;
}
.wrapper-warning .card {
  max-width: var(--card_width);
  height: 70px;
  background-color: #f8cabe;
  padding: 6px 15px 10px 15px;
  display: grid;
  grid-template-columns: auto 1fr;
  border: 1px solid #c8160c;
  border-left-width: 7px;
  box-shadow: rgb(149 157 165 / 0.2) 0px 8px 24px;
  margin: 0 0 21px 0;
}
.agency-2 .wrapper-warning .card {
  box-shadow: rgb(159 155 156 / 0.2) 0px 8px 24px;
}
.wrapper-warning .card .subject {
  align-self: center;
}
.wrapper-warning .card .subject h3 {
  margin: 0 0 3px 0;
  font-size: 18px;
  line-height: 24px;
  color: #424242;
  font-weight: 700;
}
.wrapper-warning .card .subject p {
  margin: 0;
}
.wrapper-warning .card .subject a {
  color: #424242;
}
.wrapper-warning .card .icon {
  margin-right: 6px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22.415" height="19.745"><path fill="rgba(0 0 0 / 0.8)" fill-rule="evenodd" d="M9.597.925a1.865 1.865 0 0 1 3.221 0l9.343 16.016a1.864 1.864 0 0 1-1.61 2.804H1.864a1.865 1.865 0 0 1-1.611-2.804L9.597.925Zm.028 15.349c0-.573.157-.974.47-1.206.314-.231.693-.347 1.137-.347.433 0 .805.116 1.12.347.313.232.47.633.47 1.206 0 .548-.157.944-.47 1.187a1.77 1.77 0 0 1-1.12.366c-.444 0-.823-.122-1.137-.366-.313-.243-.47-.639-.47-1.187Zm2.73-3.124h-2.228l-.466-8.923h3.16l-.465 8.923Z"/></svg>');
  background-repeat: no-repeat;
  background-position-y: 3px;
  width: 23px;
}
.wrapper-warning .card.full {
  height: initial;
}


.mdc-card {
  width: var(--card_width);
  background-color: #FAFAFA;
  border-radius: 6px;
  padding: 8px var(--card_h-padding) 32px;
  box-shadow: 0 11px 35px 0 rgba(0,0,0,0.2);
  border: 1px solid #a5a5a5
}

.mdc-card h2 {
  font-stretch: semi-condensed;
  text-align: center;
  font-weight: 700;
  font-size: 33px;
  line-height: 45px;
  margin: 0 -1ch 4px -1ch;
}

.mdc-card label {
  margin: 5px 10px 0 0;
  font-weight: 600;
  font-size: 14px;
  line-height: 19px;
  width: max-content;
}

.mdc-card h2 + p {
  margin-top: 19px;
}
.mdc-card p + label {
  margin-top: 8px;
}

.mdc-card label.show-password {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  margin: 4px 0 0 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 19px;
}

.mdc-card label.show-password input {
  margin-left: 0;
}

.mdc-card .wrapper-warning {
  margin-top: 12px;
}
.mdc-card .wrapper-warning .card {
  padding: 9px 15px 9px 9px;
  border-width: 0 0 0 6px;
  margin: 0 0 2px 0;
  box-shadow: none;
}
.mdc-card .wrapper-warning .card .icon {
    margin-right: 5px;
    background-size: 17px;
    background-position-y: 0;
    width: 17px;
}
.mdc-card .subject p {
  margin: 0;
  color: var(--body_font_color);
}

.form-inline {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}


input:where([type="text"], [type="password"], [type="email"]) {
  box-sizing: border-box;
  height: 37px;
  margin: 0;
  padding: 0 10px;
  background-color: #fff;
  border: 1px solid #414141;
  border-radius: 2px;
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
  color: black;
}

button {
  margin-bottom: 16px;
}

button:active {
  box-shadow: none;
}
button:where(:hover, :focus):not(:active) {
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.5);
  transform-origin: center;
  transform: scale(1.01);
}

button {
  /* TODO: Is using the button custom props here safe? */
  height: 38px;
  background-color: var(--button_bg-color);
  border: 1px solid var(--button_border-color);
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: inherit;
  font-weight: 400;
  font-size: 16px;
  color: var(--button_font_color);
  cursor: pointer;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
}
.agency-2 button {
  border: 1px solid #414138;
}
input + button {
  margin-top: 23px;
}

p, ol, ul {
  font-weight: 400;
  color: #656565;
  font-size: 12px;
  line-height: 15px;
  margin: 15px 0 9px 0;
}
p + p {
  margin-top: 5px;
}

ol, ul {
  padding-left: 25px;
}

a:any-link {
  color: var(--body_font_color);
}


p.backLink {
  text-align: center;
  font-size: 14px;
  margin: 33px 0 0 -1.5ch;
}
.backLink a {
  color: #2B2B2B;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}
#back-link::before {
  content: '<';
  display: inline-block;
  padding: 0 5px;
}
button + p.backLink {
  margin: 15px 0 0 -1.5ch;
}


.footer {
  display: flex;
  justify-content: space-between;
  gap: 46px;
  font-size: 13px;
  color: #434343;
  margin-top: 13px;
}
.footer a {
  text-decoration: none;
  color: inherit;
}
@media (max-width: 800px) {
  .footer {
    gap:30px;
  }
}


/** LOGIN FORM **/
p.insertCAC {
  text-align: center;
  font-size: 10.5px;
  margin: 0 0 3px;
}

#or {
  margin: 3px 0 5px;
  position: relative;
  height: 14px;
  font-size: 14px;
  line-height: 19px;
  text-align: center;
  font-weight: 600;
}
#or::before,
#or::after {
  position: absolute;
  width: 112px;
  height: 1px;
  top: 10px;
  background-color: var(--body_font_color);
  content: '';
}
#or::before {
  left: 18px;
}
#or::after {
  right: 18px;
}

.passwordContainer {
  display: flex;
  justify-content: space-between;
  margin-top: -1px;
}
.forgotPass {
  font-size: 14px;
  line-height: 19px;
  margin: 5px 0 0 0;
}

p.helpLink {
  text-align: center;
  font-size: 14px;
  line-height: 19px;
  margin-bottom: 0;
}
.show-password + button {
  margin-top: 22px;
}


/** PASSWORD UPDATE FORM **/
.pwd-update-form ul {
  margin: -3px 0 0 0;
}
.pwd-update-form ul + p {
  margin-top: 6px;
}
.pwd-update-form button {
  margin-bottom: 11px;
}


/** AUP-SPECIFIC **/
.mdc-card.aup {
  width: 574px;
}
.mdc-card.aup h2 {
  line-height: 1.2;
  margin-top: 3px;
  margin-bottom: 7px;
}
.mdc-card.aup p.subheading {
  margin-bottom: 18px;
}
.mdc-card.aup :is(p, ol, ul) {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 0;
}
.aup :is(ol, ul) {
  margin: 0;
  padding-left: 2em;
}
.aup li {
  margin: 0.3em 0;
}
.aup button.aup-accept {
  margin: 20px auto auto;
  min-width: 346px;
}


/* region USG Notice and Consent */
html:has(dialog[open]) {
  overflow: hidden;
}

#usg-notice-and-consent {
  background: #fff;
  border: solid 1px #bbb;
  border-radius: 6px;
  box-shadow: 0 10px 50px -15px rgb(0 0 0 / 0.5);
  z-index: 4489;
  width: 572px;
  max-width: 100%;
  padding: 0 34px 0 38px;
  outline: none;
}

#usg-notice-and-consent::backdrop {
  background-color: rgb(var(--body_bg-color_rgb) / 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.consent-prompt--dialog::before {
  display: block;
  content: "";
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 18px;
  margin-bottom: -18px;
  background: linear-gradient(to bottom, white, transparent);
  pointer-events: none;
  z-index: 9999;
}

.consent-prompt--dialog::after {
  display: block;
  content: "";
  position: sticky;
  bottom: 0;
  left: 0;
  height: 20px;
  width: 100%;
  background: linear-gradient(to top, white, transparent);
  pointer-events: none;
}

#usg-notice-and-consent .heading {
  color: var(--body_font_color);
  font-size: 28px;
  font-weight: 800;
  font-stretch: semi-condensed;
  line-height: 1.2;
  text-align: left;

  margin-top: 0;
  margin-bottom: 0;
  padding-top: 18px;
  padding-bottom: 14px;
}

#usg-notice-and-consent .heading span {
  white-space: nowrap;
}

#usg-notice-and-consent .subheading {
  color: var(--body_font_color);
  font-size: 20px;
  font-weight: 300;
  font-stretch: semi-condensed;
  line-height: 1.2;
  text-align: left;

  margin-top: -4px;
  margin-bottom: 20px;
}

#usg-notice-and-consent .dialog-body {
  margin-top: 20px;
  font-size: 14px;
}

#usg-notice-and-consent .dialog-body :is(p, ol, ul) {
  color: var(--body_font_color);
  font-size: 14px;
  line-height: normal;
  margin-bottom: 0;
}

#usg-notice-and-consent .dialog-body :is(ol, ul) {
  margin: 0;
  padding-left: 2em;
}

#usg-notice-and-consent .dialog-body :is(ol, ul) li {
  margin: 0.3em 0;
}

#usg-notice-and-consent .buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}
#usg-notice-and-consent .buttons button {
  width: 125px;
}

#usg-notice-and-consent button {
  position: relative; /* for hover effect */

  background-color: var(--button_bg-color);
  border: solid 2px var(--button_border-color);
  border-radius: 4px;

  box-shadow: none;

  padding: 4px 1em;

  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: white;

  line-height: 1.5;

  white-space: nowrap;

  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;

  box-sizing: border-box;

  margin-bottom: 0;
  padding-left: 16px;
  padding-right: 16px;
}
/* endregion USG Notice and Consent */


/*** DARK MODE ***/
@media (prefers-color-scheme: dark) {
  body, .main {
    background: rgb(30 46 71);
  }
  body.agency-2, .agency-2 .main {
    background: var(--army-black);
  }
  .mdc-card {
    color: #fff;
    background: var(--gray-80);
    border-color: rgb(129 129 129 / 0.25);
    box-shadow: 0 11px 100px 0 rgb(0 0 0 / 0.625);
  }
  .agency-2 .mdc-card {
    background-color: var(--army-black);
    box-shadow: 0 11px 100px 0 black;
  }
  p, ul {
    color: #a6a6a6;
  }
  input:where([type="text"], [type="password"], [type="email"]) {
    background-color: #3b3b3b;
    border-color: #414141;
    color: #fff;
  }
  .agency-2 button {
    background-color: #cfad00;
    border-color: #414141;
    color: #000;
    font-weight: 600;
  }
  button:where(:hover, :focus):not(:active) {
    background-color: rgb(71 112 168);
    transform: scale(1.02);
  }
  .agency-2 button:where(:hover, :focus):not(:active) {
    background-color: #e5c522;
  }
  .agency-2 button:hover:active {
    background-color: #e5c522;
  }
  a:any-link, .footer {
    color: #fff;
  }

  #or::before, #or::after {
    background-color: #9c9c9c;
  }

  #usg-notice-and-consent::backdrop {
    background-color: rgb(30 46 71 / 0.6);
  }
  .agency-2 #usg-notice-and-consent::backdrop {
    background-color: rgb(var(--army-black_rgb) / 0.6);
  }
}

.legacy-only {
  display: none;
}

.mobile-hidden {
  display: contents;
}