/* フォーム関連 */
.form {
  margin: 40px auto 0;
  display: flex;
  align-items: center;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
.form {
    max-width: 300px;
}
  }
@media screen and (max-width: 768px) {
.form.large {
      max-width: 500px;
  }
    }
.form input {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0px 12px 0px 12px;
  }
.form input.with-icon {
      padding: 0px 14px 0px 46px;
    }
.form input {

    background: #fff;
    border: 1px solid #dadada;
    border-color: #dadada;
  }
.form input.error {
      border-color: #e12832;
    }
.form input {

    border-radius: 4px;
    color: #3a3e49;
    font-size: var(--font-14);
    outline: none;
    transition: border 0.3s ease;
    border-radius: 4px;
  }
.form input:is(.form input)::-moz-placeholder {
      color: #888888;
      font-size: var(--font-14);
    }
.form input:is(.form input)::placeholder {
      color: #888888;
      font-size: var(--font-14);
    }
.form input:focus {
      border: 1px solid var(--color-primary);
    }
@media screen and (max-width: 768px) {
.form input {
      font-size: var(--font-16);
  }
    }
.form:invalid .button {
      background-color: var(--color-disabled);
      color: var(--color-text-disabled);
    }
.form:invalid .button:hover {
      background-color: var(--color-disabled);
      color: var(--color-text-disabled);
    }

.form-input-container {
  width: 100%;
  position: relative;
}

.form-input-container img {
    position: absolute;
    top: 12px;
    left: 12px;
    max-width: 24px;
  }

.form-checkbox-container {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  gap: 8px;
}

.form-checkbox-container input {
    max-width: 20px;
    border-color: #dbdbdb;
    width: auto;
  }

.form-inline-error {
  color: var(--color-error);
  display: inline-block;
  font-size: var(--font-12);
  width: 100%;
  text-align: left;
}

.form-inline-error.standalone {
    text-align: center;
  }

.form-inline-error.bigger {
    font-size: var(--font-14);
  }

.form-input-container:has(+ p.form-inline-error) input {
  border: 1px solid var(--color-error);
}

.form > input:has(+ p.form-inline-error) {
  border: 1px solid var(--color-error);
}

.form-hint {
  font-size: var(--font-12);
  color: #888;
}

.form-label {
  display: inline-block;
  width: 100%;
  text-align: left;
  font-size: var(--font-14);
  color: #656565;
}

.info-box {
  background-color: #fafafa;
  padding: 8px 12px;
  border-radius: 2px;
  width: 100%;
}

.info-box h2 {
    margin-bottom: 0;
  }

.info-box p {
    margin-top: 0;
    color: var(--color-text);
  }

.mfa-method-list {
  padding: 10px 0 10px 4px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
}

.mfa-method {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

.mfa-method * {
    cursor: pointer;
  }

.mfa-method input {
    height: 22px;
    width: 27px;
  }

.qr-box {
  background: #f5f5f5;
  width: 100%;
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.manual-setup-box {
  background: #f5f5f5;
  width: 100%;
  padding: 8px 12px;
}

.manual-setup-box p {
    word-wrap: anywhere;
  }

.backup-codes {
  display: flex;
  width: 100%;
  padding: 24px 0px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  background: #f5f5f5;
}

.backup-codes .codes {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }

.backup-codes .codes .left,.backup-codes .codes .right {
      color: black;

      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }

.backup-codes-controls {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 0 24px;
}

.backup-codes-controls .backup-button {
    width: 100%;

    cursor: pointer;

    color: var(--color-primary);
    background-color: rgba(0, 0, 0, 0);
    border-radius: 100px;
    border: 1px solid var(--color-primary);
    padding: 8px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
  }

.backup-codes-controls .backup-button:hover {
      border: 1px solid var(--color-primary-hover);
      background-color: rgba(51, 135, 255, 0.04);
    }

.backup-codes-controls .backup-button:active {
      box-shadow: 1px 1px 2px 1px rgb(70, 99, 140);
    }