body {
    font-family: 'Roboto ', 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    margin: 0px;
    height: 100%;
}
.contentArea{
    /*background-image: linear-gradient(45deg, rgba(234, 234, 234, 0.12) -500px, rgba(246, 249, 247, 0.73) 75%);*/
    /*flex: 1 1 auto;*/
    height: 82%;
    overflow-y: hidden;
    position: relative;
    word-wrap: break-word;
    margin: 0 auto;
    width: 100%;
}
.all_box{
    display: none;
    height: 100%;
    position: absolute;
    width: 100%;
    background-color: #EFF3F8;
}
.msg_box {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    font-family: 'customFont', 'Roboto ', 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    -webkit-overflow-scrolling: touch;
    overflow-y: unset;
    position: relative;
}
.msg_all {
    width: 100%;
    float: left;
    letter-spacing: 0.7px;
    font-weight: 300;
}
.init-close{
    margin: 4px;
    font-family: -webkit-pictograph;
    line-height: 73px;
    text-align: center;
    background: #DDD;
    color: white;
    font-size: 70px;
    font-weight: 100;
    transform: rotate(45deg);
    cursor: pointer;
    height: 75px;
    width: 75px;
    border-radius: 50%;
    overflow: hidden;
    position: fixed;
    box-shadow: 0px 0px 9px 1px #a29f9f;

    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.init-open{
    margin: 4px;
    letter-spacing: 1px;
    line-height: 75px;
    text-align: center;
    background: #DDD;
    color: white;
    font-size: 25px;
    font-weight: 100;
    cursor: pointer;
    height: 75px;
    width: 75px;
    border-radius: 50%;
    overflow: hidden;
    position: fixed;
    box-shadow: 0px 0px 9px 1px #a29f9f;

    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.msg_head {
    align-items: center;
    border-bottom: 1pt solid rgba(0, 0, 0, .1);
    display: flex;
    justify-content: center;
    max-height: 60px;
    height: 8%;
    min-height: 45px;
    text-align: center;
    width: 100%;
    padding: 5px;
}
.msg_head_center {
    overflow-wrap: break-word;
    width: 70%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    justify-content: center;
    margin-left: 3pt;
    margin-right: 3pt;
    user-select: none;
    font-family: 'Roboto ', HelveticaNeue-Medium, 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size: 12pt;
    line-height: 16.5pt;
    letter-spacing: 1px;
}
.msg_head_left {
    display: none;
    user-select: none;
    position: absolute;
}
.msg_head_right {
    width: 15%;
    bottom: 0;
    float: right;
    left: 0;
    padding-right: 9pt;
    right: 0;
    top: 0;
    user-select: none;
}
.msg_head_left_close{
    padding-left: 5px;
    cursor: pointer;
    transition: opacity .2s;
    align-items: center;
    /*background-color: rgba(0, 0, 0, .1);*/
    border-radius: 50%;
    cursor: pointer;
    display: none;
    height: 18pt;
    justify-content: center;
    outline: none;
    width: 18pt;
    font-family: -webkit-pictograph;
    font-size: 40px;
    transform: rotate(45deg);
    user-select: none;
}
.msg_head_left_close:hover{
    opacity: 0.6;
}
.msg_head_title {
    overflow-wrap: break-word;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    margin-left: 3pt;
    margin-right: 3pt;
    user-select: none;
    font-family: 'Roboto ', HelveticaNeue-Medium, 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size: 20px;
    line-height: 16.5pt;
    letter-spacing: 1px;
    padding: 14px 20px;
}
.msg_head_subtitle{
    overflow-wrap: break-word;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    margin-left: 3pt;
    margin-right: 3pt;
    user-select: none;
    font-family: 'Roboto ', 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 16.5pt;
    letter-spacing: 0.5px;
    padding: 20px 10px 16px 0px;
}
.cardAvatar {
    height: 40px;
    max-width: 250px;
    background-repeat: no-repeat;
    background-position: center;
    object-fit: cover;
}
.formArea {
    height: 100%;
    padding: 0px 30%;
    font-size: 15px;
    border: 0px solid #fff;
    color: #4b4f56;
    overflow: auto;
    overflow-x: hidden;
    margin-bottom: 30px;
}
.networkStatus {
    font-size: 16px;
    text-align: center;
    padding: 5px;
    padding-top: 15px;
}
.first_contact_title{
    font-size: 16px;
    color: #888282;
    font-weight: 400;
    text-align: center;
    padding: 5px;
    padding-top: 15px;
}

.inputFields {
    text-align: center;
    padding: 15px;
    padding-top: 5px;
}

.inputContainer {
    padding: 8px 15px;
    position: relative;
}

.fieldInput {
    font-size: 16px;
    box-shadow: 2px 2px 10px #C3C3C3;
    border-radius: 0;
    border: 1px solid #ECECEC;
    width: 100%;
    height: 25px;
    padding-left: 10px;
    max-width: 330px;
}
.fieldSelect {
    box-shadow: 2px 2px 10px #C3C3C3;
    border-radius: 0;
    border: 1px solid #ECECEC;
    margin: 10px 0px;
    width: 94%;
    margin-left: 15px;
    height: 30px;
}

.submitBtn {
    margin: auto;
    width: 40%;
    font-size: 16px;
    border: none;
    height: 40px;
    cursor: pointer;
    color: #FFF;
    background: rgb(110, 62, 209);
    border-radius: 5px;
    font-weight: bold;
    margin-top: 15px;
    outline: 0;
}

.webview {
    position: static;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    background: #FFF;
    bottom: 0px;
    z-index: 99 !important;
    height: 100%;
    width: 100%;
    display: block;
    font-family: 'Roboto ', 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
}
.webview_header{
    align-items: center;
    border-bottom: 1pt solid rgba(0, 0, 0, .1);
    display: flex;
    flex-basis: 10%;
    height: 10%;
    justify-content: center;
    max-height: 48pt;
    min-height: 36pt;
    text-align: center;
    width: 100%;
}
.webview_content{
    background-image: linear-gradient(45deg, rgba(234, 234, 234, 0.12) -500px, rgba(246, 249, 247, 0.73) 75%);
    /* flex: 1 1 auto; */
    height: 90%;
    overflow-y: scroll!important;
    position: static;
    word-wrap: break-word;
}
.webview_close{
    cursor: pointer;
    transition: opacity .2s;
    align-items: center;
    /*background-color: rgba(0, 0, 0, .1);*/
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    height: 18pt;
    justify-content: center;
    outline: none;
    width: 18pt;
    font-family: -webkit-pictograph;
    font-size: 30px;
    font-weight: 600;
    transform: rotate(45deg);
    user-select: none;
}
.webview_close:hover{
    /*background-color: rgba(0, 0, 0, .05);*/
    opacity: 0.6;
}
.webview_conv_context{
    display: none;
    cursor: pointer;
    float: left;
    padding-left: 5px;
    font-size: 14px;
    color: #a3a7a9;
}
.webview_conv_context:hover{
    color: #2196f3;
}
.webview_conv_clear{
    display: none;
    cursor: pointer;
    float: left;
    padding-left: 20px;
    font-size: 14px;
    color: #a3a7a9;
}
.webview_conv_clear:hover{
    color: #2196f3;
}


.messages {
    height: 100%;
    padding: 0px 25%;
    font-size: 15px;
    border: 0px solid #fff;
    color: #4b4f56;
    overflow: auto;
    overflow-x: hidden;
    margin-bottom: 30px;
}


.msg_input {
    width: 100%;
    border: 1px solid white;
    border-top: 1px solid #DDDDDD;
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
}

.msg_a {
    letter-spacing: 0.3px;
    float: left;
    line-height: 19px;
    display: inline-block;
    min-width: 70px;
    max-width: 85%;
    position: relative;
    background: #ffffff;
    padding: 5px 18px 2px 15px;
    min-height: 10px;
    word-wrap: break-word;
    white-space: pre-wrap;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    /*box-shadow: 0px 0px 10px 2px #c5c2c2;*/
}
/*
.msg_a:before {
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    border: 10px solid;
    border-color: transparent #FFF transparent transparent;
    left: -20px;
    top: 7px;
}
*/
.msg_x_quickies {
    float: left;
    width: 100%;
    position: relative;
    padding: 10px 0px 0px 10px;
    min-height: 10px;
    margin-bottom: 3px;
    border-radius: 5px;
    word-wrap: break-word;
    text-align: center;
}
.msg_x_quickie_item {
    display: inline-block;
    background: #fff;
    box-shadow: 0px 0px 10px 0px #c5c2c2;
    color: #08c;
    cursor: pointer;
    margin: 0px 10px 10px 0px;
    line-height: 20px;
    padding: 10px 17px;
    border-radius: 7px;
    font-weight: 400;
    letter-spacing: 0.5px;
}
.msg_x_quickie_item:hover {
    text-shadow: 0.5px 0 0 currentColor;
}
.msg_x_cards {
    float: left;
    width:100%;
    position: relative;
    padding: 10px 0px 0px 0px;
    min-height: 10px;
    margin-bottom: 3px;
    border-radius: 5px;
    word-wrap: break-word;
    text-align: center;

    display: inline-block;
    left: 0;
    transition: left 500ms ease-out;
    white-space: nowrap;
}
.msg_x_cards2 {
    float: left;
    width:100%;
    position: relative;
    padding: 10px 0px 0px 0px;
    min-height: 10px;
    margin-bottom: 3px;
    border-radius: 5px;
    word-wrap: break-word;
    max-width: 250px;
    display: inline-block;
    left: 0;
    transition: left 500ms ease-out;
    white-space: nowrap;
}
.msg_x_card_nav{
    display: inline-block;
    vertical-align: top;
}
.msg_x_card_next{
    border: 1px solid #DDD;
    margin: 0px 10px 10px 0px;
    border-radius: 7px;
    width: 30px;
    line-height: 30px;
    font-weight: 800;
    cursor: pointer;
    font-size: 18px;
    background: #FFF;
    text-align: center;
}
.msg_x_card_previous{
    border: 1px solid #DDD;
    margin: 0px 10px 10px 0px;
    border-radius: 7px;
    width: 30px;
    line-height: 30px;
    font-weight: 800;
    cursor: pointer;
    font-size: 18px;
    background: #FFF;
    text-align: center;
}
.msg_x_card_item {
    display: inline-block;
    vertical-align: top;
    /*border: 1px solid #DDD;*/
    margin: 0px 10px 10px 0px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    /*border-bottom-right-radius: 7px;*/
    width: 200px !important;
    background: #FFF;

    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
}
.msg_x_card_item2 {
    display: inline-block;
    vertical-align: top;
    margin: 0px 10px 10px 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 14px;
    width: 200px;
    background: #FFF;
}
.msg_x_card_item_image{
    padding-bottom: 52%;
    border-bottom: 1px solid #DDD;
    background-position: 50% 50%;
    /*background-size: cover;*/
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    cursor: pointer;
}
.msg_x_card_item_title{
    font-weight: 800;
    text-align: left;
    padding: 7px 5px 10px 10px;
    line-height: 15px;
    overflow: hidden;
    white-space: normal;
}
.msg_x_card_item_title2{
    text-align: left;
    padding: 7px 5px 10px 10px;
    line-height: 19px;
    overflow: hidden;
    white-space: normal;
    border: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: #FFF;
}
.msg_x_card_item_subtitle{
    color: #7b8d96;
    padding: 2px 5px 5px 10px;
    margin-top: -5px;
    text-align: left;
    overflow: hidden;
    white-space: normal;
}
.msg_x_card_item_button_postback{
    text-align: center;
    cursor: pointer;
    border-top: 1px solid #DDD;
    color: #08c;
    line-height: 30px;
}
.card_button{
    text-align: center;
}
.card_button1{
    border-top: 1px solid #DDD;
    text-align: center;
}
.card_button2{
    border-top: 1px solid #DDD !important;
    text-align: center;
}
.card_button3{
    border-top: 1px solid #DDD;
    border-bottom-right-radius: 10px;
    text-align: center;
}
.msg_x_card_item_button_postback:hover {
    /*background: #d7ecc7;*/
}
.msg_x_card_item_button_url_standard{
    cursor: pointer;
    border-top: 1px solid #DDD;
    color: #08c;
    line-height: 30px;
}
.msg_x_card_item_button_url_webview{
    cursor: pointer;
    border-top: 1px solid #DDD;
    color: #08c;
    line-height: 30px;
}

.msg_b {
    float: right;
    line-height: 19px;
    display: inline-block;
    min-width: 70px;
    max-width: 85%;
    background: #e4f8ff;
    padding: 5px 5px 2px 10px;
    min-height: 15px;
    margin-top: 10px;
    position: relative;
    word-wrap: break-word;
    white-space: pre-wrap;
    /*box-shadow: 0px 0px 10px 2px #dad7d7;*/
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
/*
.msg_b:after {
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    border: 10px solid;
    border-color: transparent transparent transparent #d7ecc7;
    right: -20px;
    top: 7px;
}
*/
.msg_content{
    float: left;
    width: 100%;
}
.timestamp_bot {
    text-align: right;
    display: block;
    font-size: 10px;
    color: #9a9696;
    margin-right: -10px;
    margin-top: 4px;
    line-height: 10px;
    width: 100%;
    float: left;
}
.timestamp_user {
    text-align: right;
    width: 100%;
    display: block;
    font-size: 10px;
    color: #9a9696;
    margin-right: -10px;
    margin-top: 4px;
    line-height: 10px;
    float: left;
}
.typing {
    display: none;
    /*transition: opacity .3s;*/
    float: left;
    line-height: 21px;
    width: 37px;
    position: relative;
    background: #ffffff;
    padding: 7px 18px 5px 15px;
    height: 20px;
    margin-top: 10px;
    margin-bottom: 20px;
    word-wrap: break-word;
    white-space: pre-wrap;
    /*box-shadow: 0px 0px 10px 2px #c5c2c2;*/
    font-size: 14px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px
}

.log {
    color: gray;
    font-size: 12px;
    text-align: center;
    padding: 10px;
    text-align: center;
}
/*
.inputMessage {
    min-height: 30px !important;
    background: #FFF;
    position: relative;
    float: left;
    width: 85%;
    line-height: 30px;
    border: 1px solid #d6d4d4;
    border-radius: 5px;
    box-shadow: 0px 0px 1px 2px #d6d4d4;
    padding: 0px 5px 0px 25px;

    white-space: pre-wrap;
    overflow: hidden;

    flex: 1 0 auto;
    font-size: 16px;
    margin-left: 14px;
    margin-right: 12px;
    padding: 10.5pt 0;
    width: 78%;
}
.inputMessage:focus {
  outline: none;
}
*/
.inputMessageContainer{
    display: none;
    min-height: 48px;
    border-top: 1px solid rgba(0, 0, 0, .10);
    overflow-x: hidden;
    overflow-y: scroll;
    height: 10%;
    background: #f5f3f3;
    box-shadow: -1px -1px 8px 0 rgba(0, 0, 0, 0.2), 0px 0px 20px 0 rgba(0, 0, 0, 0.19);
    padding: 1% 15px 5px;
    position: relative;
}
.inputBox{
    display: flex;
    /*border-radius: 0 0 12px 12px;*/
    /*max-height: 70px;*/
    width: 100%;
    height: 100%;
    margin: 0 auto;
    max-width: 700px;
    max-height: 50px;
}
.inputError{
    padding: 20px;
    font-size: 16px;
    color: #ef1010;
    text-align: center;
}
@media (max-width: 766px){
    .inputMessageContainer{
        padding: 4% 15px 0px;
    }
    .modalImageSection{
        width: 100%;
        border-radius: 5px;
    }
    /*
    .cardAvatar{
        height: auto;
        max-height: 50px;
        max-width: 180px;
    }
    */
    .msg_head_title{
        max-width: 240px;
        padding: 14px 0px;
        font-size: 100%;
    }
    .msg_head_subtitle{
        display: none;
    }
    .msg_head_left {
        display: block;
        right: 5px;
    }
    .emoji-picker-icon{
        margin-left: 0 !important;
    }
    .ChatBoardMessage{
        /*display: flex;*/
        margin: 5% auto !important;
        width: 80% !important;
    }
    .imagesModal{
        padding-top: 15% !important;
    }
    .messages {
        border: 0px solid #fff;
        padding: 0px 10px 0px 5px;
    }
    .formArea{
        padding: 0px 10px;
    }
    .ChatMenuGroup{
        float: left;
        width: 9%;
    }
    .chatArea{
        height: 100% !important;
    }
    .ChatMenu{
        float: right;
        padding: 4px 10px;
    }
    .modalContent{
        width: 100% !important;
    }
    .msg_a{
        max-width: 70%;
    }
    .msg_b{
        max-width: 80%;
    }
}
@media (min-width: 767px){
    .modalImageSection{
        max-height:40vw;
        max-width: 100%;
        border-radius: 5px;
    }
    .evolution_status{
        display: none;
    }
    .ChatMenuGroup{
        float: left;
        width: 9%;
    }
    .inputBox{

    }
    .chatArea{
        height: 100% !important;
    }
    .ChatMenu{
        float: right;
        padding: 8px 15px;
    }
}
@media (max-width: 400px){
    .msg_a {
        max-width: 70%;
    }
    .msg_b {
        max-width: 80%;
    }
}
.emoji-menu{
    position: fixed !important;
}
.inputMessage {
    flex: 1 0 auto;
    font-size: 16px;
    width: 60%;
    line-height: 20px;
    outline: 0;

    resize: none;
    height: 30px;
    background: #ffffffa8;
    border: 0px;
    border-radius: 10px;
    padding: 5px 0px 5px 10px;
    color: #757373;
    font-family: 'customFont', 'Roboto ', 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif;
}
.preInputMessage{
    display: block;
    padding: 5px 5px 0px 0px;
    font-size: 24px;
}
[contentEditable=true]:empty:not(:focus):before{
    content:attr(data-text);
    color:#b5b1b1;
}
.arrowSend{
    fill: rgb(189,184,184,1);
}
._4fwe {
    flex: 1 0 auto;
    font-size: 16px;
    margin-left: 9%;
    margin-right: 12px;
    padding: 6.5pt 0;
    width: 76%;
}
.emojiMenu {
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 12pt;
    line-height: 24pt;
    padding: 6px 5px;
    min-width: 25px;
    max-width: 30px;
    width: 13%;
    text-align: center;
}
.mediaSpace{
    width: 100%;
    min-width: 237px;
    border-radius: 5px;
    max-height: 350px;
    float: left;
    border: none;
}
.mediaWraper{
    width: 100%;
    float: left;
}
.transcripted{
    float: left;
    font-style: italic;
    opacity: 0.8;
    padding: 5px 10px 5px 10px;
}
.mic {
    cursor: pointer;
    flex: 0 0 auto;
    padding: 6px 5px;
    min-width: 25px;
    max-width: 30px;
    width: 13%;
    text-align: center;
    fill: #beb8b8;
    user-select: none;
    -webkit-user-select: none;
}
.mic:hover{
    fill: #6d6b6b;
}
.attachment {
    transform: rotate(45deg);
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 12pt;
    line-height: 24pt;
    padding: 6px 5px;
    min-width: 25px;
    max-width: 30px;
    width: 13%;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
}
.attachmentClip{
    fill: #bfb8b8
}
.attachmentClip:hover{
    fill: #6d6b6b;
}
.attachmentImage{
    max-width: 250px;
    max-height: 250px;
    /*width: 100%;*/
    cursor: pointer;
}
.sendLogo {
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 12pt;
    line-height: 24pt;
    padding: 6px 5px;
    min-width: 25px;
    max-width: 30px;
    width: 13%;
    text-align: center;
}
.inputMic{
    display: none;
    flex: 1 0 auto;
    font-size: 20px;
    width: 60%;
    height: 35px;
    padding: 10px 0px 2px 10px;
    border-radius: 10px;
    color: red;
    background: #e6e2e2;
    font-weight: 500;
}
._5rp7 {
    position: relative;
}
._5rp7, ._5rpb, ._5rpu {
    height: inherit;
    text-align: initial;
}
._5rpb {
    background-color: rgba(255, 255, 255, 0);
    border-left: .1px solid transparent;
    position: relative;
    z-index: 1;
}
._5rpu[contenteditable="true"] {
    -webkit-user-modify: read-write-plaintext-only;
}
._1mj {
    direction: ltr;
    text-align: left;
}
._1mf {
    position: relative;
    white-space: pre-wrap;
}
._64mk {
    align-items: center;
    height: 32px;
    margin-left: 10px;
    outline: none;
    width: 32px;
}
._4bqf {
    cursor: pointer;
    transition: opacity .2s;
}
._64ml {
    padding-top: 5px;
    position: fixed;
}

.msg_push_new{
    width: 100%;
    float: left;
    height: 40px;
    margin-top: 10px;
    text-align: left;
    margin-bottom: 40px;
}
.LoaderBalls {
    width: 37px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -40px;
}
.LoaderBalls__item {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c0bdc3;
}
.LoaderBalls__item:nth-child(1) {
    animation: bouncing 0.5s alternate infinite cubic-bezier(0.6, 0.05, 0.15, 0.95);
}
.LoaderBalls__item:nth-child(2) {
    animation: bouncing 0.5s 0.1s alternate infinite cubic-bezier(0.6, 0.05, 0.15, 0.95) backwards;
}
.LoaderBalls__item:nth-child(3) {
    animation: bouncing 0.5s 0.2s alternate infinite cubic-bezier(0.6, 0.05, 0.15, 0.95) backwards;
}

@keyframes bouncing {
    0% {
        transform: translate3d(0, 7px, 0) scale(1.2, 0.85);
    }
    100% {
        transform: translate3d(0, 0px, 0) scale(0.9, 1.1);
    }
}







/* The Modal (background) */
.imagesModal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 5%;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #000000ba;
}

/* Modal Content */
.modalContent {
  position: relative;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.closeModal {
    color: white;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
    z-index: 999;
}

.closeModal:hover,
.closeModal:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.modalImage{
    margin: 0 10%;
}

/* Next & previous buttons */
.prevModalImage,
.nextModalImage {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.nextModalImage {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prevModalImage:hover,
.nextModalImage:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

img.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}




.ChatBoardDate{
    width: 30%;
    margin: 0px 35% 10px;
    text-align: center;
    display: inline-block;
    background: #f9f8fb;
    padding: 5px 15px 5px 10px;
    min-height: 15px;
    position: relative;
    word-wrap: break-word;
    white-space: pre-wrap;
    font-size: 14px;
    border-radius: 5px;
    color: #87858a;
    /*box-shadow: 1px 2px 3px 0px #dbc8f7;*/
}
.ChatBoardDivider{
    display: block;
    height: 1px;
    border: 0;
    border-top: 0px dashed #f1ecec;
    margin: 1em 0 1em;
    padding: 0;
}
.ChatBoardMessage{
    margin: 20px auto !important;
    max-width: 700px;
    width: 80% !important;
    /*display: flex;*/
    text-align: center;
    line-height: 18px;
    padding: 20px !important;
    /*display: inline-block;*/
    background: #fdf4c4;
    min-height: 15px;
    position: relative;
    word-wrap: break-word;
    white-space: pre-wrap;
    border-radius: 5px;
    color: #000000;
}
.UserNameAvatar{
    float: left;
    width: 100%;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    padding-bottom: 5px;
    margin-top: -3px;
    font-family: 'Robot', 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif;
}
.BotNameAvatar{
    float: left;
    width: 100%;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    padding-bottom: 5px;
    margin-top: -3px;
    font-family: 'Robot', 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif;
}
.UserAvatar{
    /*border-radius: 50%;*/
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    object-fit: cover;
    float: left;
    font-size: 25px;
    margin-right: 10px;
    margin-left: -5px;
}
.BotAvatar{
  /*border-radius: 50%;*/
  width: 45px;
  height: 45px;
  background-repeat: no-repeat;
  background-position: center;
  object-fit: cover;
  float: left;
  font-size: 25px;
  margin-right: 5px;
  /*margin-left: -5px;*/
}
.AvatarPlaceHolder{
    border-radius: 50%;
    width: 45px;
    height: 45px;
    background-repeat: no-repeat;
    background-position: center;
    object-fit: cover;
    float: left;
    margin-right: 5px;
    font-size: 25px;
}
.UserNameItem{
    text-decoration: none;
    width: 50%;
    float: left;
    overflow: hidden;
    height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.UserTimeItem{
    float: right;
    color: rgba(0, 0, 0, 0.45);
    loat: right;
    font-size: 12px;
}
.avatar{
    border-radius: 50px;
    width: 45px;
    height: 45px;
    color: #134464;
    font-size: 24px;
    text-align: center;
}





::-webkit-scrollbar {
    background: transparent;
	overflow: visible;
	width: 10px;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 0.8);
}

::-webkit-scrollbar-thumb:horizontal {
	border-width: 4px 6px;
	min-width: 40px;
}

::-webkit-scrollbar-thumb:vertical {
	border-width: 6px 4px;
	min-height: 40px;
}

::-webkit-scrollbar-track-piece {
	background-color: transparent;
}
::-webkit-scrollbar-track {
	background-color: transparent;
}

::-webkit-scrollbar-corner {
	background: transparent;
}

::-webkit-scrollbar-thumb {
    /*border: solid transparent;*/
	background-color: #DDD;
	-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07);
}

::-webkit-scrollbar-thumb:hover {
	background-color: #999;
}

.carousel-wrapper{
    margin: 5px 20px 5px 44px;
    float: left;
    width: 80%;
}
.slick-prev:before, .slick-next:before{
    background: transparent;
}
.slick-prev{
    left: -33px !important;
    padding-top: 15px !important;
}
.slick-next {
    right: -33px !important;
    padding-top: 15px !important;
}
.attachmentDownload{
    text-decoration: none;
    color: inherit;
}
.doc-wrap{
    max-width: 90%;
    width: 250px;
    border-radius: 5px;
    height: 40px;
    background: #ffffff85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px;
}
.doc-name{
    text-align: left;
    padding-left: 10px;
    line-height: 23px;
    min-width: 150px;
    float: left;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doc-details{
    float: left;
    padding-left: 10px;
    font-size: 12px;
    min-width: 150px;
}
.icon-doc{
    width: 35px;
    float: left;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
}
.icon-doc-generic{
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAA8CAYAAADL94L/AAAByElEQVR4Ae3axdJTQRAFYFyegA3u8ALseCDcicsGhxt3x+G32BXc3X3NBnfXYTqp3sZlhuqpOlXZRL46He9ReJyJxGSTEreaPfEHZiX+1uSJvelVNu+Jvjd7Yk9zI8aSUe0eDpjCIYfNSuw5v/zF5In/6mU27478tXriLJvXjdSwPq1lCDTCmxjiCNav8GZYBVMwWKagX8kWjk9vCcMhYWhEFEw1+oV0wZjdPKY6Vn9EwmBDTYPwBoXCYPLGDQTJjkHQNQRJj0FQtmgs+C8wOHIIkh2DoDu5vD5Xfkz9hsTBWDyxhjDYUDqvLRYSY1JilSQGyyxXOt4QKJPX70NDQmI27gyxHcn9bH/5RFMNAUgoDI4afOAMHBiCdiDNj5woGAhgsCEYudSI1lBCRwoPL957slAoDDYEoPXb/ZVs3FE/y9072fDxsx4BMPVfGOpl1VY/y5++4EWM1Fm9LcCKpy8RpnchDGEIQxjCEIYwhCEMYQhDGMIQhjCEIQxhCEMYwhCGMIQhDGEIQxhYNlXiP+XHXLRDM5thQVpyzIfS2YtLceVEkRmzalsgMArPhp258bA6b/LEb8LqPM930VNdvY/fhMmCxw+Of+4BTcPInBo2AAAAAElFTkSuQmCC);
}
.icon-doc-xls{
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAA8CAMAAAD8KXLNAAAAulBMV…N/zv/1f1N8zWs6oFnMaVptAF5ympf7pf9HqyZa671ZAhesTDDT4wdnEAAAAABJRU5ErkJggg==);
}
.icon-doc-pdf{
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAA8CAMAAAD8KXLNAAAAvVBMVEUAAAD3d3fxRkbyRkbyRkb3fn74g4PyRUX3lZXzRUXyRUX/RkbyQED3fn7zRUX2iYn/Rkb4lpb0cHDvQEDzRETzRkbzQEDzQkLzOzv////939/yODj2enr4kJD0UVHzPT38xMT92tr5lZX1ZGT+6+v4g4P1bW35m5v7yMj91dX3fn76sLD1XFz6qan//f36trb+5OT0VVX6rKz7vb3yNDT4iIj/9vb0TEz5o6PtTEzlRUXsYWHiNzfyRETsSEiKDgROAAAAFHRSTlMAH+Z5+80n+JHu0AWTv6w6CX3V/BbNCjoAAAHfSURBVHgB7daDsisxGMDxHNtftLZqu+//WDebOu1p08H1f7D8zRoIoferx4djXb4htYvXy7vrI32NXi4U8v6KjzcbFTcKer48bQplS3dYwyhbwhpGRTpGRZpGoNvzjUT6RkU6RkX6RiJNM7dUhE/2NYkVhDU2lCgIa6DxxNr0eathBPoab5re6xjJ1pkaRu2XmP8GiIzKCSrHAW9NiKhiwKnKsFkukRMOZaWCVnWZA7uGxEaZn6UDApBGYjz3ekDFZtrGoig1FRPwZXnoQoXL6p0qwSTjy9pdxdicG41K1ue8g6kwRiWLOPcHQDzO84aoE7N9M2SMWX1eD11hal0zNMQ8tzQ2c0UU75saBXB9zhMmTJthsyc2J7cTuIRSQQ5sxzRZK9oYN4x4VGXCDMtz14IDxiusntiM0SILQ6oG71umMLKcHTCL+rEL+qZe5iWUwta+hUwYz7btoCAHTCdJEgcTgKUxY84NfPwc1AihABhLM+x2N+c6oICXqWa5RJo8bTQ59x04YgJhYMvIMnnvfGtivxmsTdr0RbmNCca0ZjR7FCtGNnCcAd6aEIELyhLFABXb35qg62k59v9d9d/8MnN5fa75QFeXZ5qvN4SezzTPCKEn8et/p9vD49UT+gEdNgrQ89qG8QAAAABJRU5ErkJggg==);
}
.icon-doc-doc{
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAA8CAMAAAD8KXLNAAAAulBMVEUAAACPw/ePw/lgqvVfqvaUx/mQxPhfqfWjz/lfqfVfqvZgp/9cp/ZfqvZgqvaayPpTpPVfqvVjpvNgqfaQw/mjzvq42PdfqvZgqvZiq/ZwsveRxflkqe9rsPdcqPZeqPRorvfN5fzw9/5bp/Z2tvdZoOqTxvqCuvPj8P7+//+QxPmBvfl3su+Pw/lWpfWx1fuJwPlUpPWVxvnp8/7////4+/9ure3C3/uq0fvb7P1usffn8v15tfFMmOceGILeAAAAF3RSTlMAIdHm7ijJ+JH8eQeTzaw68foX1Ll9kGZdllAAAAEQSURBVHgB7dZVcsMwFIVhhTkp5krmMJcZ9r+sMl7PEczopfC/f7ZFtoUQreZuWVepJ3g73VKtoSvaKzDS6kp9abSsMtQumQ1HtYbZcCSl2TBkZRiyNU+o4m6WxYqzeUIFd/P0eO7m6fGsDUNmQ+lsypA0ll6E4XdkYSbrTTj96AlJczSJ1rOP7vrQsFt9dl/HBnX8y00Cg0YFqBtkKJuDbgdEwMSLM9Cp9GnUCWoD54AOYH7XZwRDhtQRagVNfA5azKXX9RmirpGRaowKfM6bt/NDekPZYa6rIAEGz/VwNfJvskGuy3FimAOVzzhvlA+Z//f1vyltu5p90Sw5mq2eEG1H03759e+Ua7aVO82WeASxdDP0M8Z9fAAAAABJRU5ErkJggg==);
}
.icon-doc-ppt{
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAA8CAMAAAD8KXLNAAAAvVBMVEUAAAD72HT712j4yTf4yTj52nn72XX4yDj73475yTn/yjT3xzr4yTn5yDn5xzH63IL4yDn4yDj62Hb4xCr84I755Kj5yDT5yTj////5yDf5yTn823j5xzD5xi75xiz5xSr72XX60FD//vv6zET6yz796az/++/tvjL6zkr84I797bz6yjn+89LzxTzzxDb84pTyzFv96rT71mnuxUr+9dz10Wb834v72HH+9Nb+9drruCP73ID+9+H856b85Jt3fPirAAAAFnRSTlMA0Rx5/CbJ+JHtB+TNrJI6l9S58X2QIoLA1AAAAW5JREFUeAHt1oN6A0EUQOGJnXq0ZmzV7/9YvXXXe2udj4N/EW0IIc3SQSOt1h4JV+w0auW0JofFEGl2ZHpiYlZDaL+RbcxqJWBq5WwTRhLKNnB5eANnwhtAWAMVKngDCG/g8vAGzoQ3gHKajRJCMrPpCkwAZRsxnZvKc4BkDtRbzTdPzU9yGGjae+68ns+MXmSAwfYzDDWyo0FDrW1Wg61FA0a/sHlWtqK92ajL8enY59w/i+t2AdaXasAw13FGQ849tx/NWXA+HDmOywJGCkoNMFcGjWZ4YGBBRN4fpt0ancnbKJPPC+qt0WAm1QiLUazRZkNLZTijX/NLhapYw23P0pEGWitCIA00EAxp7EWfIs+zViiTOOP1YRvK+IpQce8PXVpwXSgDSCA+bwaNpqeYpO+Pu0g18HWMNvZTTULvaSTdzQZJzXZUxhhAanL07b/X/6ZVw5pjUmohzRH8Re8iTffur3+7Uctbo11qkhvyszc0CTNWCAAAAABJRU5ErkJggg==);
}
.icon-doc-txt{
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAA8CAMAAAD8KXLNAAAAvVBMVEUAAACfsLihsrl5kJp4kJultrygsrl5j5uzv8Z4kJp4kJt1jZmhsrh4j5t0i6J4kJusucB5kJp5kJt5kJt/n59/mZlviJSzv8Wvu8H///91jZh4j5pzi5d3jpl5kJv6+vuhsrmuvMJ+lJ5yipaktLvAys/FztN7kZyaq7OJnaaNoKn+/v/7/P21wcfr7vDx8/Tt8fKHm6WVp6+RpK3f5OequL+DmKLP1tra4ON7kJtviJSesLduh5N1ipNrgYvfIttIAAAAGXRSTlMA0crm/Cgh+JHueZO/rAXNOvQX1AgK8X2QgEGk0gAAAcVJREFUeAHt1IWS2zAUBVAvM5T7BM/MYeb//6zeLIRBmh0o3ZBgjsiOHcf5dvvl5lDOnp3NfH44uzo/ED28v9wgXx/4cPTQO91Ad2fHjbcx06dzA7MxE7OJAbI3QNYG6MLeeCcX1gbo0t5geaaGFwbLMzNSZhvIwIg82kB8NFq0NhAfjxDNbLwIEBtEq+kys58wRpGLTK5hLDP6oPlv5DLz8qJtreOAQUUzol/KG2hhRJHE76nm1SSJWLKuxkk3X3bEhV41YUSL1FsJvgotMpfIb9MirheuGY9ct1JSWXHLRptrRIniAdGA2/MOotJ1y/pYLQ2SBgG36lQrUEhVF4PmXkluFqIuMWGNA3RsnUHYhmkK7FSnfaIOpukLOe9owYTb54aoF6MZCTEyUm+Kl465USgcMkAJIVXFFmbkYd+VXFsYHWAz8+1YmNDHLC5VvNDYiLxBFGNLnVQYmxhnFqCKU5BmRmc4AF+EL7eQOGIaL0ZyB6sKtOxhhQkfNLoX+VEgWfa6vl+8zOf7fopfNER6p2EplHj5VUppRgQKbw3i/7Pqv/mjzNmVrfnh3J5Zmu/PjnNnae4cx3m8fbq5Ms3N0+2j8ws7X1cWmnQE/gAAAABJRU5ErkJggg==);
}