@authing/react-ui-components 3.0.1-alpha.1 → 3.0.1-beta.1

package/lib/index.css

@@ -0,0 +1,2358 @@
+.authing-dropdown {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+}
+.authing-dropdown-trigger {
+  cursor: pointer;
+}
+.authing-dropdown-menu-container {
+  height: 0;
+  opacity: 0;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  transition: all 0.3s;
+  cursor: pointer;
+  background-color: #fff;
+  padding: 4px 0;
+  border-radius: 2px;
+  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  pointer-events: none;
+}
+.authing-dropdown-menu-container__visible {
+  height: auto;
+  opacity: 1;
+  pointer-events: unset;
+}
+.authing-dropdown-menu-item {
+  padding: 5px 12px;
+  transition: all 0.3s;
+}
+.authing-dropdown-menu-item:hover {
+  background-color: #f5f5f5;
+}
+.authing-dropdown-icon {
+  margin-left: 8px;
+}
+
+.authing-tabs {
+  display: flex;
+  margin-bottom: 36px;
+  align-items: center;
+}
+.authing-tabs-inner {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex: 1;
+}
+.authing-tabs-inner--more {
+  box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);
+}
+.authing-tab-item {
+  color: #aeb9d4;
+  font-size: 16px;
+  transition: all 0.3s ease-out;
+  white-space: nowrap;
+  cursor: pointer;
+  position: relative;
+  height: 28px;
+  margin-right: 32px;
+}
+.authing-tab-item:last-child {
+  margin-right: 12px;
+}
+.authing-tab-item:only-child {
+  margin-right: 0;
+}
+.authing-tab-item::after {
+  content: '';
+  width: 0;
+  height: 2px;
+  display: block;
+  position: absolute;
+  left: 50%;
+  bottom: -4px;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  background-color: transparent;
+  transition: all 0.3s ease-out;
+}
+.authing-tab-item__active {
+  color: #396aff;
+  font-size: 18px;
+}
+.authing-tab-item__active::after {
+  width: 26px;
+  background-color: #396aff;
+}
+.authing-tabs-show-more {
+  position: relative;
+  z-index: 2;
+}
+.authing-tabs-show-more.ant-btn {
+  padding: 0 12px;
+}
+.authing-tabs-show-more:hover,
+.authing-tabs-show-more:focus,
+.authing-tabs-show-more:active {
+  background-color: #fff;
+}
+.authing-tabs-show-more:hover .authing-tabs-more-panel {
+  height: auto;
+  opacity: 1;
+  padding: 4px 0;
+}
+.authing-tabs-show-more:after {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 6px;
+  top: 100%;
+  left: 0;
+  position: absolute;
+}
+.authing-tabs-more-panel {
+  position: absolute;
+  box-sizing: border-box;
+  transition: all 0.3s;
+  height: 0;
+  opacity: 0;
+  right: 0;
+  top: 100%;
+  -webkit-transform: translateY(6px);
+          transform: translateY(6px);
+  background-color: #fff;
+  max-height: 200px;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  text-align: left;
+  list-style-type: none;
+  background-clip: padding-box;
+  border-radius: 2px;
+  outline: none;
+  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}
+.authing-tabs-more-panel-item {
+  min-width: 120px;
+  margin: 0;
+  padding: 5px 12px;
+  overflow: hidden;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+.authing-tabs-more-panel-item:hover {
+  background-color: #f5f5f5;
+}
+@media only screen and (max-width: 719px) {
+  .authing-tabs-inner {
+    justify-content: flex-start;
+  }
+  .authing-tab-item {
+    margin-right: 40px;
+    font-size: 14px;
+  }
+  .authing-tab-item__active {
+    font-size: 16px;
+  }
+  .authing-tab-pane {
+    padding-bottom: 70px;
+  }
+}
+
+.g2-mfa-bindTotp {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+}
+.g2-mfa-bindTotp .g2-mfa-bindTotp-copySecret {
+  width: 100%;
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #f5f6f7;
+  border-radius: 4px;
+}
+.g2-mfa-bindTotp .g2-mfa-bindTotp-copySecret .authing-ant-typography {
+  margin: 0;
+}
+.g2-mfa-bindTotp .g2-mfa-bindTotp-copySecret .authing-ant-typography svg {
+  color: #878a95 !important;
+  margin-left: 30px;
+}
+.g2-mfa-bindTotp .g2-mfa-bindTotp-secretSave {
+  margin-top: 16px;
+}
+.g2-mfa-bindTotp .g2-mfa-submit-button {
+  margin-top: 80px !important;
+}
+.g2-mfa-bindTotp .g2-mfa-bindTotp-qrcode {
+  box-shadow: 0px 0px 30px rgba(84, 89, 104, 0.15);
+  border-radius: 4px;
+}
+.g2-mfa-bindTotp .g2-mfa-bindTotp-securityCode-form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.g2-mfa-bindTotp .g2-mfa-bindTotp-securityCode-form .g2-mfa-submit-button {
+  margin-top: 64px !important;
+}
+.g2-mfa-bindTotp .g2-mfa-bindTotp-securityCode-form .g2-mfa-totp-verify-input {
+  text-align: center;
+  margin-top: 40px !important;
+}
+.g2-mfa-bindTotp .g2-mfa-bindTotp-securityCode-form p {
+  color: #878a95;
+}
+
+.authing-toggle-mfa,
+.toggle-mfa-dropdown .authing-dropdown-icon {
+  color: #999;
+}
+.toggle-mfa-dropdown {
+  margin-top: 30px;
+  align-self: center;
+}
+.toggle-mfa-dropdown .authing-dropdown-menu-item {
+  white-space: nowrap;
+}
+
+.authing-guard-complete-info-title {
+  font-size: 20px;
+  text-align: center;
+  color: #333;
+}
+.authing-guard-complete-info-msg {
+  color: #b2b2b2;
+}
+
+
+.authing-agreements {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+.authing-agreements.authing-agreements-error .authing-agreements-item-invalid {
+  color: #ff4d4f;
+}
+.authing-agreements.authing-agreements-error .authing-agreements-item-invalid a {
+  color: #ff4d4f;
+}
+.authing-agreements.authing-agreements-error .authing-agreements-item-invalid :global(.ant-checkbox-inner) {
+  border-color: #ff4d4f;
+}
+.authing-agreements-item {
+  color: #999999;
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  cursor: pointer;
+  font-size: 12px;
+}
+.authing-agreements-item:not(:first-child) {
+  margin-top: 4px;
+}
+.authing-agreements-item p {
+  margin-bottom: 0;
+  display: inline-block;
+}
+.authing-agreements-checkbox {
+  margin-bottom: 2px;
+}
+.authing-agreements-checkbox :global(.ant-checkbox-inner) {
+  width: 14px;
+  height: 14px;
+}
+.authing-agreements-checkbox :global(.ant-checkbox-inner)::after {
+  left: 20%;
+}
+.authing-agreements-item-content {
+  line-height: 23px;
+}
+
+.authing-reset-pwd-btn {
+  margin-top: 24px;
+}
+
+.authing-guard-layout {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 24px 0;
+  height: 100%;
+}
+.authing-guard-layout__hidden {
+  pointer-events: none;
+}
+.authing-guard-layout__dis-none {
+  z-index: -1;
+  opacity: 0;
+}
+.authing-guard-layout__modal {
+  position: fixed;
+  left: 0;
+  top: 0;
+}
+.authing-guard-mask {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.45);
+  opacity: 1;
+  transition: all 0.3s;
+}
+.authing-guard-mask__hidden {
+  opacity: 0;
+}
+.authing-guard-container {
+  width: 440px;
+  min-height: 610px;
+  max-height: 100%;
+  box-sizing: border-box;
+  background-color: #fff;
+  padding: 39px 38px 31px;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 2px 10px 0 rgba(57, 106, 255, 0.2);
+  margin-left: auto;
+  margin-right: auto;
+  overflow: auto;
+  position: relative;
+  -webkit-transform: translateY(0);
+          transform: translateY(0);
+  transition: all 0.3s;
+}
+.authing-guard-container__hidden {
+  -webkit-transform: translateY(2000px);
+          transform: translateY(2000px);
+}
+.authing-guard-loading,
+.authing-guard-load-error {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.authing-guard-close-btn {
+  position: absolute;
+  right: 12px;
+  top: 12px;
+  border: none;
+  outline: none;
+  box-shadow: none;
+  background-color: #fff;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  line-height: 20px;
+  cursor: pointer;
+}
+.authing-guard-close-btn:focus {
+  outline: none;
+  border: none;
+  box-shadow: none;
+}
+.authing-guard-close-btn:hover {
+  color: #396aff;
+}
+@media only screen and (max-width: 719px) {
+  .authing-guard-layout {
+    padding: 0;
+  }
+  .authing-guard-container {
+    width: 100%;
+    min-height: 100%;
+    border: none;
+    border-radius: initial;
+    box-shadow: initial;
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+  .authing-ant-input {
+    font-size: 14px;
+  }
+}
+
+.authing-guard-header {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.authing-guard-logo {
+  margin-bottom: 8px;
+}
+.authing-guard-logo img {
+  object-fit: contain;
+}
+.authing-guard-title-container {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+}
+.authing-guard-title {
+  color: #282d3c;
+  font-size: 24px;
+  margin-bottom: 4px;
+  width: 100%;
+  word-break: break-all;
+  text-align: center;
+}
+.authing-guard-description {
+  font-size: 16px;
+  color: #878a95;
+  margin-bottom: 23px;
+}
+@media only screen and (max-width: 719px) {
+  .authing-guard-header {
+    align-items: flex-start;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding-top: 40px;
+    padding-bottom: 48px;
+  }
+  .authing-guard-title {
+    margin-bottom: 0;
+    padding-left: 8px;
+    color: #333333;
+    font-weight: 500;
+    text-align: unset;
+  }
+  .authing-guard-logo {
+    margin: 0;
+  }
+  .authing-guard-title-container {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .authing-guard-description {
+    margin-bottom: 0px;
+    padding-left: 8px;
+  }
+}
+
+.authing-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+}
+
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+*[class*='authing-'] {
+  /* stylelint-disable at-rule-no-unknown */
+}
+*[class*='authing-'] html,
+*[class*='authing-'] body {
+  width: 100%;
+  height: 100%;
+}
+*[class*='authing-'] input::-ms-clear,
+*[class*='authing-'] input::-ms-reveal {
+  display: none;
+}
+*[class*='authing-'] *,
+*[class*='authing-'] *::before,
+*[class*='authing-'] *::after {
+  box-sizing: border-box;
+}
+*[class*='authing-'] html {
+  font-family: sans-serif;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -ms-overflow-style: scrollbar;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+@-ms-viewport {
+  width: device-width;
+}
+*[class*='authing-'] body {
+  margin: 0;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  background-color: #fff;
+  -webkit-font-feature-settings: 'tnum';
+          font-feature-settings: 'tnum';
+}
+*[class*='authing-'] [tabindex='-1']:focus {
+  outline: none !important;
+}
+*[class*='authing-'] hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+*[class*='authing-'] h1,
+*[class*='authing-'] h2,
+*[class*='authing-'] h3,
+*[class*='authing-'] h4,
+*[class*='authing-'] h5,
+*[class*='authing-'] h6 {
+  margin-top: 0;
+  margin-bottom: 0.5em;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 500;
+}
+*[class*='authing-'] p {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+*[class*='authing-'] abbr[title],
+*[class*='authing-'] abbr[data-original-title] {
+  text-decoration: underline;
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+  border-bottom: 0;
+  cursor: help;
+}
+*[class*='authing-'] address {
+  margin-bottom: 1em;
+  font-style: normal;
+  line-height: inherit;
+}
+*[class*='authing-'] input[type='text'],
+*[class*='authing-'] input[type='password'],
+*[class*='authing-'] input[type='number'],
+*[class*='authing-'] textarea {
+  -webkit-appearance: none;
+}
+*[class*='authing-'] ol,
+*[class*='authing-'] ul,
+*[class*='authing-'] dl {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+*[class*='authing-'] ol ol,
+*[class*='authing-'] ul ul,
+*[class*='authing-'] ol ul,
+*[class*='authing-'] ul ol {
+  margin-bottom: 0;
+}
+*[class*='authing-'] dt {
+  font-weight: 500;
+}
+*[class*='authing-'] dd {
+  margin-bottom: 0.5em;
+  margin-left: 0;
+}
+*[class*='authing-'] blockquote {
+  margin: 0 0 1em;
+}
+*[class*='authing-'] dfn {
+  font-style: italic;
+}
+*[class*='authing-'] b,
+*[class*='authing-'] strong {
+  font-weight: bolder;
+}
+*[class*='authing-'] small {
+  font-size: 80%;
+}
+*[class*='authing-'] sub,
+*[class*='authing-'] sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+*[class*='authing-'] sub {
+  bottom: -0.25em;
+}
+*[class*='authing-'] sup {
+  top: -0.5em;
+}
+*[class*='authing-'] a {
+  color: #396aff;
+  text-decoration: none;
+  background-color: transparent;
+  outline: none;
+  cursor: pointer;
+  transition: color 0.3s;
+  -webkit-text-decoration-skip: objects;
+}
+*[class*='authing-'] a:hover {
+  color: #618eff;
+}
+*[class*='authing-'] a:active {
+  color: #254cd9;
+}
+*[class*='authing-'] a:active,
+*[class*='authing-'] a:hover {
+  text-decoration: none;
+  outline: 0;
+}
+*[class*='authing-'] a:focus {
+  text-decoration: none;
+  outline: 0;
+}
+*[class*='authing-'] a[disabled] {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+*[class*='authing-'] pre,
+*[class*='authing-'] code,
+*[class*='authing-'] kbd,
+*[class*='authing-'] samp {
+  font-size: 1em;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+}
+*[class*='authing-'] pre {
+  margin-top: 0;
+  margin-bottom: 1em;
+  overflow: auto;
+}
+*[class*='authing-'] figure {
+  margin: 0 0 1em;
+}
+*[class*='authing-'] img {
+  vertical-align: middle;
+  border-style: none;
+}
+*[class*='authing-'] svg:not(:root) {
+  overflow: hidden;
+}
+*[class*='authing-'] a,
+*[class*='authing-'] area,
+*[class*='authing-'] button,
+*[class*='authing-'] [role='button'],
+*[class*='authing-'] input:not([type='range']),
+*[class*='authing-'] label,
+*[class*='authing-'] select,
+*[class*='authing-'] summary,
+*[class*='authing-'] textarea {
+  touch-action: manipulation;
+}
+*[class*='authing-'] table {
+  border-collapse: collapse;
+}
+*[class*='authing-'] caption {
+  padding-top: 0.75em;
+  padding-bottom: 0.3em;
+  color: rgba(0, 0, 0, 0.45);
+  text-align: left;
+  caption-side: bottom;
+}
+*[class*='authing-'] th {
+  text-align: inherit;
+}
+*[class*='authing-'] input,
+*[class*='authing-'] button,
+*[class*='authing-'] select,
+*[class*='authing-'] optgroup,
+*[class*='authing-'] textarea {
+  margin: 0;
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+}
+*[class*='authing-'] button,
+*[class*='authing-'] input {
+  overflow: visible;
+}
+*[class*='authing-'] button,
+*[class*='authing-'] select {
+  text-transform: none;
+}
+*[class*='authing-'] button,
+*[class*='authing-'] html [type="button"],
+*[class*='authing-'] [type="reset"],
+*[class*='authing-'] [type="submit"] {
+  -webkit-appearance: button;
+}
+*[class*='authing-'] button::-moz-focus-inner,
+*[class*='authing-'] [type='button']::-moz-focus-inner,
+*[class*='authing-'] [type='reset']::-moz-focus-inner,
+*[class*='authing-'] [type='submit']::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+*[class*='authing-'] input[type='radio'],
+*[class*='authing-'] input[type='checkbox'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+*[class*='authing-'] input[type='date'],
+*[class*='authing-'] input[type='time'],
+*[class*='authing-'] input[type='datetime-local'],
+*[class*='authing-'] input[type='month'] {
+  -webkit-appearance: listbox;
+}
+*[class*='authing-'] textarea {
+  overflow: auto;
+  resize: vertical;
+}
+*[class*='authing-'] fieldset {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+*[class*='authing-'] legend {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: 0.5em;
+  padding: 0;
+  color: inherit;
+  font-size: 1.5em;
+  line-height: inherit;
+  white-space: normal;
+}
+*[class*='authing-'] progress {
+  vertical-align: baseline;
+}
+*[class*='authing-'] [type='number']::-webkit-inner-spin-button,
+*[class*='authing-'] [type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+*[class*='authing-'] [type='search'] {
+  outline-offset: -2px;
+  -webkit-appearance: none;
+}
+*[class*='authing-'] [type='search']::-webkit-search-cancel-button,
+*[class*='authing-'] [type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+*[class*='authing-'] ::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+*[class*='authing-'] output {
+  display: inline-block;
+}
+*[class*='authing-'] summary {
+  display: list-item;
+}
+*[class*='authing-'] template {
+  display: none;
+}
+*[class*='authing-'] [hidden] {
+  display: none !important;
+}
+*[class*='authing-'] mark {
+  padding: 0.2em;
+  background-color: #feffe6;
+}
+*[class*='authing-'] ::selection {
+  color: #fff;
+  background: #396aff;
+}
+*[class*='authing-'] .clearfix::before {
+  display: table;
+  content: '';
+}
+*[class*='authing-'] .clearfix::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+.authing-guard-text-btn {
+  color: #396aff;
+  padding: 0;
+}
+.authing-guard-text-btn:hover,
+.authing-guard-text-btn:focus {
+  color: #6b90ff;
+  background-color: transparent;
+}
+.authing-text-center {
+  text-align: center;
+}
+.authing-text-center .authing-code-input {
+  justify-content: center;
+}
+.authing-text-center .authing-dropdown-menu-container {
+  text-align: left;
+}
+.authing-guard-form-actions {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 8px;
+  align-items: center;
+}
+.authing-guard-form-actions .authing-ant-divider-vertical {
+  visibility: hidden;
+}
+.authing-guard-tip {
+  color: #999;
+}
+.authing-guard-tip-btn-comb {
+  margin-left: auto;
+}
+.authing-guard-full-width-space {
+  width: 100%;
+}
+.authing-data-tips {
+  position: relative;
+}
+.authing-data-tips::after {
+  content: attr(data-tips);
+  position: absolute;
+  white-space: nowrap;
+  top: 100%;
+  left: 50%;
+  -webkit-transform: translateX(-50%) translateY(6px);
+          transform: translateX(-50%) translateY(6px);
+  display: none;
+  background-color: rgba(0, 0, 0, 0.75);
+  font-size: 12px;
+  padding: 12px;
+  z-index: 500;
+  border-radius: 4px;
+  color: #fff;
+}
+.authing-data-tips:hover::after {
+  display: block;
+}
+.authing-data-tips__top {
+  position: relative;
+}
+.authing-data-tips__top::after {
+  top: auto;
+  bottom: 100%;
+  -webkit-transform: translateX(-50%) translateY(-6px);
+          transform: translateX(-50%) translateY(-6px);
+}
+.authing-guard-pointer {
+  cursor: pointer;
+}
+@media only screen and (max-width: 719px) {
+  .authing-guard-form-actions {
+    justify-content: flex-end !important;
+  }
+  .authing-guard-form-actions .authing-ant-divider-vertical {
+    visibility: initial;
+  }
+  .authing-guard-form-actions .authing-guard-text-btn {
+    color: #999999;
+    font-size: 12px;
+  }
+  .authing-guard-form-actions .authing-guard-tip-btn-comb {
+    margin-left: initial !important;
+    font-size: 12px;
+    font-weight: 400;
+    color: #999999;
+  }
+}
+
+@media only screen and (max-width: 719px) {
+  .authing-guard-form-submit-btn {
+    margin-top: 56px;
+    font-size: 14px;
+  }
+}
+
+.authing-guard-mfa-confirm-btn {
+  margin-top: 80px;
+}
+
+
+.authing-guard-mfa-title {
+  color: #181818;
+  font-size: 18px;
+  font-weight: 600;
+  text-align: center;
+  margin: 0;
+}
+.authing-guard-mfa-tips {
+  margin: 38px 0;
+  text-align: center;
+}
+
+.authing-guard-qr-form {
+  position: relative;
+  min-height: 300px;
+}
+.authing-guard-qr-loading {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.authing-send-code-btn {
+  display: inline-block;
+  border: none;
+  background-color: transparent;
+  font-size: inherit;
+  color: #396aff;
+  cursor: pointer;
+  padding: 0;
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  outline: none;
+}
+.authing-send-code-btn:focus {
+  outline: none;
+}
+.authing-send-code-btn[disabled] {
+  cursor: not-allowed;
+  -webkit-filter: opacity(0.5);
+          filter: opacity(0.5);
+}
+@media only screen and (max-width: 719px) {
+  .authing-send-code-btn {
+    font-size: 14px;
+  }
+}
+
+.authing-mfa-check-phone-from {
+  text-align: center;
+}
+
+
+.g2-completeInfo-content {
+  margin-bottom: 44px;
+}
+.g2-completeInfo-submit {
+  margin-top: 30px !important;
+}
+
+.authing-copy-text {
+  display: flex;
+  align-items: center;
+}
+.authing-copy-text-icon {
+  margin-left: 4px;
+  color: #396aff;
+}
+.authing-copy-text-icon__success {
+  color: #b7eb8f;
+}
+
+.g2-view-container-totp-dl {
+  width: 900px;
+  padding: 0;
+}
+.g2-mfa-totp-title {
+  width: 100%;
+  height: 54px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  color: #293350;
+  border-bottom: 1px solid #eaebee;
+  margin-bottom: 54px;
+}
+.g2-mfa-totp-download-tabs {
+  margin-top: 30px;
+}
+.g2-mfa-totp-download-tabs .authing-ant-tabs-tab-active .authing-ant-tabs-tab-btn {
+  font-weight: unset !important;
+}
+.g2-mfa-download-at-tab {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 15px;
+}
+.g2-mfa-download-at-tab .g2-mfa-totp-download-subtitle {
+  color: #545968;
+}
+.g2-mfa-download-at-tab .g2-mfa-totp-download-qrcode-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 35px;
+}
+.g2-mfa-download-at-tab .g2-mfa-totp-download-qrcode-item .g2-mfa-totp-download-image {
+  width: 130px;
+  height: 130px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0px 0px 30px rgba(84, 89, 104, 0.15);
+  border-radius: 4px;
+}
+.g2-mfa-download-at-tab .g2-mfa-totp-download-qrcode-item .g2-mfa-totp-download-qrcode-text {
+  margin-top: 8px;
+  color: #545968;
+}
+
+.g2-error-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: auto 0;
+}
+.g2-error-content span {
+  margin-top: 33px;
+  color: #545968;
+  font-size: 14px;
+}
+
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+*[class*='authing-'] {
+  /* stylelint-disable at-rule-no-unknown */
+}
+*[class*='authing-'] html,
+*[class*='authing-'] body {
+  width: 100%;
+  height: 100%;
+}
+*[class*='authing-'] input::-ms-clear,
+*[class*='authing-'] input::-ms-reveal {
+  display: none;
+}
+*[class*='authing-'] *,
+*[class*='authing-'] *::before,
+*[class*='authing-'] *::after {
+  box-sizing: border-box;
+}
+*[class*='authing-'] html {
+  font-family: sans-serif;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -ms-overflow-style: scrollbar;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+@-ms-viewport {
+  width: device-width;
+}
+*[class*='authing-'] body {
+  margin: 0;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  background-color: #fff;
+  -webkit-font-feature-settings: 'tnum';
+          font-feature-settings: 'tnum';
+}
+*[class*='authing-'] [tabindex='-1']:focus {
+  outline: none !important;
+}
+*[class*='authing-'] hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+*[class*='authing-'] h1,
+*[class*='authing-'] h2,
+*[class*='authing-'] h3,
+*[class*='authing-'] h4,
+*[class*='authing-'] h5,
+*[class*='authing-'] h6 {
+  margin-top: 0;
+  margin-bottom: 0.5em;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 500;
+}
+*[class*='authing-'] p {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+*[class*='authing-'] abbr[title],
+*[class*='authing-'] abbr[data-original-title] {
+  text-decoration: underline;
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+  border-bottom: 0;
+  cursor: help;
+}
+*[class*='authing-'] address {
+  margin-bottom: 1em;
+  font-style: normal;
+  line-height: inherit;
+}
+*[class*='authing-'] input[type='text'],
+*[class*='authing-'] input[type='password'],
+*[class*='authing-'] input[type='number'],
+*[class*='authing-'] textarea {
+  -webkit-appearance: none;
+}
+*[class*='authing-'] ol,
+*[class*='authing-'] ul,
+*[class*='authing-'] dl {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+*[class*='authing-'] ol ol,
+*[class*='authing-'] ul ul,
+*[class*='authing-'] ol ul,
+*[class*='authing-'] ul ol {
+  margin-bottom: 0;
+}
+*[class*='authing-'] dt {
+  font-weight: 500;
+}
+*[class*='authing-'] dd {
+  margin-bottom: 0.5em;
+  margin-left: 0;
+}
+*[class*='authing-'] blockquote {
+  margin: 0 0 1em;
+}
+*[class*='authing-'] dfn {
+  font-style: italic;
+}
+*[class*='authing-'] b,
+*[class*='authing-'] strong {
+  font-weight: bolder;
+}
+*[class*='authing-'] small {
+  font-size: 80%;
+}
+*[class*='authing-'] sub,
+*[class*='authing-'] sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+*[class*='authing-'] sub {
+  bottom: -0.25em;
+}
+*[class*='authing-'] sup {
+  top: -0.5em;
+}
+*[class*='authing-'] a {
+  color: #396aff;
+  text-decoration: none;
+  background-color: transparent;
+  outline: none;
+  cursor: pointer;
+  transition: color 0.3s;
+  -webkit-text-decoration-skip: objects;
+}
+*[class*='authing-'] a:hover {
+  color: #618eff;
+}
+*[class*='authing-'] a:active {
+  color: #254cd9;
+}
+*[class*='authing-'] a:active,
+*[class*='authing-'] a:hover {
+  text-decoration: none;
+  outline: 0;
+}
+*[class*='authing-'] a:focus {
+  text-decoration: none;
+  outline: 0;
+}
+*[class*='authing-'] a[disabled] {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+*[class*='authing-'] pre,
+*[class*='authing-'] code,
+*[class*='authing-'] kbd,
+*[class*='authing-'] samp {
+  font-size: 1em;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+}
+*[class*='authing-'] pre {
+  margin-top: 0;
+  margin-bottom: 1em;
+  overflow: auto;
+}
+*[class*='authing-'] figure {
+  margin: 0 0 1em;
+}
+*[class*='authing-'] img {
+  vertical-align: middle;
+  border-style: none;
+}
+*[class*='authing-'] svg:not(:root) {
+  overflow: hidden;
+}
+*[class*='authing-'] a,
+*[class*='authing-'] area,
+*[class*='authing-'] button,
+*[class*='authing-'] [role='button'],
+*[class*='authing-'] input:not([type='range']),
+*[class*='authing-'] label,
+*[class*='authing-'] select,
+*[class*='authing-'] summary,
+*[class*='authing-'] textarea {
+  touch-action: manipulation;
+}
+*[class*='authing-'] table {
+  border-collapse: collapse;
+}
+*[class*='authing-'] caption {
+  padding-top: 0.75em;
+  padding-bottom: 0.3em;
+  color: rgba(0, 0, 0, 0.45);
+  text-align: left;
+  caption-side: bottom;
+}
+*[class*='authing-'] th {
+  text-align: inherit;
+}
+*[class*='authing-'] input,
+*[class*='authing-'] button,
+*[class*='authing-'] select,
+*[class*='authing-'] optgroup,
+*[class*='authing-'] textarea {
+  margin: 0;
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+}
+*[class*='authing-'] button,
+*[class*='authing-'] input {
+  overflow: visible;
+}
+*[class*='authing-'] button,
+*[class*='authing-'] select {
+  text-transform: none;
+}
+*[class*='authing-'] button,
+*[class*='authing-'] html [type="button"],
+*[class*='authing-'] [type="reset"],
+*[class*='authing-'] [type="submit"] {
+  -webkit-appearance: button;
+}
+*[class*='authing-'] button::-moz-focus-inner,
+*[class*='authing-'] [type='button']::-moz-focus-inner,
+*[class*='authing-'] [type='reset']::-moz-focus-inner,
+*[class*='authing-'] [type='submit']::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+*[class*='authing-'] input[type='radio'],
+*[class*='authing-'] input[type='checkbox'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+*[class*='authing-'] input[type='date'],
+*[class*='authing-'] input[type='time'],
+*[class*='authing-'] input[type='datetime-local'],
+*[class*='authing-'] input[type='month'] {
+  -webkit-appearance: listbox;
+}
+*[class*='authing-'] textarea {
+  overflow: auto;
+  resize: vertical;
+}
+*[class*='authing-'] fieldset {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+*[class*='authing-'] legend {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: 0.5em;
+  padding: 0;
+  color: inherit;
+  font-size: 1.5em;
+  line-height: inherit;
+  white-space: normal;
+}
+*[class*='authing-'] progress {
+  vertical-align: baseline;
+}
+*[class*='authing-'] [type='number']::-webkit-inner-spin-button,
+*[class*='authing-'] [type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+*[class*='authing-'] [type='search'] {
+  outline-offset: -2px;
+  -webkit-appearance: none;
+}
+*[class*='authing-'] [type='search']::-webkit-search-cancel-button,
+*[class*='authing-'] [type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+*[class*='authing-'] ::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+*[class*='authing-'] output {
+  display: inline-block;
+}
+*[class*='authing-'] summary {
+  display: list-item;
+}
+*[class*='authing-'] template {
+  display: none;
+}
+*[class*='authing-'] [hidden] {
+  display: none !important;
+}
+*[class*='authing-'] mark {
+  padding: 0.2em;
+  background-color: #feffe6;
+}
+*[class*='authing-'] ::selection {
+  color: #fff;
+  background: #396aff;
+}
+*[class*='authing-'] .clearfix::before {
+  display: table;
+  content: '';
+}
+*[class*='authing-'] .clearfix::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+.authing-g2-render-module {
+  --sidePadding: 38px;
+  --containerWidth: 456px;
+}
+.authing-g2-render-module-modal {
+  --containerWidth: 456px;
+}
+@media only screen and (max-width: 450px) {
+  .authing-g2-render-module {
+    width: 100%;
+    --sidePadding: 8px;
+    --containerWidth: 100%;
+  }
+  .authing-g2-render-module-modal {
+    width: 100%;
+    --containerWidth: 100%;
+  }
+  .g2-view-container {
+    box-shadow: initial !important;
+    height: 100% !important;
+  }
+}
+.g2-view-container {
+  font-family: sans-serif;
+  box-shadow: 0px 0px 60px rgba(84, 89, 104, 0.05);
+  background: #ffffff;
+  display: flex;
+  flex-direction: column;
+  width: var(--containerWidth);
+  min-height: 610px;
+  box-sizing: border-box;
+  padding: 16px;
+  border-radius: 8px;
+  position: relative;
+}
+.g2-view-container .none {
+  display: none;
+}
+.g2-view-container .g2-view-back {
+  margin-top: 26px;
+  padding-left: var(--sidePadding);
+  cursor: pointer;
+  font-size: 14px;
+  color: #878a95;
+}
+.g2-view-container .g2-view-back .g2-view-back-hover:hover {
+  color: #396aff;
+}
+.g2-view-container .g2-view-back .g2-view-back-hover .g2-icon {
+  margin-right: 8px;
+}
+.g2-view-container .g2-view-back .g2-view-back-hover .g2-icon.g2-view-back-icon {
+  font-size: 22px;
+  margin-right: 5px;
+  -webkit-transform: translateY(2px);
+          transform: translateY(2px);
+}
+.g2-view-container .g2-mfa-content,
+.g2-view-container .g2-mfa-method {
+  margin: 0 !important;
+  padding: 0 var(--sidePadding) !important;
+}
+.g2-view-container .g2-view-header {
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  padding: 24px var(--sidePadding) 0;
+  margin-bottom: 24px;
+}
+.g2-view-container .g2-view-header .icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 4px;
+  margin-bottom: 8px;
+}
+.g2-view-container .g2-view-header .title {
+  color: #282d3c;
+  font-weight: 600;
+  font-size: 24px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.g2-view-container .g2-view-header .title-explain {
+  font-weight: 300;
+  font-size: 14px;
+  color: #545968;
+}
+.g2-view-container .g2-view-tabs {
+  padding: 0 var(--sidePadding);
+}
+.g2-view-container .g2-view-tabs .authing-ant-tabs-tab {
+  color: #878a95;
+}
+.g2-view-container .g2-view-tabs .authing-ant-tabs-tab:hover {
+  color: #282d3c;
+}
+.g2-view-container .authing-g2-submit-button {
+  width: calc(100% - 4px);
+  border-radius: 4px;
+  height: 42px;
+  margin: 0 2px;
+  margin-top: 16px;
+}
+.g2-view-container .authing-g2-submit-button.shaking {
+  -webkit-animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+          animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+}
+@-webkit-keyframes shake {
+  10%,
+  90% {
+    -webkit-transform: translate3d(-1px, 0, 0);
+            transform: translate3d(-1px, 0, 0);
+  }
+  20%,
+  80% {
+    -webkit-transform: translate3d(2px, 0, 0);
+            transform: translate3d(2px, 0, 0);
+  }
+  30%,
+  50%,
+  70% {
+    -webkit-transform: translate3d(-4px, 0, 0);
+            transform: translate3d(-4px, 0, 0);
+  }
+  40%,
+  60% {
+    -webkit-transform: translate3d(4px, 0, 0);
+            transform: translate3d(4px, 0, 0);
+  }
+}
+@keyframes shake {
+  10%,
+  90% {
+    -webkit-transform: translate3d(-1px, 0, 0);
+            transform: translate3d(-1px, 0, 0);
+  }
+  20%,
+  80% {
+    -webkit-transform: translate3d(2px, 0, 0);
+            transform: translate3d(2px, 0, 0);
+  }
+  30%,
+  50%,
+  70% {
+    -webkit-transform: translate3d(-4px, 0, 0);
+            transform: translate3d(-4px, 0, 0);
+  }
+  40%,
+  60% {
+    -webkit-transform: translate3d(4px, 0, 0);
+            transform: translate3d(4px, 0, 0);
+  }
+}
+.authing-g2-button-group {
+  background: #eff2f6;
+  border-radius: 8px;
+  padding: 4px 2px;
+  margin-bottom: 16px;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.authing-g2-button-group .authing-ant-radio-button-wrapper {
+  margin: 0 2px;
+  border-radius: 8px;
+  color: #545968;
+  cursor: pointer;
+  border: none;
+  background: none;
+  height: auto;
+}
+.authing-g2-button-group .authing-ant-radio-button-wrapper.authing-ant-radio-button-wrapper-checked {
+  color: #396aff;
+  background: #ffffff;
+}
+.authing-g2-button-group .authing-ant-radio-button-wrapper:not(:first-child)::before {
+  display: none;
+}
+.authing-g2-input-form {
+  padding: 0 2px;
+  margin-bottom: 16px;
+}
+.authing-g2-input-form .label-title {
+  padding: 0 0 8px;
+}
+.authing-g2-input-form .authing-g2-select {
+  border: 1px solid #f5f6f7;
+  border-radius: 4px;
+}
+.authing-g2-input-form .authing-g2-select:hover {
+  border-color: #eeeff1 !important;
+  background: #eeeff1;
+}
+.authing-g2-input-form .authing-g2-select .authing-ant-select-selector {
+  outline: 0;
+  border-color: #f5f6f7 !important;
+  height: 100% !important;
+  background-color: #f5f6f7;
+}
+.authing-g2-input-form .authing-g2-select .authing-ant-select-selector:hover {
+  border-color: #eeeff1 !important;
+  background: #eeeff1;
+}
+.authing-g2-input-form .authing-g2-select.authing-ant-select-focused {
+  border-color: #618eff;
+  border-right-width: 1px !important;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(57, 106, 255, 0.2);
+}
+.authing-g2-input-form .authing-g2-select.authing-ant-select-focused .authing-ant-select-selector {
+  border-color: #eeeff1 !important;
+  background: #fff !important;
+}
+.authing-g2-input-form.authing-ant-form-item-has-error .authing-g2-select:hover {
+  border-color: #eeeff1 !important;
+  background: #eeeff1;
+}
+.authing-g2-input-form.authing-ant-form-item-has-error .authing-g2-select.authing-ant-select-focused {
+  border-color: #ff4d4f;
+  border-right-width: 1px !important;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
+}
+.authing-g2-input-form.authing-ant-form-item-has-error .authing-g2-select.authing-ant-select-focused .authing-ant-select-selector {
+  border-color: #eeeff1 !important;
+}
+.authing-g2-input-form.authing-ant-form-item-has-error .authing-g2-select.authing-ant-select-focused .authing-ant-select-selector {
+  background: #fff !important;
+}
+.authing-g2-input {
+  border: 1px solid #f5f6f7;
+  border-radius: 4px;
+  background: #f5f6f7;
+}
+.authing-g2-input:hover {
+  background-color: #eeeff1;
+}
+.authing-g2-input:focus {
+  background: #ffffff !important;
+  border-color: #618eff;
+}
+.authing-g2-input input {
+  font-size: 14px;
+  height: 0;
+  background-color: #f5f6f7;
+  padding: 1em 0.5em !important;
+  background-clip: content-box !important;
+}
+.authing-g2-input input::-webkit-input-placeholder {
+  color: #c8c9cc;
+}
+.authing-g2-input input::placeholder,
+.authing-g2-input input::-webkit-input-placeholder {
+  color: #c8c9cc;
+}
+.authing-g2-input.authing-ant-input-affix-wrapper:hover {
+  border-color: #eeeff1;
+  background: #eeeff1;
+}
+.authing-g2-input.authing-ant-input-affix-wrapper:hover .authing-ant-input {
+  background: #eeeff1;
+}
+.authing-g2-input.authing-ant-input-affix-wrapper-focused {
+  background: #ffffff !important;
+  border-color: #618eff;
+}
+.authing-g2-input.authing-ant-input-affix-wrapper-focused input {
+  height: 0;
+  padding: 1em 0.5em !important;
+  background-clip: content-box !important;
+}
+.authing-g2-input.authing-ant-input-affix-wrapper-focused input::-webkit-input-placeholder {
+  color: #a7a7a7;
+}
+.authing-g2-input.authing-ant-input-affix-wrapper-focused input::placeholder,
+.authing-g2-input.authing-ant-input-affix-wrapper-focused input::-webkit-input-placeholder {
+  color: #a7a7a7;
+}
+.authing-g2-input.add-after {
+  border: none;
+}
+.authing-g2-input.add-after .authing-ant-input-group .authing-ant-input,
+.authing-g2-input.add-after .authing-ant-input-group .authing-ant-input-group-addon {
+  border-radius: 4px;
+  height: 46px;
+}
+.authing-g2-input.authing-ant-input-number {
+  width: 100%;
+}
+.authing-g2-input.authing-ant-input-number input {
+  padding: 1.4em 0.5em !important;
+}
+.authing-g2-input.authing-ant-input-number .authing-ant-input-number-handler-wrap {
+  display: none;
+}
+.authing-g2-input .g2-captcha-code-image {
+  min-width: 100px;
+}
+.g2-graphic-verify-code {
+  display: flex;
+  justify-content: space-between;
+}
+.g2-graphic-verify-code .authing-ant-input {
+  width: 55%;
+}
+.g2-graphic-verify-code .g2-captcha-code-image {
+  min-width: 100px;
+  border-radius: 4px;
+  border: 1px solid #eff2f6 !important;
+}
+.authing-ant-form-item-has-error .authing-ant-input-affix-wrapper:hover {
+  border-color: #ff4d4f !important;
+}
+.authing-ant-form-item-has-error .authing-ant-input-affix-wrapper-focused {
+  border-color: #ff4d4f !important;
+}
+.authing-g2-send-code {
+  color: #396aff;
+  cursor: pointer;
+}
+.authing-g2-send-code.sending {
+  cursor: not-allowed;
+  -webkit-filter: opacity(0.5);
+          filter: opacity(0.5);
+}
+.g2-tips-line {
+  display: flex;
+  font-size: 14px;
+  padding: 0 var(--sidePadding);
+  height: 22px;
+}
+.g2-tips-line .link-like {
+  color: #396aff;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+.g2-tips-line .link-like:hover {
+  color: #557fff;
+}
+.g2-tips-line .link-like:active {
+  color: #254cd9;
+}
+.g2-tips-line .gray {
+  color: #999;
+}
+.g2-tips-line .go-to-register {
+  margin-left: auto;
+}
+.g2-tips-line .back-to-login {
+  margin-left: auto;
+}
+.g2-tips-line .touch-tip {
+  color: #d4d6dc;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.g2-tips-line .touch-tip:hover {
+  color: #396aff;
+}
+.g2-init-setting-loading {
+  width: var(--containerWidth);
+  min-height: 610px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0px 0px 60px rgba(84, 89, 104, 0.05);
+}
+.g2-questions .authing-ant-upload-list-picture-card-container {
+  height: 56px;
+  width: 56px;
+}
+.g2-questions .authing-ant-upload-list-picture-card-container .authing-ant-upload-list-item-list-type-picture-card {
+  padding: 4px;
+}
+.g2-questions .authing-ant-upload-select-picture-card {
+  border-radius: 4px;
+  height: 56px;
+  width: 56px;
+  border: none;
+  background: #f5f6f7;
+  transition: 0.2s all;
+  margin: unset;
+}
+.g2-questions .authing-ant-upload-select-picture-card:hover {
+  background: #eeeff1;
+}
+.g2-questions .authing-g2-questions-upload-self .anticon-plus {
+  font-size: 18px;
+  color: #545968;
+}
+.g2-questions-send-success-page {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 610px;
+}
+.g2-questions-send-success-page .plate {
+  margin-bottom: 14px;
+}
+.g2-questions-send-success-page .title {
+  color: #282d3c;
+  font-weight: 500;
+  font-size: 16px;
+  margin-bottom: 10px;
+}
+.g2-questions-send-success-page .message {
+  font-size: 14px;
+  color: #545968;
+  margin-bottom: 32px;
+  text-align: center;
+}
+.g2-questions-send-success-page .timer-tip {
+  font-size: 14px;
+  color: #545968;
+  margin-top: 12px;
+}
+.g2-change-language-container {
+  margin: auto 0;
+  padding-top: 10px;
+  text-align: center;
+}
+.g2-change-language-container .g2-change-language-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  font-size: 14px;
+  color: #878a95;
+  cursor: pointer;
+  margin: auto;
+  transition: 0.2s all;
+}
+.g2-change-language-container .g2-change-language-button:hover {
+  color: #282d3c;
+}
+.g2-change-language-container .g2-change-language-button .g2-change-language-text {
+  margin-left: 5px;
+}
+.authing-g2-render-module-modal {
+  width: var(--containerWidth);
+}
+.authing-g2-render-module-modal .authing-ant-modal-content {
+  width: var(--containerWidth);
+  border-radius: 8px;
+  margin: auto;
+}
+.authing-g2-render-module-modal .authing-ant-modal-body {
+  padding: 0;
+}
+.authing-g2-render-module-modal .authing-ant-modal-close {
+  left: 0;
+  border-radius: 4px;
+  -webkit-transform: scale(0.5);
+          transform: scale(0.5);
+  color: #d4d6dc;
+  transition: 0.2s all;
+  width: 56px;
+  height: 56px;
+}
+.authing-g2-render-module-modal .authing-ant-modal-close:hover {
+  background: #eeeff1;
+  color: #878a95;
+}
+.authing-g2-render-module-modal .authing-ant-modal-close .g2-modal-close {
+  font-size: 36px;
+  margin-top: 10px;
+}
+.authing-g2-render-module-modal .authing-ant-modal-footer {
+  display: none;
+}
+.g2-send-code-input-col {
+  /* Chrome, Safari, Edge, Opera */
+  /* Firefox */
+}
+.g2-send-code-input-col input::-webkit-outer-spin-button,
+.g2-send-code-input-col input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.g2-send-code-input-col input[type='number'] {
+  -moz-appearance: textfield;
+}
+*[class*='authing-'].authing-ant-input-prefix {
+  margin-right: 0px;
+}
+.authing-g2-form-required-item-icon-after label.authing-ant-form-item-required:not(.authing-ant-form-item-required-mark-optional)::before {
+  display: none;
+}
+.authing-g2-form-required-item-icon-after label.authing-ant-form-item-required:not(.authing-ant-form-item-required-mark-optional)::after {
+  display: inline-block;
+  margin-right: 4px;
+  margin-top: 4px;
+  color: #ff4d4f;
+  font-size: 14px;
+  font-family: SimSun, sans-serif;
+  line-height: 1;
+  content: '*';
+}
+.authing-ant-tabs-tab-btn {
+  font-weight: 400 !important;
+}
+.authing-g2-questions-textarea > textarea {
+  resize: none;
+  background: #f5f6f7;
+  border: 1px solid #f5f6f7;
+}
+.authing-g2-questions-textarea > textarea:hover {
+  border-color: #eeeff1 !important;
+  background-color: #eeeff1;
+}
+.authing-g2-questions-textarea > textarea:focus {
+  background: #fff;
+}
+.authing-g2-question-option {
+  background: none !important;
+}
+.authing-g2-question-option.authing-g2-question-option-active {
+  color: #396aff;
+}
+.authing-g2-question-option:hover {
+  background: #f5f6f7 !important;
+}
+strong {
+  font-weight: normal !important;
+}
+.authing-g2-completeInfo-form input:hover {
+  border-color: #eeeff1 !important;
+}
+.authing-g2-completeInfo-form .authing-g2-input:hover {
+  border-color: #eeeff1;
+}
+.authing-g2-completeInfo-form .authing-g2-input.authing-ant-picker-focused {
+  background: #fff;
+}
+.authing-ant-select-selector {
+  padding: 3px 11px !important;
+}
+.authing-ant-select-selector .authing-ant-select-selection-item {
+  line-height: 30px !important;
+}
+.authing-ant-select-selector .authing-ant-select-selection-search {
+  display: flex;
+  align-items: center;
+}
+
+.g2-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+}
+
+.g2-base-image-background-animation {
+  background: linear-gradient(60deg, #888888, #cecece, #dfdfdf, #f0f0f0);
+  -webkit-animation: gradientBG 3s ease infinite;
+          animation: gradientBG 3s ease infinite;
+  background-size: 400% 400%;
+}
+@-webkit-keyframes gradientBG {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+@keyframes gradientBG {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+.g2-base-imagepro-container {
+  border-radius: 4px;
+  display: inline-block;
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.g2-base-imagepro-container.loaded {
+  background: none;
+}
+.g2-base-imagepro-container.loaded .imagePro {
+  opacity: 1;
+}
+.g2-base-imagepro-container.unload .imagePro {
+  opacity: 0;
+}
+.g2-base-imagepro {
+  object-fit: cover;
+}
+
+.g2-qrcode-switch {
+  position: absolute;
+  display: flex;
+  right: 16px;
+}
+.g2-qrcode-switch :global(.authing-ant-popover-inner-content) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(84, 89, 104, 0.1);
+  height: 26px;
+  margin-right: 4px;
+  font-size: 12px;
+  padding: 0 12px;
+  border-radius: 4px;
+  color: #545968;
+}
+@media (any-hover: hover) {
+  .g2-qrcode-switch .switch-img:hover .imgae-mask {
+    border-width: 0;
+    right: 50px;
+    top: 50px;
+  }
+}
+.g2-qrcode-switch .imgae-mask {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 50px 0 0 50px;
+  border-color: transparent transparent transparent #fff;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: 0.2s all;
+}
+.g2-qrcode-switch .qrcode-switch-image {
+  font-size: 50px;
+  color: #396aff;
+  cursor: pointer;
+}
+.authing-g2-login-app-qrcode {
+  min-height: 288px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.authing-g2-login-app-qrcode img {
+  width: 200px;
+  height: 200px;
+  margin-top: 0px !important;
+}
+.authing-g2-login-app-qrcode .__authing__heading-subtitle-style {
+  font-size: 14px;
+}
+.authing-g2-login-app-qrcode .__authing-shadow-style {
+  width: 200px;
+  height: 200px;
+  margin-left: -100px;
+  line-height: 200px;
+}
+.switch-text {
+  left: -80px !important;
+  top: 4px !important;
+}
+.switch-text .authing-ant-popover-inner {
+  background: rgba(84, 89, 104, 0.1);
+  border-radius: 4px;
+  box-shadow: none;
+}
+.switch-text .authing-ant-popover-inner-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 26px;
+  width: 72px;
+  white-space: nowrap;
+  margin-right: 4px;
+  font-size: 12px;
+  padding: 0 12px;
+  border-radius: 4px;
+  color: #545968;
+}
+.switch-text .authing-ant-popover-arrow {
+  border-color: rgba(84, 89, 104, 0.1) !important;
+  border-width: 3px !important;
+  background: #fff !important;
+  width: 0px !important;
+  height: 0px !important;
+  right: 7px !important;
+}
+
+.g2-guard-full-width-space {
+  width: 100%;
+}
+.no-login-methods {
+  padding: 38px;
+}
+.g2-guard-third-login-btn {
+  display: flex !important;
+  border: none !important;
+  background-color: #f5f6f7 !important;
+  border-radius: 4px !important;
+  color: #282d3c !important;
+  font-size: 14px !important;
+  margin-bottom: 8px !important;
+  margin-top: 8px !important;
+  justify-content: center;
+  align-items: center;
+}
+.g2-guard-third-login-btn:last-child {
+  margin-bottom: 16px !important;
+}
+.g2-guard-third-login-btn:hover {
+  background-color: rgba(84, 89, 104, 0.2) !important;
+}
+.g2-social-login-item {
+  display: inline-flex;
+  margin: 12px;
+  width: 56px;
+  height: 48px;
+  background-color: #f5f6f7;
+  border-radius: 4px;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.g2-social-login-item .g2-icon {
+  font-size: 24px;
+  transition: color 0.3s ease-out;
+}
+.g2-social-login-item:hover {
+  background: rgba(84, 89, 104, 0.2);
+}
+.g2-social-login-title {
+  text-align: center;
+  font-size: 14px;
+  color: #c8c9cc;
+}
+.g2-social-login-title::before,
+.g2-social-login-title::after {
+  content: '——';
+  color: #eeeeee;
+  margin: 0 11px;
+}
+.g2-social-login-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 0 35px;
+}
+.authing-ant-avatar > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.authing-g2-mfa-title {
+  color: #282d3c;
+  font-size: 18px;
+  font-weight: 600;
+  text-align: center;
+  margin-bottom: 8px;
+  margin-top: 40px;
+}
+.authing-g2-mfa-tips {
+  font-size: 14px;
+  color: #545968;
+  text-align: center;
+  margin-bottom: 24px;
+  min-height: 23px;
+}
+.g2-mfa-content {
+  margin: 0 38px;
+}
+.g2-mfa-content .g2-mfa-submit-button {
+  margin-top: 32px !important;
+}
+.g2-mfa-content .bind-totp {
+  margin-top: 40px !important;
+}
+.g2-mfa-content .authing-ant-form-item-control-input-content {
+  display: flex;
+  justify-content: center;
+}
+.g2-mfa-content .g2-mfa-totp-verify-input {
+  text-align: center;
+}
+.g2-mfa-content .g2-mfa-totp-verify-input .authing-code-input-item:not(:first-child) {
+  margin-left: 14px;
+}
+.g2-mfa-content .authing-ant-form-horizontal {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+.g2-mfa-content .g2-mfa-face-image {
+  margin: 0px auto;
+  display: block;
+  margin-bottom: 24px;
+}
+.g2-mfa-content .g2-mfa-face-identifying {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.g2-mfa-content .g2-mfa-face-identifying .video-round {
+  width: 210px;
+  height: 210px;
+  border-radius: 50%;
+  vertical-align: middle;
+}
+.g2-mfa-content .g2-mfa-face-identifying .mesh {
+  z-index: 100;
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  color: white;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.4);
+}
+.g2-mfa-content .g2-mfa-face-identifying .ring {
+  width: 240px;
+  height: 240px;
+  position: absolute;
+  -webkit-transform: rotate(270deg);
+          transform: rotate(270deg);
+}
+.svg-circle-bg {
+  stroke-width: 4;
+}
+.svg-circle-running {
+  stroke-width: 4;
+  transition: all 0.2s linear;
+  stroke: #396aff;
+  stroke-linecap: round;
+}
+.g2-mfa-verifyCode-formItem .authing-ant-form-item-explain-error {
+  display: flex;
+  justify-content: center;
+}
+
+.g2-mfa-method {
+  padding: 0 38px;
+}
+.g2-mfa-method-title {
+  text-align: center;
+  font-size: 14px;
+  color: #c8c9cc;
+  margin-bottom: 8px;
+  width: 100%;
+}
+.g2-mfa-method-title::before,
+.g2-mfa-method-title::after {
+  content: '——';
+  color: #eeeeee;
+  margin: 0 11px;
+}
+.g2-guard-mfa-methods-btn {
+  border: none !important;
+  background-color: #f5f6f7 !important;
+  border-radius: 4px !important;
+  color: #282d3c !important;
+  font-size: 14px !important;
+  height: 49px !important;
+  margin-top: 8px !important;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+}
+.g2-guard-mfa-methods-btn:hover {
+  background: rgba(84, 89, 104, 0.2) !important;
+}
+.g2-guard-mfa-methods-btn .g2-icon {
+  font-size: 16px;
+  margin-right: 8px;
+}
+
+.authing-g2-code-input-item {
+  text-align: center;
+  width: 40px;
+  min-width: 40px;
+  min-height: 40px;
+  height: 40px;
+  line-height: 40px;
+  background-color: #f5f6f7;
+  border: unset;
+  border-radius: 4px;
+}
+.authing-g2-code-input-item:not(:first-child) {
+  margin-left: 18px;
+}
+.authing-g2-code-input-item input {
+  text-align: center;
+}
+.authing-g2-code-input-divider {
+  width: 14px;
+  min-width: 14px;
+  max-width: 14px;
+  margin-left: 10px;
+}
+.authing-g2-code-input {
+  display: flex;
+  align-items: center;
+}
+.authing-ant-form-item-has-error .authing-g2-code-input-item {
+  background-color: #f5f6f7;
+  border: 1px solid #ff4d4f;
+}
+
+.g2-mfa-recovery-code .authing-g2-mfa-title {
+  margin-top: 92px;
+}
+.g2-mfa-recovery-code .authing-g2-mfa-tips {
+  margin-bottom: 52px;
+}
+.g2-mfa-recovery-code .submit-form {
+  margin-top: 64px !important;
+}
+
+.authing-agreements {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+.authing-agreements.authing-agreements-error .authing-agreements-item-invalid {
+  color: #ff4d4f;
+}
+.authing-agreements.authing-agreements-error .authing-agreements-item-invalid a {
+  color: #ff4d4f;
+}
+.authing-agreements.authing-agreements-error .authing-agreements-item-invalid :global(.ant-checkbox-inner) {
+  border-color: #ff4d4f;
+}
+.authing-agreements-item {
+  color: #999999;
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  cursor: pointer;
+  font-size: 12px;
+}
+.authing-agreements-item:not(:first-child) {
+  margin-top: 4px;
+}
+.authing-agreements-item p {
+  margin-bottom: 0;
+  display: inline-block;
+}
+.authing-agreements-checkbox {
+  margin-bottom: 2px;
+}
+.authing-agreements-checkbox :global(.ant-checkbox-inner) {
+  width: 14px;
+  height: 14px;
+}
+.authing-agreements-checkbox :global(.ant-checkbox-inner)::after {
+  left: 20%;
+}
+.authing-agreements-item-content {
+  line-height: 23px;
+}
+
+.authing-g2-send-code-btn {
+  height: 43px;
+  width: 100%;
+  border: 1px solid #d4d6dc;
+  border-radius: 4px;
+}
+.authing-g2-send-code-btn:hover {
+  background: rgba(57, 106, 255, 0.1);
+}
+.authing-g2-send-code-btn:focus {
+  outline: none;
+}
+.authing-g2-send-code-btn[disabled] {
+  cursor: not-allowed;
+  -webkit-filter: opacity(0.5);
+          filter: opacity(0.5);
+}
+@media only screen and (max-width: 719px) {
+  .authing-g2-send-code-btn {
+    font-size: 14px;
+  }
+}
+.g2-loading-btn-center .authing-ant-btn-loading-icon .anticon {
+  padding-right: 0;
+}
+
+.authing-code-input-item {
+  text-align: center;
+  width: 40px;
+  min-width: 40px;
+  min-height: 40px;
+  height: 40px;
+  line-height: 40px;
+}
+.authing-code-input-item:not(:first-child) {
+  margin-left: 18px;
+}
+.authing-code-input-item input {
+  text-align: center;
+}
+.authing-code-input-divider {
+  width: 14px;
+  min-width: 14px;
+  max-width: 14px;
+  margin-left: 18px;
+}
+.authing-code-input {
+  display: flex;
+  align-items: center;
+}