.step-login-main {
  min-height: calc(100vh - 44px);
}

.step-login-card {
  width: 700px;
  max-width: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 0 4px rgba(51, 51, 51, 0.04);
}

.step-login-tabs {
  display: grid;
  width: 700px;
  max-width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  border-radius: 999px;
  background: #e5e8ed;
  margin-bottom: 12px;
  padding: 6px;
}

.step-login-tab {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 12px 20px;
  color: #8a8d93;
  font: 400 18px/24px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;
  cursor: pointer;
}

.step-login-tab:hover,
.step-login-tab:focus-visible {
  background: rgba(255, 255, 255, 0.55);
  color: #333333;
  outline: none;
}

.step-login-tab.is-active {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(51, 51, 51, 0.08);
  color: #222222;
}

.step-login-content {
  padding: 24px 24px 32px;
}

.step-login-notice {
  width: 700px;
  max-width: 100%;
  border: 1px solid #d6e6f7;
  border-radius: 4px;
  background: #eaf4ff;
  margin-bottom: 16px;
  padding: 16px;
  color: #333333;
  font-size: 16px;
  line-height: 24px;
}

.step-login-panel[hidden] {
  display: none;
}

.step-login-panel h2 {
  margin: 0 0 24px 192px;
  color: #333333;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  text-align: left;
}

.step-auth-form {
  display: grid;
  width: 100%;
  gap: 16px;
}

.step-auth-field {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  color: #333333;
  font-size: 16px;
  line-height: 24px;
}

.step-auth-field > input,
.step-auth-password > input,
.step-auth-phone > input,
.step-auth-select {
  width: 100%;
  min-width: 0;
  height: 44px;
  border: 1px solid #cccccc;
  border-radius: 2px;
  background-color: #ffffff;
  box-shadow: inset 0 0 3px rgba(204, 204, 204, 0.6);
  color: #333333;
  font: 400 16px/24px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;
}

.step-auth-field > input,
.step-auth-password > input,
.step-auth-phone > input {
  padding: 9px 10px;
}

.step-auth-field > input:focus,
.step-auth-password:focus-within,
.step-auth-phone > input:focus,
.step-auth-select:focus-within {
  border-color: #0d61ab;
  box-shadow: 0 0 0 3px rgba(14, 117, 208, 0.16), inset 0 0 3px rgba(204, 204, 204, 0.6);
  outline: none;
}

.step-auth-password {
  position: relative;
  display: block;
  min-width: 0;
}

.step-auth-password > input {
  width: 100%;
  height: 42px;
  border: 0;
  background: transparent;
  padding-right: 48px;
}

.step-auth-password > input:focus,
.step-auth-phone > input:focus {
  outline: none;
}

.step-auth-password button {
  position: absolute;
  top: 50%;
  right: 6px;
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  padding: 6px;
  color: #737373;
  cursor: pointer;
  transform: translateY(-50%);
}

.step-auth-password button:hover,
.step-auth-password button:focus-visible {
  color: #0e75d0;
  outline: none;
}

.step-auth-eye {
  --client-icon-url: url("https://cdn.jsdelivr.net/npm/remixicon@4.9.1/icons/System/eye-line.svg");
  width: 22px;
  height: 22px;
}

.step-auth-phone {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 8px;
}

.step-auth-phone > input {
  height: 44px;
}

.step-auth-select {
  position: relative;
  display: block;
  background-image: url("https://cdn.jsdelivr.net/npm/remixicon@4.9.1/icons/Arrows/arrow-down-s-fill.svg");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

.step-auth-select select {
  width: 100%;
  height: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 9px 36px 9px 10px;
  color: #333333;
  font: 400 16px/24px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;
  cursor: pointer;
}

.step-auth-select select:focus {
  outline: none;
}

.step-auth-consents {
  display: grid;
  gap: 16px;
  margin-left: 192px;
}

.step-auth-checkbox {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  color: #333333;
  font-size: 16px;
  line-height: 24px;
}

.step-auth-checkbox input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: #0e75d0;
  cursor: pointer;
}

.step-auth-checkbox a,
.step-auth-actions a {
  color: #0d61ab;
  text-decoration: none;
}

.step-auth-checkbox a:hover,
.step-auth-checkbox a:focus-visible,
.step-auth-actions a:hover,
.step-auth-actions a:focus-visible {
  color: #0e75d0;
  text-decoration: underline;
  outline: none;
}

.step-auth-actions {
  display: flex;
  min-height: 96px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-left: 192px;
  padding-top: 16px;
}

.step-auth-actions .btn.btn-lg.btn-n-primary.btn-rounded.icn-btn {
  min-height: 52px;
  gap: 10px;
  padding: 14px 22px;
  font-size: 18px;
  line-height: 24px;
}

.step-auth-actions .icn-btn__icon,
.step-auth-actions .icn-btn__icon svg {
  width: 22px;
  height: 22px;
}

.step-login-mobile-breadcrumb {
  margin-top: auto;
}

@media (max-width: 900px) {
  .step-login-page-frame {
    display: flex;
    min-height: calc(100vh - 52px);
    flex-direction: column;
  }

  .step-login-main {
    display: flex;
    min-height: calc(100vh - 96px);
    flex: 1 1 auto;
    flex-direction: column;
    padding: 12px 8px 0;
  }

  .step-login-heading {
    padding-bottom: 16px;
  }

  .step-login-card {
    width: 100%;
  }

  .step-login-content {
    padding: 16px 12px 24px;
  }

  .step-login-notice {
    margin-bottom: 12px;
    padding: 12px;
  }

  .step-login-tabs {
    margin-bottom: 12px;
  }

  .step-login-panel h2 {
    margin-left: 0;
    margin-bottom: 20px;
    text-align: left;
  }

  .step-auth-field {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .step-auth-consents,
  .step-auth-actions {
    margin-left: 0;
  }

  .step-auth-actions {
    min-height: 88px;
    padding-top: 12px;
  }

  .step-login-mobile-breadcrumb.client-breadcrumb--mobile {
    margin-top: auto;
    padding-top: 32px;
    padding-bottom: 12px;
  }
}

@media (max-width: 420px) {
  .step-login-tab {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 16px;
    line-height: 22px;
  }

  .step-auth-phone {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .step-auth-actions .btn.btn-lg.btn-n-primary.btn-rounded.icn-btn {
    max-width: 100%;
    min-height: 52px;
    padding-right: 18px;
    padding-left: 18px;
    font-size: 16px;
  }
}