.hero-login {
  position: relative;
  height: 305px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-login__wrapper {
  width: 100%;
  padding: 0 30px;
  max-width: calc(1050px + 60px);
  margin: 0 auto;
}

.hero-login .breadcrumbs {
  color: var(--white);
  margin-bottom: 32px;
}

.hero-login .page_headers {
  text-align: left;
  color: var(--white);
}

.hero-login>video {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  z-index: -1;
  width: 100%;
  height: 100%;
}

@media only screen and (min-width: 992px) {
  .hero-login {
    height: 400px;
  }
}

.header-sub-title>h3 {
  color: var(--black);

  /* Mobile - H2 */
  margin-top: 60px;
  font-family: Bookmania;
  font-size: 38px;
  font-style: normal;
  font-weight: 600;
  line-height: 38px;
  /* 100% */
  text-transform: capitalize;
  padding: 0 30px;

  @media only screen and (min-width: 992px) {
    padding: 0;
    max-width: 360px;
  }
}

.new-account-text {
  color: var(--black);

  /* Desktop - Body M */
  font-family: Roboto Slab;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
  /* 177.778% */
  padding-top: 30px;
  padding-bottom: 40px;
}

.new-account-text>a {
  color: var(--black);
  font-weight: 700;
  text-decoration-line: underline;
}

/* Styles for Login info */
.myaccountLoginTop>form {
  padding: 0 30px;

  @media only screen and (min-width: 600px) {
    padding: 0;
    max-width: 360px;
  }
}

.login-fild-disclaimer {
  color: var(--black);

  font-family: Roboto;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: capitalize;
}

.loginField-login>input {
  display: flex;
  height: 60px;
  padding: 10px 10px 10px 20px;
  align-items: center;
  gap: 20px;
  align-self: stretch;
  border-radius: 40px;
  border: 1px solid #C3C3C3;
  mix-blend-mode: multiply;
  background-color: var(--white) !important;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 35px;
}

.loginField-login>input[type="email"] {
  background-color: var(--white) !important;
  background: var(--white) !important;
}

.loginField-login>input[type="password"] {
  background-color: var(--white) !important;
  background: var(--white) !important;
}

.loginField-login>input::placeholder {
  background-color: var(--white) !important;
  background: var(--white) !important;
}

.loginField-login>input>:enabled {
  background-color: var(--white) !important;
  background: var(--white) !important;
}

.loginField>.resetpass-link {
  color: var(--black);

  text-align: right;
  font-family: Roboto;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.18px;
  text-decoration-line: underline;
}

.loginFieldButtons {
  display: flex;
  align-items: center;
  padding-bottom: 60px;
}

.loginFieldButtons>.resetpass-link {
  width: 100%;
}

/* Responsiviness */
.alpha-col {
  @media only screen and (min-width: 600px) {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
  }
}