@keyframes appearFromBottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

.container {
  position: fixed !important;
  bottom: 0;
  right: 2rem;
  width: 100%;
  max-width: 350px;
  height: 100%;
  max-height: 650px;
  border: 1px solid var(--purple-primary);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: 0px 0.5px 50px 1px #ffffff50;
  transition: all 0.5s ease-in-out;
  border: 1px solid var(--white-gradient);
  background-color: var(--gray-solid) !important;
  border-radius: 5px 5px 0 0;
  animation: appearFromBottom 0.5s ease-in-out;

  @media (max-width: 768px) {
    max-width: 100%;
    right: 0;
    max-height: 100%;
    border-radius: 0 0 0 0;
  }

  .header {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
  }

  .body {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    max-height: 75%;

    @media (max-width: 768px) {
      max-height: 100vh;
    }
  }

  .input {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
  }
}