.popup-auth {
  --max-width: 800px;
  --max-height: 680px;
  --max-width-form: 533px;
}

.popup-auth {
  overflow: hidden;
  height: 100% !important;
  max-width: var(--max-width);
  max-height: var(--max-height);
  margin-left: auto;
  margin-right: auto;
  border: 0 !important;
  border-radius: 20px !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
}

.popup-auth.ui-dialog {
  overflow: hidden;
}

.popup-auth .ui-dialog-titlebar {
  display: none;
}

.popup-auth .ui-dialog-content {
  height: 100% !important;
  max-height: 100% !important;
}

.popup-auth .ui-dialog-buttonpane {
  max-width: var(--max-width-form);
}

.popup-auth .user-login-form,
.popup-auth .user-register-form,
.popup-auth .user-pass,
.popup-auth .update-pass-form {
  max-width: var(--max-width-form);
  display: flex;
  align-content: flex-start;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

/* prevent conflict with the like/dislike plugin */
@media screen and (max-width: 587px) {
  .ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.popup-auth--login,
  .ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.popup-auth--register,
  .ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.popup-auth--password {
    width: auto !important;
    left: 0 !important;
  }
}

@media screen and (min-width: 588px) {
  .ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.popup-auth--login,
  .ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.popup-auth--register,
  .ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.popup-auth--password {
    margin-left: 0;
  }
}

.popup-auth-form-actions.panel-default {
  border: 0;
  box-shadow: unset;
}

.popup-auth-form-actions .panel-body {
  padding: 0;
}

.popup-auth-form-actions .panel-body button {
  margin: 0;
}

form a.auth-link {
  text-decoration: underline;
  margin-left: 3px;
}

.social-auth-btn {
  padding: 8px 20px;
  border: 1px solid currentColor;
  margin-bottom: 17px;
}

.social-auth-btn:hover {
  text-decoration: none;
}

.linked-text-wrapper {
  margin-bottom: 13px;
}

.auth-form-separator {
  width: 100%;
  border-top: 1px solid currentColor;
  margin-top: 10px;
  margin-bottom: 17px;
}

.password-confirm-message {
  display: none;
}

@media screen and (max-width: 587px) {
  .popup-auth {
    max-width: 100vw;
    margin-left: unset;
    margin-right: unset;
    left: 0 !important;
    transform: translateY(-50%);
  }

  .popup-auth .ui-dialog-content {
    max-width: 100vw;
  }
}