@charset "UTF-8";

/* ============================================================
   PAGE LAYOUT - Two Column Grid
   ============================================================ */

/* Left column (new user setup) */
.red {
  padding-left: 104px;
  padding-right: 56px;
  padding-top: 0;
  min-height: 506px;
  position: relative;
}

.red .sign-up-logo {
  display: block;
  margin: 0 auto;
  margin-top: 0;
  margin-bottom: 16px;
  max-width: 100px;
  max-height: unset;
}

.red h2 {
  /* Inherits font-family, font-weight, font-size, line-height, color from main.css h2 styles */
  text-align: center;
  margin-top: 24px !important;
  margin-bottom: 24px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px !important;     /* matches Okta h2 */
}

.red-positioned {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 100%;
  padding: 79px;
  padding-left: 104px;
  padding-right: 72px;
}

.red-positioned a {
  width: 100% !important;
  /* Inherits padding from button component in main.css */
}

/* Right column (returning user login) */
.blue {
  border-left: 2px solid var(--border-color, #f1f1f1);
  /* padding-left: 48px; */
  padding-right: 48px;
  padding-top: 0;
}

.blue #okta-sign-in.auth-container.main-container {
    width: auto;
    /* margin-left: 48px; */
    padding-left: 72px;
    padding-right: 64px;
    min-height: fit-content;
    overflow:hidden;
    
}

.blue #okta-sign-in.no-beacon .auth-content {
  /* max-width: fit-content; */
  padding: 0;
  padding-left: 8px;
}

/* Okta h2 headings - Override form styles, use global h2 typography */
.blue #okta-sign-in h2,
.blue #okta-sign-in.auth-container h2,
.blue #okta-sign-in.auth-container h3 {
  margin-top: 25px;
}

@media screen and (max-width: 1024px) {
  section.card .usa-grid {
    flex-direction: column;
  }

  section.card .usa-width-one-half {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .red {
    padding-left: 48px;
    padding-right: 48px;
    padding-bottom: 48px;
    min-height: auto;
  }

  .red-positioned {
    position: relative;
    bottom: auto;
    right: auto;
    padding: 64px 48px;
    padding-top: 0;
  }

  .blue {
    border-left: none;
    border-top: 2px solid var(--border-color, #f1f1f1);
    margin-top: 64px;
    padding-top: 48px;
    padding-left: 48px;
    padding-right: 48px;
  }
}

/* ============================================================
   RESPONSIVE - MOBILE
   ============================================================ */
@media screen and (max-width: 640px) {
  section.card {
    padding: 16px;
  }

  .red {
    padding-left: 16px;
    padding-right: 16px;
  }

  .red-positioned {
    padding-left: 16px;
    padding-right: 16px;
  }

  .blue {
    border-top: 2px solid var(--border-color, #f1f1f1);
    margin-top: 1rem;
    padding: 3rem 16px 0;
  }
}



#okta-sign-in {
    margin: auto;
    color: var(--text-primary);
}

#okta-sign-in.auth-container.main-container {
  background-color: transparent;
  border-color: none;
  border:none;
  box-shadow: none;
  width: auto;
}

#okta-sign-in .auth-header {
  padding: 10%;
  border: none;
}

#okta-sign-in .auth-content {
  padding: 0;
}

#okta-sign-in .beacon-container {
  margin-bottom: 2rem;
  bottom:0;
  /* position: relative; */
}

#okta-sign-in.no-beacon .auth-header {
  padding: 0;
}

#okta-sign-in.no-beacon .auth-content {
  /* max-width: 228px;
  padding: 0;
  padding-left: 8px; */
}

#okta-sign-in label {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--text-hint);
  margin: 0 0 10px 0;
}

#okta-sign-in.auth-container [type="checkbox"] + label::before  {
  /* position: relative; */
  left:-3px;
  top:4px;
}

#okta-sign-in.auth-container [type="radio"] + label::before  {
  /* position: relative; */
  left:-3px;
  top:4px;
}

#okta-sign-in.auth-container [type="checkbox"]:checked + label::before,
[type="checkbox"]:checked:disabled + label::before {
  background-position: 50% !important;
}

#okta-sign-in .o-form .o-form-label,
#okta-sign-in .o-form input,
#okta-sign-in .o-form label,
#okta-sign-in .o-form textarea {
  font-family: var(--font-primary);
  font-size: 16px;
  /* line-height: 24px; */
  font-weight: 400;
  color: var(--text-hint);
  margin: 0 0 10px 0;
}

#okta-sign-in .auth-footer {
  font-size: 1.7rem !important;
}

#okta-sign-in.auth-container.main-container {
  background-color: transparent;
  border-color: none;
  border:none;
  /* box-shadow: 0 2px 0 hsla(0,0%,68.6%,.12); */
  box-shadow: none;
  color: var(--text-primary);
  font-family: var(--font-primary) !important;
}

#okta-sign-in.auth-container .button-primary,
#okta-sign-in.auth-container input[type="button"],
#okta-sign-in.auth-container input[type="submit"] {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  appearance: none;
  margin-top: 0.5em;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
  appearance: none;
  background: var(--btn-primary-bg-default) !important;
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  color: var(--btn-primary-text-default) !important;
  width: 100% !important;
  height: 36px !important;
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-primary) !important;
  font-size: 1rem;
  font-weight: 600;
  line-height: 0;/* 1.5 */
  padding: 1rem 2rem;
  text-align: center;
  text-decoration: none;
}

#okta-sign-in.auth-container .o-form-button-bar  {
  padding: 0;
}

#okta-sign-in.auth-container .focused-input:focus input[type="button"]:focus,
#okta-sign-in.auth-container .focused-input:focus input[type="submit"]:focus,
#okta-sign-in.auth-container input[type="button"]:focus,
#okta-sign-in.auth-container input[type="submit"]:focus,
#okta-sign-in.auth-container input[type="checkbox"]:focus {
  outline: 2px dotted var(--btn-focus-outline-color) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

#okta-sign-in.auth-container input[type=checkbox]:checked+label::before,
#okta-sign-in.auth-container input[type=radio]:checked+label::before {
  outline: 2px dotted var(--btn-focus-outline-color, #848990) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
  border-bottom-color: var(--input-focus-border) !important;
  box-shadow: none !important;
}

#okta-sign-in.auth-container input[type=radio]:focus+label::before {
  outline: 2px dotted var(--btn-focus-outline-color, #848990) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
  border-bottom-color: var(--input-focus-border) !important;
  box-shadow: none !important;
}

#okta-sign-in.auth-container input[type=checkbox]:disabled+label {
    color: #d6d7d9
}

#okta-sign-in.auth-container input[type=checkbox]:focus+label::before {
  outline: 2px dotted var(--btn-focus-outline-color, #848990) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
  border-bottom-color: var(--input-focus-border) !important;
  box-shadow: none !important;
}

#okta-sign-in.auth-container input[type=checkbox]:disabled+label::before,
#okta-sign-in.auth-container input[type=radio]:disabled+label::before {
    background: #f1f1f1;
    box-shadow: 0 0 0 1px #aeb0b5;
    cursor: not-allowed
}


#okta-sign-in .o-form .custom-checkbox label.focus,
#okta-sign-in .o-form .custom-checkbox label.focus::before  {
  /* filter: hue-rotate(180deg) saturate(2); */
  outline: 2px dotted var(--btn-focus-outline-color, #848990) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
  border-bottom-color: var(--input-focus-border) !important;
  box-shadow: none !important;
}

#okta-sign-in.auth-container .focused-input:hover input[type="button"]:hover,
#okta-sign-in.auth-container .focused-input:hover input[type="submit"]:hover,
#okta-sign-in.auth-container .focused-input:hover input[type="button"]:visited:hover,
#okta-sign-in.auth-container input[type="button"]:hover,
#okta-sign-in.auth-container input[type="submit"]:hover,
#okta-sign-in.auth-container input[type="button"]:visited:hover {
  background: var(--btn-primary-bg-hover) !important;
  background-color: var(--btn-primary-bg-hover) !important;
  border-bottom: 0;
  color: var(--btn-primary-text-default);
  text-decoration: none;
}

/*#okta-sign-in.auth-container input:not([disabled]):focus,
#okta-sign-in.auth-container select:not([disabled]):focus,
#okta-sign-in.auth-container textarea:not([disabled]):focus,
#okta-sign-in.auth-container button:not([disabled]):focus,
#okta-sign-in.auth-container input[type=button]:focus,
#okta-sign-in.auth-container input[type=submit]:focus*/
#okta-sign-in.auth-container input[type=number]:focus,
#okta-sign-in.auth-container input[type=password]:focus,
#okta-sign-in.auth-container input[type=tel]:focus,
#okta-sign-in.auth-container input[type=text]:focus,
#okta-sign-in.auth-container input[type=textbox]:focus {
  outline: 2px dotted var(--btn-focus-outline-color, #848990) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
  border-bottom-color: var(--input-focus-border) !important;
  box-shadow: none !important;
}

/*#okta-sign-in.auth-container input:not([disabled]):focus,
#okta-sign-in.auth-container select:not([disabled]):focus,
#okta-sign-in.auth-container textarea:not([disabled]):focus,
#okta-sign-in.auth-container button:not([disabled]):focus,
#okta-sign-in.auth-container input[type=button]:focus,
#okta-sign-in.auth-container input[type=submit]:focus*/
#okta-sign-in.auth-container input[type=number]::placeholder,
#okta-sign-in.auth-container input[type=password]::placeholder,
#okta-sign-in.auth-container input[type=tel]::placeholder,
#okta-sign-in.auth-container input[type=text]::placeholder,
#okta-sign-in.auth-container input[type=textbox]::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
  font-size: 16px;
}

/*#okta-sign-in.auth-container input:not([disabled]):focus,
#okta-sign-in.auth-container select:not([disabled]):focus,
#okta-sign-in.auth-container textarea:not([disabled]):focus,
#okta-sign-in.auth-container button:not([disabled]):focus,
#okta-sign-in.auth-container input[type=button]:focus,
#okta-sign-in.auth-container input[type=submit]:focus*/
#okta-sign-in.auth-container input[type=number]::disabled,
#okta-sign-in.auth-container input[type=password]::disabled,
#okta-sign-in.auth-container input[type=tel]::disabled,
#okta-sign-in.auth-container input[type=text]::disabled,
#okta-sign-in.auth-container input[type=textbox]::disabled {
  background-color: var(--input-disabled-bg);
  color: var(--text-inactive);
}

#okta-sign-in.auth-container .focused-input {
    box-shadow: none !important;
    border-color: var(--surface-primary);
}

#okta-sign-in .o-form .input-fix input[type=number],
#okta-sign-in .o-form .input-fix input[type=password],
#okta-sign-in .o-form .input-fix input[type=tel],
#okta-sign-in .o-form .input-fix input[type=text],
#okta-sign-in .o-form .input-fix input[type=textbox] {
  appearance: none;
  width: 100%;
  padding: 0;
  background: var(--surface-primary);
  border: 0;
  border-bottom: 1px solid var(--input-border); /* #949FAC light / #707B91 dark */
  border-radius: 0;
  font-family: var(--font-primary);
  font-size: 16px; line-height: 24px;
  color: var(--input-text);
}

#okta-sign-in .o-form .input-fix,
#okta-sign-in .o-form .textarea-fix {
  border:none;
  border-radius: 0;
}

#okta-sign-in .o-form .input-fix.focused-input,
#okta-sign-in .o-form .textarea-fix.focused-input {
  border:none;
  border-radius: 0;
  border-bottom: 1px solid var(--input-border);
}

/* #okta-sign-in.auth-container .default-custom-button {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  margin-top: 0.5em;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
  appearance: none;
  background: #ffffff;
  background-color: #ffffff;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 2px #046b99 !important;
  color: #046b99;
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-primary) !important;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.6;
  padding: 1rem 2rem;
  text-align: center;
  text-decoration: none;
  width: 100%;
} */

/* #okta-sign-in.auth-container .default-custom-button:hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-bottom: 0;
  color: #323a45;
  text-decoration: none;
  box-shadow: inset 0 0 0 2px #323a45 !important;
} */

/* Okta h2 headings - Override form styles, use global h2 typography */
#okta-sign-in h2,
#okta-sign-in.auth-container h2,
#okta-sign-in.auth-container h3 {
  font-size: 22px !important;     /* matches Okta h2 */
  line-height: 1.222 !important;     /* matches global h2 */
  font-weight: 700 !important;       /* bold - matches global h2 */
  color: var(--text-primary) !important;  /* matches global h2, supports Light/Dark mode */
  /* Inherits font-family from main.css */
}

/* Responsive h2 sizing - matches global h2 breakpoints */
@media (max-width: 1024px) {
  #okta-sign-in h2,
  #okta-sign-in.auth-container h2,
  #okta-sign-in.auth-container h3 {
    font-size: 2rem !important;      /* 32px tablet */
  }
}

@media (max-width: 640px) {
  #okta-sign-in h2,
  #okta-sign-in.auth-container h2,
  #okta-sign-in.auth-container h3 {
    font-size: 1.75rem !important;   /* 28px mobile */
  }
}

#okta-sign-in.auth-container .help {
  box-shadow: none !important;
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--interactive-default);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.25em;
}

#okta-sign-in.auth-container .link,
/* #okta-sign-in.auth-container .link:active,
#okta-sign-in.auth-container .link:hover, */
#okta-sign-in.auth-container .link:link,
#okta-sign-in.auth-container .link:visited {
  box-shadow: none !important;
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--interactive-default);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.25em;
}

#okta-sign-in.auth-container .link:active {
  color: var(--interactive-pressed);
  text-decoration-color: currentColor;
}

#okta-sign-in.auth-container .link:hover {
  color: var(--interactive-hover);
  text-decoration-color: currentColor;
}

#okta-sign-in.auth-container .help-links li {
  margin-top: 0;
}


#okta-sign-in.no-beacon .auth-header {
  padding: 0;
}

#okta-sign-in .auth-org-logo {
  display: block;
  margin: 0 auto;
  max-width: 100px;
  max-height: unset;
}

#okta-sign-in .infobox,
#okta-sign-in .infobox-md,
#okta-sign-in .infobox-compact::before,
#okta-sign-in .infobox-md::before,
#okta-sign-in .infobox::before  {
  border-radius: 0;
}

#okta-sign-in .registration-container {
  margin-top: 0;
}

#okta-sign-in .registration-container .content-container  {
  padding: 0;
  padding-top:16px;
  border:0;
}

#okta-sign-in .registration-container .registration-link {
  box-shadow: none !important;
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--interactive-default);

  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.25em;
}


#okta-sign-in .registration-container .registration-link:active {
  color: var(--interactive-pressed);
  text-decoration-color: currentColor;
}

#okta-sign-in .registration-container .registration-link:hover {
  color: var(--interactive-hover);
  text-decoration-color: currentColor;
}

@media (prefers-contrast: more) {

  #okta-sign-in.auth-container .button-primary,
  #okta-sign-in.auth-container input[type="button"],
  #okta-sign-in.auth-container input[type="submit"],
  #okta-sign-in.auth-container input[type="button"]:hover,
  #okta-sign-in.auth-container input[type="submit"]:hover,
  #okta-sign-in.auth-container input[type="button"]:visited:hover  {
    border: .5rem solid var(--btn-primary-bg-default);
  }

  #okta-sign-in.auth-container [type=checkbox]:disabled+label::before,
  #okta-sign-in.auth-container [type=radio]:disabled+label::before,
  #okta-sign-in.auth-container [type=checkbox] + label::before,
  #okta-sign-in.auth-container [type=radio] + label::before {
    border: .5rem solid var(--btn-primary-bg-default);
  }

  #okta-sign-in.auth-container [type=checkbox]:disabled+label::after,
  #okta-sign-in.auth-container [type=radio]:disabled+label::after {
    content: ' This option is disabled';
  }
}

/* high contrast theme */
html[data-theme="dark"] #okta-sign-in .infobox,
html[data-theme="dark"] #okta-sign-in .infobox-md,
html[data-theme="dark"] #okta-sign-in .infobox *,
html[data-theme="dark"] #okta-sign-in .infobox-md *  {
  /* filter: invert(1) hue-rotate(180deg); */
  color: #000 !important;
}
html[data-theme="dark"] #okta-sign-in .o-form-explain.o-form-input-error,
html[data-theme="dark"] #okta-sign-in .error-16-red:before, #okta-sign-in .error-16-small:before {
  color: var(--input-text) !important;
}

/* html[data-theme="dark"] #okta-sign-in.auth-container [type="checkbox"] + label::before  {
  background-color: var(--btn-primary-bg-default);
} */

@media (prefers-color-scheme: dark) {
  html[data-theme="dark"] #okta-sign-in .infobox,
  html[data-theme="dark"] #okta-sign-in .infobox-md,
  html[data-theme="dark"] #okta-sign-in .infobox *,
  html[data-theme="dark"] #okta-sign-in .infobox-md *  {
    /* filter: invert(1) hue-rotate(180deg); */
    color: #000 !important;
  }
  html[data-theme="dark"] #okta-sign-in .o-form-explain.o-form-input-error,
  html[data-theme="dark"] #okta-sign-in .error-16-red:before, #okta-sign-in .error-16-small:before {
    color: var(--input-text) !important;
  }
  
  /* html[data-theme="dark"] #okta-sign-in.auth-container [type="checkbox"] + label::before  {
    background-color: var(--btn-primary-bg-default);
  } */
}