body {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  background: #F3F5F8;
  margin: 0px;
}

.header-container .header-element {
  height: 64px;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.20);
}

.header-container .header-element .brand-logo-btn {
  background-color: transparent;
  border: none;
}

.sign-up-button {
  background-color: #000000;
  border: #000000;
  border-radius: 10px;
  color: #FFFFFF;
  padding: 14px 20px;
  line-height: normal;
  font-weight: bold;
}

.header-container .header-element .brand-logo-btn img {
  height: 44px;
}

.header-container .header-element .header-inner-container .brand-logo-btn {
  background: none;
  border: none;
}

.login-form-header {
  font-size: 30px;
  font-weight: bold;
}

.login-container .login-form-inner-container p {
  text-align: center;
}

.login-button-container {
  margin-top: 30px !important;
}

.login-form-fieldset-generic {
  border-style: hidden !important;
}

#password-reset-form .login-form-input, #web-login-form .login-form-input {
  border: 2px solid #000000;
  padding: 8px 12px;
  border-radius: 10px;
  background-color: #FFFFFF;
}

.login-form-button {
  border-radius: 10px;
}

#one-time.login-form-button {
  background-color: #FFFFFF;
  border: 1px solid #000000;
}
#one-time.login-form-button a {
  color: #000000 !important;
}

.form-input-container div {
  background-color: transparent;
  border: none;
  height: initial;
}

#forgot_password_link, #unsure_what_email_link,
#forgot_password_link:visited, #unsure_what_email_link:visited {
  color: rgba(121, 121, 121, 1);
  font-weight: bold;
  font-size: 16px;
  text-decoration: none;
}

.login-form-link {
  margin-top: 10px !important;
}

.turnstile-text-container {
  font-weight: 600;
}

.flash-message {
  padding: 4px 16px;
  font-size: 15px;
}

.flash-message.error:before, .flash-message.alert:before {
  content: none;
}

.flash-message.error, .flash-message.alert {
  border: none;
  background-color: #FFECEC;
  color: #FF6B6B;
}

.flash-message.notice:before {
  content: none;
}

.flash-message.notice {
  border: none;
  background-color: #ECF9ED;
  color: #189C25;
}

.sniper-link-inner-container {
  width: 80%;
}
.sniper-link-button {
  background-color: #131314;
  color: #E3E3E3;
  border-radius: 10px;
}

.header-inner-container {
  display: flex;
  flex-direction: column;
}

#one_time_link_email_field {
  background-color: #FFFFFF;
  border: 2px solid #000000;
  border-radius: 10px;
}

footer {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  background-color: #000000;
  color: #FFFFFF;
  padding: 3rem;
  color: rgb(208 217 221);
}

footer a {
  text-decoration: none;
  color: rgb(208 217 221);
}

footer .top-footer-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

footer .top-footer-section .left-panel{
  display: flex;
  gap: 2rem;
  flex-direction: column;
}

footer .top-footer-section .left-panel .footer-logo {
  width: 18rem;
}

footer .top-footer-section .left-panel .social-container {
  display: flex;
  gap: 1rem;
}

footer .top-footer-section .left-panel .social-container .sr-only {
  position: absolute;
  width: 1px;
  height: 1px ;
  padding: 0 ;
  margin: -1px ;
  overflow: hidden ;
  clip: rect(0, 0, 0, 0) ;
  white-space: nowrap ;
  border-width: 0 ;
}

footer .links-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

footer .links-container .section-title {
  color: #FFFFFF;
  font-weight: bold;
  font-size: 1.125rem;
  line-height: 1.75rem;
  margin-top: 0px;
}

footer .links-container .list-none {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

footer .links-container .list-none li {
  margin: 1.5rem 0;
}

footer .copyright-container p {
  margin-top: 1rem;
  font-size: .875rem;
  line-height: 1.25rem;
}

@media (min-width: 768px) {
  footer .top-footer-section {
    flex-direction: row;
    justify-content: space-between;
  }

  footer .links-container {
    flex-direction: row;
    gap: 15vw;
  }
}
