/* stylelint-disable selector-max-id */
@use 'common/shared/helpers/mixins';

.skip-to-content-link {
  font-family: "proxima nova", "montserrat-okta", Arial, Helvetica, sans-serif;
  text-decoration: none;
  position: absolute;
  top: 0;
  left: 10px;
  padding: 10px;
  margin-top: 10px;
  transform: translateY(-100%);
  transition: transform 0.3s;
  color: $primary-color;

  &:visited,
  &:hover,
  &:active {
    color: $primary-color;
  }
  &:hover {
    text-decoration: underline;
  }
  &:focus {
    // show only on focus (happens via tab key)
    transform: translateY(0%);
  }
}

#okta-sign-in.auth-container {
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    // for IE to support main tag's width
    display: block;
  }

  &.main-container {
    /* -- Fonts and Text Colors -- */
    font-family: $fonts;
    color: $medium-text-color;
  }

  h2,
  h3 {
    /* -- Fonts and Text Colors -- */
    font-weight: $font-weight-header;
    color: $header-text-color;
  }

  .okta-sign-in-header {
    /* -- Fonts and Text Colors -- */
    color: $header-text-color;
  }

  .okta-form-subtitle {
    /* -- Fonts and Text Colors -- */
    color: $medium-text-color;
  }

  .okta-form-label {
    /* -- Fonts and Text Colors -- */
    font-weight: $font-weight-labels;
    color: $dark-text-color;
  }

  .o-form-explain {
    padding-top: 0;
  }

  .o-form-explain.okta-form-input-error {
    padding-top: 8px;
  }

  .link {
    /* -- Fonts and Text Colors: links -- */
    color: $medium-text-color;

    &:link,
    &:visited,
    &:hover,
    &:active {
      /* -- Fonts and Text Colors: links -- */
      color: $medium-text-color;
    }
  }

  .inline-link {
    /* -- Fonts and Text Colors: links -- */
    color: $link-text-color;

    &:link,
    &:visited,
    &:hover,
    &:active {
      /* -- Fonts and Text Colors: links -- */
      color: $link-text-color;
    }
  }

  input[type="submit"],
  input[type="button"] {
    /* -- Submit Buttons' Fonts -- */
    font-family: $fonts;

    &:focus {
      box-shadow: 0 0 8px $input-shadow-color-focus;
      border-color: $input-border-color-focus;
    }
  }


  &.main-container {
    /* -- Main Background and Border Colors -- */
    background-color: $primary-bg-color;
    border-color: #ddd #ddd #d8d8d8;
    box-shadow: 0 2px 0 rgba(175, 175, 175, 0.12);

    @include mobile {
      border-width: 0;
      box-shadow: none;
    }

    .bg-helper {
      /* -- Main Background and Border Colors -- */
      /* set the helper's color value to the same color as the main-container's background */
      color: $primary-bg-color;
    }

    .primary-auth {
      // adjust password toggle on login page to accomodate for Tooltips
      .password-with-toggle {
        padding-right: 65px;
      }
    }
    // add divider to username/password on login when password toggle on
    .o-form .o-form-input .o-form-control {
      .input-icon-divider {
        border-right: 1px solid $input-border-color;
        height: 38px;
        position: absolute;
        right: 34px;
        top: 0;
      }

      &.focused-input {
        .input-icon-divider {
          border-right: 1px solid $input-border-color-focus;
        }
      }
    }

    .margin-btm-5 {
      margin-bottom: 5px;
    }

    .margin-btm-30 {
      margin-bottom: 30px;
    }

    .margin-top-30 {
      margin-top: 30px;
    }
  }

  .okta-sign-in-header {
    /* -- Main Background and Border Colors -- */
    border-bottom-color: $header-divider-color;
  }

  .okta-sign-in-beacon-border {
    /* -- Main Background and Border Colors -- */
    border-color: #a7a7a7;
  }

  .okta-form-divider {
    /* -- Main Background and Border Colors -- */
    border-bottom-color: $form-divider-color;
  }

  .okta-webauthn-authenticator {
    /* -- Webauthn Authenticator (small) -- */
    background-image: url('../img/icons/mfa/webauthn_authenticator.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Webauthn Authenticator Icons (high DPI) -- */
      background-image: url('../img/icons/mfa/webauthn_authenticator@2x.png');
    }
  }

  .okta-verify-authenticator {
    /* -- Okta Verify Authenticator (small) -- */
    background-image: url('../img/icons/mfa/oktaVerify_authenticator.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Okta Verify Authenticator Icons (high DPI) -- */
      background-image: url('../img/icons/mfa/oktaVerify_authenticator@2x.png');
    }
  }

  .factor-icon,
  .qrcode-image {
    /* -- Main Background and Border Colors -- */
    border-color: #ccc;
  }


  .mfa-okta-verify-30,
  .enroll-factor-row .mfa-okta-verify {
    /* -- Factor Icons (small): Okta Verify -- */
    background-image: url('../img/icons/mfa/oktaVerify_38x38.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): Okta Verify -- */
      background-image: url('../img/icons/mfa/oktaVerify_ico@2x.png');
    }
  }

  .mfa-okta-verify {
    /* -- Factor Icons (large): Okta Verify -- */
    background-image: url('../img/icons/mfa/oktaVerify_70x70.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): Okta Verify -- */
      background-image: url('../img/icons/mfa/oktaVerify@2x.png');
    }
  }

  .mfa-google-auth-30,
  .enroll-factor-row .mfa-google-auth {
    /* -- Factor Icons (small): Google Authenticator -- */
    background-image: url('../img/icons/mfa/googleAuth_38x38.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): Google Authenticator -- */
      background-image: url('../img/icons/mfa/googleAuth_ico@2x.png');
    }
  }

  .mfa-google-auth {
    /* -- Factor Icons (large): Google Authenticator -- */
    background-image: url('../img/icons/mfa/googleAuth_70x70.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): Google Authenticator  -- */
      background-image: url('../img/icons/mfa/googleAuth@2x.png');
    }
  }

  .mfa-hotp {
    /* -- Factor Icons (large): Hotp Factor -- */
    background-image: url('../img/icons/mfa/hotpFactor_70x70.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): Hotp Factor  -- */
      background-image: url('../img/icons/mfa/hotpFactor@2x.png');
    }
  }

  .mfa-hotp-30 {
    /* -- Factor Icons (small): Hotp Factor -- */
    background-image: url('../img/icons/mfa/hotpFactor_38x38.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): Hotp Factor  -- */
      background-image: url('../img/icons/mfa/hotpFactor_ico@2x.png');
    }
  }

  .mfa-symantec-30,
  .enroll-factor-row .mfa-symantec {
    /* -- Factor Icons (small): Symantec VIP -- */
    background-image: url('../img/icons/mfa/symantec_38x38.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): Symantec VIP -- */
      background-image: url('../img/icons/mfa/symantec_ico@2x.png');
    }
  }

  .mfa-symantec {
    /* -- Factor Icons (large): Symantec VIP -- */
    background-image: url('../img/icons/mfa/symantec_70x70.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): Symantec VIP -- */
      background-image: url('../img/icons/mfa/symantec@2x.png');
    }
  }

  .mfa-rsa-30,
  .enroll-factor-row .mfa-rsa {
    /* -- Factor Icons (small): RSA SecurID -- */
    background-image: url('../img/icons/mfa/rsa_38x38.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): RSA SecurID -- */
      background-image: url('../img/icons/mfa/rsa_ico@2x.png');
    }
  }

  .mfa-rsa {
    /* -- Factor Icons (large): RSA SecurID -- */
    background-image: url('../img/icons/mfa/rsa_70x70.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): RSA SecurID -- */
      background-image: url('../img/icons/mfa/rsa@2x.png');
    }
  }

  .mfa-onprem-30,
  .enroll-factor-row .mfa-onprem {
    /* -- Factor Icons (small): OnPrem -- */
    background-image: url('../img/icons/mfa/onprem_38x38.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): OnPrem -- */
      background-image: url('../img/icons/mfa/onprem_ico@2x.png');
    }
  }

  .mfa-onprem {
    /* -- Factor Icons (large): OnPrem -- */
    background-image: url('../img/icons/mfa/onprem_70x70.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): OnPrem -- */
      background-image: url('../img/icons/mfa/onprem@2x.png');
    }
  }

  .mfa-duo-30,
  .enroll-factor-row .mfa-duo {
    /* -- Factor Icons (small): DUO -- */
    background-image: url('../img/icons/mfa/duo_38x38.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): DUO -- */
      background-image: url('../img/icons/mfa/duo_ico@2x.png');
    }
  }

  .mfa-duo {
    /* -- Factor Icons (large): DUO -- */
    background-image: url('../img/icons/mfa/duo_70x70.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): DUO -- */
      background-image: url('../img/icons/mfa/duo@2x.png');
    }
  }

  .mfa-yubikey-30,
  .enroll-factor-row .mfa-yubikey {
    /* -- Factor Icons (small): Yubikey -- */
    background-image: url('../img/icons/mfa/yubico_38x38.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): Yubikey -- */
      background-image: url('../img/icons/mfa/yubico_ico@2x.png');
    }
  }

  .mfa-yubikey {
    /* -- Factor Icons (large): Yubikey -- */
    background-image: url('../img/icons/mfa/yubico_70x70.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): Yubikey -- */
      background-image: url('../img/icons/mfa/yubico@2x.png');
    }
  }

  .mfa-sms-30,
  .enroll-factor-row .mfa-okta-sms {
    /* -- Factor Icons (small): SMS -- */
    background-image: url('../img/icons/mfa/sms_38x38.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): SMS -- */
      background-image: url('../img/icons/mfa/sms_ico@2x.png');
    }
  }

  .mfa-okta-sms {
    /* -- Factor Icons (large): SMS -- */
    background-image: url('../img/icons/mfa/sms_70x70.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): SMS -- */
      background-image: url('../img/icons/mfa/sms@2x.png');
    }
  }

  .mfa-call-30,
  .enroll-factor-row .mfa-okta-call {
    /* -- Factor Icons (small): CALL -- */
    background-image: url('../img/icons/mfa/voicecall_38x38.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): CALL -- */
      background-image: url('../img/icons/mfa/voicecall_ico@2x.png');
    }
  }

  .mfa-okta-call {
    /* -- Factor Icons (large): CALL -- */
    background-image: url('../img/icons/mfa/voicecall_70x70.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): CALL -- */
      background-image: url('../img/icons/mfa/voicecall@2x.png');
    }
  }

  .mfa-okta-phone {
    /* -- Factor Icons (large): PHONE -- */
    background-image: url('../img/icons/mfa/phone_70x70.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): PHONE -- */
      background-image: url('../img/icons/mfa/phone@2x.png');
    }
  }

  .mfa-email-30,
  .enroll-factor-row .mfa-okta-email {
    /* -- Factor Icons (small): EMAIL -- */
    background-image: url('../img/icons/mfa/email_38x38.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): EMAIL -- */
      background-image: url('../img/icons/mfa/email_ico@2x.png');
    }
  }

  .mfa-okta-email {
    /* -- Factor Icons (large): EMAIL -- */
    background-image: url('../img/icons/mfa/email_70x70.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): EMAIL -- */
      background-image: url('../img/icons/mfa/email@2x.png');
    }
  }

  .mfa-question-30,
  .enroll-factor-row .mfa-okta-security-question {
    /* -- Factor Icons (small): Security Question -- */
    background-image: url('../img/icons/mfa/question_38x38.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): Security Question -- */
      background-image: url('../img/icons/mfa/question_ico@2x.png');
    }
  }

  .mfa-okta-security-question {
    /* -- Factor Icons (large): Security Question -- */
    background-image: url('../img/icons/mfa/question_70x70.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): Security Question -- */
      background-image: url('../img/icons/mfa/question@2x.png');
    }
  }

  .mfa-password-30 {
    /* -- Factor Icons (small): Password -- */
    background-image: url('../img/icons/mfa/password_38x38.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): Password -- */
      background-image: url('../img/icons/mfa/password_ico@2x.png');
    }
  }

  .mfa-windows-hello-30,
  .enroll-factor-row .mfa-windows-hello {
    /* -- Factor Icons (small): Windows Hello -- */
    background-image: url('../img/icons/mfa/windowsHello_38x38.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): Windows Hello -- */
      background-image: url('../img/icons/mfa/windowsHello_ico@2x.png');
    }
  }

  .mfa-windows-hello {
    /* -- Factor Icons (large): Windows Hello -- */
    background-image: url('../img/icons/mfa/windowsHello_70x70.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): Windows Hello -- */
      background-image: url('../img/icons/mfa/windowsHello@2x.png');
    }
  }

  .mfa-u2f-30,
  .enroll-factor-row .mfa-u2f {
    /* -- Factor Icons (small): U2F -- */
    background-image: url('../img/icons/mfa/u2f_38x38.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): U2F -- */
      background-image: url('../img/icons/mfa/u2f_ico@2x.png');
    }
  }

  .mfa-u2f {
    /* -- Factor Icons (large): U2F -- */
    background-image: url('../img/icons/mfa/u2f_70x70.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): U2F -- */
      background-image: url('../img/icons/mfa/u2f@2x.png');
    }
  }

  .mfa-okta-password {
    /* -- Factor Icons (large): Password -- */
    background-image: url('../img/icons/mfa/password_70x70.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): Password -- */
      background-image: url('../img/icons/mfa/password@2x.png');
    }
  }

  .mfa-custom-factor-30,
  .enroll-factor-row .mfa-custom-factor {
    /* -- Factor Icons (small): Custom Factor -- */
    background-image: url('../img/icons/mfa/customFactor_38x38.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): Custom Factor -- */
      background-image: url('../img/icons/mfa/customFactor_ico@2x.png');
    }
  }

  .mfa-custom-factor {
    /* -- Factor Icons (large): Custom Factor -- */
    background-image: url('../img/icons/mfa/customFactor_70x70.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): Custom Factor -- */
      background-image: url('../img/icons/mfa/customFactor@2x.png');
    }
  }

  .mfa-webauthn-30,
  .enroll-factor-row .mfa-webauthn {
    /* -- Factor Icons (small): Webauthn -- */
    background-image: url('../img/icons/mfa/webauthn_38x38.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): Webauthn -- */
      background-image: url('../img/icons/mfa/webauthn_ico@2x.png');
    }
  }

  .mfa-webauthn {
    /* -- Factor Icons (large): Webauthn -- */
    background-image: url('../img/icons/mfa/webauthn_70x70.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): Webauthn -- */
      background-image: url('../img/icons/mfa/webauthn@2x.png');
    }
  }

  .mfa-custom-app-logo {
    background-image: url('../img/icons/mfa/custom-app-default-logo.svg');
    background-size: 70%;
    &.custom-logo {
      background-size: contain;
    }
  }

  .icon--app {
    /* -- Factor Icons (large): Webauthn -- */
    background-image: url('../img/icons/mfa/app_70x70.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): Webauthn -- */
      background-image: url('../img/icons/mfa/app_76x76.png');
    }
  }

  .icon--desktop {
    /* -- Factor Icons (large): Webauthn -- */
    background-image: url('../img/icons/mfa/desktop_70x70.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): Webauthn -- */
      background-image: url('../img/icons/mfa/desktop_76x76.png');
    }
  }

  .icon--smartphone {
    /* -- Factor Icons (large): Webauthn -- */
    background-image: url('../img/icons/mfa/smartphone_70x70.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): Webauthn -- */
      background-image: url('../img/icons/mfa/smartphone_76x76.png');
    }
  }

  .icon--location {
    /* -- Factor Icons (large): Webauthn -- */
    background-image: url('../img/icons/mfa/location_70x70.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): Webauthn -- */
      background-image: url('../img/icons/mfa/location_76x76.png');
    }
  }

  .smartcard,
  .mfa-smartcard {
    /* -- Factor Icons (large): PIV -- */
    background-image: url('../img/icons/login/smartcard_70x70.png');

    @media
      (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) {
      /* -- Factor Icons (high DPI): PIV -- */
      background-image: url('../img/icons/login/smartcard@2x.png');
    }
  }

  .button {
    /* -- Buttons' Colors -- */
    @include light-button-template($button-bg-color);

    &:focus {
      border-color: $input-border-color-focus;
    }
  }

  .button-dark {
    /* -- Buttons' Colors -- */
    @include dark-button-template($dark-button-bg-color);
  }

  .button-primary {
    /* -- Buttons' Colors -- */
    @include dark-button-template($primary-button-bg-color);
  }

  .button-success {
    /* -- Buttons' Colors -- */
    @include dark-button-template($success-button-bg-color);
  }

  .button.link-button-disabled {
    /* -- Buttons' Colors -- */
    color: $disabled-button-text-color;

    &:hover,
    &:focus,
    &:active,
    &:focus {
      /* -- Buttons' Colors -- */
      cursor: default;
      background-image: none;
    }
  }

  .button.button-primary.link-button-disabled {
    /* -- Buttons' Colors -- */
    color: $disabled-primary-button-text-color;
    background-color: $disabled-primary-button-bg-color;
    border-color: $disabled-primary-button-bg-color;
    background-image: none;
    box-shadow: none;

    &:hover,
    &:focus,
    &:active,
    &:focus {
      /* -- Buttons' Colors -- */
      cursor: default;
      background-image: none;
    }
  }

  .icon-button {
    /* -- Buttons' Colors -- */
    @include button-template($icon-button-bg-color, 0%, $dark-text-color, 23%, 26%);
  }


  .okta-dropdown-list {
    /* -- Dropdown Colors -- */
    /* background: #fff; */
    border-color: $input-border-color-hover;
  }

  .factors-dropdown-wrap .okta-dropdown-list {
    /* -- Dropdown Colors -- */
    border-color: #ccc;
    border-color: rgba(0, 0, 0, 0.2);
  }

  .okta-dropdown-option {
    /* -- Dropdown Colors -- */
    /* background: transparent; */
    /* border-bottom-color: #fff; */

    &:hover {
      /* -- Dropdown Colors -- */
      /* background: #f9f9f9; */
    }

    &.dropdown-list-title:hover {
      /* -- Dropdown Colors -- */
      background: transparent;
    }

    a {
      /* -- Dropdown Colors -- */
      color: $dark-text-color;
    }
  }


  .okta-infobox-error {
    /* -- Error Infobox Colors -- */
    /* background-color: #fff; */
    /* border: 1px solid #ddd; */

    &:before {
      /* -- Error Infobox Colors -- */
      /* background-color: #e34843; */
    }

    .error-16:before {
      /* -- Error Infobox Colors: error icon -- */
      /* color: #fff; */

      /* Use the rules below to replace an error icon in error infoboxes */
      /* content: ''; */
      /* width: 16px; */
      /* height: 16px; */
      /* background-image: none; */
    }

  }

  .enroll-required-factor-list {
    .enroll-factor-row-min .enroll-factor-description {
      h3 {
        /* -- Enroll required factors, factors that are not the current step -- */
        color: $light-text-color;
      }
    }

  }

  .okta-form-input-field {
    /* -- Input Fields -- */
    background-color: $input-bg-color;
    border-color: $input-border-color;

    &:hover {
      /* -- Input Fields -- */
      border-color: $input-border-color-hover;
    }

    &.focused-input {
      border-color: $input-border-color-focus;
    }

    input {
      /* -- Input Fields -- */
      font-family: $fonts;
      color: $dark-text-color;

      &::-webkit-input-placeholder {
        /* -- Input Fields: placeholder -- */
        font-family: $fonts;
        color: $placeholder-text-color;
      }

      &::-moz-placeholder {
        /* -- Input Fields: placeholder -- */
        font-family: $fonts;
        color: $placeholder-text-color;
      }

      &:-ms-input-placeholder {
        /* -- Input Fields: placeholder -- */
        font-family: $fonts;
        color: $placeholder-text-color;
      }

      &[disabled] {
        /* -- Input Fields: disabled input field -- */
        color: $medium-text-color;
        -webkit-text-fill-color: $medium-text-color;
        /* background: #f4f4f4; */
      }

      &[type="password"] {
        /* -- Input Fields: password input field -- */
        font-family: Verdana, sans-serif;

        &:placeholder-shown {
          font-family: $fonts;
        }
      }

    }

    placeholder {
      /* -- Input Fields: placeholder -- */
      font-family: $fonts;
      color: $placeholder-text-color;
    }
  }

  .input-icon:before,
  .input-tooltip:before {
    /* -- Input Fields: icons -- */
    color: $input-icons-color;
  }

  .okta-form-label-inline {
    /* -- Input Fields -- */
    /* background-color: #f2f2f2; */
    /* border-color: #c8c8c8; */
    /* color: #999; */
  }

  .okta-form-input-error {
    /* -- Input Fields: error highlight -- */
    /* color: #d93934; */

    .error-16-small:before {
      /* -- Input Fields: error icon -- */
      /* color: #e34843; */

      /* Use the rules below to replace input fields error icon */
      /* content: ''; */
      /* width: 16px; */
      /* height: 16px; */
      /* background-image: none; */
    }
  }


  .chzn-single {
    /* -- Input Fields: Select Input -- */
    background-color: $input-bg-color;
    border-color: $input-border-color;

    span {
      /* -- Input Fields: Select Input -- */
      color: $medium-text-color;
    }

    &:hover {
      /* -- Input Fields: Select Input -- */
      border-color: $input-border-color-hover;
    }
  }

  .chzn-with-drop {
    .chzn-single,
    .chzn-drop {
      /* -- Input Fields: Select Input -- */
      background-color: $input-bg-color;
      border-color: $input-border-color-hover;
    }

    .chzn-results {

      li {
        /* -- Input Fields: Select Input -- */
        /* border-color: #fff; */
      }

      .highlighted {
        /* -- Input Fields: Select Input -- */
        /* background-color: #f9f9f9; */
      }
    }
  }

  .primary-auth { /* -- Page specific top level selectors -- */ }
  .password-expired { /* -- Page specific top level selectors -- */ }
  .password-reset { /* -- Page specific top level selectors -- */ }
  .password-reset-email-sent { /* -- Page specific top level selectors -- */ }
  .forgot-password { /* -- Page specific top level selectors -- */ }
  .account-unlock { /* -- Page specific top level selectors -- */ }
  .account-unlock-email-sent { /* -- Page specific top level selectors -- */ }
  .recovery-challenge { /* -- Page specific top level selectors -- */ }
  .recovery-loading { /* -- Page specific top level selectors -- */ }
  .recovery-question { /* -- Page specific top level selectors -- */ }
  .refresh-auth-state { /* -- Page specific top level selectors -- */ }

  .enroll-choices { /* -- Page specific top level selectors -- */ }
  .enroll-totp { /* -- Page specific top level selectors -- */ }
  .barcode-totp { /* -- Page specific top level selectors -- */ }
  .activate-totp { /* -- Page specific top level selectors -- */ }
  .enroll-manual-totp { /* -- Page specific top level selectors -- */ }
  .barcode-push { /* -- Page specific top level selectors -- */ }
  .activate-push { /* -- Page specific top level selectors -- */ }
  .enroll-manual-push { /* -- Page specific top level selectors -- */ }
  .enroll-activation-link-sent { /* -- Page specific top level selectors -- */ }
  .enroll-symantec { /* -- Page specific top level selectors -- */ }
  .enroll-rsa { /* -- Page specific top level selectors -- */ }
  .enroll-onprem { /* -- Page specific top level selectors -- */ }
  .enroll-duo { /* -- Page specific top level selectors -- */ }
  .enroll-sms { /* -- Page specific top level selectors -- */ }
  .enroll-call { /* -- Page specific top level selectors -- */ }
  .enroll-question { /* -- Page specific top level selectors -- */ }

  .mfa-verify-duo { /* -- Page specific top level selectors -- */ }
  .mfa-verify { /* -- Page specific top level selectors: all challenge pages except duo -- */ }
  .mfa-verify-totp { /* -- Page specific top level selectors -- */ }
  .mfa-verify-push { /* -- Page specific top level selectors -- */ }
  .mfa-verify-totp-inline { /* -- Page specific top level selectors -- */ }
  .mfa-verify-question { /* -- Page specific top level selectors -- */ }
  .mfa-verify-passcode { /* -- Page specific top level selectors -- */ }
  .mfa-verify-password { /* -- Page specific top level selectors -- */ }

}


.okta-tooltip.qtip-custom {
  /* -- Tooltips -- */
  font-family: $fonts;
  /* background-color: #4d4d4d; */
  /* border-color: #303030; */

  .qtip-content {
    /* -- Tooltips -- */
    /* color: #f3f3f3; */
  }

  .qtip-titlebar {
    /* -- Tooltips -- */
    /* background-color: #404040 */
  }
}

.okta-sign-in-security-image-tooltip.qtip-custom {
  /* -- Tooltips -- */
  font-family: $fonts;
  /* background-color: #4d4d4d; */
  /* border-color: #303030; */

  .qtip-content {
    /* -- Tooltips -- */
    /* color: #f3f3f3; */
  }
}

/*  Remove the background image and borders on a smaller window size */
@include max-width-mq(600px) {
  /* stylelint-disable declaration-no-important */
  .login-bg-image {
    background-image: none !important;
    background-color: #fff !important;
    filter: unset !important;
  }
  /* stylelint-enable declaration-no-important */

  /* Using the same selector as line 59 to override styles at small screen sizes. */
  #okta-sign-in.auth-container {

    width: auto;
    margin-right: 0;
    margin-left: 0;

    &.main-container {
      border: 0;
      box-shadow: none;
    }

    .auth-content {
      max-width: $container-width - 84px;
      margin: 0 auto;
    }

  }
}