#messenger{
    position: absolute;
    right: 5px;
    top: 10px;
    /*background-color: #fff;*/
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
    width: 350px;
    height: 400px;
    /*min-height: 400px;*/
    z-index: 100;
    display: none;
}
#messenger section{
    position: relative;
    transform: translate3d(0, 0, 0);
    height: 100%;

}
#add_contacts,
#chat{
    display: none;
}
.view_header{
    display: flex;
    align-items: center;
    padding: 0 9px;
    min-height: 45px;
    border-bottom: 1px solid #AAAAAA;
    /*position: fixed;*/
    /*left: 0;*/
    /*right: 0;*/
    /*z-index: 1;*/
}
#view_wrapper{
    height: 100%;
}
.back_button{
    padding: 10px 15px 10px 10px;
    float: left;
    cursor: pointer;
}
#contact_list{
    display: flex;
    flex-direction: column;
    height: 100%;
}
#contact_list_body .contact{
    display: flex;
    margin-bottom: 5px;
}
#contact_list_body{
    padding: 9px;
    /*flex: 1 0 auto;*/
    overflow-y: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.contact_name{
    font-weight: 900;
    font-size: 13px;
    color: #477AA9;
}
.contact_company{
    font-size: 9px;
    color: #477AA9;
    line-height: 100%;
}
.contact_info{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.contact_image_wrapper{
    width: 42px;
    text-align: center;
    margin-right: 10px;
    font-size: 0;
    position: relative;
}
.contact_image{
    height: 36px;
    width: 36px;
    object-fit: cover;
    border-radius: 50%;
    box-sizing: content-box;
}
.contact_image.no_image{
    text-transform: uppercase;
    background-color: #477aa9;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    text-align: center;
    vertical-align: middle;
    line-height: 35px;
    display: inline-block;
}
.contact.has_new_messages{
    order: -1;
}
.contact.has_new_messages .contact_image{
    border: 3px solid #FF6F60;
}
.contact.has_new_messages .contact_image_wrapper:after{
    content: attr(new-messages-count);
    position: absolute;
    color: #fff;
    background-color: #FF6F60;
    border-radius: 2px;
    font-size: 9px;
    padding: 0 2px;
    right: -3px;
    top: -2px;
    min-width: 14px;
}
.add_contact_icon{
    font-size: 50px;
    color: #477aa9;
    font-weight: 300;
    line-height: 25px;
    width: 45px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    margin-right: 7px;
}
#add_contact,
.contact{
    cursor: pointer;
}
.add_contact_label{
    font-size: 13px;
    color: #477aa9;
    font-weight: 900;
}
.contact_list_footer{
    padding: 9px;
}
.search_contact_list_body_wrapper{
    width: 80%;
    margin: 0 auto;
}
#search_new_contact:focus+ label{
    color: #477aa9;
}
#search_new_contact:focus{
border-bottom: 1px solid #477aa9;
    -webkit-box-shadow: 0 1px 0 0 #477aa9;
    box-shadow: 0 1px 0 0 #477aa9
}
.search_result_contact{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.add_new_contact{
    font-size: 13px;
    color: #477aa9;
    line-height: 13px;
    align-self: center;
    cursor: pointer;
}
.section_wrapper{
    height: 100%;
    overflow: auto;
    padding-top: 130px;
}
#add_contact_body{
    height: 100%;
    overflow: auto;
}
.fixed_block{
    position: fixed;
    left: 0;
    right: 0;
    /* left: 0; */
    /* right: 0; */
     z-index: 1;
}
#add_contacts .input-field{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
#contact_list_body_wrapper{
    height: 100%;
    padding-top: 45px;
    padding-bottom: 47px;
}
.contact_list_footer {
    bottom: 0;
}
.chat_header_contact{
    display: flex;
}
.chat_header_contact .contact_name{
    font-size: 16px;
    line-height: 20px;
}
.chat_header_contact .contact_company{
    font-size: 13px;
    font-weight: 300;
}

.contact_list_header_heading{
    width: 100%;
    display: flex;
    align-items: center;

}
.contact_list_settings{
    margin-left: auto;
    font-size: 0;
    color: #477AA9;
}
/*.chat_header_contact .contact_info{*/
/*    justify-content: flex-start;*/
/*}*/
#chat_body_wrapper{
    height: 100%;
    padding-top: 45px;
    padding-bottom: 55px;
}
#chat_body{
    height: 100%;
    overflow-y: auto;
    padding: 5px;
    font-family: "Roboto Condensed";
    display: flex;
    flex-direction: column;
}
.chat_footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    padding: 5px 5px 10px 5px;
    flex: 1 0 auto;
}
.chat_date,
.new_messages_label{
    font-size: 13px;
    line-height: 15px;
    color: #999999;
    text-align: center;
    margin-bottom: 5px;
}
.chat_message_status{
    padding-top: 4px;
}
.message_time{
    font-size: 9px;
    line-height: 11px;
    color: #666666;
    float: right;
}
.chat_message {
    border-radius: 3px;
    padding: 2px 5px;
    margin-bottom: 5px;
    font-size: 13px;
    line-height: 15px;
    max-width: 85%;
    backdrop-filter: blur(4px);
    white-space: pre-line;
    word-wrap: break-word;
}
.chat_message.received{
    background: rgba(234, 234, 234, 0.51);
    align-self: flex-start;
}
.chat_message.sent{
    background: rgba(196, 221, 239, 0.5);
    align-self: flex-end;
}
.message_wrapper{
    flex: 1 0 auto;
    padding-right: 10px;
    font-size: 0;
}
#entered_message::placeholder{
    color: #999999;
    font-size: 13px;
}
#entered_message:focus{
    outline: none !important;
}
#entered_message{
    resize: none;
    width: 100%;
    height: auto;
    font-size: 13px;
    border: none;
    border-bottom: 1px solid #000;
    height: 3em;
}
/*@-moz-document url-prefix() {*/
/*    #entered_message {*/
/*        height: 3em;*/
/*    }*/
/*}*/
#send_button{
    height: 30px;
    width: 30px;
    background-color: #477aa9;
    cursor: pointer;
    text-align: center;
    border-radius: 50%;
    margin-right: 5px;
    align-self: flex-end;
}
.send_button_icon{
    max-height: 20px;
    vertical-align: middle;
    margin-left: -4px;
    margin-top: 3px;
}
.seen_icon,
.delivered_icon,
.wait_send_icon{
    display: none;
    float: right;
    margin-top: 2px;
}
.wait_send_icon{
    display: inline-block;
    margin-right: 5px;
    height: 9px;
    margin-top: 0;
}
.delivered_icon{
    margin-right: 5px;
}
.seen_icon{
    margin-right: -5px;
}
.is_delivered_status .wait_send_icon,
.is_seen_status .wait_send_icon{
    display: none;
}
.is_delivered_status .delivered_icon,
.is_seen_status .seen_icon{
    display: inline-block;

}
#messenger_error_block{
    position: absolute;
    z-index: 2;
    width: 100%;
    left: 0;
    top: 0;
    padding: 10px;
    font-size: 13px;
    text-align: center;
    background-color: rgba(255, 222, 227, 0.9);
    display: none;
}
#noty_empty_contact_list{
    display: none;
    font-size: 13px;
    padding: 20px;
}
/*show noty empty blbock when contacts block is empty*/
#contact_list_body:empty{
    height: auto;
}
#contact_list_body:empty + #noty_empty_contact_list{
    display: block;
}

@media all and (-webkit-min-device-pixel-ratio:0) {
/*Всё, что вы сюда напишете, будет работать только с -webkit-*/
    #contact_list_body .contact{
        display: -webkit-box;
    }
}
/*#search_result_contact_list{*/
/*    overflow-y: scroll;*/
/*}*/
/*#messenger_blur_placeholder{*/
/*    position: absolute;*/
/*    !*filter: blur(5px);*!*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background: rgba(255, 255, 255, 0.5);*/
/*    backdrop-filter: blur(4px);*/
/*}*/