@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

:root {
  --color-alert-error--50: #e0182d;
  --color-brand-primary: #900;
  --color-brand-secondary: #fc0;
  --color-base--10: #f7f7f5;
  --color-base--20: #ededeb;
  --color-base--30: #e0e0dc;
  --color-base--40: #c3c2bb;
  --color-base--50: #77766f;
  --color-base--60: #5e5d56;
  --color-base--70: #44433c;
  --color-base--80: #33322a;
  --color-base--90: #1f1e18;
  --color-base--100: #141410;
  --color-gray--80: #969492;
  --color-gray--100: #514F4D;
  --color-link-active: #01548f;
  --color-link-hover: #01406E;
  --color-black: #000;
  --color-white: #fff;

  --md-circular-progress-size: 52px;
  --md-circular-progress-active-indicator-width: 10;
  --md-sys-color-primary: var(--color-brand-primary);
}

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  font-family: "Source Sans 3", Helvetica, Arial, sans-serif;
}

html {
  font-size: 16px;
}

body {
  background: var(--color-base--10);
  background-size: cover;
  min-height: 100vh;
}

body,
html {
  margin: 0;
  padding: 0;
}

a {
  color: var(--color-link-active);
}

a:hover {
  color: var(--color-link-hover);
}

a:focus {
  outline: 3px solid var(--color-brand-primary);
  outline-offset: 2px;
}

p {
  font-size: 1.25rem;
  line-height: 1.5rem;
  margin-top: 0;
  margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-base--90);
  font-weight: 700;
  line-height: 1.5rem;
  text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: 0;
}

h1 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: normal;
  margin: 0 0 1rem;
}

button {
  display: inline-block;
  cursor: pointer;
  font-weight: 400;
  text-decoration: none;
  line-height: 1.5rem;
  border: none;
  border-radius: 0.25rem;
  padding: 0.375rem 1rem 0.5rem;
  outline: none;
}

button:active,
button:hover {
  background: #ae2725;
  color: #fff;
}

button:focus {
  outline: 3px solid var(--color-brand-primary);
  outline-offset: 2px;
}

input {
  appearance: none;
  border: 1px solid var(--color-base--60);
  font-size: inherit;
  line-height: 1.5rem;
  margin: 1px;
  padding: 0.5rem 1rem 0.375rem;
  background: #fff;
  color: #000;
  width: 100%;
}

input[type="text"]:focus,
input[type="password"]:focus {
  outline: 3px solid var(--color-brand-primary);
  outline-offset: 2px;
}

input:not(:focus):not(:placeholder-shown):invalid,
input[aria-invalid="true"],
input:user-invalid {
    border: 2px solid var(--color-alert-error--50);
}

input[type="password"] {
    font-family: caption;
    font-size: 1.25rem;
    letter-spacing: .375rem;
    line-height: 1.5rem;
}

@media only screen and (max-width: 500px) {
  input[type="password"] {
    font-family: caption, 'Source Sans 3';
    font-size: 1rem;
  }
}

.font-size-small {
  font-size: 1rem;
  line-height: 1.25rem;
  margin: 0 0 1rem;
}

.font-size-normal {
  font-size: 1.25rem;
  line-height: 1.5rem;
  margin: 0 0 1rem;
}

.font-weight-700 {
  font-weight: 700;
}

.font-weight-normal {
  font-weight: normal;
}

.font-weight-700 {
  font-weight: 700;
}

.line-height-normal {
  line-height: normal;
}

.line-height-1-2-5 {
  line-height: 1.25rem;
}

.line-height-1-5 {
  line-height: 1.5rem;
}

.margin-0 {
  margin: 0;
}

.margin-bottom-1 {
  margin: 0 0 1rem;
}

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

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

.column-wrap-center-center {
  align-items: center;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
}

.column-wrap-start-center {
  align-items: flex-start;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
}

.column-wrap-center-start {
  align-items: center;
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
}

.column-nowrap-center-center {
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}

.column-nowrap-start-center {
  align-items: flex-start;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}

.column-nowrap-center-start {
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
}

.row-wrap-center-center {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.row-wrap-start-center {
  align-items: flex-start;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.row-wrap-center-start {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.row-nowrap-center-center {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}

.row-nowrap-start-center {
  align-items: flex-start;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}

.row-nowrap-center-start {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
}

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

.app {
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  overflow: auto;
}

.app-header,
.app-main,
.app-footer {
  max-width: 372px;
}

@media only screen and (max-device-width: 480px) {
  .app-header,
  .app-main,
  .app-footer {
      max-width: unset;
  }
}

.app-header {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 4.5rem 2rem 0;
  width: 100%;
}

@media only screen and (max-device-width: 480px) {
  .app-header {
    margin: 2rem 1rem 0;
    width: calc(100vw - 2rem);
  }
}

.app-logo-wrapper {
  padding: 2rem;
}

@media only screen and (max-device-width: 480px) {
  .app-logo-wrapper {
    padding: 2rem;
  }
}

.app-logo {
  display: flex;
  height: 82px;
  width: 250px;
}

@media only screen and (max-device-width: 480px) {
  .app-logo {
    display: flex;
    height: 80px;
    width: 220px;
  }
}

.app-footer {
  align-items: flex-start;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  margin: 1rem 2rem 4.5rem;
  width: 100%;
}

@media only screen and (max-device-width: 480px) {
  .app-footer {
    margin: 1rem;
    width: calc(100vw - 2rem);
  }
}

.app-footer h2 {
    font-size: 1rem;
    margin-bottom: .5rem;
}

.app-footer-links {
  display: flex;
  flex-flow: column nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.app-footer-links li {
  margin-bottom: .5rem;
}

.app-footer-links li:last-of-type {
  margin-bottom: 0;
}

.icon-ext-link {
  align-items: center;
  display: inline-flex;
  flex-flow: row nowrap;
  justify-content: center;
  position: relative;
}

.icon-ext-link::before {
  position: absolute;
  left: -999em;
  right: auto;
  content: "External.";
}

.icon-ext-link svg {
  display: inline-flex;
  margin-left: .25rem;
  position: relative;
  top: 1px;
}

.icon-spinner {
  animation: rotate 2s linear infinite;
}

.icon-spinner path {
  animation: dash 1.5s ease-in-out infinite;
}

.app-main {
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  margin: 0 2rem;
}

@media only screen and (max-device-width: 480px) {
  .app-main {
    margin: 0 1rem;
  }
}

@media (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .app-main {
    max-height: 100%;
  }
}

.screen-reader-only-text {
  position: absolute !important;
  height: 1px !important;
  width: 1px !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: polygon(0 0, 0 0, 0 0) !important;
  -webkit-clip-path: polygon(0 0, 0 0, 0 0) !important;
  overflow: hidden !important;
}

.card {
  background-color: #fff;
  border-radius: 0.25rem;
  border-top: 6px solid #900;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 8px 0 rgba(0, 0, 0, 0.24);
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
  margin: 0 0 1rem;
  padding: 1.125rem 1.5rem .75rem;
  width: 100%;
}

.card.error {
  padding: 1.125rem 1.5rem 1.5rem;
}

.card > *:last-child > p:last-of-type {
  margin-bottom: 0;
}

@media only screen and (max-device-width: 480px) {
  .card {
    padding: 1rem;
  }

  .card.error {
    padding: 1.125rem 1rem;
  }
}

.icon-before svg {
  margin-right: .5rem;
}

.card-footer {
    align-items: center;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
}

.card-after {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 0 0 1rem;
  width: 100%;
}

@media only screen and (max-width: 480px) {
  .card-after {
    justify-content: space-evenly;
  }
}

.card-after a {
  line-height: 1.75;
  white-space: nowrap;
}

.form-field-wrapper {
    align-items: flex-start;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    margin: 0 0 1rem;
    position: relative;
    width: 100%;
}

.form-field-wrapper label {
  color: var(--color-base--90);
  line-height: 1.75rem;
  margin: 0 0 .25rem;
}

.form-field-wrapper input {
    margin: 0 0 .5rem;
}

.form-field-wrapper input::-ms-reveal,
.form-field-wrapper input::-ms-clear {
  display: none;
}

#loginform .form-field-wrapper input[aria-invalid="false"] {
  border: 1px solid var(--color-base--60) !important;
}

.error-notification {
  display: block;
}

.error-notification p {
  color: var(--color-alert-error--50);
  display: block;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20.8px; /* 130% */
  margin: 0 0 .5rem;
}

.error-notification p:last-of-type {
  margin: 0;
}

.error-notification.active {
  margin: 0 0 .5rem;
}

.error-notification-card {
  background-color: #ffe9eb;
  border-left: 8px solid #e70f0f;
  display: none;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20.8px; /* 130% */
  margin: 0 0 1rem;
  padding: .675rem 1rem .675rem 2.5rem;
  position: relative;
  width: 100%;
}

.error-notification-card svg {
  height: 20px;
  left: 10px;
  position: absolute;
  top: 10px;
  width: 20px;
}

.error-notification-card.active {
  display: block;
}

.input-usc-netid,
.input-password {
  height: 40px;
}

.input-password {
  appearance: none;
  background: #fff;
  border: 1px solid var(--color-base--60);
  color: #000;
  display: flex;
  flex-flow: row nowrap;
  font-size: 1rem;
  letter-spacing: normal;
  line-height: 1.25rem;
  padding: 0.5rem 3rem 0.375rem 1rem;
  width: 100%;
}

.button--reveal-toggle {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  line-height: normal;
  height: 26px;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 26px;
  top: 39px;
  right: 14px;
  z-index: 20;
}

.button--reveal-toggle svg {
  fill: var(--color-gray--80);
  pointer-events: none;
}

.button--reveal-toggle:focus {
  outline: 3px solid var(--color-brand-primary);
  outline-offset: 2px;
}

.button--reveal-toggle:focus svg {
  fill: var(--color-base--100);
}

.button--reveal-toggle:hover {
  background: var(--color-base--10);
  border-radius: .25rem;
  outline: 4px solid var(--color-base--10);
}

.button--reveal-toggle:hover svg {
  fill: var(--color-base--90);
}

.button--reveal-toggle .icon-show {
  display: none;
}

.button--reveal-toggle .icon-hide {
  display: block;
}

.button--reveal-toggle.pw-hidden .icon-show {
  display: block;
}

.button--reveal-toggle.pw-hidden .icon-hide {
  display: none;
}

.button--primary {
    appearance: none;
    align-items: center;
    background: #900;
    border: 0;
    border-radius: .25rem;
    color: #fff;
    display: flex;
    flex-flow: row nowrap;
    font-size: 1rem;
    font-style: normal;
    justify-content: center;
    letter-spacing: 0.06px;
    line-height: normal;
    margin: 0 0 1rem;
    padding: .875rem 1rem;
    width: 100%;
}

.screen-reader-only {
  border: 0 !important;
  outline: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

.hidden {
  display: none;
}

.visibility-hidden {
  visibility: hidden;
}

.visibility-visible {
  visibility: visible;
}