#chat-input-container {
  background: #ffffff;
  padding: 5px;
  .form-group {
    margin-top: 10px;
    min-height: 65px;
    display: flex;
    flex-direction: row;
  }

  input {
    margin-right: 10px;
    //z-index: 1; // Added so that input would be above the more button container. This is required since the container is absolute positioned
    transition: 0.25s;
    -webkit-transition: 0.25s;
  }

  .send-button {
    background: @brand-secondary !important;
    img {
        margin-top: 12px;
        margin-left: 5px;
    }
  }
}

.more-button-container {
  position: absolute;
  bottom: 5px;
  pointer-events: none;

  &.active {
    z-index: 101;
    .button {
        opacity: 1;
        pointer-events: auto;
    }

    .more-button {
        img {
            content: url('/images/icon-cross-32.png');
            transform: rotate(0deg);
        }
    }
  }

  .more-button {
    background: @brand-primary !important;
    margin-top: 20px;
    pointer-events: auto;
    img {
        transition: 0.25s;
        -webkit-transition: 0.25s;
        margin-top: 12px;
        transform: rotate(90deg);
    }
  }

  .button {
    transition: 0.5s;
    -webkit-transition: 0.5s;
    margin-left: 7px;
    opacity: 0;
    pointer-events: none;
    display: block;
    margin-top: 15px;

    &:nth-last-of-type(2) {
        transition-delay: 100ms;
        -webkit-transition-delay: 100ms;
    }

    &:nth-last-of-type(3) {
        transition-delay: 150ms;
        -webkit-transition-delay: 150ms;
    }

    &:nth-last-of-type(4) {
        transition-delay: 200ms;
        -webkit-transition-delay: 200ms;
    }

    span {
        background: @brand-primary;
        color: @white;
        padding: 5px;
        margin-left: 5px;
        border-radius: 3px;
        cursor: pointer;
    }

    img {
        height: 25px;
        margin-top: 8px;
    }
  }
}