.modal {
  display: none;
  width: 100vw;
  min-height: 100vh;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1073;
  background-color: #ffffff;

  padding: 30px;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
}

.modal-close {
  width: 40px;
  height: 40px;
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 10;
}

.modal-mask {
  display: none;
  width: 100vw;
  min-height: 100vh;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1072;
  background-color: #000000;
  opacity: 0.5;
}

.modal-header {
  width: 100%;
  margin-top: 15%;
}

.modal-logo {
  display: block;
  width: 253px;
  margin: 0 auto;
}

.modal-body {
  width: 100%;
  margin-top: 40px;
}

.modal-title {
  font-size: 34px;
  color: #525a6a;
  text-align: center;
}

.modal-content {
  margin: 30px 0;
}

.input-ctrl {
  position: relative;
  width: 100%;
  margin-bottom: 30px;
}

.input-ctrl:last-child {
  margin-bottom: 0;
}

.modal-input {
  width: 100%;
  box-shadow: 0 4px 8px 0 rgba(44, 39, 56, 0.04);
  border: solid 1px #dbe2ea;
  background-color: #ffffff;
  color: #747474;
  font-size: 16px;
  padding: 16px;
  border-radius: 6px;
}

.modal-input::-webkit-input-placeholder {
  color: #747474;
}

.modal-input::-moz-placeholder {
  color: #747474;
}

.modal-input:-ms-input-placeholder {
  color: #747474;
}

.modal-input::-ms-input-placeholder {
  color: #747474;
}

.modal-input::placeholder {
  color: #747474;
}

.error_hint {
  display: none;
  position: absolute;
  right: 0;
  bottom: -25px;
  width: 100%;
  text-align: right;
  font-size: 14px;
  color: #e81a1a;
}

.error .modal-input {
  border-color: #e81a1a;
}

.error .error_hint {
  display: block;
}

.modal-foot {
  width: 100%;
  margin-top: 30px;
}

.help-links {
  width: 100%;
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.fb_icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

.fb_login_btn {
  background-color:#1877f2;
  margin-top: 30px;
  margin-bottom: 30px;
}

.fb_login_text {
  font-size: 16px;
  font-family: NHaasGroteskDSPro-75Bd;
  color: #ffffff;
}

.signup_hint {
  margin-bottom: 30px;
}

.signup_modal .help-links {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.back_prev {
  color: #525a6a;
  font-size: 16px;
  font-weight: 500;
}

.modal-seperator {
  background-color: #707070;
}

.forget_pwd_description {
  color: #747474;
  font-size: 16px;
}

.forget_pwd_wrapper {
  margin-top: 30px;
}

.forget_foot_link {
  margin-top: 30px;
}

.sent_modal_img {
  width: 130px;
  height: 130px;
  display: block;
  margin: 0 auto 30px auto;
}

/* RWD Start =================================== */
@media (min-width: 640px) {
  .modal {
    width: 460px;
    min-height: 535px;
    max-height: 70vh;
    left: calc(50% - 230px);
    top: 20%;
    right: initial;
    bottom: initial;
    border-radius: 20px;
  }
}


/*
@media (min-width: 375px) {}
@media (min-width: 480px) {}
@media (min-width: 640px) {}
@media (min-width: 768px) {}
@media (min-width: 991px) {}
@media (min-width: 1024px) {}
@media (min-width: 1200px) {}
@media (min-width: 1350px) {}
*/