.auth {
  position: fixed;
  top: 0;
  width: 100%;
  max-width: 466px;
  padding: 36px 48px;
  height: 100%;
  overflow-x: hidden;
  overflow-x: auto;
  background: #FFFFFF;
  right: -100%;
  /* above the header/topbar (10) and mobile nav (9999) */
  z-index: 10000;
  transition: 0.3s 0s;
}
.auth.open {
  right: 0px;
}
.auth .form_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-subhead);
  font-weight: 500;
  color: #000;
  margin-bottom: clamp(20px, 2vw, 37px);
}
.auth .form_header .close {
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
}
.auth .social_login {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.auth .social_login a {
  border: 1px solid #000;
  padding: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-body);
  color: #000;
  text-decoration: none;
  transition: 0.2s;
}
.auth .social_login a:hover {
  color: #fff;
  background: #000;
}
.auth hr {
  margin: 35px 0px;
  border: none;
  border-top: 1px solid #8A8B8E;
}
.auth .input_form {
  display: block;
  width: 100%;
  border: 1px solid #CECECE;
  padding: 14px 8px;
  font-size: var(--fs-body);
  margin-bottom: 20px;
  outline: none;
}
.auth button.login_btn, .auth button.reg_btn, .auth button.registration_btn {
  display: block;
  width: 100%;
  background: none;
  outline: none;
  margin-bottom: 20px;
  padding: 14px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid #000;
  cursor: pointer;
  transition: 0.3s 0s;
}
.auth button.login_btn, .auth button.registration_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #000;
}
.auth button.login_btn .loader, .auth button.registration_btn .loader {
  width: 16px;
  height: 16px;
  border: 3px solid #FFF;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.auth button.login_btn[data-loader=false] .loader, .auth button.registration_btn[data-loader=false] .loader {
  display: none;
}
.auth button.login_btn[data-loader=false] .text, .auth button.registration_btn[data-loader=false] .text {
  display: block;
}
.auth button.login_btn[data-loader=true], .auth button.registration_btn[data-loader=true] {
  pointer-events: none;
}
.auth button.login_btn[data-loader=true] .loader, .auth button.registration_btn[data-loader=true] .loader {
  display: block;
}
.auth button.login_btn[data-loader=true] .text, .auth button.registration_btn[data-loader=true] .text {
  display: none;
}
.auth button.login_btn:hover, .auth button.registration_btn:hover {
  background: #fff;
  color: #000;
}
.auth button.reg_btn:hover {
  background: #000;
  color: #fff;
}

button.login_btn:hover > .loader {
  border-color: #000;
  border-bottom-color: transparent;
}

button.registration_btn:hover > .loader {
  border-color: #000;
  border-bottom-color: transparent;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* "Forgot password" link in the login modal */
.auth .forgot_password {
  display: block;
  text-align: right;
  margin: -8px 0 15px;
  font-size: var(--fs-caption);
  font-weight: 300;
  color: #141414;
  text-decoration: none;
}
.auth .forgot_password:hover {
  text-decoration: underline;
}