*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --base-font-size: 16px;
  --base-font-weight: 500;
  --base-font-line-height: 1.6;
  --body-font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
    Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
}

body {
  margin: 0;
  font-size: var(--base-font-size);
  font-weight: var(--base-font-weight);
  line-height: var(--base-font-line-height);
  font-family: var(--body-font-family);
}

main {
  height: 100%;
}

/* Layout */
#signin {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('https://assets.agentsonly.com/img/auth0-mfa-background.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Antd Card */
#signin .ant-card-bordered {
  width: 440px;
  /* height: 500px; dynamic height logic in js */
  padding: 32px 40px;
  box-shadow:
    0px 12px 16px -4px rgba(16, 24, 40, 0.1),
    0px 4px 6px -2px rgba(16, 24, 40, 0.05);
  border-radius: 12px;
}

.ant-card-body {
  padding: 0;
}

/* Antd Form Items */
.ant-form-item {
  margin: 0 0 16px;
}

.ant-form-item-label {
  font-weight: 500;
}

.ant-col-24.ant-form-item-label {
  padding-bottom: 6px;
}

.ant-form-item-label > label {
  height: auto;
}

.ant-input,
.ant-input-affix-wrapper {
  font-size: 16px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
}

.ant-input-affix-wrapper > input.ant-input {
  border-radius: 0;
}

.btn-ao-style.btn-ao-style {
  width: 100%;
  color: white;
  border-radius: 8px;
  border-color: transparent;
  background: linear-gradient(98.8deg, #009170 29.48%, #3538cd 133.95%);
}

.btn-ao-style.btn-ao-style:hover {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    linear-gradient(98.8deg, #009170 29.48%, #3538cd 133.95%);
}

.btn-ao-style.btn-ao-style:focus {
  box-shadow: 0 0 0 4px #ebfff9;
}

.ant-btn > span.ant-btn-loading-icon {
  display: none;
}

.resend-button > span.ant-btn-loading-icon {
  display: none;
}

.ant-btn[disabled].btn-ao-style.btn-ao-style {
  background: linear-gradient(
      98.8deg,
      rgba(0, 145, 112, 0.3) 29.48%,
      rgba(53, 56, 205, 0.3) 133.95%
    ),
    #ffffff;
}

/* AO Custom Style */
.title-container {
  margin-top: 28px;
  margin-bottom: 28px;
}

.title {
  font-size: 30px;
  line-height: 1.2;
  font-weight: 500;
  color: #101828;
}

.description {
  font-size: 16px;
  font-weight: 400;
  color: #344054;
  text-align: center;
  width: 100%;
  margin-bottom: 0;
  line-height: normal;
}

.sub-title {
  color: #344054;
  text-align: center;
  width: 100%;
}

.resend-container {
  text-align: center;
  margin-top: 24px;
  color: #344054;
  font-size: 16px;
}

.resend-button {
  color: #009170;
  background: none;
  border: none;
  padding: 0;
}

.back-to-login-container {
  text-align: center;
  margin-top: 24px;
  color: #344054;
  font-size: 16px;
}

.back-to-login-button {
  color: #009170;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.phone-input-disable {
  background: #f5f5f5;
}

.code-disable {
  background: #f5f5f5;
  color: #667085;
  display: flex;
  justify-content: center;
}

.copy-code-btn {
  background: none;
  color: #344054;
  border-radius: 8px;
  width: 100%;
}

.safely-checkbox-container {
  display: flex;
  align-items: center;
  margin: 18px 0px;
}

.safely-checkbox {
  margin: 0px 8px 0px 0px !important;
  border-radius: 4px;
  height: 16px;
  width: 16px;
}

.remember-checkbox-container {
  display: flex;
  align-items: center;
  margin: 18px 0px;
  cursor: pointer;
}

.remember-checkbox {
  margin: 0px 8px 0px 0px !important;
  border-radius: 4px;
  height: 16px;
  width: 16px;
}

.d-none {
  display: none;
}

.ant-input-suffix {
  margin-right: 4px;
  margin-left: 0 !important;
}

.link {
  cursor: pointer;
  text-decoration: underline;
}

#mfa-error {
  color: #f04438;
  text-align: center;
}

#mfa-error a {
  color: #344054;
  text-decoration: underline;
}

#identity-login-resend {
  cursor: pointer;
}

.otp-invalid {
  border: 1px solid #fda29b !important;
}

#otp-error-icon {
  color: #f04438;
}

#otp-invalid-code-msg {
  color: #f04438;
  font-weight: 400;
  font-size: 14px;
  text-align: left;
}

.word-wrap {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  max-width: 360px;
  vertical-align: text-bottom;
}