@media (min-width: 761px) {
  .change-color {
    fill: var(--mockup-color);
  }
  .logo {
    background: white;
  }
  @keyframes animateLogo {
    100% {
      top: 80px;
      left: 77px;
      width: 80px;
      height: 102px;
    }
  }
  .signup-container {
    position: absolute;
    top: 67px;
    right: 64px;
    margin: 0;
    justify-content: end;
  }
  .content h1 {
    font-size: 61px;
  }
  .login-btns-container {
    flex-direction: row;
  }
  .register-small {
    width: 102px !important;
  }
  .back-arrow-container:hover {
    background: var(--mockup-color);
  }
  .back-arrow-container:active {
    background: var(--focus-color-btn);
  }
  .back-arrow-container:active svg path {
    fill: white;
  }
  .success-msg-popup {
    transform: translate(-50%, -800%);
  }
  .success-msg-popup.slide-sm {
    transform: translate(-50%, -420%);
  }
}
@media (min-width: 949px) {
  .signup-container {
    right: 80px;
  }
}
@media (min-width: 1156px) {
  .success-msg-popup.slide-sm {
    transform: translate(-50%, -500%);
  }
}
@media (min-width: 1200px) {
  .logo svg {
    top: calc(50% - 167px);
    left: calc(50% - 137px);
    width: 334px;
    height: 274px;
  }
  @keyframes animateLogo {
    100% {
      top: 80px;
      left: 77px;
      width: 100px;
      height: 122px;
    }
  }
}
@media (max-width: 760px) {
  @keyframes changeColor {
    0% {
      fill: white;
    }
    100% {
      fill: var(--mockup-color);
    }
  }
  .logo svg {
    top: calc(50% - 76px);
    left: calc(50% - 60px);
    width: 120px;
    height: 142px;
  }
  @keyframes animateLogo {
    100% {
      top: 16px;
      left: 16px;
      width: 64px;
      height: 78px;
    }
  }
  .back-arrow-container:active {
    background: var(--placeholder-color);
  }
  .success-msg-popup {
    transform: translate(-50%, -1000%);
  }
  .success-msg-popup.slide-sm {
    transform: translate(-50%, -520%);
  }
  .line {
    margin-top: 6px;
    width: 70px;
  }
}
@media (max-width: 650px) {
  .remember-me-checkbox-container {
    left: 8%;
  }
}
@media (max-width: 576px) {
  .remember-me-checkbox-container {
    left: 2%;
  }
}
@media (max-width: 500px) {
  .content {
    margin-top: 200px;
  }
}
@media (max-width: 400px) {
  .back-arrow-container {
    left: 0px;
  }
  .signup-container span {
    font-size: 14px;
  }
  .signup-container {
    gap: 16px;
  }
  .login-container,
  .signin-container {
    box-shadow: none;
    padding: 0;
  }
}
@media (min-width: 761px) and (max-height: 758px) {
  .content {
    margin-top: 96px;
  }
}
@media (min-width: 761px) and (max-height: 886px) {
  .signup-container {
    top: 16px;
  }
  .logo svg {
    top: calc(50% - 60px);
    left: calc(50% - 60px);
    width: 120px;
    height: 142px;
  }
  @keyframes animateLogo {
    100% {
      top: 18px;
      left: 77px;
      width: 64px;
      height: 78px;
    }
  }
  .container {
    height: 100vh;
    align-items: end;
  }
  .content {
    margin: 0;
  }
  .login-container .low-height-class {
    display: block;
    position: absolute;
    top: 16px;
    left: 16px;
  }
  .signin-container .low-height-class {
    display: block;
    position: absolute;
    top: 16px;
    right: 16px;
  }
  .logo {
    display: none;
  }
  .container {
    align-items: center;
  }
}
@media (min-width: 761px) and (max-height: 673px) {
  .container {
    height: auto;
    align-items: center;
  }
  .content {
    margin-top: 96px;
    margin-bottom: 12px;
  }
}
@media (max-width: 760px) and (max-height: 850px) {
  .signup-container {
    position: absolute;

    margin: 0;
    justify-content: end;
    top: 16px;
    right: 32px;
    gap: 8px;
  }
  .container {
    height: 100vh;
    align-items: center;
  }
  .content {
    margin-top: 96px;
  }
  .login-container .low-height-class {
    display: block;
    position: absolute;
    top: 16px;
    left: 16px;
  }
  .signin-container .low-height-class {
    display: block;
    position: absolute;
    top: 16px;
    right: 16px;
  }
  .logo {
    display: none;
  }
}
@media (max-width: 423px) and (max-height: 850px) {
  .signin-container .low-height-class {
    display: none;
  }
}
@media (max-width: 400px) and (max-height: 850px) {
  .low-height-class svg {
    width: 41px;
    height: 72px;
  }
  .login-container .low-height-class {
    top: 0px;
    left: 16px;
  }
  .signup-container {
    right: 16px;
  }
}
@media (max-width: 760px) and (max-height: 753px) {
  .signin-container,
  .login-container {
    box-shadow: none;
    padding-block: 0;
  }
  .legal-information-container {
    margin: 8px;
  }
  .login-btns-container,
  .legal-information-container {
    margin-top: 32px;
  }
  .login-container .low-height-class,
  .signin-container .low-height-class {
    display: none;
  }
  .logo {
    display: block;
  }
  .logo svg {
    top: calc(50% - 60px);
    left: calc(50% - 60px);
    width: 120px;
    height: 142px;
  }
  @keyframes animateLogo {
    100% {
      top: 16px;
      left: 32px;
      width: 64px;
      height: 78px;
    }
  }
  .back-arrow-container {
    left: 90%;
  }
}
@media (max-width: 760px) and (max-height: 574px) {
  .login-btns-container,
  .legal-information-container {
    margin-top: 8px;
  }
}
@media (max-width: 760px) and (max-height: 499px) {
  .login-fields-gap {
    margin: 16px 0 16px 0;
    gap: 20px;
  }
  .err-msg {
    top: 50px;
  }
  .content {
    margin-top: 50px;
    margin-bottom: 0;
  }
  .logo svg {
    top: calc(50% - 60px);
    left: calc(50% - 60px);
    width: 120px;
    height: 142px;
  }
  @keyframes animateLogo {
    100% {
      top: 8px;
      left: 32px;
      width: 44px;
      height: 7ch;
    }
  }
}
@media (max-width: 760px) and (max-height: 403px) {
  .container {
    display: block;
  }
  .signup-container {
    top: -30px;
  }
}