.e-chat-scrollbar { scrollbar-width: 7px; scrollbar-color: rgba(0, 0, 0, .2); }
.e-chat-scrollbar::-webkit-scrollbar { width: 7px; }
.e-chat-scrollbar::-webkit-scrollbar-track { box-shadow: none; border-radius: unset; }
.e-chat-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .2); box-shadow: none; border-radius: unset; }

.e-chat-disabled { pointer-events: none; opacity: .5; cursor: not-allowed; }

.e-chat-image-loading { background: rgba(0, 0, 0, 0.1) url('../images/downloading.svg') no-repeat center center; }

.e-chat-button,
.e-chat-button:visited {
    cursor: pointer;
    width: 200px;
    margin: 0px auto;
    color: white;
    background-color: black;
    border-radius: 5px;
    text-align: center;
    padding: 12px 15px 12px 15px;
    text-decoration:none;
    transition: all ease .2s;
    }

    .e-chat-button:hover { background-color: #191919; text-decoration: none; transition: all ease .2s; }

    .e-chat-button--primary { background-color: var(--primary-color); }
    .e-chat-button--primary:hover { background-color: #e8336f; }



/* ################################################################################################################################################ */

.e-chat-dashboard {
    width: 100%;
    height: 100%;
    display: flex;
    }

    .e-chat-dashboard__left-panel {
        flex: 0 0 30%;
        min-width: 250px;
        max-width: 420px;
        display: flex;
        flex-direction: column;
        background-color: white;
        }

        .e-chat-dashboard__left-panel__contact {
            background-color: #eeeeee;
            padding: 12px 15px;
            display: flex;
            align-items: center;
            }

            .e-chat-dashboard__left-panel__contact__avatar {
                flex: none;
                }

                .e-chat-dashboard__left-panel__contact__avatar > div {
                    height: 40px;
                    width: 40px;
                    border-radius: 50%;
                    background-size: cover;
                    background-position: center center;
                    overflow: hidden;
                    }

            .e-chat-dashboard__left-panel__contact__details {
                flex: 1;
                padding-left: 12px;
                }

                .e-chat-dashboard__left-panel__contact__details__name {
                    font-size: 1.2em;
                    }
                
                .e-chat-dashboard__left-panel__contact__details__email {
                    opacity: .5;
                    }

        .e-chat-dashboard__left-panel__search {
            background-color: #fbfbfb;
            border-bottom: 1px solid #ebebeb;
            padding: 12px 15px;
            }

            .e-chat-dashboard__left-panel__search > :not(:last-child) {
                margin-bottom: 8px;
                }

            .e-chat-dashboard__left-panel__search select {
                width: 100%;
                padding: 8px;
                border: 1px solid #f6f6f6;
                border-radius: 5px;
                outline: none;
                font: inherit;
                color: currentColor;
                }

            .e-chat-dashboard__left-panel__search__input {
                border: 1px solid #f6f6f6;
                background-color: white;
                width: 100%;
                padding: 8px 12px;
                border-radius: 5px;
                outline: none;
                }

        .e-chat-dashboard__left-panel__activities {
            flex-grow: 1;
            overflow-y: auto;
            }
            
    .e-chat-dashboard__main-panel {
        flex: 1;
        border-left: 1px solid #dbdbdb;
        background-image: url('../images/splash.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 397px;
        }

        .e-chat-dashboard__main-panel__views {

            }

        .e-chat-dashboard__main-panel__view-links {
            height: 80px;
            display: flex;
            }

            .e-chat-dashboard__main-panel__view-links__view-link {
                flex: 1;
                background-color: #f9f9f9;
                background-repeat: no-repeat;
                background-position: center 18px;
                background-size: 36px;
                justify-content: center;
                align-items: center;
                border: 1px solid #dbdbdb;
                padding-bottom: 5px;     
                border-bottom: 0px solid var(--primary-color);
                }

                .e-chat-dashboard__main-panel__view-links__view-link:hover {
                    cursor: pointer;
                    border-bottom-width: 2px;
                    background-color: #f4f5f5; /*efefef;*/
                    }

                .e-chat-dashboard__main-panel__view-links__view-link.e-chat-dashboard__main-panel__view-links__view-link--selected {
                    padding-bottom: 0px;
                    transition: border-bottom .2s ease, padding-left .2s ease;
                    border-bottom-width: 5px;
                    }

                .e-chat-dashboard__main-panel__view-links__view-link:first-child { border-left: 0; }
                .e-chat-dashboard__main-panel__view-links__view-link:last-child { border-right: 0; }

                .e-chat-dashboard__main-panel__view-links__view-link--chat { background-image: url(../images/view-chat.png); }
                .e-chat-dashboard__main-panel__view-links__view-link--workflow { background-image: url(../images/view-workflow.png); }

/* ################################################################################################################################################ */

.e-chat-activity-list {
    background: transparent;
    }

    .e-chat-activity-list__fetch {
        padding: 12px;
        text-align: center;
        cursor: pointer;
        }

    .e-chat-activity-list__fetch--fetching {
        cursor: progress;
        }

/* ################################################################################################################################################ */

.e-chat-activity-list-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px 15px;
    border-bottom: 1px solid #f2f2f2;
    border-left: 2px solid #ebebeb;
    transition: background-color .2s ease;
    }

    .e-chat-activity-list-item:hover,
    .e-chat-activity-list-item.e-chat-activity-list-item--selected {
        background-color: #f4f5f5;
        border-left-color: var(--primary-color);
        transition: background-color .2s ease;
        }

    .e-chat-activity-list-item.e-chat-activity-list-item--selected {
        border-left-width: 5px;
        padding-left: 12px;
        transition: border-left .2s ease, padding-left .2s ease;
        }

    .e-chat-activity-list-item__avatar {
        flex: none;
        }

        .e-chat-activity-list-item__avatar > div {
            height: 55px;
            width: 55px;
            border-radius: 50%;
            background-size: cover;
            background-position: center center;
            overflow: hidden;
            /* border-bottom: 20px solid rgba(255, 255, 255, 1); */
            }

    .e-chat-activity-list-item__content {
        flex-grow: 1;
        min-width: 0;
        margin-left: 15px;
        }

        .e-chat-activity-list-item__content__primary {
            display: flex;
            align-items: center;
            
            }

            .e-chat-activity-list-item__content__primary__icon {
                width: 14px;
                height: 14px;
                margin-right: 7px;
                background-image: url('../images/chat--24x24.png');
                background-size: contain;
                }

                .e-chat-activity-list-item__content__primary__icon--workflow { background-image: url('../images/workflow--24x24.png'); }

            .e-chat-activity-list-item__content__primary__title {
                flex: 1;
                padding-right: 10px;
                font-size: 1.2em;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-weight: 400;
                }

                .e-chat-activity-list-item__content__primary__notification-count {
                    min-width: 20px;
                    height: 20px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: red;
                    border-radius: 12px;
                    }
    
                    .e-chat-activity-list-item__content__primary__notification-count > div {
                        padding: 0px 5px;
                        font-weight: bold;
                        color: white;
                        }
                        
        .e-chat-activity-list-item__content__secondary {
            display: flex;
            /* align-items: center; */
            margin-bottom: 5px;            
            }

            .e-chat-activity-list-item__content__secondary__content {
                flex: 1;
                display: flex;
                align-items: center;
                /* vertical-align: middle; */
                /* font-size: 1.2em; */
                font-weight: 400;
                min-width: 0;
                }

                .e-chat-activity-list-item__content__secondary__content__state {
                    width: 19px;
                    height: 13px;
                    margin-right: 3px;
                    /* vertical-align: middle; */
                    background-size: contain;
                    background-repeat: no-repeat;
                    }

                    .e-chat-activity-list-item__content__secondary__content__state--volatile { background-image: url('../images/state-volatile--19x13.png'); }
                    .e-chat-activity-list-item__content__secondary__content__state--persisted { background-image: url('../images/state-persisted--19x13.png'); }
                    .e-chat-activity-list-item__content__secondary__content__state--delivered { background-image: url('../images/state-delivered--19x13.png'); }
                    .e-chat-activity-list-item__content__secondary__content__state--viewed { background-image: url('../images/state-viewed--19x13.png'); }

                .e-chat-activity-list-item__content__secondary__content__message {
                    flex: 1;
                    /* vertical-align: middle; */
                    color: #666666;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    }

        .e-chat-activity-list-item__content__tertiary {
            display: flex;
            align-items: center;
            }

            .e-chat-activity-list-item__content__tertiary__status {
                font-size: 11px;
                padding: 3px 6px;
                background-color: #e61d5f;
                color: white;
                border-radius: 5px;
                vertical-align: middle;
                }

                .e-chat-activity-list-item__content__tertiary__status--pending { background-color: #e67c1d; }
                .e-chat-activity-list-item__content__tertiary__status--active { background-color: #3fa03f; }
                .e-chat-activity-list-item__content__tertiary__status--closed { background-color: #1d77e6; }

            .e-chat-activity-list-item__content__tertiary__id {
                font-size: 11px;
                opacity: 0.5;
                margin-left: 5px;
                }

            .e-chat-activity-list-item__content__tertiary__date {
                font-size: 11px;
                color: #bbbbbb;
                margin-left: auto;
                }
   
/* ################################################################################################################################################ */
                    
.e-chat-action-list {
    margin: 0px auto;
    width: 100%;
    max-width: 960px;
    padding: 12px;
    }

    .e-chat-action-list__fetch {
        padding: 12px;
        text-align: center;
        cursor: pointer;
        }

        .e-chat-action-list__fetch--fetching {
            cursor: progress;
            }
        
    .e-chat-action-list__actions {
        margin: 0px 15px;
        }

@media all and (max-width: 479px) {
    .e-chat-action-list { padding: 12px 0px; }
    }

/* ################################################################################################################################################ */

@keyframes e-chat-jello {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
              transform: scale3d(1.25, 0.75, 1);
    }
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
              transform: scale3d(0.75, 1.25, 1);
    }
    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
              transform: scale3d(1.15, 0.85, 1);
    }
    65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
              transform: scale3d(0.95, 1.05, 1);
    }
    75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
              transform: scale3d(1.05, 0.95, 1);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
}




.e-chat-action-item {
    display: flex;
    margin-bottom: 3px;
    }

    .e-chat-action-item--first { margin-top: 15px; }

    .e-chat-action-item__avatar {
        flex: none;
        width: 40px;
        }

        .e-chat-action-item__avatar > div {
            height: 30px;
            width: 30px;
            margin: 0px auto;
            border-radius: 50%;
            background-size: cover;
            background-position: center center;
            /* background-origin: border-box;
            border-bottom: 1px solid rgba(255, 0, 0, 1.3); */
            overflow: hidden;
            }
        
    .e-chat-action-item__bubble-arrow {
        flex: none;
        width: 9px;
        overflow: hidden;
        }

        .e-chat-action-item__bubble-arrow > div {
            position: relative;
            top: 11px;
            left: 5px;
            width: 9px;
            height: 9px;
            background-color: white;
            box-shadow: 0 1px 0px rgba(0, 0, 0, 0.3);
            transform: rotate(45deg);
            }

            .e-chat-action-item__bubble-arrow.e-chat-action-item__bubble-arrow--me > div { background-color: #17212d; transform: rotate(-45deg); left: -5px; }

    .e-chat-action-item__bubble-container {
        flex: 1;
        margin: 0px 60px 0px 0px;
        }

        .e-chat-action-item__bubble-container--me { margin: 0px 0px 0px 60px; }

        .e-chat-action-item__bubble-container__bubble {
            float: left;
            background-color: white;
            border-radius: 8px;
            padding: 10px; /* 7px 12px;*/
            box-shadow: 0 1px 0px rgba(0, 0, 0, 0.3);
            }

            .e-chat-action-item__bubble-container__bubble.e-chat-action-item__bubble-container__bubble--animated {
                position: relative; /* makes the anmiation go over the bubble arrow */
                z-index: 1;
                -webkit-animation: e-chat-jello .9s both;
                        animation: e-chat-jello .9s both;
                }

            .e-chat-action-item__bubble-container__bubble--me {
                float: right;
                color: #ffffff;
                background-color: #17212d;
                }
            
        .e-chat-action-item__bubble-container__bubble__name {
            font-weight: bold;
            color: #8c66ff;
            font-size: 12px;
            margin-bottom: 5px;
            }

        .e-chat-action-item__bubble-container__bubble__content {
            border: 0;
            vertical-align: middle;
            }

            /* .e-chat-action-item__bubble-container__bubble__content__details {
                text-align: right;
                } */

                .e-chat-action-item__bubble-container__bubble--me .e-chat-action-item__bubble-container__bubble__content__details {
                    text-align: right;
                    }

                .e-chat-action-item__bubble-container__bubble__content__details__timestamp {
                    margin-top: 3px;
                    text-align: right;
                    color: rgb(153, 153, 153);
                    font-size: 0.8em;
                    vertical-align: middle;
                    }
                
                .e-chat-action-item__bubble-container__bubble__content__details__status {
                    width: 13px;
                    height: 10px;
                    display: inline-block;
                    vertical-align: middle;
                    background-size: contain;
                    background-repeat: no-repeat;
                    }

                    .e-chat-action-item__bubble-container__bubble__content__details__status--volatile { background-image: url('../images/state-volatile--19x13.png'); }
                    .e-chat-action-item__bubble-container__bubble__content__details__status--persisted { background-image: url('../images/state-persisted--19x13.png'); }
                    .e-chat-action-item__bubble-container__bubble__content__details__status--delivered { background-image: url('../images/state-delivered--19x13.png'); }
                    .e-chat-action-item__bubble-container__bubble__content__details__status--viewed { background-image: url('../images/state-viewed--19x13.png'); }

@media all and (max-width: 479px) {
    .e-chat-action-item__bubble-container { margin: 0px 20px 0px 0px; }
    .e-chat-action-item__bubble-container--me { margin: 0px 0px 0px 20px; }
    .e-chat-action-item__avatar { display: none; }
    }

/* ################################################################################################################################################ */

.e-chat {
    height: 100%;
    background: #e5ddd5 url('../images/background.png');
    }

    .e-chat__splash {
        height: 100%;
        border-bottom: 5px solid var(--primary-color);
        display: flex;
        justify-content: center;
        align-items: center;
        }

        .e-chat__splash__image {
            display: inline-block;
            background-image: url('../images/splash.png');
            background-size: contain;
            width: 350px;
            height: 291px;
            margin-bottom: 40px
            }

    .e-chat__current {
        height: 100%;
        display: flex;
        flex-direction: column;
        }

        .e-chat__current__header {
            background-color: #eeeeee;
            padding: 12px 15px;
            }

            .e-chat__current__header__content {
                display: flex;
                align-items: center;
                }

                .e-chat__current__header__content__icon {
                    flex: none;
                    }

                    .e-chat__current__header__content__icon {
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        background-image: url('../images/activity.png'); 
                        background-size: cover;
                        background-position: center center;
                        overflow: hidden;
                        }

                .e-chat__current__header__content__details {
                    flex: 1;
                    margin-left: 12px;
                    }

                    .e-chat__current__header__content__details__date {
                        opacity: 0.5;
                        font-size: 13px;
                        vertical-align: middle;
                        }

                    .e-chat__current__header__content__details__status {
                        display: inline-block;
                        font-size: 11px;
                        padding: 3px 6px;
                        background-color: #e61d5f;
                        color: white;
                        border-radius: 5px;
                        margin-left: 5px;
                        vertical-align: middle;
                        }

                        .e-chat__current__header__content__details__status--pending { background-color: #e67c1d; }
                        .e-chat__current__header__content__details__status--active { background-color: #3fa03f; }
                        .e-chat__current__header__content__details__status--closed { background-color: #1d77e6; }

                .e-chat__current__header__subscribers {
                    flex: none;
                    margin: 0px 10px;
                    padding: 4px 2px;
                    background-color: #d6d6d6;
                    border-radius: 30px;
                    }

                    .e-chat__current__header__subscribers__subscriber {
                        display: inline-block;
                        vertical-align: bottom;
                        height: 30px;
                        width: 30px;
                        margin: 0px auto;
                        border-radius: 50%;
                        background-size: cover;
                        background-position: center center;
                        /* background-origin: border-box;
                        border-bottom: 1px solid rgba(255, 0, 0, 1.3); */
                        overflow: hidden;
                        cursor: help;
                        margin: 0px 2px;
                        }

                .e-chat__current__header__menu {
                    flex: none;
                    position: relative;
                    }

                    .e-chat__current__header__menu__trigger {
                        width: 40px;
                        padding-top: 40px;                        
                        border-radius: 50%;
                        background-size: cover;
                        background-position: center center;
                        cursor: pointer;
                        transition: background-color .2s ease;
                        }

                        .e-chat__current__header__menu__trigger--actions { background-image: url('../images/attach.png'); }
                        .e-chat__current__header__menu__trigger--activities { background-image: url('../images/menu.png'); }

                        .e-chat__current__header__menu__trigger:focus {
                            background-color: #d6d6d6;
                            outline: none;
                            transition: background-color .2s ease;
                            }

                    .e-chat__current__header__menu__items {
                        position: absolute;
                        width: 100%;
                        }

                        .e-chat__current__header__menu__items__item {
                            width: 40px;
                            height: 40px;
                            border-radius: 50%;
                            background-size: cover;
                            box-shadow: 0 1px 2px rgba(0, 0, 0, .17), 0 6px 8px rgba(0, 0, 0, .29);
                            cursor: pointer;
                            display: block;
                            transform-origin: top center;
                            transform: scale(0);
                            opacity: 0;
                            margin-top: -40px;
                            transition: transform .2s cubic-bezier(0, 0.885, 0.32, 1.35),
                                        margin-top .2s cubic-bezier(0, 0.885, 0.32, 1.35),                                
                                        opacity .2s cubic-bezier(0, 0.885, 0.32, 1.35);
                            }

                            .e-chat__current__header__menu__items.e-chat__current__header__menu__items--active .e-chat__current__header__menu__items__item {
                                transform: scale(1);
                                opacity: 1;
                                margin-top: 10px;
                                }

        .e-chat__current__view {
            flex: 1;
            overflow: auto /* Don't allow content to gow beyond 100% height */;
            display: flex;
            flex-direction: column;
            }

            .e-chat__current__view__action-bar {
                background-color: var(--primary-color);
                padding: 15px 15px;
                }

                .e-chat__current__view__action-bar__close {
                    display: inline-block;
                    width: 19px;
                    height: 19px;
                    cursor: pointer;
                    vertical-align: middle;
                    margin-right: 8px;
                    background-image: url('../images/close--19x19--white.png');
                    }
                
                .e-chat__current__view__action-bar__title {
                    vertical-align: middle;
                    font-size: 1.4em;
                    color: white;
                    }

            .e-chat__current__view__action-presenter {
                flex: 1;
                overflow-y: auto;
                }

                /* .e-chat__current__view__action-presenter--padded { padding: 12px; } */

            .e-chat__current__view__messenger {
                background-color: #eeeeee;
                border-bottom: 1px solid #efefef;
                padding: 12px 25px;
                display: flex;
                align-items: flex-end;
                }
            
                .e-chat__current__view__messenger__icon > div {
                    display: block;
                    margin-bottom: 7px;
                    background-image: url('../images/chat--24x24.png');
                    width: 24px;
                    height: 23px;
                    }

                .e-chat__current__view__messenger__input {
                    flex: 1;
                    padding: 0px 25px;
                    }
                
                .e-chat__current__view__messenger__submit > div {
                    margin-bottom: 7px;
                    cursor: pointer;
                    background-image: url('../images/send--24x24.png');
                    width: 24px;
                    height: 23px;
                    }
   
@media all and (max-width: 479px) {

    .e-chat__current__header__content { font-size: 12px; }
    .e-chat__current__header__content__icon { width: 32px; height: 32px; }
    .e-chat__current__header__content__details__date { font-size: 11px; }
    .e-chat__current__header__subscribers { border-radius: 32px; display: none; }
    .e-chat__current__header__subscribers__subscriber { width: 24px; height: 24px; }
    .e-chat__current__header__menu__trigger { width: 32px; padding-top: 32px; }
    .e-chat__current__header__menu__items__item { width: 32px; height: 32px; }

    .e-chat__current__view__messenger { padding: 12px 15px; }
    .e-chat__current__view__messenger__input { padding: 0px 15px 0px 0px; }
    .e-chat__current__view__messenger__icon > div { display: none; }
    
}

/* ################################################################################################################################################ */

.e-chat-message-input {
    width: 100%;
    background-color: white;
    border-radius: 20px;
    }

    .e-chat-message-input > div {
        cursor: text;
        max-height: 125px;
        overflow-y: auto;
        outline: none;
        padding-right: 10px;
        padding: 12px 15px;
        }

        /*.e-chat-message-input > div[contenteditable=true]:empty:before {
            content: attr(placeholder);
            display: block;
            opacity: 0.3;
            }*/

/* ################################################################################################################################################ */

    .e-chat-file-action__menu-item { background-image: url('../images/attach__file.png'); }

    .e-chat-file-action__presenter {
        border: 0;
        }

        .e-chat-file-action__presenter__icon {
            width: 64px;
            height: 64px;
            display: inline-block;
            background-clip: content-box;
            background-origin: content-box;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;
            background-image: url('../images/filetype__generic.png');
            border-radius: 5px;
            }

            .e-chat-file-action__presenter__icon--pdf { background-image: url('../images/filetype__pdf.png'); }
            .e-chat-file-action__presenter__icon--doc, .e-chat-file-action__presenter__icon--docx { background-image: url('../images/filetype__word.png'); }
            .e-chat-file-action__presenter__icon--xls, .e-chat-file-action__presenter__icon--xlsx { background-image: url('../images/filetype__excel.png'); }
            .e-chat-file-action__presenter__icon--jpg, .e-chat-file-action__presenter__icon--jpeg { background-image: url('../images/filetype__image.png'); }
        
        .e-chat-file-action__presenter__filename { color: grey; font-size: 12px; font-style: italic; }
        .e-chat-file-action__presenter__text { margin-top: 3px; } 
        
        /* .e-chat-file-action__presenter__image.e-chat-file-action__presenter__image--pull-up { margin-top: -6px; }
        .e-chat-file-action__presenter__image * { display: block; }
        */

    .e-chat-file-action__creator {
        height: 100%;
        display: flex;
        flex-direction: column;
        background-color: rgba(238, 238, 238, .5);
        justify-content: center;
        }
        
        .e-chat-file-action__creator__icon {
            flex: 1;
            max-height: 256px;
            padding: 10px 10px 5px 10px;
            background-clip: content-box;
            background-origin: content-box;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;
            background-image: url('../images/filetype__generic.png');
            }

            .e-chat-file-action__creator__icon--pdf { background-image: url('../images/filetype__pdf.png'); }
            .e-chat-file-action__creator__icon--doc, .e-chat-file-action__creator__icon--docx { background-image: url('../images/filetype__word.png'); }
            .e-chat-file-action__creator__icon--xls, .e-chat-file-action__creator__icon--xlsx { background-image: url('../images/filetype__excel.png'); }
            .e-chat-file-action__creator__icon--jpg, .e-chat-file-action__creator__icon--jpeg { background-image: url('../images/filetype__image.png'); }

        .e-chat-file-action__creator__filename {
            text-align: center;
            }

        .e-chat-file-action__creator__details {
            padding: 10px;
            width: 100%;
            max-width: 500px;
            margin: 0px auto;
            }

            .e-chat-file-action__creator__details__message-input {
                width: 100%;
                border-bottom: 2px solid var(--primary-color);
                margin-bottom: 20px;
                cursor: text;
                padding: 12px 0px;
                max-height: 125px;
                overflow-y: auto;
                outline: none;
                }

            .e-chat-file-action__creator__details__submit {
                text-align: center;
                }

/* ################################################################################################################################################ */
    
    /* .e-chat__current__header__menu__items__item--image {  } */

    .e-chat-image-action__menu-item { background-image: url('../images/attach__image.png'); }

    .e-chat-image-action__presenter {
        border: 0;
        }

        .e-chat-image-action__presenter__image { text-align: right; border-radius: 5px; overflow: hidden; margin: 0 -6px; }
        .e-chat-image-action__presenter__image.e-chat-image-action__presenter__image--pull-up { margin-top: -6px; }
        .e-chat-image-action__presenter__image * { display: block; }
        .e-chat-image-action__presenter__text { margin-top: 3px; }


    .e-chat-image-action__creator {
        height: 100%;
        display: flex;
        flex-direction: column;
        background-color: rgba(238, 238, 238, .5);
        justify-content: center;
        }
        
        .e-chat-image-action__creator__image {
            flex: 1;
            max-height: 500px;
            padding: 10px;
            /*background-clip: content-box;
            background-origin: content-box;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;*/
            }

        .e-chat-image-action__creator__details {
            padding: 10px;
            width: 100%;
            max-width: 500px;
            margin: 0px auto;
            }

            .e-chat-image-action__creator__details__message-input {
                width: 100%;
                border-bottom: 2px solid var(--primary-color);
                margin-bottom: 20px;
                cursor: text;
                padding: 12px 0px;
                max-height: 125px;
                overflow-y: auto;
                outline: none;
                }

            .e-chat-image-action__creator__details__submit {
                text-align: center;
                }