@import "../../../assets/scss/variables";

  .animated-guidehelperalt-wrapper{
    position: relative;
    width: 70px;
    padding: 1.2rem 1.5rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: $secondary-color;
    border-radius: 25px;
    transition: 0.5s ease;
    

    .animated-guidehelperalt-image-wrapper {
      cursor: pointer;
      position: absolute;
      left: -50px;
      bottom: -10px;
    }

    .animated-guidehelperalt-text-wrapper{
      margin-left: 1.5rem;
      opacity: 0;
      
      
      p{
        color: white;
        font-size: 1.4rem;
        letter-spacing: 0.28px;
        font-weight: 200;
        line-height: 20px;
      }
    }

    .close-img-wrapper {
      align-self: flex-start;
      cursor: pointer;
      margin-top: -8px;
      img {
        width: 1rem;
        height: 1rem;
      }
    }
  }

  .expanded-wrapper {
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
    width: 520px;
    justify-content: flex-start;
    // margin-top: -4rem;
    

    .animated-guidehelperalt-text-wrapper {
      opacity: 1;

      .fade-in {
        animation: fade-in 0.5s ease;
      }
    }
  }

  .expanded-image-wrapper {
    bottom: 1.2rem !important;
    cursor: default !important;
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }