@import url("../style.css");

.LogInBoxShadow {
  box-shadow: 0px 0px 14px 3px #0000000a;
}

.loginError {
  color: var(--wrongInput);
}

.loginEmailDevision.active {
  border-color: var(--lightBlue);
}

.loginPasswortDevision.active {
  border-color: var(--lightBlue);
}

.inpIconStyle {
  cursor: pointer;
}

.loginInputMail {
  cursor: pointer;
  border: none;
  background-color: transparent;
}

.loginInputMail:focus {
  outline: none;
}

.loginInputMail::placeholder {
  color: var(--fontGray);
}

.loginInputPassword {
  cursor: pointer;
  border: none;
}

.loginInputPassword:focus {
  outline: none;
}

.loginInputPassword::placeholder {
  color: var(--fontGray);
}

@media only screen and (max-width: 720px) and (min-width: 250px) {
  .loginSecondImg {
    display: block;
    width: 2rem;
    animation: JoinLoginSecondary 2s ease-in-out forwards;
  }

  .loginPrimaryImg {
    display: block;
    width: 2rem;
    animation: JoinLoginPrimary 2s ease-in-out forwards;
  }

  .joinLogoAnimationLogin {
    width: 100%;
    height: 100%;
    background-color: var(--lightGray);
    z-index: 21;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    pointer-events: none;
    animation: joinBackground 2s ease-in-out forwards;
  }

  .joinLogoAnimationLogin img {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(2);
    z-index: 20;
    opacity: 1;
  }

  @keyframes JoinLoginSecondary {
    0% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(2);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(1) translate(-35vw, -42vh);
    }
  }

  @keyframes JoinLoginPrimary {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(2);
    }
    100% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1) translate(-35vw, -42vh);
    }
  }

  @keyframes joinBackground {
    0% {
      background-color: var(--lightGray);
    }
    100% {
      background-color: transparent;
    }
  }
}

@media only screen and (max-width: 319px) and (min-width: 250px) {
  .firstLogin {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: var(--whiteGray);
  }

  .loginLayout {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: var(--white);
    width: 15rem;
    height: 20rem;
    border-radius: 1.8rem;
  }

  .headerLogin {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .loginLayout h1 {
    font-size: 2rem;
    margin-top: 1rem;
  }

  .underlineFrameMobileLogIn {
    width: 4rem;
    height: 0.15rem;
    background-color: var(--lightBlue);
  }

  .inpIconStyle {
    width: 1rem;
    height: 1rem;
  }

  .loginEmailDevision {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: solid 1px var(--lighterGray);
    border-radius: 0.5rem;
    padding: 0.4rem 1rem 0.4rem 1rem;
    margin-top: 1.5rem;
    height: 2rem;
    width: 13rem;
    gap: 0.75rem;
  }

  .loginInputMail {
    width: 100%;
    height: 1.25rem;
    font-size: 0.8rem;
  }

  .loginPasswortDevision {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: solid 1px var(--lighterGray);
    border-radius: 0.5rem;
    padding: 0.4rem 1rem 0.4rem 1rem;
    margin-top: 1rem;
    height: 2rem;
    width: 13rem;
    gap: 0.75rem;
  }

  .loginInputPassword {
    border: none;
    width: 100%;
    height: 1.25rem;
    font-size: 0.8rem;
    background-color: transparent;
  }

  .rememberBox {
    display: flex;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-right: 4rem;
  }

  .rememberLabel {
    font-size: 0.8rem !important;
    font-weight: 400;
    margin-left: 0.4rem;
    cursor: pointer;
  }

  .justBtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
  }

  .confirmLogInBtn {
    font-weight: 700;
    font-size: 0.65rem;
    border: var(--lightGray) 1px solid;
    border-radius: 0.3rem;
    width: 5.4rem;
    height: 1.8rem;
    background-color: var(--lightGray);
    color: var(--white);
  }

  .confirmLogInBtn:hover {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border: var(--lightBlue);
    background-color: var(--lightBlue);
  }

  .guestLogInBtn {
    font-weight: 700;
    font-size: 0.65rem;
    border: var(--lightGray) 1px solid;
    background-color: var(--white);
    color: var(--lightGray);
    border-radius: 0.3rem;
    width: 5.4rem;
    height: 1.8rem;
  }

  .guestLogInBtn:hover {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--lightBlue);
    color: var(--lightBlue);
  }

  .mobileNotUser {
    position: absolute;
    bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
  }

  .mobileNotUser p {
    font-size: 0.8rem;
  }

  .mobileNotUserBtn {
    font-weight: 700;
    font-size: 0.65rem;
    border: var(--lightGray) 1px solid;
    border-radius: 0.3rem;
    width: 5.4rem;
    height: 1.8rem;
    background-color: var(--lightGray);
    color: var(--white);
  }

  .mobileNotUserBtn:hover {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border: var(--lightBlue);
    background-color: var(--lightBlue);
  }

  .mobilePoliceLegal {
    margin-bottom: 0.3rem;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }

  .mobilePoliceLegalLink {
    color: var(--fontGray);
    transition: transform 0.5s ease;
    font-size: 0.6rem !important;
    text-decoration: none;
  }

  .mobilePoliceLegalLink:hover {
    cursor: pointer;
    color: var(--lightBlue);
    transform: scaleX(1.2);
    font-size: 1rem;
  }
}

@media only screen and (max-width: 480px) and (min-width: 320px) {
  .firstLogin {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: var(--whiteGray);
  }

  .loginLayout {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: var(--white);
    width: 18rem;
    height: 25rem;
    border-radius: 1.8rem;
  }

  .headerLogin {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .loginLayout h1 {
    font-size: 2.5rem;
    margin-top: 2rem;
  }

  .underlineFrameMobileLogIn {
    width: 5rem;
    height: 0.15rem;
    background-color: var(--lightBlue);
  }

  .loginEmailDevision {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: solid 1px var(--lighterGray);
    border-radius: 0.5rem;
    padding: 0.4rem 1rem 0.4rem 1rem;
    margin-top: 3rem;
    height: 2.6rem;
    width: 16rem;
    gap: 0.75rem;
  }

  .loginInputMail {
    width: 100%;
    height: 1.25rem;
    font-size: 1rem;
  }

  .loginPasswortDevision {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: solid 1px var(--lighterGray);
    border-radius: 0.5rem;
    padding: 0.4rem 1rem 0.4rem 1rem;
    margin-top: 1rem;
    height: 2.6rem;
    width: 16rem;
    gap: 0.75rem;
  }

  .loginInputPassword {
    border: none;
    width: 100%;
    height: 1.25rem;
    font-size: 1rem;
    background-color: transparent;
  }

  .inpIconStyle {
    width: 1.25rem;
    height: 1.25rem;
  }

  .rememberBox {
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    padding-right: 6rem;
  }

  .rememberLabel {
    font-size: 0.9rem !important;
    font-weight: 400;
    margin-left: 0.4rem;
    cursor: pointer;
  }

  .justBtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .confirmLogInBtn {
    font-weight: bold;
    font-size: 0.8rem;
    border: var(--lightGray) 1px solid;
    border-radius: 0.5rem;
    width: 7rem;
    height: 2.2rem;
    background-color: var(--lightGray);
    color: var(--white);
  }

  .confirmLogInBtn:hover {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border: var(--lightBlue);
    background-color: var(--lightBlue);
  }

  .guestLogInBtn {
    font-weight: bold;
    font-size: 0.8rem;
    border: var(--lightGray) 1px solid;
    background-color: var(--white);
    color: var(--lightGray);
    border-radius: 0.5rem;
    width: 7rem;
    height: 2.2rem;
  }

  .guestLogInBtn:hover {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--lightBlue);
    color: var(--lightBlue);
  }

  .mobileNotUser {
    position: absolute;
    bottom: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
  }

  .mobileNotUser p {
    font-size: 0.8rem;
  }

  .mobileNotUserBtn {
    font-weight: bold;
    border: var(--lightGray) 1px solid;
    border-radius: 0.5rem;
    width: 7rem;
    height: 2.2rem;
    background-color: var(--lightGray);
    color: var(--white);
  }

  .mobileNotUserBtn:hover {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border: var(--lightBlue);
    background-color: var(--lightBlue);
  }

  .mobilePoliceLegal {
    margin-bottom: 1rem;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }

  .mobilePoliceLegalLink {
    color: var(--fontGray);
    transition: transform 0.5s ease;
    font-size: 0.8rem !important;
    text-decoration: none;
  }

  .mobilePoliceLegalLink:hover {
    cursor: pointer;
    color: var(--lightBlue);
    transform: scaleX(1.2);
    font-size: 1rem;
  }
}

@media only screen and (max-width: 720px) and (min-width: 481px) {
  .firstLogin {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: var(--whiteGray);
  }

  .loginLayout {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: var(--white);
    width: 25rem;
    height: 30rem;
    border-radius: 1.8rem;
  }

  .headerLogin {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .loginLayout h1 {
    font-size: 3rem;
  }

  .underlineFrameMobileLogIn {
    width: 5rem;
    height: 0.15rem;
    background-color: var(--lightBlue);
  }

  .loginEmailDevision {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: solid 1px var(--lighterGray);
    border-radius: 0.5rem;
    padding: 0.4rem 1rem 0.4rem 1rem;
    margin-top: 3rem;
    width: 22rem;
    height: 3rem;
    gap: 0.75rem;
  }

  .loginInputMail {
    width: 100%;
    height: 1.25rem;
    font-size: 1rem;
  }

  .loginPasswortDevision {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: solid 1px var(--lighterGray);
    border-radius: 0.5rem;
    padding: 0.4rem 1rem 0.4rem 1rem;
    margin-top: 1rem;
    width: 22rem;
    height: 3rem;
    gap: 0.75rem;
  }

  .loginInputPassword {
    border: none;
    width: 100%;
    height: 1.25rem;
    font-size: 1rem;
    background-color: transparent;
  }

  .inpIconStyle {
    width: 1.25rem;
    height: 1.25rem;
  }

  .rememberBox {
    margin-top: 2rem;
    margin-bottom: 1rem;
    display: flex;
    padding-right: 6rem;
  }

  .rememberLabel {
    font-size: 1rem !important;
    font-weight: 400;
    margin-left: 0.4rem;
    cursor: pointer;
  }

  .justBtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
  }

  .confirmLogInBtn {
    font-weight: bold;
    font-size: 1rem;
    border: var(--lightGray) 1px solid;
    border-radius: 0.5rem;
    width: 8rem;
    height: 2.6rem;
    background-color: var(--lightGray);
    color: var(--white);
  }

  .confirmLogInBtn:hover {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border: var(--lightBlue);
    background-color: var(--lightBlue);
  }

  .guestLogInBtn {
    font-weight: bold;
    font-size: 1rem;
    border: var(--lightGray) 1px solid;
    background-color: var(--white);
    color: var(--light-grey);
    border-radius: 0.5rem;
    width: 8rem;
    height: 2.6rem;
  }

  .guestLogInBtn:hover {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--lightBlue);
    color: var(--lightBlue);
  }

  .mobileNotUser {
    position: absolute;
    bottom: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
  }

  .mobileNotUser p {
    font-size: 0.8rem;
  }

  .mobileNotUserBtn {
    font-weight: bold;
    font-size: 1rem;
    border: var(--lightGray) 1px solid;
    border-radius: 0.5rem;
    width: 8rem;
    height: 2.6rem;
    background-color: var(--lightGray);
    color: var(--white);
  }

  .mobileNotUserBtn:hover {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border: var(--lightBlue);
    background-color: var(--lightBlue);
  }

  .mobilePoliceLegal {
    display: flex;
    position: absolute;
    bottom: 0;
    align-items: center;
    justify-content: center;
    padding: 1rem 0 1rem 0;
    gap: 2rem;
  }

  .mobilePoliceLegalLink {
    color: var(--fontGray);
    transition: transform 0.5s ease;
    font-size: 0.9rem !important;
    text-decoration: none;
  }

  .mobilePoliceLegalLink:hover {
    cursor: pointer;
    color: var(--lightBlue);
    transform: scaleX(1.2);
    font-size: 1rem;
  }
}

@media only screen and (max-width: 2560px) and (min-width: 721px) {
  .loginSecondImg {
    display: block;
    animation: JoinLoginSecondary 2s ease-in-out forwards;
  }

  .loginPrimaryImg {
    display: block;
    animation: JoinLoginPrimary 2s ease-in-out forwards;
  }

  .joinLogoAnimationLogin {
    width: 100%;
    height: 100%;
    background-color: var(--lightGray);
    z-index: 21;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    pointer-events: none;
    animation: joinBackground 2s ease-in-out forwards;
  }

  .joinLogoAnimationLogin img {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(2);
    z-index: 20;
    opacity: 1;
  }

  @keyframes JoinLoginSecondary {
    0% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(2);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(1) translate(-35vw, -42vh);
    }
  }

  @keyframes JoinLoginPrimary {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(2);
    }
    100% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1) translate(-35vw, -42vh);
    }
  }

  @keyframes joinBackground {
    0% {
      background-color: var(--white);
    }
    100% {
      background-color: transparent;
    }
  }
}

@media only screen and (max-width: 2560px) and (min-width: 721px) {
  .firstLogin {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: var(--whiteGray);
  }

  .loginLayout {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: var(--white);
    width: 35rem;
    height: 25rem;
    border-radius: 1.8rem;
  }

  .headerLogin {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .loginLayout h1 {
    font-size: 2.5rem;
  }

  .underlineFrameMobileLogIn {
    width: 5rem;
    height: 0.15rem;
    background-color: var(--lightBlue);
  }

  .loginEmailDevision {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: solid 1px var(--lighterGray);
    border-radius: 0.5rem;
    padding: 0.4rem 1rem 0.4rem 1rem;
    margin-top: 2rem;
    height: 2.8rem;
    width: 20rem;
    gap: 1.5rem;
  }

  .loginInputMail {
    width: 100%;
    height: 1.25rem;
    font-size: 1rem;
  }

  .loginPasswortDevision {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: solid 1px var(--lighterGray);
    border-radius: 0.5rem;
    padding: 0.4rem 1rem 0.4rem 1rem;
    margin-top: 1rem;
    height: 2.8rem;
    width: 20rem;
    gap: 1.5rem;
  }

  .loginInputPassword {
    border: none;
    width: 100%;
    height: 1.25rem;
    font-size: 1rem;
    background-color: transparent;
  }

  .inpIconStyle {
    width: 1.25rem;
    height: 1.25rem;
  }

  .rememberBox {
    margin-top: 2rem;
    margin-bottom: 1rem;
    display: flex;
    padding-right: 9rem;
  }

  .rememberLabel {
    font-size: 1rem !important;
    font-weight: 400;
    margin-left: 0.4rem;
    cursor: pointer;
  }

  .justBtn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.4rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .confirmLogInBtn {
    font-weight: bold;
    font-size: 1rem;
    border: var(--lightGray) 1px solid;
    border-radius: 0.5rem;
    width: 6rem;
    height: 2.5rem;
    background-color: var(--lightGray);
    color: var(--white);
  }

  .confirmLogInBtn:hover {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border: var(--lightBlue);
    background-color: var(--lightBlue);
  }

  .guestLogInBtn {
    font-weight: bold;
    font-size: 1rem;
    border: var(--lightGray) 1px solid;
    background-color: var(--white);
    color: var(--lightGray);
    border-radius: 0.5rem;
    width: 9rem;
    height: 2.5rem;
  }

  .guestLogInBtn:hover {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--lightBlue);
    color: var(--lightBlue);
  }

  .mobileNotUser {
    position: absolute;
    top: 2rem;
    right: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .mobileNotUserBtn {
    font-weight: bold;
    border: var(--lightGray) 1px solid;
    border-radius: 0.5rem;
    width: 5.5rem;
    height: 2.5rem;
    background-color: var(--lightGray);
    color: var(--white);
  }

  .mobileNotUserBtn:hover {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border: var(--lightBlue);
    background-color: var(--lightBlue);
  }

  .mobilePoliceLegal {
    display: flex;
    position: absolute;
    bottom: 0;
    align-items: center;
    justify-content: center;
    padding: 2rem 0 2rem 0;
    gap: 2rem;
  }

  .mobilePoliceLegalLink {
    color: var(--fontGray);
    transition: transform 0.5s ease;
    font-size: 1rem !important;
    text-decoration: none;
  }

  .mobilePoliceLegalLink:hover {
    cursor: pointer;
    color: var(--lightBlue);
    transform: scaleX(1.2);
    font-size: 1.2rem;
  }
}