.signinContainer {
  height: 100vh;
  padding: 3rem;

  .logo {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
  }
  .forms {
    // Sign in form
    form {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;

      .forms__inputBox {
        position: relative;
        width: 100%;
        // Input
        input {
          width: 100%;
          padding: 10px;
          font-size: 1rem;
          letter-spacing: 1px;
          border: 2px solid #cccccc;
          border-radius: 10px;
          outline: none;

          &:focus ~ label,
          &:valid ~ label {
            color: #564794;
            transform: translateX(10px) translateY(-7px);
            font-size: 0.65rem;
            padding: 0 10px;
            font-weight: 600;
            background-color: white;
            letter-spacing: 0.1px;
          }

          &:focus,
          &:valid {
            color: black;
            border: 2px solid #564794;
          }
        }

        i.bi-eye,
        i.bi-eye-slash {
          position: absolute;
          right: 0;
          padding: 10px;
          padding-top: 5px;
          font-size: 1.5rem;

          &:hover {
            cursor: pointer;
          }
        }

        // Label
        label {
          position: absolute;
          left: 0;
          padding: 10px;
          font-size: 1rem;
          letter-spacing: 1px;
          color: #7f7e7f;
          text-transform: uppercase;
          pointer-events: none;
          transition: 0.6s;
          font-weight: 500;
        }
      }
    }

    // Forgot password
    .forgotPassw {
      margin-top: 0.3rem;
      margin-bottom: 1.6rem;

      p {
        margin-top: 5px !important;
        margin-bottom: 0 !important;

        a {
          color: #564794;
        }
      }
    }
  }

  // Signin Error message
  .signinForms--error {
    width: -webkit-fill-available;
    font-weight: 600;

    .bi {
      font-size: 1.018rem;
      padding: 0 !important;

      &::before {
        font-size: 1.4rem;
        font-weight: 900 !important;
      }
    }

    #emailError,
    #passwordError {
      color: crimson;
      width: -webkit-fill-available;
      display: flex;
      align-items: center;
      margin-top: 6px;
      line-height: 1.1;

      .bi-x {
        &::before {
          display: flex;
        }
      }

      .bi-exclamation-octagon {
        margin-right: 8px;
      }
    }
  }

  // Sign in button
  .signinBtn {
    button {
      border: none;
      background-color: #211069;
      width: -webkit-fill-available;
      padding: 1rem 0;
      border-radius: 25px;
      color: white;
      font-weight: 600;
      cursor: pointer;
      font-size: 1.07rem;

      &:hover,
      &:focus {
        background-color: white;
        color: #211069;
        border: 2px solid #211069;
      }
    }
  }
}
