@keyframes reanimate-underline-1px {
  0% {
    background-position: 100% 100%;
    background-size: 100% 1px;
  }
  49% {
    background-position: 100% 100%;
    background-size: 0% 1px;
  }
  50% {
    background-position: 0% 100%;
    background-size: 0% 1px;
  }
  100% {
    background-position: 0% 100%;
    background-size: 100% 1px;
  }
}
@keyframes reanimate-underline-2px {
  0% {
    background-position: 100% 100%;
    background-size: 100% 2px;
  }
  49% {
    background-position: 100% 100%;
    background-size: 0% 2px;
  }
  50% {
    background-position: 0% 100%;
    background-size: 0% 2px;
  }
  100% {
    background-position: 0% 100%;
    background-size: 100% 2px;
  }
}
@keyframes reanimate-underline-3px {
  0% {
    background-position: 100% 100%;
    background-size: 100% 3px;
  }
  49% {
    background-position: 100% 100%;
    background-size: 0% 3px;
  }
  50% {
    background-position: 0% 100%;
    background-size: 0% 3px;
  }
  100% {
    background-position: 0% 100%;
    background-size: 100% 3px;
  }
}
@keyframes reanimate-underline-4px {
  0% {
    background-position: 100% 100%;
    background-size: 100% 4px;
  }
  49% {
    background-position: 100% 100%;
    background-size: 0% 4px;
  }
  50% {
    background-position: 0% 100%;
    background-size: 0% 4px;
  }
  100% {
    background-position: 0% 100%;
    background-size: 100% 4px;
  }
}
@keyframes reanimate-underline-5px {
  0% {
    background-position: 100% 100%;
    background-size: 100% 5px;
  }
  49% {
    background-position: 100% 100%;
    background-size: 0% 5px;
  }
  50% {
    background-position: 0% 100%;
    background-size: 0% 5px;
  }
  100% {
    background-position: 0% 100%;
    background-size: 100% 5px;
  }
}
/** Usage

    ```scss
      .lds { 
        @include ldsRingAnimation($foreground-color: #fff, $width: 2px, $size: 25px);
      }
    ```

    ```html
      <div class="lds">
        <div></div>
        <div></div>
        <div></div>
      </div>
    ```
 */
.login-modal--hidden {
  display: none;
}
.login-modal--header {
  font-size: 25px;
  line-height: 35px;
  text-align: center;
  margin-bottom: 20px;
}
@media screen and (min-width: 1000px) {
  .login-modal--header {
    font-size: 50px;
    line-height: 60px;
  }
}
.login-modal--forgot-password {
  margin-top: -32px;
}
@media screen and (min-width: 1000px) {
  .login-modal--forgot-password {
    margin-top: -35px;
  }
}
.login-modal--forgot-password > a {
  font-size: 11px !important;
}
@media screen and (min-width: 1000px) {
  .login-modal--forgot-password > a {
    font-size: 14px !important;
  }
}
.login-modal--create-account-button {
  text-align: center;
  width: 100%;
  margin-top: 21px;
}
@media screen and (min-width: 1000px) {
  .login-modal--create-account-button {
    margin-top: 0px;
  }
}
.login-modal--create-account-button a {
  font-size: 19px !important;
  line-height: 29px !important;
}
@media screen and (min-width: 1000px) {
  .login-modal--create-account-button a {
    margin-top: 0px;
    line-height: 40px !important;
    font-size: 22px !important;
  }
}
.login-modal--submit-button a {
  padding: 14px 60px !important;
}
.login-modal--button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 21px;
  flex-wrap: wrap;
}
@media screen and (min-width: 1000px) {
  .login-modal--button-container {
    margin-top: 50px;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}

.modal-content-wrapper .modal-content[\:has\(.container\%20\%3E\%20.invert-close-icon\)] .close .icon {
  filter: brightness(0) invert(1);
  background-size: 200%;
}

.modal-content-wrapper .modal-content:has(.container > .invert-close-icon) .close .icon {
  filter: brightness(0) invert(1);
  background-size: 200%;
}