.chatWrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000000000;
    width: 100%;
    height: 100%;
    transform: translateX(100%);
    transition: .5s transform;
    background-color: #e2e9f1;
    display: flex;
    flex-direction: column;
}

.chatWrapper.show {
    transform: translateX(0);
}

.titleBar {
    height: 50px;
    background-image: linear-gradient(90deg, #267aff, #01bafa);
    display: flex;
    padding-left: 12px;
    align-items: center;
}

.titleBar .btn-back {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGjSURBVHgB7dzRTcMwEIDhMxMwQkboCGUDmKDdBNiADegGdAO6AWKCdIOUCcxFzQsotSvknC/k/6RTXvqUX3Kt1KkIAAAAAAAAAAAAAAAAAKCkIDMWY7zXy0rnEEI4COrRGI/xp7WgjpEYvVeBvQsxei8CW4kYrc6twE4mRiOwQwxHiOEIMRxJxOh0VgI7iRiRGMYyMbYCO8RwJBPjSWCHGI4QwxFiOKI3fJOIwZNbS5kYO4GdTIx3gZ1MjI/Ibxp2MjFaYhi6IkYjsEEMR4jhCDH+ZpKTi/F8ovAt8ZG9zqfM2y6EcJTCigcZdkutzhJ2TXelj7DeSHmNLCNGbyOFTRHkOMwSfElhU32HNHrpH4M08n8ddB50yTpJQZO9jpCJ8qyzk/k6lQ5hoo8ybHHHFF9/cYUhSkcUR/TGr4jiDFEcIopDmShrgb1EFA5S10IUh4jiEFEcIopDRHGIKA7pjd/GcUSphSgOEcWhRJQ2coyoDqI4RBSHiOIQURxKROEv/mq5EGUvqOdXlI4ly4F4PmLUh+F1OAAAAAAAAAAAAABAad+43Oc1NjXGHgAAAABJRU5ErkJggg==) no-repeat center;
    background-size: 80%;
    margin: 0;
    width: 40px;
    height: 40px
}

.titleBar .info {
    flex: 1;
    color: #fff;
    font-size: 12px;
    padding-left: 12px;
}

.titleBar .info .name {
    font-size: 16px;
    font-weight: bold;
}

.chatWrapper .content {
    padding: 14px;
    flex: 1;
    overflow: auto;
}

#messageWrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    overflow: auto;
    min-height: 100%;
}

.chatWrapper .bottomBar {
    height: 50px;
    background-color: #fff;
    border-top: 1px solid #e8e9eb;
    display: flex;
    padding-left: 12px;
    align-items: center;
}

.bottomBar .info {
    flex: 1;
    color: #fff;
    font-size: 12px;
    padding-left: 12px;
}

.bottomBar .info input {
    background: #fff;
    color: #000;
    width: 100%;
    height: 40px;
    line-height: 40px;
    border: none;
    -webkit-user-select: text !important;
    outline: none;
}

.bottomBar .btn-send {
    width: 40px;
    height: 40px;
    margin: 0 6px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAApCAYAAACsldDLAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJsSURBVHgB1ZnRddowFIb/K6AvpT3pBt6g2aCiC6Qj8N6TtpmgyQSEBJ4hEzSZAHeCdgPYAE4KaRuIb64BETAiYJCN8z1gLBv7Ozq6vyUDvET05R+tL28/IcNQ+KHrg+/EOJ22dTjgM/9LsYmMMZYt1QZt2XiRYx0i1Qzu/135J+86yAAq/GBwx3LMYw5OqfCq/bE2aOhK18OeUdPtzXMnMVDOgvRElvn3JifPpOt3P8KCRMqQ+SLjtiubA8SCfA6Cq7SK0QwD6Vy+QWxYk6JGWKD6ol9Gwsx6Vl/clknlGtiNcezhYegnkSBPspXugYzHLtzQIdB1MPxfdSlN8zulWv+XNB3CIXKDZjC8P3MhreZ3ZNz+hGNcxp6K7F8jIYx0qXbX2jb2FmVHozBve0gUSRBSrW0ShKINutZvSXFopMfGEyeb7DeRrSB91sbesmzlr0eFoI39IbEH35YgZDt7xZQxdaKxZ5WVaj2XIviKjGCklf0w+8gQJvbssqPCRlPGtLHL5kceMkh+RXu2VrmMHiOo2mWJ3iMLTCUxKp77J9Sz5GzXCwcz9grLCgRLK5Dlns3nnE4R4yGSLI/e4ze+7eiSrKLcESNtnpc0LMmKqEZKyL2aYFlwrpE0LMjqev9QruAhSSJFE+en+ciFNJJiB0lDdBgcwTUOJA0Lsm4n3fb42YWZrLvXQZtV9jbM9+yOj9jkJA0zWSL6gC0Yxw9x1f9cTHymNnnzHfcR67Bo4jDp2VxBb3T2niQNY1lFtOYRS7LyFMmH1819SBrGskxYMXkJiyao+sdvE3tTE4eJrPynIBnrPTUnX9nb8AiurVH7+ENKLAAAAABJRU5ErkJggg==) no-repeat center;
    background-size: 60%;
}

.bottomBar .btn-emoji {
    width: 40px;
    height: 40px;
    margin: 0;
    background: url(data:image/png;base64,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) no-repeat center;
    background-size: 80%;
}

.custom-message {
    position: relative;
    align-self: flex-start;
    background-color: #fff;
    border: 1px solid #cbdae3;
    min-width: 75px;
    padding: 10px 10px 6px 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 16px;
    margin-top: 30px;
    max-width: 80%;
    text-align: left;
    line-height: 18px;
}

.custom-message .time {
    color: #7f8c9c;
    font-size: 12px;
    line-height: 2;
    margin: 0;
}

.custom-message .name {
    position: absolute;
    top: -22px;
    width: 80vw;
    margin: 0;
}

.self-message {
    background-color: #d4f1ff;
    border: 1px solid #cbdae3;
    min-width: 75px;
    padding: 10px 10px 0 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 18px;
    text-align: left;
}

.self-message .time {
    color: #7f8c9c;
    font-size: 12px;
    line-height: 2;
    margin: 0;
}

#jumpApp {
    color: blue;
    font-size: 16px;
    text-decoration: underline;
}