.login-container {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   position: relative;
}

.login-join-logo {
   position: absolute;
   top: 42px;
   left: 42px;
   width: 76px;
   height: auto;
   animation: logoAnimation 2s 0s 1;
   transition: all 1s ease-in-out;
}

.fade-in-animation {
   animation: fadeInForm 3s 0s 1;
}

.to-sign-up-container {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   top: 67px;
   right: 122px;
   gap: 35px;
}

.not-a-join-user {
   font-size: 20px;
}

.sign-up-btn {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 12px 16px;
   border-radius: 8px;
   background-color: rgba(42, 54, 71, 1);
   color: white;
   cursor: pointer;
   font-size: 16px;
   font-weight: 700;
   transition: all 50ms ease-in;
   &:hover {
      background-color: rgba(41, 171, 226, 1);
      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
   }
}

.login-content-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   /* position: absolute;
   top: 265.5px; */
   width: 652px;
   height: 493px;
   color: black;
   border-radius: 30px;
   gap: 30px;
   background-color: rgba(255, 255, 255, 1);
   box-shadow: 0px 0px 14px 3px rgba(0, 0, 0, 0.04);
   /* animation: fadeInForm 3s 0s 1; */
}

.headline-login-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   width: 315px;
   gap: 16px;

   h1 {
      margin-bottom: 0;
      font-size: 61px;
   }
}

.underline-headline {
   width: 150px;
   height: 3px;
   background-color: #29abe2;
}

.input-login {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 24px;
}

.input-login-field {
   width: 401px;
   position: relative;
}

   input {
      padding: 12px;
      padding-left: 21px;
      padding-right: 0;
      width: 100%;
      border-radius: 10px;
      border: 1px solid #d1d1d1;
      font-size: 20px;
   }
   input::placeholder {
      color: #d1d1d1;
      font-size: 20px;
   }


.login-input-icons {
   position: absolute;
   top: 20%;
   right: 0;
}

.remember-me-form {
   display: flex;
   align-items: center;
   gap: 8px;
   width: 422px;
   padding-left: 39px;
   margin-top: 16px;
}

.accept-icon {
   appearance: none;
   cursor: pointer;
   margin: 0;
   display: inline-block;
   width: 24px;
   height: 24px;
   background-image: url(../img/check_btn.png);
}

.accept-icon:checked {
   background-image: url(../img/checked_btn.png);
}

.accept-icon:hover {
   transform: scale(1.05);
}

.login-guestlogin-btn-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 35px;
}

.btns-login {
   font-size: 21px;
   padding: 15px 24px;
   width: fit-content;
   border-radius: 8px;
   font-weight: bold;
}

.login-btn {
   background-color: #2a3647;
   color: white;
   border: 1px solid transparent;
   cursor: pointer;
   transition: all 50ms ease-in;
   &:hover {
      background-color: #29abe2;
      color: white;
   }
}

.guest-login-btn {
   border: 1px solid #2a3647;
   color: #2a3647;
   cursor: pointer;
   transition: all 50ms ease-in;
   &:hover {
      border: 1px solid #29abe2;
      color: #29abe2;
   }
}

.signup-btn {
   background-color: #2a3647;
   color: white;
   padding: 15px 24px;
}

.privacy-legal-container {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   bottom: 24px;
   gap: 20px;
   a {
      text-decoration: none;
      color: #a8a8a8;
      &:hover {
         color: #29abe2;
         font-weight: bold;
      }
   }
}

.signup-content-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   position: relative;
   /* position: absolute;
   top: 265.5px; */
   width: 652px;
   height: 630px;
   color: black;
   border-radius: 30px;
   gap: 30px;
   background-color: rgba(255, 255, 255, 1);
   box-shadow: 0px 0px 14px 3px rgba(0, 0, 0, 0.04);
   h1 {
      margin: 0;
   }
   margin-top: 42px;
   margin-left: 24px;
   margin-right: 24px;
}

.goback-arrow {
   position: absolute;
   top: 75px;
   left: 60px;
   &:hover {
      transform: scale(105%);
      cursor: pointer;
      background-color: #eeeeee;
      border-radius: 50%;
   }
}

.accept-privacy-policy-form {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 8px;
   color: #a8a8a8;
   a {
      text-decoration: none;
      color: #29abe2;
   }
}

.signup-btn-in-form {
   background-color: #2a3647;
   color: white;
   cursor: pointer;
   transition: all 100ms ease-in-out;
   &:hover {
      background-color: #29abe2;
      color: white;
   }
}

.signup-succes-container {
   position: fixed;
   top: 0;
   z-index: 10;
   width: 100%;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: rgba(0, 0, 0, 0.24);
}

.signup-sucess {
   background-color: #2a3647;
   color: white;
   border-radius: 20px;
   padding: 25px;
   font-size: 20px;
}

.toast {
   display: none;
   position: fixed;
   top: 20px;
   left: 50%;
   transform: translateX(-50%);
   background-color: #f44336;
   color: white;
   padding: 15px 20px;
   border-radius: 5px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   z-index: 1;
 }
 
 .toast.show {
   display: block;
   animation: fadeOut 2.2s ease forwards;
 }

 #error-message {
   color: #FF8190;
   font-size: 12px;
   position: fixed;
   margin-top: 4px;
 }
 
 .login-error-message {
   display: none;
   color: #FF8190;
   font-size: 12px;
   position: fixed;
   margin-top: 4px;
 }
 
 .login-error-message.show {
   display: block;
 }
 
 #nameErrorMessage {
   color: #FF8190;
   font-size: 12px;
   position: fixed;
   margin-top: 4px;
 }
 
 #emailErrorMessage {
   color: #FF8190;
   font-size: 12px;
   position: fixed;
   margin-top: 4px;
 }
 
 #passwordsDontMatchText {
   color: #FF8190;
   font-size: 12px;
   position: fixed;
   margin-top: 4px;
 }
 
 .accept-icon {
   border: 0 !important;
 }
 
 @keyframes fadeOut {
   0% {
     opacity: 1;
   }
   70% {
     opacity: 1;
   }
   100% {
     opacity: 0;
     display: none;
   }
 }

@keyframes fadeInForm {
   0% {
      opacity: 0;
   }
   50% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}

@keyframes logoAnimation {
   0% {
      top: 30%;
      left: 40%;
      width: 274px;
      height: 334px;
   }
   50% {
      top: 30%;
      left: 40%;
      width: 274px;
      height: 334px;
   }
   100% {
      top: 42px;
      left: 42px;
      width: 76px;
      height: 92px;
   }
}


@media (max-width: 1150px) {
   .to-sign-up-container {
      right: 80px;
   }
}

@media (max-width: 900px) {
   .to-sign-up-container {
      right: 42px;
   }

   .signup-content-wrapper {
      height: 480px!important;
   }

   .input-login {
      gap: 16px!important;
   }

   .login-content-wrapper {
      height: 450px;
   }

   .headline-login-wrapper h1 {
      font-size: 48px;
   }
   
   .goback-arrow {
      left: 24px;
   }
}

@media (max-width: 700px) {
   .to-sign-up-container {
      left: 50%;
      top: 84%;
      right: 0;
      transform: translateX(-50%);
      width: 300px;
   }

   .login-content-wrapper {
      width: 550px;
   }
}

@media (max-width: 580px) {
   .login-content-wrapper {
      width: 450px;
   }

   .login-guestlogin-btn-wrapper {
      flex-direction: column;
      gap: 18px;
   }

   .to-sign-up-container {
      top: 87%;
   }

   .btns-login {
      width: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-left: 0;
      padding-right: 0;
      padding: 0;
      width: 160px;
      height: 32px;
      font-size: 20px;
   }

   .input-login-field {
      width: 270px!important;
   }

   .remember-me-form {
      width: 260px;
   }

   @keyframes logoAnimation {
      0% {
         top: 30%;
         left: 25%;
         width: 274px;
         height: 334px;
      }
      50% {
         top: 30%;
         left: 25%;
         width: 274px;
         height: 334px;
      }
      100% {
         top: 24px;
         left: 24px;
         width: 60x;
         height: 74px;
      }
   }

   .login-join-logo {
      top: 24px;
      left: 24px;
      width: 60px;
   }
}

@media (max-width: 550px) {
   .headline-login-wrapper h1 {
      font-size: 48px;
   }
}

@media (max-width: 500px) {
   .goback-arrow {
      left: 24px;
   }
}

@media (max-width: 480px) {
   .login-content-wrapper {
      width: 370px;
   }

}

@media (max-width: 410px) {
   .login-content-wrapper {
      width: 300px;
   }

   .input-login-field {
      width: 210px!important;
   }

   .remember-me-form {
      width: 220px;
   }

   
   @keyframes logoAnimation {
      0% {
         top: 30%;
         left: 20%;
         width: 219px;
         height: 267px;
      }
      50% {
         top: 30%;
         left: 20%;
         width: 219px;
         height: 267px;
      }
      100% {
         top: 24px;
         left: 24px;
         width: 60x;
         height: 74px;
      }
   }
}

@media (max-width: 360px) {
   
   @keyframes logoAnimation {
      0% {
         top: 30%;
         left: 16%;
         width: 219px;
         height: 267px;
      }
      50% {
         top: 30%;
         left: 16%;
         width: 219px;
         height: 267px;
      }
      100% {
         top: 24px;
         left: 24px;
         width: 60x;
         height: 74px;
      }
   }
}


@media (max-height: 820px) {
   /* .login-content-wrapper {
      height: 500px;
   } */

   .login-guestlogin-btn-wrapper {
      gap: 12px;
   }

   .signup-content-wrapper {
      height: 520px;
   }

   h1 {
      font-size: 52px;
      margin-top: 24px;
   }

   .input-login {
      gap: 18px;
   }
}

@media (max-height: 715px) {
   .login-content-wrapper {
      height: 400px;
      gap: 20px;
   }
   h1 {
      font-size: 48px;
      margin-top: 12px;
   }
   
   .input-login {
      gap: 16px;
   }
}