/*!
 * ResponsiveChat
 *
 *  Created by nick on 07/06/2019.
 */


form#responsive-chat * {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

form#responsive-chat {
    background-color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    cursor: default;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* IE/Edge */
    user-select: none;
}
    form#responsive-chat ::-webkit-scrollbar { width: 3px; height: 1px; z-index: 9; }
    form#responsive-chat ::-webkit-scrollbar-track { background-color: #fff; }
    form#responsive-chat ::-webkit-scrollbar-thumb {
        background-color: #bec4c8;
        border-radius: 3px;
    }

/*
 * Message Section
 */
form#responsive-chat .messages {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 85px;
    padding: 20px 10px 0;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
    form#responsive-chat .messages:after {
        content: "";
        display: block;
        clear: both;
        width: 100%;
        height: 1px;
    }
    form#responsive-chat .message {
        display: block;
        clear: both;
        width: 100%;
        padding: 10px 1% 10px;
    }
        form#responsive-chat .message p {
            margin: 0;
        }
    form#responsive-chat .fromOther,
    form#responsive-chat .fromSelf {
        position: relative;
        max-width: 50%;
        word-wrap: break-word;
        margin-bottom: 20px;
        padding: 10px 20px;
        color: #fff;
        border-radius: 25px;
        clear: both;
        font: 400 1.5rem 'Open Sans', sans-serif;
        max-width: 90%;
    }
        form#responsive-chat .fromOther {
            clear: both;
            background-color: #e5e5ea;
            color: #000;
            float: left;
            border-bottom-left-radius: 30px 0px\9;
        }
            form#responsive-chat .fromOther:before {
                content: "";
                position: absolute;
                z-index: 2;
                bottom: -2px;
                left: -7px;
                height: 20px;
                border-left: 20px solid #e5e5ea;
                border-bottom-right-radius: 16px 14px;
                -webkit-transform: translate(0, -2px);
                transform: translate(0, -2px);
                border-bottom-right-radius: 15px 0px\9;
                transform: translate(-1px, -2px)\9;
            }
            form#responsive-chat .fromOther:after {
                content: "";
                position: absolute;
                z-index: 3;
                bottom: -2px;
                left: 4px;
                width: 26px;
                height: 20px;
                background-color: #fff;
                border-bottom-right-radius: 10px;
                -webkit-transform: translate(-30px, -2px);
                transform: translate(-30px, -2px);
            }
        form#responsive-chat .fromSelf {
            clear: both;
            float: right;
            background-color: #01337A;
            color: #fff;
            border-bottom-right-radius: 20px 0px\9;
        }
            form#responsive-chat .fromSelf:before {
                content: "";
                position: absolute;
                z-index: 1;
                bottom: -2px;
                right: -8px;
                height: 20px;
                border-right: 20px solid #01337A;
                border-bottom-left-radius: 16px 14px;
                -webkit-transform: translate(0, -2px);
                transform: translate(0, -2px);
                border-bottom-left-radius: 15px 0px\9;
                transform: translate(-1px, -2px)\9;
            }
            form#responsive-chat .fromSelf:after {
                content: "";
                position: absolute;
                z-index: 1;
                bottom: -2px;
                right: -42px;
                width: 12px;
                height: 20px;
                background-color: #fff;
                border-bottom-left-radius: 10px;
                -webkit-transform: translate(-30px, -2px);
                transform: translate(-30px, -2px);
            }
        form#responsive-chat date {
            position: absolute;
            top: -20px;
            font-size: 0.9em;
            white-space: nowrap;
            vertical-align: middle;
            color: #8b8b90;
            z-index: 4;
        }
            form#responsive-chat .fromOther date {
                left: 2px;
            }
            form#responsive-chat .fromSelf date {
                right: 2px;
            }

/*
 * Input Section
 */
form#responsive-chat .input {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 60px;
    border-top: 1px solid #ecf0f1;
    background-color: #fff;
    z-index: 10;
}
    form#responsive-chat input,
    form#responsive-chat textarea {
        float: left;
        width: 90%;
        height: 50px;
        padding: 0 15px;
        border: 0;
        font: 400 1.4rem 'Open Sans', sans-serif;
        outline: 0;
        -webkit-appearance: none;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
    form#responsive-chat input[type='text'] {}
    form#responsive-chat textarea {
        resize: none;
        padding: 15px 10px 0;
        margin: 2px 5px;
        border: 1px solid #ecf0f1;
        border-radius: 5px;
    }
    form#responsive-chat input[type='submit'] {
        float: right;
        width: 25px;
        height: 25px;
        margin: 12px 5px 0 0;
        border: none;
        color: transparent !important;
        background-color: transparent;
        background-image: url('data:image/png;base64,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');
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: contain;
    }