#message-text-area {
    min-height: 40px;
    max-height: 200px;
    height: auto;
    padding: 0;
    margin: 0;
    .buttons-left {
        position: absolute;
        left: 0;
        bottom: -3px;
        width: 30px;
        height: 100%;
        .attach-button {
            font-size: 24px;
            position: absolute;
            bottom: 0px;
            left: 0px;
            margin: auto 0;
            --padding-top: 0;
            --padding-bottom: 0;
            --padding-start: 0;
            --padding-end: 0;
        }
    }
    .buttons-right {
        position: absolute;
        bottom: 3px;
        right: 0;
        width: 30px;
        height: 100%;
        .send-button {
            font-size: 12px;
            position: absolute;
            bottom: 0px;
            left: 0px;
            margin: 2px 0;
            --padding-top: 0;
            --padding-bottom: 0;
            --padding-start: 0;
            --padding-end: 0;
        }
    }
    .text-message {
        position: relative;
        // margin: 0 35px;
        // width: calc(100% - 70px);
        // ----- new after adding canned open /close canned responses
        // margin: 0 70px;
        // width: calc(100% - 100px);
        // ----- new after adding emoji picker
        margin: 0 108px;
        width: calc(100% - 140px);
        ion-textarea {
            // border-radius: 4px;
            border-radius: 20px; // NK edited
            padding: 0;
            margin: 0;
            height: auto;
            overflow: auto;
            // min-height: 30px;
            min-height: 37px; // NK edited
            max-height: 184px;
            background-color: rgba(0, 0, 0, 0.05);
            // --padding-top: 5px; // NK edited
            --padding-top: 8px;
            --padding-bottom: 5px;
            --padding-end: 5px;
            // --padding-start: 5px; // NK edited
            --padding-start: 10px;
            line-height: 1.34;
            font-size: 15px;
        }
    }
    .text-message-no-cr {
        margin: 0 72px !important;
        width: calc(100% - 101px) !important;
    }
}

#fileInput {
    position: absolute;
    opacity: 0;
}

#file-input {
    // width: 0.1px;
    // height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    // z-index: -1;
}

.upload-image-btn {
    // margin-bottom: 0px;
    // margin-top: 5px;
    // margin-left: 0px;
    // margin-right: 0px;
    // --border-radius: 50%;
    // --padding-end: 6px;
    // --padding-start: 6px;
    // --padding-top: 0px;
    // --padding-bottom: 0px;
    // height: 30px !important;
    --padding-bottom: 0px;
    --padding-top: 0px;
    --border-radius: 50%;
    --padding-end: 1px;
    --padding-start: 1px;
    height: 33px !important;
}

.canned-responses-btn {
    --padding-bottom: 0px;
    --padding-top: 0px;
    --border-radius: 50%;
    --padding-end: 2px;
    --padding-start: 2px;
    height: 33px !important;
    width: 33px;
}

.emoji-picker-btn {
    --padding-bottom: 0px;
    --padding-top: 0px;
    --border-radius: 50%;
    --padding-end: 2px;
    --padding-start: 2px;
    height: 33px !important;
    width: 33px;
}

.no-canned-responses-btn-badge {
    position: absolute;
    font-size: 12px;
    background-color: transparent;
    border-radius: 50%;
    padding: 1px 2px;
    top: 4px;
    color: red;
    left: -3px;
    cursor: pointer;
}
.no-canned-responses-btn-badge:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.canned-responses-btn-badge {
    position: absolute;
    font-size: 12px;
    background-color: transparent;
    border-radius: 50%;
    padding: 1px 2px;
    top: 4px;
    color: #92949c;
    left: -3px;
    cursor: pointer;
}

.canned-responses-btn-badge:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.upload-image-btn .button-native {
    border-radius: 50%;
}

.send-msg-activated {
    color: #3880ff !important;
}

.send-msg-disabled {
    cursor: default;
    opacity: 0.8;
    pointer-events: none;
}

.emoji-mart-desktop {
    position: absolute;
    bottom: 53px;
    right: -246px;
}
.emoji-mart-mobile {
    position: absolute;
    bottom: 50px;
    right: -123px;
    width: 230px;
}
//   input[placeholder] { text-overflow: ellipsis; }
// ::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
// input:-moz-placeholder { text-overflow: ellipsis; }

// #ion-textarea > div > textarea[placeholder]{ text-overflow: ellipsis; }
// #ion-textarea > div > textarea:-moz-placeholder  { text-overflow: ellipsis; }
// ::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
