.login-dialog {
  display: none;
  width: 100vw;
  height: 100vh;
  background-color: rgba(13, 14, 18, 0.8);
  /* display: flex; */
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}

.login-dialog * {
  margin: 0;
  padding: 0;
}

.login-dialog-content {
  width: 609px;
  min-height: 627px;
  background: url("../images/home-v2/login-dialog/pop_bg.png") no-repeat center/cover;
  position: relative;
  background-color: #1D2025;
  border-radius: 21px;
  padding-bottom: 20px;
  box-sizing: border-box;
  transform: scale(0);
  transition: 0.2s transform;
}

.login-dialog-content.show {
  transform: scale(1);
}

.login-dialog-content.login .login-dialog-login,
.login-dialog-content.reset .login-dialog-reset {
  display: block;
}

.login-dialog-content.login .login-dialog-sign-up,
.login-dialog-content.reset .login-dialog-sign-up {
  display: none;
}

.login-dialog-close-btn {
  width: 29px;
  height: 29px;
  background: #3d424a;
  border-radius: 50%;
  position: absolute;
  top: -40px;
  inset-inline-end: 0;
  font-size: 29px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.login-dialog-close-btn:before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCI+CiAgPGRlZnM+CiAgICA8Y2xpcFBhdGggaWQ9ImNsaXAtcGF0aCI+CiAgICAgIDxyZWN0IGlkPSLnn6nlvaJfMTI0NiIgZGF0YS1uYW1lPSLnn6nlvaIgMTI0NiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMjkgMTIpIiBmaWxsPSIjZmZmIiBzdHJva2U9IiMwQzBFMTEiIHN0cm9rZS13aWR0aD0iMSIvPgogICAgPC9jbGlwUGF0aD4KICA8L2RlZnM+CiAgPGcgaWQ9ImNsb3NlX3NtYWxsIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzI5IC0xMikiIGNsaXAtcGF0aD0idXJsKCNjbGlwLXBhdGgpIj4KICAgIDxwYXRoIGlkPSLot6/lvoRfMjA0MSIgZGF0YS1uYW1lPSLot6/lvoQgMjA0MSIgZD0iTTE3LDE0ODcsNywxNDk3bTAtMTAsMTAsMTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMyNyAtMTQ3MCkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzBDMEUxMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIvPgogIDwvZz4KPC9zdmc+Cg==") no-repeat center center;
}

.login-dialog-close-btn:hover {
  background: #595e67;
}

.login-dialog-title {
  padding-top: 38px;
  font: normal normal 600 22px/30px Open Sans;
  color: #ffffff;
  text-align: center;
}

.login-dialog-row {
  margin: 19px auto 0;
  width: 446px;
  height: fit-content;
  position: relative;
}

.login-dialog-input-box {
  width: 100%;
  height: 55px;
  background: #2a2e34;
  border: 1px solid #43474e;
  border-radius: 34px;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 0;
  position: relative;
}

.login-dialog-input {
  width: 100%;
  height: 100%;
  background: transparent !important;
  border: none;
  outline: none;
  font: normal normal normal 16px/22px Open Sans;
  color: #ffffff !important;
  appearance: none !important;
}


.login-dialog-input:-webkit-autofill,
.login-dialog-input:-webkit-autofill:hover,
.login-dialog-input:-webkit-autofill:focus,
.login-dialog-input:-webkit-autofill:active {
  transition: color 99999s ease-out, background-color 99999s ease-out !important;
  -webkit-transition: color 99999s ease-out, background-color 99999s ease-out !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
  background: transparent !important;
  font: normal normal normal 16px/22px Open Sans;
}


.login-dialog-input::placeholder {
  font: normal normal normal 16px/22px Open Sans;
  color: #a8aaae;
}

.login-dialog-input-invalid {
  font: normal normal normal 14px/19px Open Sans;
  color: #f58734;
  padding: 0 24px;
  width: 100%;
  display: none;
}

.login-dialog-row.invalid .login-dialog-input-invalid {
  display: block;
}

.login-dialog-row .eyes-icon {
  font-size: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-end: 22px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIj4KICA8ZyBpZD0iR3JvdXBfNDE0NzgiIGRhdGEtbmFtZT0iR3JvdXAgNDE0NzgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMTMxIC0zNDApIj4KICAgIDxyZWN0IGlkPSJSZWN0YW5nbGVfMzUxMTQiIGRhdGEtbmFtZT0iUmVjdGFuZ2xlIDM1MTE0IiB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExMzEgMzQwKSIgZmlsbD0ibm9uZSIvPgogICAgPHBhdGggaWQ9IlBhdGhfMjU4MzM2IiBkYXRhLW5hbWU9IlBhdGggMjU4MzM2IiBkPSJNOTMuNTYyLDIyNy4wODFsMS44NzUtMS44NzVoLjIwOGE5LjI0NCw5LjI0NCwwLDAsMCw4LjEyNC00LjE2NiwxMy45MTYsMTMuOTE2LDAsMCwwLTIuMDgzLTIuMTg3bDEuNTYyLTEuMzU0YTEzLjk1MiwxMy45NTIsMCwwLDEsMi45MTYsMy41NDEsMTEuMzU5LDExLjM1OSwwLDAsMS0xMC40MTYsNi4xNDUsNy43Miw3LjcyLDAsMCwxLTIuMTg3LS4xWm0tNS44MzMtMi45MTZhMTUuNCwxNS40LDAsMCwxLTIuNC0zLjEyNUExMS4zNTksMTEuMzU5LDAsMCwxLDk1Ljc0OSwyMTQuOWgxLjE0NmwtMi4wODMsMi4wODNhOS4yMjUsOS4yMjUsMCwwLDAtNy4yOTEsNC4wNjIsNy42MTYsNy42MTYsMCwwLDAsMS40NTgsMS42NjZabTEzLjk1Ny0xMC44MzIsMS40NTgsMS40NThMOTAuMDIxLDIyNy45MTVsLTEuNDU4LTEuNDU4WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTA1MC42NjYgMTM0LjM3NikiIGZpbGw9IiM0MzQ3NGUiLz4KICA8L2c+Cjwvc3ZnPgo=") no-repeat center/cover;
}

.login-dialog-row .eyes-icon.on {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIj4KICA8ZyBpZD0iR3JvdXBfNDE0NzciIGRhdGEtbmFtZT0iR3JvdXAgNDE0NzciIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMTMxIC0zNDApIj4KICAgIDxwYXRoIGlkPSJQYXRoXzI1ODMzNSIgZGF0YS1uYW1lPSJQYXRoIDI1ODMzNSIgZD0iTTk1Ljc0OSwyNjguNWMtNC40NzksMC04LjAyLTIuMDgzLTEwLjQxNS02LjI0OSwyLjQtNC4xNjYsNS45MzctNi4yNDksMTAuNDE1LTYuMjQ5czguMDIsMi4wODMsMTAuNDE2LDYuMjQ5QzEwMy43NjgsMjY2LjQxNSwxMDAuMjI3LDI2OC41LDk1Ljc0OSwyNjguNVptLjIwOC0xMC40MTZhOS4zMTEsOS4zMTEsMCwwLDAtOC4wMiw0LjE2Niw5LjMxMSw5LjMxMSwwLDAsMCw4LjAyLDQuMTY2LDguNjIyLDguNjIyLDAsMCwwLDcuNi00LjE2NkE4LjYyMiw4LjYyMiwwLDAsMCw5NS45NTcsMjU4LjA4M1ptLS4yMDgsNy4yOTFhMy4xMjUsMy4xMjUsMCwxLDEsMy4xMjUtMy4xMjVBMy4wNjksMy4wNjksMCwwLDEsOTUuNzQ5LDI2NS4zNzRabTAtMi4wODNhMS4wNDIsMS4wNDIsMCwxLDAtMS4wNDItMS4wNDJBLjk4NC45ODQsMCwwLDAsOTUuNzQ5LDI2My4yOTFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDUwLjY2NyA5MykiIGZpbGw9IiM0MzQ3NGUiLz4KICAgIDxyZWN0IGlkPSJSZWN0YW5nbGVfMzUxMTQiIGRhdGEtbmFtZT0iUmVjdGFuZ2xlIDM1MTE0IiB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExMzEgMzQwKSIgZmlsbD0ibm9uZSIvPgogIDwvZz4KPC9zdmc+Cg==") no-repeat center/cover;
}

.sign-up-email {
  margin: 35px auto 0;
}

.login-dialog-btn {
  border: none;
  outline: none;
  min-width: 140px;
  height: 39px;
  background: transparent linear-gradient(104deg, #C5FFFB 0%, #57F9EE 47%, #38FAA5 100%);
  border-radius: 5px;
  cursor: pointer;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-dialog-btn>span {
  font: normal normal bold 14px/19px Open Sans;
  color: #000000;
}

.login-dialog-btn:hover {
  background: transparent linear-gradient(104deg, #8BFFCE 0%, #ACFCF6 47%, #54FFF0 100%);
}

.sign-up-btn {
  margin: 20px auto 45px;
}

.login-dialog-or {
  width: 393px;
  margin: 0 auto;
  height: 2px;
  position: relative;
  background: transparent linear-gradient(90deg, #15191C00 0%, #42454A 50%, #42454A 50%, #15191C00 100%) 0% 0% no-repeat;
}

.login-dialog-or>p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font: normal normal normal 14px/19px Open Sans;
  letter-spacing: 0px;
  color: #FFFFFF;
  padding: 0 9px;
  background: #1D2025;
}

.login-dialog-third-btn {
  margin: 0 auto;
  width: 446px;
  height: 55px;
  background: #1A1D22;
  border: 1px solid #282C31;
  border-radius: 34px;
  display: flex;
  align-items: center;
  gap: 12.5px;
  padding-inline: 19px 10px;
  box-sizing: border-box;
  cursor: pointer;
}

.login-dialog-third-btn .google-icon {
  display: block;
  width: 22.5px;
  height: 22.5px;
  flex-shrink: 0;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMi40MzkiIGhlaWdodD0iMjIuNDIzIiB2aWV3Qm94PSIwIDAgMjIuNDM5IDIyLjQyMyI+CiAgPGcgaWQ9Ikdyb3VwXzQxNDczIiBkYXRhLW5hbWU9Ikdyb3VwIDQxNDczIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMC4wMDEgLTAuMDc3KSI+CiAgICA8cGF0aCBpZD0iUGF0aF8yNTgzMjgiIGRhdGEtbmFtZT0iUGF0aCAyNTgzMjgiIGQ9Ik00LjY3NSwyOTIuMTYxYTYuNjQ5LDYuNjQ5LDAsMCwxLC4zNDItMi4xbC0zLjg0NS0yLjkwOGExMS4yNzksMTEuMjc5LDAsMCwwLDAsMTAuMDA4bDMuODQ0LTIuOTEzYTYuNjIzLDYuNjIzLDAsMCwxLS4zMzktMi4wODkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTI4MC43ODQpIiBmaWxsPSIjZmJiYzA1Ii8+CiAgICA8cGF0aCBpZD0iUGF0aF8yNTgzMjkiIGRhdGEtbmFtZT0iUGF0aCAyNTgzMjkiIGQ9Ik02My43MSw0LjdhNi42NTEsNi42NTEsMCwwLDEsNC4yMDcsMS40ODlMNzEuMjQyLDIuOUExMS40ODQsMTEuNDg0LDAsMCwwLDUzLjQ1NCw2LjM3MUw1Ny4zLDkuMjc5QTYuNzI3LDYuNzI3LDAsMCwxLDYzLjcxMSw0LjciIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01Mi4yODEpIiBmaWxsPSIjZWE0MzM1Ii8+CiAgICA8cGF0aCBpZD0iUGF0aF8yNTgzMzAiIGRhdGEtbmFtZT0iUGF0aCAyNTgzMzAiIGQ9Ik02My42MzQsNjEwLjIyMWE2Ljc1Nyw2Ljc1NywwLDAsMS02LjQ0NC00LjU1MWwtMy44NjQsMi44OTFhMTEuNDc1LDExLjQ3NSwwLDAsMCwxMC4zMDgsNi4yNTQsMTEuMDc1LDExLjA3NSwwLDAsMCw3LjQ4Mi0yLjhsLTMuNjY5LTIuNzc3YTcuMjIsNy4yMiwwLDAsMS0zLjgxNC45ODIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01Mi4xNTUgLTU5Mi4zMTUpIiBmaWxsPSIjMzRhODUzIi8+CiAgICA8cGF0aCBpZD0iUGF0aF8yNTgzMzEiIGRhdGEtbmFtZT0iUGF0aCAyNTgzMzEiIGQ9Ik01MzQuMzgyLDQxOS41MjdhOS4xNTMsOS4xNTMsMCwwLDAtLjI2MS0yLjA0MmgtMTAuN3Y0LjMzOWg2LjE1OWE1LjA1MSw1LjA1MSwwLDAsMS0yLjM0NSwzLjM1NmwzLjY2OCwyLjc3N2ExMS4wNTEsMTEuMDUxLDAsMCwwLDMuNDgtOC40MyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTUxMS45NDIgLTQwOC4yNTYpIiBmaWxsPSIjNDI4NWY0Ii8+CiAgPC9nPgo8L3N2Zz4K") no-repeat center/cover;
}

.login-dialog-third-btn .microsoft-icon {
  display: block;
  width: 17.4px;
  height: 17.4px;
  flex-shrink: 0;
  background: url("data:image/svg+xml;base64,PHN2ZyBpZD0iR3JvdXBfNDE0ODEiIGRhdGEtbmFtZT0iR3JvdXAgNDE0ODEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE3LjM5IiBoZWlnaHQ9IjE3LjM5IiB2aWV3Qm94PSIwIDAgMTcuMzkgMTcuMzkiPgogIDxwYXRoIGlkPSJQYXRoXzI1ODMzOCIgZGF0YS1uYW1lPSJQYXRoIDI1ODMzOCIgZD0iTTAsMEg4LjI2NFY4LjI2NEgwWiIgZmlsbD0iI2YyNTAyMiIvPgogIDxwYXRoIGlkPSJQYXRoXzI1ODMzOSIgZGF0YS1uYW1lPSJQYXRoIDI1ODMzOSIgZD0iTTUzNy40MDgsMGg4LjI2NFY4LjI2NGgtOC4yNjRaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTI4LjI4MSkiIGZpbGw9IiM3ZmJhMDAiLz4KICA8cGF0aCBpZD0iUGF0aF8yNTgzNDAiIGRhdGEtbmFtZT0iUGF0aCAyNTgzNDAiIGQ9Ik0wLDUzNy40MDhIOC4yNjR2OC4yNjRIMFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTUyOC4yODEpIiBmaWxsPSIjMDBhNGVmIi8+CiAgPHBhdGggaWQ9IlBhdGhfMjU4MzQxIiBkYXRhLW5hbWU9IlBhdGggMjU4MzQxIiBkPSJNNTM3LjQwOCw1MzcuNDA4aDguMjY0djguMjY0aC04LjI2NFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01MjguMjgxIC01MjguMjgxKSIgZmlsbD0iI2ZmYjkwMCIvPgo8L3N2Zz4K") no-repeat center/cover;
}

.login-dialog-third-btn>span {
  font: normal normal normal 16px/22px Open Sans;
  color: #A8AAAE;
}

.login-dialog-third-btn .arrow-icon {
  display: block;
  width: 36px;
  height: 36px;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi45MjMiIGhlaWdodD0iMTAuNTIzIiB2aWV3Qm94PSIwIDAgMTIuOTIzIDEwLjUyMyI+CiAgPHBhdGggaWQ9IlBhdGhfMjU4MzMyIiBkYXRhLW5hbWU9IlBhdGggMjU4MzMyIiBkPSJNNy42NjMsMTAuNzhhLjQzOC40MzgsMCwwLDAsLjMyNi0uMTM3bDQuOC00LjhhLjQ2NC40NjQsMCwwLDAsMC0uNjUzbC00LjgtNC44YS40NjQuNDY0LDAsMCwwLS42NTMsMCwuNDU4LjQ1OCwwLDAsMCwwLC42NjNMMTEuOCw1LjUxNyw3LjMzNyw5Ljk4YS40NTguNDU4LDAsMCwwLDAsLjY2M0EuNDM4LjQzOCwwLDAsMCw3LjY2MywxMC43OFptLTcuMi00LjhIMTEuOGEuNDY3LjQ2NywwLDAsMCwuNDYzLS40NjMuNDYxLjQ2MSwwLDAsMC0uNDYzLS40NjNILjQ2M0EuNDYxLjQ2MSwwLDAsMCwwLDUuNTE3YS40NjcuNDY3LDAsMCwwLC40NjMuNDYzWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMC4yNTcpIiBmaWxsPSIjNTQ1NzVkIi8+Cjwvc3ZnPgo=") no-repeat center/13px 11px;
  margin-inline-start: auto;
  border: 1px solid #2D3138;
  border-radius: 50%;
}

.google-btn {
  margin-top: 24px;
}

.sign-up-login-text {
  padding-top: 30px;
  text-align: center;
  font: normal normal normal 16px/22px Open Sans;
  color: #6F7277;
}

.sign-up-login-text>span {
  text-decoration: underline;
  cursor: pointer;
  background: transparent linear-gradient(97deg, #00F17C 0%, #58DFF5 100%) 0% 0% no-repeat padding-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sign-up-term {
  padding: 23px 20px 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.sign-up-term-checked {
  width: 12px;
  height: 12px;
  background: #0D0E12;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

.sign-up-term-checked.on {
  background: #0D0E12 url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1LjU3OSIgaGVpZ2h0PSI0LjEzNyIgdmlld0JveD0iMCAwIDUuNTc5IDQuMTM3Ij4KICA8cGF0aCBpZD0iUGF0aF8yNTgzMzMiIGRhdGEtbmFtZT0iUGF0aCAyNTgzMzMiIGQ9Ik0yNS4wNzYsMTQ3LjVsLTMuMzI1LDMuMzY1LS4xLjA5Mi0uMS0uMDkyTDE5LjUsMTQ4Ljc4MmwuNjcxLS42OCwxLjQ4NSwxLjUsMi43NTEtMi43ODQuNjcxLjY4Wm0wLDAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xOS40OTcgLTE0Ni44MjEpIiBmaWxsPSIjMDZmMDg0Ii8+Cjwvc3ZnPgo=') no-repeat 45% center/5.5px 4px;
}

.sign-up-term>p {
  font: normal normal normal 12px/17px Open Sans;
  color: #6F7277;
}

.sign-up-term>p>a {
  text-decoration: underline;
  font: inherit;
  cursor: pointer;
  color: inherit;
}

.login-dialog-login {
  display: none;
}

.login-dialog-login-ftitle {
  font: normal normal normal 16px/22px Open Sans;
  color: #6F7277;
  padding-top: 5px;
  text-align: center;
}

.login-dialog-login-ftitle>span {

  text-decoration: underline;
  cursor: pointer;
  background: transparent linear-gradient(97deg, #00F17C 0%, #58DFF5 100%) 0% 0% no-repeat padding-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

.login-email {
  margin-top: 26px;
}

.verify-code {
  display: flex;
  flex-wrap: wrap;
  column-gap: 4px;
}

.verify-code .login-dialog-input-box {
  width: 315px;
  height: 55px;
}

.verify-code .code-box {
  width: 127px;
  height: 55px;
  background: #2A2E34;
  border: 1px solid #43474E;
  border-radius: 34px;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
}

.login-btn {
  margin-top: 16px
}

.login-dialog-forgot-text {
  text-decoration: underline;
  font: normal normal normal 16px/22px Open Sans;
  color: #6F7277;
  text-align: center;
  padding: 9px 0 35px;
  cursor: pointer;
}

.login-dialog-login .microsoft-btn {
  margin-top: 8px;
}


.login-dialog-reset {
  display: none;
}

.login-dialog-reset-ftitle {
  text-align: center;
  font: normal normal normal 16px/23px Open Sans;
  color: #6F7277;
  padding-inline: 82px 94px;
  padding-top: 11px;
}

.login-dialog-reset-tips {
  display: block;
  min-height: 36px;
  text-align: start;
  padding-inline: 82px;
  margin: 46px auto 0;
  font: normal normal normal 12px/18px Open Sans;
  color: #6F7277;
  opacity: 0;
}

.login-dialog-reset-tips>span {
  font: inherit;
  color: inherit;
}

.reset-btn {
  margin: 32px auto 0;
  width: 446px;
  height: 39px;
  border-radius: 20px;
}

.reset-btn>span {
  font: normal normal bold 14px/19px Open Sans;
  color: #000000;
}

.login-dialog-reset-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: 227px;
}

.login-dialog-reset-bottom>p {
  font: normal normal normal 14px/19px Open Sans;
  color: #FFFFFF;
  cursor: pointer;
}

.login-dialog-reset-line {
  width: 1px;
  height: 14px;
  background: #51555A;
}

@media screen and (max-width: 768px) {
  .login-dialog {
    overflow: auto;
  }

  .login-dialog-content {
    width: 325px;
    min-height: 487px;
    max-height: 85vh;
    background: url("../images/home-v2/login-dialog/pop_bg_mob.png") no-repeat center/cover;
    border-radius: 10px;
    padding-bottom: 10px;
    background-color: #1D2025;
  }

  .login-dialog-close-btn {
    width: 24px;
    height: 24px;
    top: -38.5px;
    font-size: 24px;
  }

  .login-dialog-title {
    padding-top: 23px;
    font: normal normal 600 16px/21.5px Open Sans;
  }

  .login-dialog-row {
    margin: 12.5px auto 0;
    width: 277px;
  }

  .login-dialog-input-box {
    width: 100%;
    height: 36.5px;
    border-radius: 18.5px;
    padding: 0 10.5px;
  }

  .login-dialog-input {
    font: normal normal normal 13px/18px Open Sans;
  }

  .login-dialog-input::placeholder {
    font: normal normal normal 13px/18px Open Sans;
  }

  .login-dialog-input-invalid {
    font: normal normal normal 13px/16.5px Open Sans;
    color: #f58734;
    padding: 0 13px;
  }

  .login-dialog-row .eyes-icon {
    inset-inline-end: 10.5px;
    width: 19px;
    height: 19px;
  }

  .sign-up-email {
    margin: 15px auto 0;
  }

  .login-dialog-btn {
    min-width: unset;
    width: 275px;
    height: 38.5px;
    background: transparent linear-gradient(104deg, #8BFFCE 0%, #ACFCF6 47%, #54FFF0 100%);
    border-radius: 5px;
  }

  .login-dialog-btn>span {
    font: normal normal bold 16px/21.5px Open Sans;
  }

  .sign-up-btn {
    margin: 39.5px auto 19.75px;
  }

  .login-dialog-or {
    width: 276px;
    height: 1.5px;
  }

  .login-dialog-or>p {
    font: normal normal normal 9px/12px Open Sans;
    padding: 0 6.25px;
  }

  .login-dialog-third-btn {
    margin: 0 auto;
    width: 276px;
    height: 36.5px;
    border-radius: 18.5px;
    gap: 7.85px;
    padding-inline: 11.75px 6px;
  }

  .login-dialog-third-btn .google-icon {
    width: 14px;
    height: 14px;
  }

  .login-dialog-third-btn .microsoft-icon {
    width: 14px;
    height: 14px;
  }

  .login-dialog-third-btn>span {
    font: normal normal normal 13px/18px Open Sans;
  }

  .login-dialog-third-btn .arrow-icon {
    width: 22.5px;
    height: 22.5px;
  }

  .google-btn {
    margin-top: 22.75px;
  }

  .sign-up-login-text {
    padding-top: 18.5px;
    font: normal normal normal 14px/19px Open Sans;
  }

  .sign-up-term {
    padding: 45.5px 18.75px 0;
    align-items: flex-start;
    gap: 8.5px;
  }

  .sign-up-term-checked {
    width: 10.85px;
    height: 10.85px;
    margin-top: 3px;
  }

  .sign-up-term>p {
    font: normal normal normal 12px/17px Open Sans;
  }

  .login-dialog-login-ftitle {
    font: normal normal normal 14px/19px Open Sans;
    padding-top: 7.5px;
  }

  .login-email {
    margin-top: 25.5px;
  }

  .verify-code {
    column-gap: 4px;
  }

  .verify-code .login-dialog-input-box {
    width: 141.5px;
    height: 36.5px;
  }

  .verify-code .code-box {
    width: 131.5px;
    height: 36.5px;
    border-radius: 18.5px;
  }

  .login-btn {
    margin-top: 34.5px;
  }

  .login-dialog-forgot-text {
    font: normal normal normal 14px/19px Open Sans;
    padding: 8px 0 31.75px;
  }

  .login-dialog-login .microsoft-btn {
    margin-top: 12px;
  }

  .login-dialog-reset-ftitle {
    text-align: start;
    font: normal normal normal 14px/18px Open Sans;
    padding-inline: 25px 24px;
    padding-top: 7.5px;
  }

  .login-dialog-reset-tips {
    min-height: 45px;
    padding-inline: 25px 24px;
    margin: 30px auto 0;
    font: normal normal normal 11px/15px Open Sans;
  }

  .reset-email {
    margin-top: 18.5px;
  }

  .reset-btn {
    margin: 25.5px auto 0;
    width: 275px;
    height: 38.5px;
    border-radius: 5px;
  }

  .reset-btn>span {
    font: normal normal bold 16px/21.5px Open Sans;
  }

  .login-dialog-reset-bottom {
    gap: 29.5px;
    margin-top: 113px;
  }

  .login-dialog-reset-bottom>p {
    font: normal normal normal 14px/19px Open Sans;
  }

  .login-dialog-reset-line {
    width: 2px;
    height: 15px;
  }
}

.ani-shake {
  animation: shake 0.5s ease;
}

@keyframes shake {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-2px, -2px);
  }

  50% {
    transform: translate(2px, 2px);
  }

  75% {
    transform: translate(-2px, 2px);
  }

  100% {
    transform: translate(0, 0);
  }
}