.chat_form_btn{
    width: 100%;
    padding: 7px 9px;
    background-color: #3895b6;
    border: none;
    color: #fff;
    cursor: pointer;
}
.chat-file-modal{
    position: fixed;
    top: 100px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483646;
    display: none;
    overflow: hidden;
    outline: 0;
}
.drop-files-container {
    max-width: 540px;
    width: 100%;
    margin: 0 auto;
    height: 270px;
    background-color: #f1f0f0;
    position: relative;
    border: 2px dashed #3895b6;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}
.drop-files-container input {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 55px;
    width: 100%;
    top: 0;
    opacity: 0;
    z-index: 10;
}
.drop-files-container input[type=file]{
    display: block;
}
.chat_file_text{
    text-align: center;
    padding: 30px 0 15px 0;
    color: #3895b6;
    font-weight: bold;
}
.chat_file_name{
    color: #3895b6;
}
.upload_files{
    width: 232px;
}
.add_file {
    position: absolute;
    right: 45px;
    top: 12px;
    cursor: pointer;
}
#chatWrap{
    border-top-left-radius: 8px;
    border-top-right-radius: 15px;
    position: fixed;
    z-index: 2147483645;
    bottom: 0;
    display: none;
    right: 30px;
    background-color: #fff;
}
.chat_title{
    background: linear-gradient(95deg, rgb(47, 50, 74) 20%, rgb(66, 72, 103) 80%);
    border-top-left-radius: 8px;
    border-top-right-radius: 15px;
    padding: 10px 50px 10px 60px;
    color: #fff;
    cursor: move;
    position: relative;
}
.chat_logo{
    position: absolute;
    background-image: url("../images/logo_chat.png");
    height: 100%;
    width: 51px;
    top: 0;
    border-top-right-radius: 8px;
    background-size: contain;
    background-repeat: no-repeat;
    /*transform: rotateY(180deg);*/
}
#scrollbarContainer {
    overflow-y: auto;
    scrollbar-color: rgb(66, 72, 103) #fff;
    scrollbar-width: thin;
    width: 340px;
    padding: 10px 40px 10px 10px;
}

#scrollbarContainer::-webkit-scrollbar
{
    width: 6px;
    background-color: #fff;
}

#scrollbarContainer::-webkit-scrollbar-thumb
{
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.3);
    background-color: rgb(66, 72, 103);
}
.chat_text{
    /*position: relative;*/
    background-color: #fff;
}
textarea#textField {
    height: 50px;
    padding: 5px 70px 5px 15px;
    width: 100%;
    box-sizing: border-box;
    border: none;
    resize: none;
    outline: none;
    overflow-y: scroll;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

textarea#textField::-webkit-scrollbar {
    display: none;
}

.attachments{
    padding: 10px 15px;
}
.attachments img {
    height: 22px;
    opacity: 0.3;
    cursor: pointer;
}
.attachments img:hover {
    opacity: 0.5;
}
.textarea_wrap{
    border-top: 1px solid #e6e6e6;
    position: relative;
}
.send_message img{
    height: 26px;
    background-color: #fff;
    border-radius: 100%;
}
span.send_message {
    position: absolute;
    right: 10px;
    top: 11px;
    cursor: pointer;
}
#chatContent {
    background: #fff;
}
.chat_close{
    width: 24px;
    display: inline-block;
    height: 24px;
    position: absolute;
    top: 0;
    cursor: pointer;
    opacity: 0.7;
    background-image: url('data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCI+Cgk8ZGVmcz4KCQk8ZmlsdGVyIGlkPSJzaGFkb3ciPgoJCQk8ZmVEcm9wU2hhZG93IGR4PSIwIiBkeT0iMCIgc3RkRGV2aWF0aW9uPSIyIgoJCQkJCQkgIGZsb29kLWNvbG9yPSIjZmZmZmZmIi8+CgkJPC9maWx0ZXI+Cgk8L2RlZnM+Cgk8Y2lyY2xlIGN4PSIyNSIgY3k9IjI1IiByPSIyNSIgZmlsbD0iRUYzMzQwIiAvPgoJPHBhdGggc3R5bGU9ImZpbHRlcjp1cmwoI3NoYWRvdykiCgkJICBkPSJNMTUgMTUgTDM1IDM1IE0xNSAzNSBMMzUgMTUiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlPSIjZmZmZmZmIiAvPgoKPC9zdmc+Cg==')

}
.file-modal-close{
    width: 24px;
    display: inline-block;
    height: 24px;
    position: absolute;
    top: 5px;
    cursor: pointer;
    opacity: 0.5;
    right: 5px;
    z-index: 1072;
    background-image: url('data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUyIDUyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MiA1MjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiPgo8Zz4KCTxwYXRoIGQ9Ik0yNiwwQzExLjY2NCwwLDAsMTEuNjYzLDAsMjZzMTEuNjY0LDI2LDI2LDI2czI2LTExLjY2MywyNi0yNlM0MC4zMzYsMCwyNiwweiBNMjYsNTBDMTIuNzY3LDUwLDIsMzkuMjMzLDIsMjYgICBTMTIuNzY3LDIsMjYsMnMyNCwxMC43NjcsMjQsMjRTMzkuMjMzLDUwLDI2LDUweiIgZmlsbD0iIzAwMDAwMCIvPgoJPHBhdGggZD0iTTM1LjcwNywxNi4yOTNjLTAuMzkxLTAuMzkxLTEuMDIzLTAuMzkxLTEuNDE0LDBMMjYsMjQuNTg2bC04LjI5My04LjI5M2MtMC4zOTEtMC4zOTEtMS4wMjMtMC4zOTEtMS40MTQsMCAgIHMtMC4zOTEsMS4wMjMsMCwxLjQxNEwyNC41ODYsMjZsLTguMjkzLDguMjkzYy0wLjM5MSwwLjM5MS0wLjM5MSwxLjAyMywwLDEuNDE0QzE2LjQ4OCwzNS45MDIsMTYuNzQ0LDM2LDE3LDM2ICAgczAuNTEyLTAuMDk4LDAuNzA3LTAuMjkzTDI2LDI3LjQxNGw4LjI5Myw4LjI5M0MzNC40ODgsMzUuOTAyLDM0Ljc0NCwzNiwzNSwzNnMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5MyAgIGMwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0TDI3LjQxNCwyNmw4LjI5My04LjI5M0MzNi4wOTgsMTcuMzE2LDM2LjA5OCwxNi42ODQsMzUuNzA3LDE2LjI5M3oiIGZpbGw9IiMwMDAwMDAiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K');
}
.chat-modal-backdrop{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
    opacity: 0.4;
}
.chat_close:hover{
    opacity: 0.9;
}
.chat_message span{
    display: inline-block;
    padding: 10px;
    border-radius: 15px;
    margin-bottom: 10px;
    max-width: 100%;
    word-break: break-word;
;
}
.user_message span{
    background-color: #fd5300;
    color: #fff;
}
.manager_message {
    display: flex;
    justify-content: flex-end;
    margin-left: 15px;
}

.manager_name {
    color: #626684;
    margin-bottom: 5px;
    text-align: right;
}

.manager_message span{
    background-color: #f1f0f0;
}
.manager_photo{
    min-height: 50px;
    min-width: 50px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    margin-left: 10px;
}
.system_message{
    margin: 10px 0;
    color: #b7b5b5;
}


.chat_file {
    display: flex;
    background-color: #f1f0f0;
    padding: 10px;
    border-radius: 15px;
    margin-bottom: 10px;
    color: #3895b6;
    text-decoration: none;
}
.chat_message .chat_file:before{
    content: '';
    width: 22px;
    height: 16px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjkuOTc4IDI5Ljk3OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjkuOTc4IDI5Ljk3ODsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiBjbGFzcz0iIj48Zz48Zz4KCTxwYXRoIGQ9Ik0yNS40NjIsMTkuMTA1djYuODQ4SDQuNTE1di02Ljg0OEgwLjQ4OXY4Ljg2MWMwLDEuMTExLDAuOSwyLjAxMiwyLjAxNiwyLjAxMmgyNC45NjdjMS4xMTUsMCwyLjAxNi0wLjksMi4wMTYtMi4wMTIgICB2LTguODYxSDI1LjQ2MnoiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJhY3RpdmUtcGF0aCIgc3R5bGU9ImZpbGw6IzQyNDg2NyIgZGF0YS1vbGRfY29sb3I9IiNSR0IoNjYiPjwvcGF0aD4KCTxwYXRoIGQ9Ik0xNC42MiwxOC40MjZsLTUuNzY0LTYuOTY1YzAsMC0wLjg3Ny0wLjgyOCwwLjA3NC0wLjgyOHMzLjI0OCwwLDMuMjQ4LDBzMC0wLjU1NywwLTEuNDE2YzAtMi40NDksMC02LjkwNiwwLTguNzIzICAgYzAsMC0wLjEyOS0wLjQ5NCwwLjYxNS0wLjQ5NGMwLjc1LDAsNC4wMzUsMCw0LjU3MiwwYzAuNTM2LDAsMC41MjQsMC40MTYsMC41MjQsMC40MTZjMCwxLjc2MiwwLDYuMzczLDAsOC43NDIgICBjMCwwLjc2OCwwLDEuMjY2LDAsMS4yNjZzMS44NDIsMCwyLjk5OCwwYzEuMTU0LDAsMC4yODUsMC44NjcsMC4yODUsMC44NjdzLTQuOTA0LDYuNTEtNS41ODgsNy4xOTMgICBDMTUuMDkyLDE4Ljk3OSwxNC42MiwxOC40MjYsMTQuNjIsMTguNDI2eiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBzdHlsZT0iZmlsbDojNDI0ODY3IiBkYXRhLW9sZF9jb2xvcj0iI1JHQig2NiI+PC9wYXRoPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgo8L2c+PC9nPiA8L3N2Zz4=')
}
@media (max-width: 1024px){

    .chat-file-modal {
        top: auto;
        bottom: 100px;
        right: 47px;
        left: auto;
        z-index: 2147483646;
    }
    .drop-files-container {
        margin: 0;
    }
}
@media (min-width: 425px) {
    #chatbubble {
        display: none;
    }
    #chat_site_icon {
        display: none;
    }
    #chat_close {
        right: 10px;
        top: 5px;
        z-index: inherit;
    }
    .chat_logo {
        left: 10px;
    }
    #chatWrap {
        -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.35);
    }
    #scrollbarContainer{
        height: 300px;
    }
    #chatContent {
        height: 0;
        display: flex;
    }
}
#unread-mes-icon{
    pointer-events: none;
}
#unread-mes-icon.hidden{
    display: none;
}
@media (max-width: 425px){
    #unread-mes-icon{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: red;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: #fff;
        border: #fff 3px solid;
        position: fixed;
        /*bottom: 35px;*/
        /*right: 5px;*/
        bottom: 105px;
        left: 44px;
        z-index: 1;
    }
    #chatbubble {
        position: fixed;
        /*display: block;*/
        display: none;
        width: 50px;
        /*right: 10px;*/
        /*bottom: 10px;*/
        bottom: 85px;
        left: 20px;
        height: 40px;
        width: 40px;
        z-index: 1;
    }
    #chat_site_icon {
        position: fixed;
    /*    !*display: block;*!*/
        display: none!important;
        width: 12px;
        right: 30px;
        bottom: 30px;

    }
    #chatWrap {
        /*right: 0;*/
        right: -100%;
        width: 100%;
        height: 100%;
    }
    #chat_close {
        /*left: 0;*/
        width: 25px;
        height: 25px;
        z-index: 1;
        /*border-radius: 25px;*/
        /*display: inline-block;*/
        /*background-color: #fafafa;*/
        /*position: absolute;*/
        background-image: url('data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCI+Cgk8ZGVmcz4KCQk8ZmlsdGVyIGlkPSJzaGFkb3ciPgoJCQk8ZmVEcm9wU2hhZG93IGR4PSIwIiBkeT0iMCIgc3RkRGV2aWF0aW9uPSIyIgoJCQkJCQkgIGZsb29kLWNvbG9yPSIjZmZmZmZmIi8+CgkJPC9maWx0ZXI+Cgk8L2RlZnM+Cgk8Y2lyY2xlIGN4PSIyNSIgY3k9IjI1IiByPSIyNSIgZmlsbD0iRUYzMzQwIiAvPgoJPHBhdGggc3R5bGU9ImZpbHRlcjp1cmwoI3NoYWRvdykiCgkJICBkPSJNMTUgMTUgTDM1IDM1IE0xNSAzNSBMMzUgMTUiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlPSIjZmZmZmZmIiAvPgoKPC9zdmc+Cg==');
        background-repeat: no-repeat;
        background-size: cover;
        top: 5px;
        /*cursor: pointer;*/
        opacity: .7;
        right: 5px;
    }
    #scrollbarContainer {
        max-width: 100%;
        width: auto;
        background-color: #fff;
        flex-grow: 1;
    }
    .chat-file-modal {
        right: 10px;
        left: 10px;
    }
    .chat_title {
        border-top-left-radius:0;
        border-top-right-radius: 0;
        padding: 10px 50px 10px 50px;
    }
    .chat_logo {
        left: 0;
        padding: 0;
        /*right: 38px;*/
    }
    #chatContent {
        display: flex;
        height: inherit;
        height: 90%;
    }

    #chatContent>div {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

}

@media (min-width: 425px){
    #unread-mes-icon{
        display: none;
    }
}

/* new front  */
.intro-wrapper {
    width: 100%;
    /*padding-left: 30px;*/
    text-align: center;
    margin-bottom: 20px;
}
.link{
    color: #626684;
}
.intro__form {
    /*padding: 10px 0;*/
    margin: 10px 60px;
    border-radius: 10px;
    border-style: none;
    background: #ffffff; /* Цвет фона */
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    border-top: #fd5300 solid 2px;
     /*#fd5300;*/
}
.intro__form input {
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    outline: none;
    padding: 5px 10px;
    margin: 10px 0;
    width: 90%;
    /*color: #b7b5b5;*/
}
.intro__form input::placeholder{
    color: #b7b5b5;
    padding: 5px;
}
.intro__form button {
    padding: 5px 10px;
    background-color: #fd5300;
    color: #fafafa;
    border: none;
    border-radius: 5px;
    outline: none;
    margin: 10px 0;
}
.intro-message span{
    display: block;
    color: #b7b5b5;
    max-width: 100%;
    word-break: break-word;
}
.intro-message {
    padding: 5px;
}
.intro-self-asking {
    position: absolute;
    top: 10px;
    /*bottom: 320px;*/
    margin: 10px 0 10px 60px;
    border-radius: 20px;
    border-style: none;
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    padding: 5px 50px 5px 50px;
    cursor: pointer;
}
.intro-self-asking span {
    color: #b7b5b5;
    font-size: 13px;
}

.chat_title {}
.change_button {
    padding: 0;
    margin-left: 10px;
    /*border-radius: 5px;*/
    border-width: 0;
    background-color: #fff;
    /*background-color: #f1f0f0;*/
    cursor: pointer;
    /*color: #fd5300;*/
    /*color: #b7b5b5;*/
    color: #9accdd;
    border-bottom:  1px dotted #9accdd;

}
.user-info__line * {
    display: inline-block;
}
.user-info__line span {
    flex: 1
}
.user-info__line input {
    flex: 3;
    border: none;
    color: #b7b5b5;
    outline: none;
}
.user-info__line input:focus {
    border-color: #fd5300;
}
.user-info__line input::placeholder {
    color: #b7b5b5;
}

.user-info__line {
    display: flex;
    padding: 0 50px 0 10px;
}

.user-info__line input.active {
    color: black;
    border-bottom: black;
}

/*.button_group {*/
/*    display: flex;*/
/*}*/

.button_group button {
    padding: 5px;
    border-radius: 5px;
    border-width: 0;
    /*background-color: #f1f0f0;*/
    cursor: pointer;
}
.hidden {
    display: none;
}
.cancel_button {
    background-color: #f1f0f0;
}
.edit_button {
    background-color: #fd5300;
    color: #fff;
    margin-left: 10px;
}
#chat_site_icon {
    pointer-events: none;
}

.form_error {
    color: #fd5300;
    padding: 0;
    margin: 0;
    display: block;
    height: fit-content;
    font-size: 10px;
}
.user-info {
    padding-bottom: 20px;
}
#toggle_user_info_button{
    margin: 0!important;
}