.toast {
    transition-duration: .2s;
    transform: translate(-50%, -50%);
    margin: 0;
    top: 45%;
    z-index: 2000;
    position: fixed;
    width: 7.6em;
    min-height: 7.6em;
    left: 50%;
    background: hsla(0, 0%, 7%, .7);
    text-align: center;
    border-radius: 5px;
    color: #fff
}

.toast.toast--visible {
    opacity: 1;
    visibility: visible
}

.icon_toast.loading {
    margin: 30px 0 0;
    width: 38px;
    height: 38px;
    vertical-align: baseline
}

.icon_toast {
    font-size: 55px;
    color: #fff
}

.loading {
    display: inline-block;
    animation: e 1s steps(12) infinite;
    background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
    background-size: 100%
}

i {
    font-style: italic
}

@keyframes e {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}
.chat-message{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.clearfloat .right .chat-message{
    background: #13c9cb;
}
.clearfloat .right .chat-message:before {
    border-left: 10px solid #13c9cb;;
}
.clearfloat .left {
    padding-bottom: 20px;
    animation: moveleft .5s infinite;
    -webkit-animation: moveleft .5s ease-in-out;
    position:relative;
}
@keyframes moveleft
{
from {left :-100px;}
to {left :0px;}
}

@-webkit-keyframes moveleft /*Safari and Chrome*/
{
from {left :-100px;}
to {left :0px;}
}

    
    @keyframes moverigth
{
from {right :-100px;}
to {right :0px;}
}

@-webkit-keyframes moverigth /*Safari and Chrome*/
{
from {right :-100px;}
to {right :0px;}
}
.textCopy{
    margin-left: 10px;
    color: blue;
}
.fxJump{
    margin-left: 10px;
    color: red;
    font-size: 20px;
}
.mdJump{
    margin-left: 10px;
    color: red;
    font-size: 20px;
}
.author-name-top{
    text-align: center;
    /*margin: 15px 0 5px 0;*/
    color: #888;
}
.clearfloat-top{
    zoom: 1;
}
.chat-box .author-name:nth-child(2){
    display: none;
}
.author-name{
    position: relative;
    text-align: center;
    margin: -10px 0 5px 0;
    color: #000;
}

.chat-body{
    border-radius: 3px;
    background: #f0f1f2!important;

}
.chat-date{
    position: absolute;
    left: 45px;
}
.right .chat-message{
    margin-top: 2px!important;
    background-color: #337eff!important;
    border-color: #337eff!important;
    border-radius: 8px!important;
}
.left .chat-message{
    background-color: #fff!important;
    margin-top: 27px;
    color: #000!important;
    border-radius: 8px!important;
}
.chat-message img{
    max-width:110px!important;
    width:200px!important;
    width:expression(document.body.clientWidth>200?'200px':'auto')!important;
    overflow:hidden!important;
}
.topText{
    background-color: #e2e2e2;
    border-radius: 18px;
    color: #333;
    word-break: break-all;
    font-size: 13px;
    cursor: pointer;
    width: 50%;
    margin-left: 28%;
}
.right .chat-message:before{
    /*background-color: #337eff!important;*/
    /*border-color: #337eff!important;*/
    border-left: 10px solid #337eff !important;
}
.right .read-flag img{
    margin-bottom: 34px;
}
.clearfloat .right {
    padding-bottom: 20px;
    animation: moverigth .5s infinite;
    -webkit-animation: moverigth .5s ease-in-out;
    position:relative;
}
.left .chat-message:before{
    /*background-color: #337eff!important;*/
    /*border-color: #337eff!important;*/
    border-right: 10px solid #fff !important;
}
#textarea{
    border-radius: 20px!important;
    padding-bottom: 18px;
}
.upimg{
    width: 40px;
    height: 32px;
    position: absolute;
    /* top: 2px; */
    left: 5px;
    /* right: 0; */
    /* bottom: 0; */
    z-index: 1;
    display: flex;
    /* background: url() center bottom no-repeat; */
    opacity: 0.8;
}